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