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

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

1. 打开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>
```

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

   // 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>