zoukankan      html  css  js  c++  java
  • 用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`
        }
    }

     最后的效果为:

  • 相关阅读:
    康复计划
    Leetcode 08.02 迷路的机器人 缓存加回溯
    Leetcode 38 外观数列
    Leetcode 801 使序列递增的最小交换次数
    Leetcode 1143 最长公共子序列
    Leetcode 11 盛水最多的容器 贪心算法
    Leetcode 1186 删除一次得到子数组最大和
    Leetcode 300 最长上升子序列
    Leetcode95 不同的二叉搜索树II 精致的分治
    Leetcode 1367 二叉树中的列表 DFS
  • 原文地址:https://www.cnblogs.com/cmy1996/p/9168237.html
Copyright © 2011-2022 走看看