详情页开发"/>
2019.11最新歌手详情页开发
qq音乐现在获取歌手详情页数据,变得麻烦了许多,之前主需要jsonp就可以获取到数据,但是现在不仅要用后端代理,而且获取每个歌手都对应了一个单独的singer_mid
,这意味着点击不同的歌手需要传入对应的singer_mid
,从而获取到不同歌手对应的歌单。
歌手详情数据抓取
在webpack.dev.conf.js文件中进行后端代理,node后端服务器去请求qq服务器的数据,把数据获取到本地之后,前台在进行axios请求,最终得到数据。
webpack.dev.conf.js:
// 歌手详情//这里的路径是给前端发送请求的urlapp.get('/api/getSingerDetail', function (req, res) {let url = '.fcg'// axios发送get请求,可以自己配置configaxios.get(url, {headers: {Referer: '/',host: 'u.y.qq'},// params是即将与请求一起发送的url参数,无格式对象/URLSearchParams对象params: req.query,}).then((response) => {res.json(response.data)//返回数据}).catch((error) => {console.log(error)})})
在singer.js中:
// 歌手详情
export function getSingerDetail (singerMid) {const url = '/api/getSingerDetail'const data = Object.assign({}, commonParams, {g_tk: 499021157,loginUin: 0,hostUin: 0,format: 'json',platform: 'yqq.json',needNewCode: 0,data: {'comm': {'ct': 24, 'cv': 0}, 'singerSongList': {'method': 'GetSingerSongList', 'param': {'order': 1, 'singerMid': `${singerMid}`, 'begin': 0, 'num': 10}, 'module': 'musichall.song_list_server'}}})return axios.get(url, {params: data}).then((res) => {return Promise.resolve(res.data)}).catch((error) => {console.log(error)})
}
其中这里至关重要,要使用模板字符串动态引入
每个歌手对应不同的singerMid
,这是从qq返回的json数据中知道的
完成
这样点击不同的歌手,就得到了相应的歌单
更多推荐
2019.11最新歌手详情页开发
发布评论