Vue音乐--排行榜页面02_抓取首页数据

大概步骤：

目标效果

---

二、抓取排行榜首页数据

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

jsonp数据

url数据

• 相关代码

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

//方法js不做成defaul，vue引入时要单花括号
export function getTopList(){
	//自己判断截取出url前半段
	const urlfront = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg'
	//把hash做成对象,es6创建对象并赋值,
	//固定的hash写在变量js模块 config.js里，
	const thehash = Object.assign({},commonParams,{
		notice: 0,
		platform: 'h5',
		needNewCode: 1,
		uin:0,
	})
	//执行jsonp模块
	//console.log(jsonp(urlfront,thehash,object))
	return jsonp(urlfront,thehash,object)	//执行封装了jsonp的方法
}

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

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

getTopList().then((res)=>{
  			if(res.code===ERR_OK){
  				this.topList = res.data.topList
  			}
  		})

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

• 把数据应用到html中即可
  

---

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com