Vue2.0 歌手数据获取及排序

本次的系列博文的知识点讲解和代码，主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可

0 系列文章目录

Vue2.0 定制一款属于自己的音乐 WebApp

Vue2.0 路由配置及Tab组件开发

Vue2.0 数据抓取及Swiper组件开发

Vue2.0 scroll 组件的抽象和应用

Vue2.0 歌手数据获取及排序

Vue2.0 歌手列表滚动及右侧快速入口实现

1 歌手数据获取

歌手列表页的数据可自行点击右侧链接查看QQ音乐 API ，这里有几个参数大家可以注意一下，pagenum为当前页，pagesize为每页数量，format为数据格式，jsonpCallback为jsonp回调函数，如不需要jsonp调用，可将format参数值修改为json并且去掉jsonpCallback参数

因为歌手列表的数据庞大，所以项目中，我们只获取第一页的 100 条数据进行分析

代码语言：javascript复制

// api/config.js

export const singerParams = {
    channel: 'singer',
    page: 'list',
    key: 'all_all_all',
    pagesize: 100,
    pagenum: 1,
    hostUin: 0,
    platform: 'yqq',
    g_tk: 5381,
    loginUin: '0',
    format: 'json',
    inCharset: 'utf8',
    outCharset: 'utf-8',
    notice: 0,
    needNewCode: 0
}

代码语言：javascript复制

// api/singer.js

import axios from 'axios'
import { singerParams } from './config'

export function getSingerList() {
    return axios.get('/qqmusic/v8/fcg-bin/v8.fcg', {
        params: singerParams
    })
        .then((res) => {
            return Promise.resolve(res.data)
        })
}

代码语言：javascript复制

// singer.vue

import { getSingerList } from 'api/singer'
import { ERR_OK } from 'api/config'

export default {
  data() {
    return {
      singerList: []
    }
  },
  created() {
    this._getSingerList()
  },
  methods: {
    _getSingerList() {
      getSingerList().then((res) => {
        if (res.code === ERR_OK) {
          this.singerList = res.data.list
          console.log(this.singerList)
        }
      })
    }
  }
}

2 歌手数据处理和 Singer 类的封装

得到歌手数据之后，我们还需要一些简单的处理，接口返回的数据有很多，但我们只需要歌手 ID，歌手姓名和图片即可，项目后续还会用到这些信息，所以我们将其进行封装，方便调用

代码语言：javascript复制

// common/js/singer.js

export default class Singer {
    constructor({id, name}) {
        this.id = id
        this.name = name
        this.avatar = `https://y.gtimg.cn/music/photo_new/T001R300x300M000${id}.jpg?max_age=2592000`
    }
}

歌手列表页我们将按照 A-Z 的顺序进行分类，并将排名前 10 的歌手归为热门一类，接口返回的数据中，有Findex的键名，这是歌手姓名的首字母，我们通过该键名进行分类

代码语言：javascript复制

// singer.vue

const HOT_SINGER_LEN = 10
const HOT_NAME = '热门'

export default {
  ...
  methods: {
    _getSingerList() {
      getSingerList().then((res) => {
        if (res.code === ERR_OK) {
          this.singerList = res.data.list
          this._normalizeSinger(this.singerList)
        }
      })
    },
    _normalizeSinger(list) {
      let map = {
        hot: {
          title: HOT_NAME,
          items: []
        }
      }
      list.forEach((item, index) => {
        if (index < HOT_SINGER_LEN) {
          map.hot.items.push(new Singer({
            name: item.Fsinger_name,
            id: item.Fsinger_mid
          }))
        }
        const key = item.Findex
        if (!map[key]) {
          map[key] = {
            title: key,
            items: []
          }
        }
        map[key].items.push(new Singer({
          name: item.Fsinger_name,
          id: item.Fsinger_mid
        }))
      })
      console.log(map)
    }
  }
}

现在我们已经将歌手按照其首字母进行了分类，但对象的遍历是无序的，所以为了得到有序列表，还需要对map进行处理

代码语言：javascript复制

// singer.vue

_normalizeSinger(list) {
  let map = {
    hot: {
      title: HOT_NAME,
      items: []
    }
  }
  list.forEach((item, index) => {
    if (index < HOT_SINGER_LEN) {
      map.hot.items.push(new Singer({
        name: item.Fsinger_name,
        id: item.Fsinger_mid
      }))
    }
    const key = item.Findex
    if (!map[key]) {
      map[key] = {
        title: key,
        items: []
      }
    }
    map[key].items.push(new Singer({
      name: item.Fsinger_name,
      id: item.Fsinger_mid
    }))
  })
  let ret = []
  let hot = []
  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)
}

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Vue_Music_05 上了，有需要的同学可自行下载

其他

0 人点赞