用Vue来实现音乐播放器歌手数据接口抓取

第一步：在api文件夹下创建一个singer.js文件返回一个getSingerList()方法使他能够在singer.vue中调用

import jsonp from '../common/js/jsonp.js'
import {commonParams,options} from './config.js'
export function getSingerList() {
    const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg'
  
    const data = Object.assign({}, commonParams, {
      channel: 'singer',
      page: 'list',
      key: 'all_all_all',
      pagesize: 100,
      pagenum: 1,
      hostUin: 0,
      needNewCode: 0,
      platform: 'yqq'
    })
  
    return jsonp(url, data, options)
  }

第二步：在singer.vue中引入getSingerList方法并且在created()中调用此方法加载数据

<template>
    <!-- better-scroll的滚动条件是：父容器的高度是固定的
        子容器要撑开他  所以这个fix布局是为了固定父容器的高度
     -->
    <div class="singer">
       
    </div>
</template>
<script>

import {getSingerList} from '../../api/singer.js'
import {ERR_OK} from '../../api/config.js'
import Singer from '../../common/js/singer.js'

const HOT_NAME="热门" //由于页面布局是热门 然后下面是数组
// 将取到的this.singer数据中的前10条定义为热门数据
const HOT_SINGER_LEN=10

export default {
    data(){
        return {
            singers:[]
        }
        
    },
    created(){
        this._getSingerList()
    },
    methods:{
        _getSingerList(){
            getSingerList().then((res)=>{
                if(res.code===ERR_OK){
                    // console.log(res.data)
                    this.singers=res.data.list
                    console.log(this._normalizeSinger(this.singers))
                }
            })//虽然这个方法可以返回数据  但并不是我们想要的
                //按照需求  我们应该得到热门歌手数据 和 可以根据歌手的姓氏
                //来查找到该歌手  于是我们在写一个方法来操作这个方法得到的数据  
        }
    }
}

第三步：由于简单的获取数据已经不符合我们的需求了我们需要处理之前获取到的数据分出来热门数据以及将各个姓氏的数据进行分类

<template>
    <!-- better-scroll的滚动条件是：父容器的高度是固定的
        子容器要撑开他  所以这个fix布局是为了固定父容器的高度
     -->
    <div class="singer">
       
    </div>
</template>
<script>

import {getSingerList} from '../../api/singer.js'
import {ERR_OK} from '../../api/config.js'
import Singer from '../../common/js/singer.js'

const HOT_NAME="热门" //由于页面布局是热门 然后下面是数组
// 将取到的this.singer数据中的前10条定义为热门数据
const HOT_SINGER_LEN=10

export default {
    data(){
        return {
            singers:[]
        }
        
    },
    created(){
        this._getSingerList()
    },
    methods:{
        _getSingerList(){
            getSingerList().then((res)=>{
                if(res.code===ERR_OK){
                    // console.log(res.data)
                    this.singers=res.data.list
                    console.log(this._normalizeSinger(this.singers))
                }
            })//虽然这个方法可以返回数据  但并不是我们想要的
                //按照需求  我们应该得到热门歌手数据 和 可以根据歌手的姓氏
                //来查找到该歌手  于是我们在写一个方法来操作这个方法得到的数据  
        },
        _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这个键
                                //如果没有的话  就给对象添加这个键值对
                    map[key] = {
                        title: key,
                        items: []
                    }
                }
                //举例：如果此时key为A
                //此时map只有一个键为hot 所以我们给map对象添加一个键为A 这个键A对应的值为{title:"A",items:[]}


                map[key].items.push(new Singer({
                    name: item.Fsinger_name,
                    id: item.Fsinger_mid
                }))

                //再执行push操作 给键A对应的键值中的items push值
                // 此时的map为 map={hot:{title:"热门",items:[]},A:{title:'A',items:[刚才新添加的值 即此时遍历到的item]}}
            })

            console.log('map......',map)
        }
    }
}
</script>

export default class Singer {//类似于构造函数
    constructor({id,name}){ //构造函数里面有constructor属性
        this.id=id
        this.name=name
        this.avatar=`https://y.gtimg.cn/music/photo_new/T001R300x300M000${id}.jpg?max_age=2592000`
    }
}

最后的效果为：

用Vue来实现音乐播放器歌手数据接口抓取

猜你喜欢