2019.11最新歌手详情页开发

  qq音乐现在获取歌手详情页数据，变得麻烦了许多，之前主需要jsonp就可以获取到数据，但是现在不仅要用后端代理，而且获取每个歌手都对应了一个单独的singer_mid，这意味着点击不同的歌手需要传入对应的singer_mid，从而获取到不同歌手对应的歌单。

歌手详情数据抓取

  在webpack.dev.conf.js文件中进行后端代理，node后端服务器去请求qq服务器的数据，把数据获取到本地之后，前台在进行axios请求，最终得到数据。

webpack.dev.conf.js：

      // 歌手详情
      			//这里的路径是给前端发送请求的url
      app.get('/api/getSingerDetail', function (req, res) {
        let url = 'https://u.y.qq.com/cgi-bin/musicu.fcg'
        // axios发送get请求，可以自己配置config
        axios.get(url, {
          headers: {
            Referer: 'https://y.qq.com/',
            host: 'u.y.qq.com'
          },
          //  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数据中知道的

完成

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