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"