简单的音乐在线播放网页

调用网易云提供的音乐接口，编写一个简易的音乐在线播放网页

一、功能实现：

1.通过在输入框输入要查询的文字，调用后台接口获取响应的数据，并把需要的数据渲染到左侧。

2.通过点击可以选中左侧播放栏的某一信息，选中变色。

3.播放音乐是把该音乐的id提交给后台，调用接口获取歌曲的具体数据，把封面信息渲染到中间主体区域，热门评论渲染到右侧评论区。

4.播放音乐MV。

二、效果图

1.页面静态时

2.输入相应的信息获取数据

3.双击某一音乐播放

4.播放MV

三、功能实现流程

1.网络接口

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

  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法: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的地址

2.页面的静态布局

         页面的布局分为头部、中间栏和底部播放栏，而中间栏包括左侧的歌曲信息栏、中间显示正在播放歌曲的信息，右侧显示正在播放音乐的热门评论。具体的样式就不一一介绍了，最后我会提供源码。

3.具体功能的实现

头部实现搜索功能

         

使用v-model绑定输入框输入的内容，然后给输入框绑定一个回车事件getSong事件，把输入的内容条用axios发送给后台，获取响应的信息。输入框后的搜索图标我们也给绑定getSong事件。

获取到响应的信息，我们要把它在控制台中打印出来，查看哪些数据使我们所需要的，然后把它放到我们data中的songList中，然后通过v-for指令，在我们的歌曲列表区，把我们所获取的歌曲信息渲染出来。

在这个区域，我们要实现的功能有双击歌曲信息或者点解播放按钮调用playSong方法，实现歌曲的播放功能，同时我们也要把当前点击的歌曲的id、歌曲名、歌手、已经当前歌曲的索引传到我们的方法了。歌曲的id我们用于调用接口获取歌曲的封面信息以及热门评论，歌曲名字以及歌手信息我们用于把这些信息渲染到播放区域，然后歌曲的索引我们将用来判断当前播放的是哪首歌，时间选中变色的效果。

playSong: function (songId,singer,songs,index) {
            var that = this;        
            // console.log(songId);
            // console.log(singer);
            // console.log(songs);
            this.playIndex=index;
            // console.log(index);
            this.singer = singer;
            this.songs = songs;
            this.isSing=true;
            //获取歌曲播放地址
            axios.get("https://autumnfish.cn/song/url?id=" + songId).then(function (res) {
                // console.log(res);
                that.songUrl = res.data.data[0].url;
                // console.log(that.songUrl);
                // console.log(res.data.data);
                     
            }, function (err) {
                console.log(err);

            });
            //获取歌曲封面信息
            axios.get("https://autumnfish.cn/song/detail?ids=" + songId).then(function (res) {
                // console.log(res);
                // console.log(res.data.songs[0].al.picUrl);
                that.songCover = res.data.songs[0].al.picUrl;


            }, function (err) {
                console.log(err);

            });
            //获取热门评论
            axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + songId).then(function (res) {