Vue音樂--排行榜頁面02_抓取首頁資料
阿新 • • 發佈:2018-12-13
大概步驟:
目標效果
二、抓取排行榜首頁資料
- 要點
- 進入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]