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

Unsplash

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 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 为数据格式,jsonpCallbackjsonp 回调函数,如不需要 jsonp 调用,可将 format 参数值修改为 json 并且去掉 jsonpCallback 参数

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

// 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
}
// 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)
        })
}
// 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,歌手姓名和图片即可,项目后续还会用到这些信息,所以我们将其进行封装,方便调用

// 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 的键名,这是歌手姓名的首字母,我们通过该键名进行分类

// 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 进行处理

// 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 上了,有需要的同学可自行下载

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

基于HTML5的燃气3D培训仿真系统

最近上线了的基于HTML5的燃气3D培训仿真系统,以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的,OSG引擎性能和渲染效果各...

25050
来自专栏FreeBuf

一枚邪恶的输入法浅析

“输入法”或许是计算机软件领域最伟大的发明之一了,也是我们日常的计算机使用中最常用到的软件,一款好的输入法能让我们事半功倍。随着计算机的软硬件不断发展,输入法的...

21560
来自专栏较真的前端

RxJS福利~~

1K50
来自专栏无原型不设计

给你灵感的23个优秀线框原型图示例

如何在产品初始阶段以最快的方式展示设计思路?我想大多数的UX/UI设计人员都会倾向于快速构建一个线框原型图。这的确是一个非常明智的选择。那么问题来了,设计师如何...

85160
来自专栏admin

开发者手册

本课程向大家介绍云服务器CVM的关键技术原理,以及腾讯云服务器CVM的稳定、弹性、易用等功能特点,以及腾讯云服务器CVM与传统IDC的优劣对比,当前的部署节点、...

50440
来自专栏华章科技

100个iOS开发/设计程序员面试题汇总,你将如何作答?

无论是对于公司还是开发者或设计师个人而言,面试都是一项耗时耗钱的项目,本文作者CameronBanga从编程、设计、AppStore等各个方面对iOS开发者及设...

8640
来自专栏Jerry的SAP技术分享

在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的。

21320
来自专栏HT

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年...

60150
来自专栏京东技术

JDReact小程序双向转换工具介绍

京东商城前台产品研发部资深前端工程师,负责JDReact框架前端及小程序转换引擎开发

28620
来自专栏顶级程序员

Android学习路上会遇到的各种瓶颈总结

前言 对于大多数大三学生来说,这个暑假是人生最后一个暑假。对于IT专业的学生来说,开学后就要面对各大IT企业的秋招,很多人会成为从0开始的An...

48980

扫码关注云+社区

领取腾讯云代金券