Day24 vue.js测试api页面

延续昨日
今天先把我们的新增加上apitype
首先要先去db.json里面新增这个栏位

在去addproject.vue 里面的data新增api_types阵列(我们公司只会用到get 和post 所以我先暂定这2个就好)
以及api_type

在依样画葫芦把status的抄过来

最後在 submit function 里面新增这个api_type

async submit(){
    const result = await axios.post(`${this.db_api}`+"articles",{
        title:this.title,
        person:this.username,
        status:this.statue,
        content:this.content,
        time:this.time,
        useraccount:this.useraccount,
        url:this.url,
        swagger:this.swagger,
        api:this.api,
        api_val:this.api_val,
        api_type:this.api_type
        
       
      })

然後在changeArticles.vue 里面做一样的事情
所以我们的新增专案就多了一个新的value叫做apitype(各位可以先去修改专案的地方改看看改完db.json有没有跟着变动)
接下来就是在Home.vue做出功能测试的按钮
老样子先做出layout

再来就是点下去之後我希望他会跳到一个页面可以让我好好了解这个api的结果
所以我们要创一个页面叫做functiontest.vue
然後加一个带id的route(参考day16)
再来就是要做出functiontest.vue的页面了
首先是先给资料

data(){
     return{
         db_api:global_.db_api,
         test:false,
         projects:[],
         

     }
 }, 

 async mounted(){
        this.GetSession()
 },
 methods:{

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

然後再去雕刻layout
我这页的想法很单纯 就是 把api api参数 swagger url 专案内容 api方法都列出来
然後api参数用v-model绑定原本的资料 并且可以让测试人员更改
下方则是4个按钮分别是swagger url 重新测试跟测试


我目前预想的是首先文章若没有打api则不显示出api api参数 api方法
像我测试的这篇只有打文章内容
然後 url 和 swgger 都是网站所以我希望点进去可以跳出一个网站
测试则是我在测试完之後想试试看别的参数 所以留一个空间给使用者输入
最後则是重新测试 就是回覆到原本api参数的状态
那麽这将会是明天的工作
我们明天见!!