Vue中Axios從遠程/后臺讀取數(shù)據(jù)

更新時間：2019年01月21日 11:05:59 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于Vue中Axios從遠程/后臺讀取數(shù)據(jù)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

Axios從遠程讀取數(shù)據(jù)

學習Axios的知識，并把數(shù)據(jù)從遠端讀取到頁面上。后端數(shù)據(jù)，只要調(diào)用相應的頁面就可以調(diào)取，在實際開發(fā)中，這些后臺數(shù)據(jù)是需要后端程序員和你共同討論制作的。我們現(xiàn)在只做前端，數(shù)據(jù)大家只要會調(diào)用即可。

安裝Axios

我們直接使用npm install來進行安裝。

cnpm install axios –save

由于axios是需要打包到生產(chǎn)環(huán)境中的，所以我們使用–save來進行安裝。

引入Axios（在哪個模塊中使用就在哪個模塊中引入）

我們在.vue頁面引入Axios，由于使用了npm來進行安裝，所以這里不需要填寫路徑。

服務端拉取數(shù)據(jù)

（在實際項目中這個后臺接口地址是后端程序員提供給你的）

可以先把后臺給的地址放到地址欄訪問一下，是可以正常訪問的，并且輸出了json格式的字符串，這就是我們需要的遠端數(shù)據(jù)了。這里我們使用Axios的get 方式來獲得數(shù)據(jù)。

created(){
   axios.get('http://jspang.com/DemoApi/oftenGoods.php')
       //then獲取成功；response成功后的返回值（對象）
   .then(response=>{
     console.log(response);
     this.oftenGoods=response.data;
   })
       //獲取失敗
   .catch(error=>{
     console.log(error);
     alert('網(wǎng)絡(luò)錯誤，不能訪問');
   })
 },

把axios的方法寫到了created鉤子函數(shù)中，我們使用了get 方法進行拉取數(shù)據(jù)，如果拉取成功用遠端數(shù)據(jù)對oftenGoods進行賦值。

拉取報錯，一般有兩種情況：

網(wǎng)絡(luò)不通：網(wǎng)絡(luò)狀況不是很好，這可以在失敗后隔5秒再次請求。
報決絕訪問：這種多是后端程序員設(shè)置了不允許跨域訪問，需要你和后端程序員一起調(diào)試解決。

拉取分類商品數(shù)據(jù)：

依然用Get進行拉取，拉取后先用consoe.log(response)查看一下數(shù)據(jù)結(jié)構(gòu)，讓后進行賦值。

在這里貼出拉取和分配不同分類代碼：

 //讀取分類商品列表
   axios.get('http://jspang.com/DemoApi/typeGoods.php')
   .then(response=>{
     console.log(response);
     //this.oftenGoods=response.data;
     this.type0Goods=response.data[0];
     this.type1Goods=response.data[1];
     this.type2Goods=response.data[2];
     this.type3Goods=response.data[3];
   })
   .catch(error=>{
     console.log(error);
     alert('網(wǎng)絡(luò)錯誤，不能訪問');
   })

html模板輸出代碼：

<ul class='cookList'>
   <li v-for="goods in type3Goods">
     <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
     <span class="foodName">{{goods.goodsName}}</span>
     <span class="foodPrice">￥{{goods.price}}元</span>
   </li>
</ul>

若有不足請多多指教！希望給您帶來幫助！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接