网易云音乐API,的调用方法 ,vue项目中(在本地使用)

1. 在cmd 命令行下:安装并启动:

git  clone   https://github.com/Binaryify/NeteaseCloudMusicApi.git  /* 下载 */

cd NeteaseCloudMusicApi /* 进入项目的根目录*/

yarn 或者 npm install  /*安装依赖*/

node app.js   /* 运行项目,启动该 */

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上面步骤执行完成,出现下面的字样,代表已成功安装;
在这里插入图片描述
运行,运行成功:
在这里插入图片描述
这里的 " http://localhost:3000 " 就是我们接下来要请求的网易云音乐API 的 服务器地址了,注意这里的端口可改,更多使用参考文章后的链接。

2. 在vue项目中调用它的接口:

src下新建一个plugins的文件夹,在该文件夹下新建axios.js文件 ( 项目中已用 yarn add axios 安装了axios插件);

axios.js文件 (这里关于axios的写法不做多的说明)

import axios from 'axios'
import qs from 'qs'

axios.defaults.withCredentials = true// 允许跨域设置,不然可能因为拿不到cookie而报错

axios.defaults.baseURL = 'http://localhost:3000/'   /*这里的地址就是刚刚启起来的服务器地址  */

/*请求拦截*/
axios.interceptors.request.use(
  config => {
    if (config.meth === 'post' && !(config.data instanceof FormData)) {
      config.headers = {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      config.data = qs.stringify(config.data, { arrayFormat: 'repeat' }) /*这里是,后端要求传数组的时候做的设置,以前出过错*/
    }
    return config
  }, error => {
    return Promise.reject(error)
  }
)
/* 响应拦截 */
axios.interceptors.response.use(
  res => {
   /*可在这里根据返回的状态码做一些拦截操作*/
    return res
  }, err => {
    return Promise.resolve(err)
  }
)
export default axios  /*记得导出*/

在组件中测试调用:
about.vue

<template>
  <div class="about">
    <el-button @click="getWangyi">获取热门歌单</el-button>
  </div>
</template>

<script>
import axios from '@/plugins/axios.js' /*引入封装的axios*/

export default {
  methods: {
    getWangyi () {
      axios({
        url: '/playlist/hot',  /*热门歌单接口地址*/
        method: 'post'
      })
        .then(res => {
          console.log("我拿到的数据:", res.data.tags)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

在这里插入图片描述

网易云音乐API 地址 : https://binaryify.github.io/NeteaseCloudMusicApi/#/

它的GitHub地址: https://github.com/Binaryify/NeteaseCloudMusicApi

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章