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數據中知道的

完成

這樣點擊不同的歌手，就得到了相應的歌單