在api.js中暴露出該介面函式在元件中匯入//獲取熱門歌手
export const gethotsinger = p => post('/top/artists', p)
import from "@/request/api.js";定義獲取資料的函式
async _getsingerlist() );在控制台可以看出列印出來的資料如下，我們需要這些資料中的id,name,picurl,以及姓名的首字母console.log(singerdata)
},
並且需要把這些資料分為a-z的大寫字母排列順序下的資料結構,而且第乙個是熱門,也就是這樣的資料結構
首先需要根據歌手的姓名獲取其首字母引入pinyin模組
import from "@/utils/pinyin.js";該方法返回乙個字串的大寫首字母
var pinyin = require("pinyin");
/** * 獲取中文字串的第乙個大寫首字母
*/export const pyname = (str) => )[0][0].substr(0, 1)
.touppercase();
}
定義乙個_normalizesinger函式，傳入乙個陣列，對傳入的陣列進行格式化
先定義兩個常亮對熱門的變數進行定義，分別是標題名稱和獲取熱門的數量
const hot_name = "熱門";const hot_singer_len = 10;
_normalizesinger函式格式化資料
_normalizesinger(list)重新格式化好的資料：};list.foreach((item, index) => );
}const key = pyname(item.name);
if (!map[key]) ;
}map[key].items.push();
});// 得到有序列表，重新處理map
let hot = ;
let ret = ;
for (let key in map) else if (val.title === hot_name)
}ret.sort((a, b) => );
return hot.concat(ret);
},
把獲取的資料放入函式中執行後在賦值給data中的singerlist,並設定storage
async _getsingerlist() );在created生命週期中根據storage中是否有值來判斷是否從伺服器拉去資料this.singerslist = this._normalizesinger(singerdata.artists);
storage.set("singerlist", this.singerslist);
},
created() else接下來就可以根據陣列來渲染頁面啦},
完成後的頁面如下
在vant中有直接可以用的業務元件，可以直接拿來用
vue專案中對axios的二次封裝
引入axios import axios from axios let cancel promisearr const canceltoken axios.canceltoken 請求 axios.interceptors.request.use config else return config ...
zabbix二次處理agent上報的資料
mage2017 7 18 2012 3a35 3a11.png?versio zabbix的storevalue支援如下三種型別 1 asis 資料不做處理 2 delta speed per second 一般用於資料增長的型別 計算公式為 value prev value time prev ...
Vue基於axios的二次封裝
主要目的 速度快，好維護，好修改，好擴充套件，好開發 模組分析 初始化模組 請求生成模組 請求控制模組 請求處理模組 設計思路 功能分析 板塊梳理 架構基礎 功能構建 直接上 吧 import axios from axios main.js檔案 注入main.js import a from by...