项目准备

1.vue
2.bootstrap
3.axios
音乐接口

1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果

  2:歌曲url获取接口
    请求地址: https://api.imjad.cn/cloudmusic/?type=url&id= 
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://api.imjad.cn/cloudmusic/?type=detail&id=

    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址

项目功能

1.歌曲搜索

v-on:click,@keyup.enter

v-medel获取到input搜索框搜索的内容，axios方法调用接口数据，数据赋值时使用箭头函数，v-for渲染到页面（v-for中使用）

2.播放音乐

为歌曲列表单曲li添加点击事件，通过接口获取到url，使用v-bind渲染src地址到audio

3.歌曲详情获取

主要获取歌曲封面，与播放音乐同理

4.热门评论

5.mv播放

图示