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://neteasecloudmusicapi.vercel.app/#/?id=neteasecloudmusicapi
它的GitHub地址: https://github.com/Binaryify/NeteaseCloudMusicApi
本文详细介绍如何在本地搭建网易云音乐API服务,包括通过CMD命令行安装和启动服务,以及在Vue项目中如何调用该API接口。通过具体代码示例,展示了如何配置axios进行跨域请求,设置请求和响应拦截,以及在组件中调用API获取热门歌单数据。
&spm=1001.2101.3001.5002&articleId=104972089&d=1&t=3&u=5a0cf00541af4c7ba38edc21ef11474f)
8982

被折叠的 条评论
为什么被折叠?



