vue慕课网音乐项目手记：38-歌单详情页开发（二）

首先：要获取songList的数据

第一步：在recommend的api里面写接口

export function getSongList (disstid) {
  const url = '/api/getSongList'

  const data = Object.assign({}, commonParams, {
    uin: 0,
    format: 'json',
    notice: 0,
    needNewCode: 1,
    new_format: 1,
    pic: 500,
    disstid: disstid,
    type: 1,
    json: 1,
    utf8: 1,
    onlysong: 0,
    picmid: 1,
    nosign: 1,
    song_begin: 0,
    platform: 'h5',
    song_num: 100,
    _: +new Date()
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

因为这个数据qq音乐也对它进行了加密，所以，要在devconfig里面去模仿header

app.get('/api/getSongList', function (req, res) {
        var url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg'
        axios.get(url, {
          headers: {
            referer: 'https://y.qq.com/',
            host: 'c.y.qq.com'
          },
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })

这时候就可以拿到数据了。
注意的是：webpack的配置调整之后，一定要从新启动服务器。在这里吃亏吃过很多次了。
拿到数据后，要对数据进行一些处理：

methods: {
    _getSongList () {
      getSongList(this.disc.dissid).then((res) => {
        if (res.code === ERR_OK) {
          this.songs = this._normalizeSongs((res.cdlist[0].songlist))
          console.log(res)
          console.log(res.cdlist[0].songlist)
          console.log(this._normalizeSongs(res.cdlist[0].songlist))
        }
      })
    },
    _normalizeSongs (list) {
      let ret = []
      list.forEach((musicData) => {
        if (musicData.id && musicData.album) {
          ret.push(creatSong2(musicData))
        }
      })
      return ret
    }

因为这里的数据和原教程里的数据有一些不同，所以，需要做一些调整

export function creatSongList (musicData) {
  return new Song({
    id: musicData.id,
    mid: musicData.mid,
    singer: filterSinger(musicData.singer),
    name: musicData.name,
    album: musicData.albumname,
    duration: musicData.interval,
    image: `https://y.gtimg.cn/music/photo_new/T002R300x300M000${musicData.album.mid}.jpg?max_age=2592000`,
    url: `http://ws.stream.qqmusic.qq.com/C100${musicData.mid}.m4a?fromtag=0&guid=126548448`
  })
}

然后把数据传递给music-list就可以了