iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

用vue.js寫出一個實用的科內分享網站系列 第 26

Day26 vue.js功能展示ep2之有"大麻"煩(cros跨域)

延續昨日
我們今天來完善功能測試
首先設一個runtest的function

  async runtest(){
        
           
            const result =await axios.post(this.projects.api,JSON.parse(this.projects.api_val))
            console.warn(result)
        },

https://ithelp.ithome.com.tw/upload/images/20211008/20141007vlMFxSirGd.png
在試之前記得先啟動fastapi的服務(day23)
就先用post的試試看
結果發生了這個"大麻煩"
https://ithelp.ithome.com.tw/upload/images/20211008/20141007UIMQiLgEwF.png

這是cros跨域問題
會發生這個問題的起因是 這個api沒有要給你這個網域使用
那為什麼postman可以打到呢?= =(據說是postman不是瀏覽器)
總之我研究了這個問題2個小時
後來發現問題是出在api端不是vue端
https://fastapi.tiangolo.com/tutorial/cors/ 參考了fastapi的方法後終於成功解除問題了
以我的理解他的方法就是在api端開幾個port是可以使用這個api的

經歷一番折騰 我們來看看按下測試之後的結果吧!
https://ithelp.ithome.com.tw/upload/images/20211008/20141007fvshdMWSYz.png

可以看到status是200
然後有一個array有兩筆資料

再看看另外一個測試
https://ithelp.ithome.com.tw/upload/images/20211008/20141007z5vq4XSYcz.png

一樣是status200 一樣是一個array包裝
(我有偷偷試驗公司的api也是同樣的形式)

再來是get 這邊就簡單給個if else判斷就好 如果你要用其他的像是delete update put等等 那就用switch case也可以 我只是按照我們公司的需求XD
async runtest(){

      if(this.projects.api_type=="POST"){

        
         const result =await axios.post(this.projects.api,JSON.parse(this.projects.api_val))
    
        console.warn(result)
        
       }
       else{
           const result =await axios.get(this.projects.api)
           console.warn(result)
       }

https://ithelp.ithome.com.tw/upload/images/20211008/20141007C0qNFCfxLj.png
最後就是顯示出結果

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

        }
    }, 

https://ithelp.ithome.com.tw/upload/images/20211008/20141007XOsl6rIdIH.png
來解釋一下程式碼首先先給一個叫test的bool:false
然後一個陣列叫做testresult[]
再用 v-if=test 把想要秀出的結果包起來(function啟動後test=true)
簡單的v-for印出來 用tr td展示(今天真的搞cros 搞太久layout可以看就好)
testRE(自己取的名字),index in testresult index則是陣列裡面的index

 async runtest(){
            if(this.projects.api_type=="POST"){
            const result =await axios.post(this.projects.api,JSON.parse(this.projects.api_val))
       
           console.warn(result)
            if(result.status==200){
               this.testresult=result.data
               this.test=true 
            }
          }
          else{
              const result =await axios.get(this.projects.api)
              console.warn(result)
              if(result.status==200){
               this.testresult=result.data
               this.test=true 
            }
          }
        },

接下來來看看成果吧!
https://ithelp.ithome.com.tw/upload/images/20211008/20141007m6CZUUKIZB.png
https://ithelp.ithome.com.tw/upload/images/20211008/20141007rmIlIHynsl.png
https://ithelp.ithome.com.tw/upload/images/20211008/201410077XLiPaveMl.png

最後在設定一個function 叫做reload(簡單的重新整理即可)
讓重新測試觸發他

 reload(){
           window.location.reload()
       },

好了今天就差不多到這邊了 我赫然發現我的修改帳戶沒有圖片
明天就從新增帳戶的圖片開始
我們明天見!


上一篇
Day25 vue.js之call api(功能展示)ep1
下一篇
Day27 vue.js簡易照片上傳功能(base64)
系列文
用vue.js寫出一個實用的科內分享網站30

尚未有邦友留言

立即登入留言