歌手頁面主要展示歌手列表，外加滾動效果，照例第一步還是要獲取到資料。

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>