[Vue音乐项目] 第七节歌手页面(数据获取+数据处理)

歌手页面主要展示歌手列表，外加滚动效果，照例第一步还是要获取到数据。

打开src/api/singer.js文件(没有的话创建该文件)，敲写以下代码

//singer.js 
//引入必要的文件
import jsonp from '../common/js/jsonp'
import {commonParam,options} from './config'
export function getSingerList() {
    //请求地址
    const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg'
    //请求参数
    const data = Object.assign({}, commonParam, {
      channel: 'singer',
      page: 'list',
      key: 'all_all_all',
      pagesize: 100,
      pagenum: 1,
      hostUin: 0,
      needNewCode: 0,
      platform: 'yqq'
    })
    //以promise形式返回请求结果
    return jsonp(url, data, options)
}

2.打开scr/components/singer/index.vue文件，敲写以下代码

```
// singer/index.vue
<template>
    ...
</template>
<script>
    //导入写好的函数
    import {getSingerList} from 'api/singer'
    import {ERR_OK} from 'api/config'
    
    export default {
        //实例创建后调用
        created() {
            this._getSingerList()
        },
        methods: {
            _getSingerList() {
                //使用函数获取数据
                getSingerList().then((res)=>{
                    if(res.code == ERR_OK) {
                        //this.singers = res.data.list
                        console.log(res.data.list)
                    }
                })
            }
        }
    }
</script>
```

此时的数据还不能直接使用，还需要转换一下，在刚才的文件里继续敲写代码

// singer/index.vue
需要将类似下面的格式(原本100条)
{
    0:{Findex:'A',Fsinger_name:'liuxing'}
    1:{Findex:'B',Fsinger_name:'liuxing'}
    2:{Findex:'C',Fsinger_name:'liuxing'}
    ...
}
转换成类似这样的格式(最大27条)
[
    0:{title:'热门',data:[{id:2352,name::'liuxing'},...]}
    1:{title:'A',data:[{id:2352,name::'liuxing'},...]}
    2:{title:'B',data:[{id:2352,name::'liuxing'},...]}
    ...
]
<script>
    export default {
        methods: {
            //数据处理函数
            _normalize(list) {
                //临时变量
                let map = {
                    //热门歌手
                    hots:{
                        title: '热门'
                        data: []
                    }
                }
                //[1]遍历list放入map中
                list.forEach((item,index)=>{
                    //把前十个数据放入热门歌手
                    if(index < 10) {
                        map.hots.data.push({
                            id: item.Fsinger_id,
                            name: item.Fsinger_name,
                            avatar: this.avatar = `https://y.gtimg.cn/music/photo_new/
                             T001R150x150M000${item.Fsinger_mid}.jpg?max_age=2592000`
                        })
                    }
                    //如果不存在字母索引，则创建对象
                    if(!map[item.Findex]) 
                        map[item.Findex] = {
                            title: item.Findex
                            data: []
                    }
                    //把对应的字母数据放入对应的对象
                    map[item.Findex].data.push({
                        id: item.Fsinger_id,
                        name: item.Fsinger_name,
                        avatar: this.avatar = `https://y.gtimg.cn/music/photo_new/
                         T001R150x150M000${item.Fsinger_mid}.jpg?max_age=2592000`
                    })
                })
                
                //[2]此时map只是对象，需要将对象转换成数组
                let hots = []
                let list = []
                //遍历map，放入上面两个数组里面
                for(let key in map) {
                    if(/[z-aA-Z]/.test(map[key].title)) {
                        list.push(map[key])
                    } else if(map[key].title == '热门') {
                        hots.push(map[key])
                    }
                }
                //对list进行排序
                list.sort((a,b)=>{
                    return a.title.charCodeAt(0) - b.title.charCodeAt(0)
                })
                
                //[3]返回组合后的数组
                return hots.concat(list)
            }
        }
    }
</scrip>

[Vue音乐项目] 第七节 歌手页面(数据获取+数据处理)

[Vue音乐项目] 第七节歌手页面(数据获取+数据处理)