大概步骤:
目标效果
二、抓取排行榜首页数据
- 要点
- 进入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
邮箱:[email protected]