1. 程式人生 > >基於Vue2.0的音樂播放器——歌手模塊(拿不到數據)

基於Vue2.0的音樂播放器——歌手模塊(拿不到數據)

分享圖片 header sig highlight func conf java tdi pro

來這裏的都可能在看,慕課網vue2.0 的音樂播放器的相關頁面,如果使用視頻介紹的方法,相當於現在來說是獲取數據回報如下的錯誤:

{code: -500001, ts: 1529809544209} code : -500001 ts : 1529809544209

原因也簡單:最新的vue2.0 webpack模板中沒有dev-server.js文件,進行後臺數據的模擬獲取,只需要使用從接口獲取數據後放在本地進行代理,頁面就能拿到代理的數據了具體操作如下:

技術分享圖片

    before(app) {
      app.get(‘/api/getDiscList‘, function (req, res) {
        
var url = ‘https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg‘ // 原api axios.get(url, { headers: { referer: ‘https://c.y.qq.com/‘, host: ‘c.y.qq.com‘ }, params: req.query }).then((response) => { res.json(response.data) }).
catch((e) => { console.log(e) }) }), app.get(‘/api/getSingerList‘, function (req, res) { var url = ‘https://c.y.qq.com/v8/fcg-bin/v8.fcg‘ // 原歌手列表接口的api axios.get(url, { headers: { referer: ‘https://c.y.qq.com/‘, host: ‘c.y.qq.com‘ }, params: req.query }).then((response)
=> { res.json(response.data) }).catch((e) => { console.log(e) }) }) }

然後在api/singer.js頁面中的URL 換成 const url = ‘/api/getSingerList‘

記得不要使用 jsonp

具體的如下:

import {commonParams} from ‘./config‘
import axios from ‘axios‘

export function getSingerList() {
  const url = ‘/api/getSingerList‘

  const data = Object.assign({}, commonParams, {
    channel: ‘singer‘,
    page: ‘list‘,
    key: ‘all_all_all‘,
    pagesize: 100,
    pagenum: 1,
    hostUin: 0,
    needNewCode: 0,
    platform: ‘yqq‘
  })

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

然後你就能拿到數據啦!是不是很激動

技術分享圖片

  

基於Vue2.0的音樂播放器——歌手模塊(拿不到數據)