执着于理想,纯粹于当下

目录
2019.11最新歌手详情页开发

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

完成

这样点击不同的歌手,就得到了相应的歌单在这里插入图片描述在这里插入图片描述


标题:2019.11最新歌手详情页开发
作者:JaneChelle
地址:https://xiao.algerfan.cn/articles/2019/11/01/1572598420779.html