Day25 vue.js之call api(功能展示)ep1

延续昨日今天来把功能测试完成吧!!
经过一番修整之後这就是我们目前的页面

因为我铁人赛day22的文章只有内容
其他都没有所以就不会显示出来
以下是程序码

再来就是新增几个function让这些按钮可以开始运作
为此我们先修改这篇day22的文章
(在我修改文章的时候发现
我的日期一直改不了
後来发现是日期格式的问题
这是在我db.json中的日期格式)

应该是2020-02-08才对 所以修改db.json後再试一次看看

把文章修改好之後点开功能测试
因为没有打api跟api参数 所以只跑出两个栏位跟2个相对应的按钮

我有把网址打进去url跟swagger里面 所以projects.url是可以接到网址的值的
这个栏位的意义就相当於一般网站的超连结
不过大部分的超连结连过去是会盖掉原本的网站的
所以这相当於滑鼠右键新增新分页
再来就是设定function

  methods:{

       async GetSession(){
            const result =await axios.get(`${this.db_api}`+"articles/"+this.$route.params.id) 
         
           this.projects=result.data
        },

        openurl(){
            window.open(`${this.projects.url}`)
        },
         openswagger(){
            window.open(`${this.projects.swagger}`)
        },

用这种写法就可以直接再开一个网页罗!
今天我们就新增3个专案
分别是day23创造的3个api
开启终端机进入创api的资料夹後下这个指令uvicorn 档案名称:app --reload..
然後开始写文章

我已经把相对应的api 跟api参数都输入好了 明天就来看看要怎麽跑吧!!

我们明天见!