柚子快报邀请码778899分享：vue+axios音乐播放器
数据全部动态生成，数据由接口提供
axios介绍：
Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。
功能：
从浏览器中创建 XMLHttpRequest从 node.js 中创建 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换 JSON 数据客户端支持防止 XSRF 攻击
示例代码：
执行一个 GET 请求
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行一个 POST 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
仓库地址：
https://gitee.com/beiwangshan/web_projects/tree/master/VUE%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8
调用接口
音乐信息接口
接口地址:https://v1.alapi.cn/api/music/search?keyword=请求方法: get请求参数: keywords响应内容:搜索信息
歌曲播放接口
接口地址:https://api.imjad.cn/cloudmusic/?type=song&id=请求方法: get请求参数: id响应内容:歌曲url
歌曲详情信息接口
接口地址：https://api.5alen.com/api/music/?type=netease&id=请求方法: get请求参数: id响应内容:歌曲详情
歌曲评论信息接口
接口地址:https://autumnfish.cn/comment/hot?type=0（type也为其中的一个属性值因此用&相链接）请求方法: get请求参数: id响应内容:歌曲评论详情
音乐视频信息接口
接口地址:https://autumnfish.cn/mv/url请求方法: get请求参数: id响应内容:mv的url
使用axios请求库共同完成
遇到的问题
解决vue向上冒泡
@click.stop="playVideo"
解决vue向下冒泡
@click.self="cancelFunc"
柚子快报邀请码778899分享：vue+axios音乐播放器
发表评论