快捷導(dǎo)航

Vue中Axios從遠(yuǎn)程/后臺(tái)讀取數(shù)據(jù)

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

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

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

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

安裝Axios

我們直接使用npm install來進(jìn)行安裝。

cnpm install axios –save

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

引入Axios（在哪個(gè)模塊中使用就在哪個(gè)模塊中引入）

我們?cè)?vue頁面引入Axios，由于使用了npm來進(jìn)行安裝，所以這里不需要填寫路徑。

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

（在實(shí)際項(xiàng)目中這個(gè)后臺(tái)接口地址是后端程序員提供給你的）

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

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

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

拉取報(bào)錯(cuò)，一般有兩種情況：

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

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

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

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

 //讀取分類商品列表
   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ò)錯(cuò)誤，不能訪問');
   })

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>

若有不足請(qǐng)多多指教！希望給您帶來幫助！

總結(jié)

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