引言
本次將在vue中使用axios的get方法實(shí)現(xiàn)API數(shù)據(jù)的顯示。
一、問題
在一個(gè)實(shí)踐項(xiàng)目中，要?jiǎng)?chuàng)建一個(gè)網(wǎng)站就需要引入服務(wù)器數(shù)據(jù)，本次將一步步的實(shí)現(xiàn)vue中使用get請(qǐng)求來顯示服務(wù)器的數(shù)據(jù)顯示。
二、方法
1.第一步，在vue項(xiàng)目中安裝axios，在其目錄終端中輸入 npm install axios -S，電腦將自動(dòng)下載axios的相關(guān)包，安裝完成后檢查package.json,看是否在dependencies欄中發(fā)現(xiàn)axios及相應(yīng)的版本號(hào)，安裝完成后的結(jié)果如圖所示。
2.第二步，拿到Api中的數(shù)據(jù)，在App.vue中引入Axios依賴，再寫入methods，并創(chuàng)建一個(gè)方法，如圖所示，為其更為直觀，需要看到服務(wù)器返回的數(shù)據(jù)，判斷數(shù)組中所要的目標(biāo)字符串，為api中所需要在頁面上顯示數(shù)據(jù)相對(duì)應(yīng)的字符串的時(shí)候，將api中字符串所對(duì)應(yīng)的數(shù)據(jù)賦值給上面定義的counter中的一個(gè)變量?？梢栽谠摲椒ㄖ袑懭隿onsole.log（res）即可看到j(luò)son數(shù)據(jù)，或在檢查頁面中找到network選項(xiàng)卡，并刷新頁面，待刷新完成后即可看到api是否請(qǐng)求，注意：若正常請(qǐng)求，那么code status應(yīng)為200，并含有綠色小點(diǎn)。
3.第三步，在默認(rèn)接口export default部分添加data，并在其中添加一個(gè)容器，本項(xiàng)目設(shè)置容器名為counter，并在該容器中設(shè)置各個(gè)屬性及初始值（對(duì)于字符串對(duì)象，可以使用一個(gè)空的字符串代替），本項(xiàng)目設(shè)置counter的屬性為total和catagroyName，并設(shè)置屬性值為0
4.第四步，在<template></template>雙標(biāo)簽中設(shè)置個(gè)標(biāo)簽，并使用mastache語法進(jìn)行展示，由于已經(jīng)設(shè)置初始值，需要在getFirstCategroy方法上進(jìn)行數(shù)據(jù)的替換即可。
三、實(shí)驗(yàn)結(jié)果與討論
代碼清單 1
| //1. 創(chuàng)建一個(gè)methods，設(shè)置一個(gè)發(fā)送服務(wù)器請(qǐng)求并向服務(wù)器獲取數(shù)據(jù) getFirstCategory() { get(url).then((res) => { if (res.status == 200) { let data = res.data.data; console.log(data) for (let i = 0; i < data.length; i++) { if (data[i].categoryName == '一') { this.counter.paper = data[i].total } else if (data[i].categoryName == '二') { this.counter.ecological = data[i].total } else if (data[i].categoryName == '三') { this.counter.scientific = data[i].total }else if (data[i].categoryName == '四') { this.counter.animail = data[i].total }else if (data[i].categoryName == '五') { this.counter.botany = data[i].total } } // console.log(this.counter) } else { this.$message({ type: "error", message: res.message, }); } }); }, |
四、結(jié)語
本篇文章是將api中拿到的數(shù)據(jù)渲染到頁面上，需要注意的是，如果api中拿到的數(shù)據(jù)是一個(gè)列表形式，而代碼中定義的是一個(gè)字典形式，那就需要將列表中的數(shù)據(jù)遍歷出來，進(jìn)行條件判斷，找到所要的數(shù)據(jù)的時(shí)候，將列表中的值賦值給字典中字符串所對(duì)應(yīng)的值。
聯(lián)系客服
