[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


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'},...]}
...
]