数据全部动态生成,数据由接口提供
axios介绍:
Axios,基于 Promise 的 HTTP 客户端,可以工作于浏览器中,也可以在 node.js 中使用。
功能:
从浏览器中创建 XMLHttpRequest
从 node.js 中创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防止 XSRF 攻击
示例代码:
执行一个 GET 请求
// Make a request for a user with a given IDaxios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });// Optionally the request above could also be done asaxios.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"