vue對請求的數據的二次處理

在播放器項目中歌手欄目，需要取回熱門的50名歌手數據

在api.js中暴露出該接口函數
//獲取熱門歌手
export const getHotSinger = p => post('/top/artists', p)

在組件中導入

import { getHotSinger } from "@/request/api.js";　　

 定義獲取數據的函數

    async _getSingerList() {
     
      const singerData = await getHotSinger({ limit: 50 });
      console.log(singerData)
    },

在控制台可以看出打印出來的數據如下，我們需要這些數據中的id,name,picUrl,以及姓名的首字母　

　

 

 

 並且需要把這些數據分為A-Z的大寫字母排列順序下的數據結構,而且第一個是熱門,也就是這樣的數據結構

首先需要根據歌手的姓名獲取其首字母引入pinyin模塊

import { PYName } from "@/utils/pinyin.js";

該方法返回一個字符串的大寫首字母

var pinyin = require("pinyin");
/**
 * 獲取中文字符串的第一個大寫首字母
 */
export const PYName = (str) => {
  return pinyin(str, {
      style: pinyin.STYLE_NORMAL
    })[0][0].substr(0, 1)
    .toUpperCase();
}

 定義一個_normalizeSinger函數，傳入一個數組，對傳入的數組進行格式化

 先定義兩個常亮對熱門的變量進行定義，分別是標題名稱和獲取熱門的數量

const HOT_NAME = "熱門";
const HOT_SINGER_LEN = 10;

_normalizeSinger函數格式化數據　　

    _normalizeSinger(list) {
      let map = {
        hot: {
          title: HOT_NAME,
          items: []
        }
      };
      list.forEach((item, index) => {
        if (index < HOT_SINGER_LEN) {
          map.hot.items.push({
            id: item.id,
            name: item.name,
            avatar: item.picUrl + "?param=300y300"
          });
        }
        const key = PYName(item.name);
        if (!map[key]) {
          map[key] = {
            title: key,
            items: []
          };
        }
        map[key].items.push({
          id: item.id,
          name: item.name,
          avatar: item.picUrl + "?param=300y300"
        });
      });
      // 得到有序列表，重新處理map
      let hot = [];
      let ret = [];
      for (let key in map) {
        let val = map[key];
        if (val.title.match(/[a-zA-Z]/)) {
          ret.push(val);
        } else if (val.title === HOT_NAME) {
          hot.push(val);
        }
      }
      ret.sort((a, b) => {
        return a.title.charCodeAt(0) - b.title.charCodeAt(0);
      });
      return hot.concat(ret);
    },

 重新格式化好的數據：

 把獲取的數據放入函數中執行后在賦值給data中的singerList,並設置storage

    async _getSingerList() {
      const singerData = await getHotSinger({ limit: 50 });
      this.singersList = this._normalizeSinger(singerData.artists);
      storage.set("singerList", this.singersList);
    },

  在created生命周期中根據storage中是否有值來判斷是否從服務器拉去數據

  created() {
    // 獲取歌手列表
    var singerList = storage.get("singerList");
    if (singerList) {
      console.log("從localStorage獲取數據");
      this.singersList = singerList;
    } else {
      this._getSingerList();
    }
  },

接下來就可以根據數組來渲染頁面啦

        <ul class="listview">
          <li
            v-for="(item,index) in this.singersList"
            :key="index"
            class="list-group"
            ref="listGroup"
          >
            <h2 class="list-group-title">{{item.title}}</h2>
            <ul>
              <li
                v-for="(tag,j) in item.items"
                :key="j"
                class="list-group-item"
                @click="Todetail(tag)"
              >
                <div class="avatar" v-lazy:background-image="tag.avatar"></div>
                <span class="name">{{tag.name}}</span>
              </li>
            </ul>
          </li>
        </ul>

　

完成后的頁面如下

 

 在vant中有直接可以用的業務組件，可以直接拿來用

https://youzan.github.io/vant/#/zh-CN/index-bar