网易云音乐API,的调用方法 ,vue项目中(在本地使用)
1. 在cmd 命令行下:安装并启动:gitclonehttps://github.com/Binaryify/NeteaseCloudMusicApi.git/* 下载 */cd NeteaseCloudMusicApi /* 进入项目的根目录*/yarn 或者 npm install/*安装依赖*/node app.js/* 运行项目,启动该 */...
·
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
更多推荐
已为社区贡献27条内容
所有评论(0)