2019.11最新歌手详情页开发

详情页开发"/>

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数据中知道的

完成

这样点击不同的歌手，就得到了相应的歌单