大概步骤：

目标效果

---

七、抓取排行榜详情页数据

• 要点
  • 进入QQ音乐移动端，查找Network中的排行榜首页数据，在XHR中找到
  • 使用之前写好的jsonp解析数据的方法，传入处理好的url
  • 点击事件传入点击的排行榜id

jsonp数据

url数据

• 相关代码

import jsonp from '@/common/js/jsonp'	//引入jsonp模块
import {commonParams,object} from './config'

//获取排行榜歌曲列表数据
export function getRankList(topid){
	//自己判断截取出url前半段
	const urlfront = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg'
	//把hash做成对象,es6创建对象并赋值,
	//固定的hash写在变量js模块里， config.js
	const thehash = Object.assign({},commonParams,{
		notice: 0,
		platform: 'h5',
		needNewCode: 1,
		uin:0,
		tpl: 3,
		page: 'detail',
		type: 'top',
		topid: topid,
	})
	//执行jsonp模块
	//console.log(jsonp(urlfront,thehash,object))
	return jsonp(urlfront,thehash,object)
}

^ rank.js定义获取数据的方法

import {getRankList} from '@/api/rank'	//引入获取数据方法的

getRankList(this.topList.id).then((res)=>{
	if(res.code === ERR_OK){
		console.log(res.songlist)	//数据很冗余，需要提取
	}
 })

^ 在组件中调用获取数据的方法

• 获取到的歌曲列表数据很冗余，需要提取需要的数据
• 而前面有自己封装提取数据形成性对象的方法
• 引用封装方法即可

import {createSong} from '@/common/js/song.js'  //引入歌曲列表数据提取数据的方法

methods:{
	//提取歌曲列表数据
	_normalizeSongs(list){
		let ret =[]
		list.forEach((item)=>{
			const musicData = item.data       
			if(musicData.songid && musicData.albumid){
            	ret.push(createSong(musicData)) //不需要一个一个new传值 
       		}
      })
      return ret
    },
    //获取数据
    getRankList(this.topList.id).then((res)=>{
	if(res.code === ERR_OK){
		console.log(res.songlist)	//数据很冗余，需要提取
		this.songs = this._normalizeSongs(res.songlist)
	}
 })
 }

• 把数据应用到组件中

• :songs="songs"
  

• 另外还要通过axios获取歌曲的url

• 利用写过的获取数据方法，在提取数据的时候，把url额外提取进去

import {createSong} from '@/common/js/song.js'  //引入歌曲列表数据提取数据的方法

methods:{
	//提取歌曲列表数据
	_normalizeSongs(list){
		let ret =[]
		list.forEach((item)=>{
			const musicData = item.data       
			if(musicData.songid && musicData.albumid){
				//遍历循环获取歌曲源url
				let songUrl = ''
				getSongs(musicData.songmid).then((res)=>{
					songUrl = res.req_0.data.midurlinfo[0].purl  //获取到数据url，提取存入到对象中即可
					ret.push(createSong(musicData,songUrl)) 
				})
			}
		})
		return ret
	},

• 即可进行播放
  

---

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：[email protected]