003_Vue音乐播放器（音乐推荐列表API接口及调用）

先来分享几个 音乐的API接口

酷狗、QQ音乐、网易云API接口

酷狗API详细

那么Vue使用axios访问这些API接口的时候 会得到后台返回的数据，根据这个数据，先了解其数据格式，比如你需要的播放链接，歌曲名称等，一般来说都是json格式，数组格式，或者字符串格式。

有时候，Vue访问的API接口跨域了，可以通过以下方式解决跨域问题。

在项目目录中congfig文件夹下的index.js文件中proxyTable配置代理。例如：

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //此处配置代理 
    proxyTable: {
      '/api': {
        target: 'http://api.map.baidu.com/', //访问地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
    },

在项目中就可以使用访问代替：
"http://api.map.baidu.com/geocoder/v2"              接口时可以使用‘/api’代替,  变成  "/api/geocoder/v2"

使用axios请求则为

（需要 npm run dev 重启项目才能使得proxyTable的设置生效）

axios.get('/api/geocoder/v2', {
    params: {
      //请求参数
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

由于Vue代理需要利用node服务器，所以只适用于本地npm run dev调试。

当项目部署到服务器时，可以使用CROS方式、nginx反向代理等方式。

参考文章：

vueJs请求接口获取数据的实现及跨域问题

前端如何使用proxyTable和nginx解决跨域问题

好了，我们回到项目，我们使用jsonp和axios两种方式来进行跨域请求QQ音乐API

1、jsonp方式

使用 cnpm install jsonp --save 来安装jsonp

在common目录下的js文件夹创建 jsonp.js 文件 用来发起jsonp请求（作用看代码注释）

//封装jsonp 函数

import originJSONP from 'jsonp';//引入jsonp

export default function jsonp(url,data,option){//暴露jsonp函数用以发起跨域请求

    //使用请求参数来调用param函数，以此返回带参数的url字符串。其中如果url地址不带 ？ 则添加？拼接，否则直接使用 & 拼接参数
    url += (url.indexOf('?')<0? '?':'&') +param(data);

    return new Promise((resolve,reject)=>{
        originJSONP(url,option,(err,data)=>{
            if(!err){//成功请求
                resolve(data);
            }else{
                reject(err);//请求失败
            }
        })
    })
}

//该函数，将 data 数据 拼接到 url 地址中
function param(data){
    let url = '';
    for(var i in data){
        //将url地址 转成字符 存到 value中
        let value = data[i] !== undefined ? data[i]:'';//已定义，设置为当前值，未定义则赋值为空字符串
        //url拼接 请求 的参数(ES6语法)
        url +=`&${i} = ${encodeURIComponent(value)}`
    }
    return url?url.substring(1):"";//url不为空则返回url字符串，为空则返回空字符串

}

在src目录下创建api文件夹，创建 config.js文件用来配置发送jsonp请求的公用参数（省去每次发送jsonp请求时配置一大堆参数）

//暴露一些 访问 API 接口 所需要的公共参数，省去每次请求API都需要配置一堆相同的参数。
//此公共配置文件暴露的参数对应QQ音乐 API 的推荐音乐列表
export const commonParams ={
    g_tk:5391,
    inCharset:'utf-8',
    outCharset:'utf-8',
    notice:0,
    format:'jsonp'
}

export const option ={
    param :'jsonpCallback'
}

export const ERR_OK = 0

 然后在api文件夹中创建recommend.js文件，recommend组件将使用此js文件中暴露的函数来发起jsonp请求，请求QQ音乐的推荐列表数据

import jsonp from '../common/js/jsonp.js'; // 引入jsonp函数
import {commonParams,option} from '../api/config.js'; //请求访问API接口所需的公共参数的文件

//getRecommend函数用于从API接口中获取 推荐 的 数据
export function getRecommend() {
  //访问QQ音乐API的推荐歌单列表数据
  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

  // ES6 新函数 assign ，用于对象的深拷贝
  const data = Object.assign({}, commonParams, {
    //另外一些请求所需的参数
    platform: 'h5',
    uin: 0,
    needNewCode: 1
  })

  return jsonp(url, data, option);

 然后在 recommend 组件中引入 请求的函数，和请求成功的相应参数（QQ音乐推荐列表特定）

 然后调用暴露出来的请求函数

 即可得到返回的参数

 

 2、axios方式

首先 cnpm install axios --save 安装axios

 然后在 config 目录下的 index.js 文件中的dev属性中 定义 proxyTable 属性来实现跨域

在需要使用 axios 请求 的组件中引入

 即可使用axios实现跨域请求。