前言

本次项目是对前面的vue知识的综合应用：基于vue实现一个网页版播放器。
需要向网易云接口发送请求，这是相关接口使用文档：
https://api.imjad.cn/cloudmusic.md

页面布局

1，HTML页面布局
本次页面布局相对复杂，我将整个播放器页面用“div”分成上、中下三块。其中：
上方放搜索框和播放器名字；
中间是主要内容块，又分为左右两块，左边用来显示当前播放音乐对应的图片和名字，右边显示搜索结果（20条）；
底部显示音乐播放进度条。
下面的具体代码：

<div id="musicplay">
    <div id="top">
        <span>在线随听</span>
        <div id="search">
            <input type="text" placeholder="请输入内容" v-on:keyup.enter = "search" v-model = "name"/>
        </div>
    </div>
    <div id="cont">
        <div id="left">
            <img v-bind:src ="songImg" />
            <p>{{text}}</p> 
        </div>
        <div id="line"></div>
        <div id="right">
            <ul>
                
                <li v-for="(item,i) in obj">
                    <img src="imgs/Music Entertainment.png"  @click="playIt(i)"/>
                    <p>{{item.song}}</p>
                    
                </li>
                
            </ul>
        </div>
    </div>
    <div id="bottom">
        <audio v-bind:src ="thisSrc" controls="" autoplay="" style="width: 100%;"></audio>
    </div>
</div>

2，CSS层叠样式表
在实际处理时，测试发现，页面是自动换行的，但是为了效果美观，我想让搜索结果显示处的每一个LI的内容都不换行。所以我用了“white-space:nowrap;”来强制不换行。
其他的都是一些常见的属性，在此不再赘述，老规矩，直接放代码：

*{
    padding:0;
    margin:0;
}

#musicplay{
    position: absolute;
    background-color: #fff;
    left: 20%;
    top: 64px;
    width: 60%;
    height: 500px;
    box-shadow: 2px 2px 4px #5e72e4;
}
#top{
    width: 100%;
    height: 50px;
    background-color:#5e72e4;
}
#top span{
    padding-left: 8px;
    color: #fff;
    line-height: 50px;

}
#search{
    position: absolute;
    right: 8px;
    top: 10px;
}
#search input{
    width: 180px;
    height: 24px;
    padding-left: 8px;
    border-radius: 12px;
    border: 1px solid #5e72e4;
    box-shadow: 1px 1px 2px #5c5c5f;
}

#cont{
    position: absolute;
    margin: 8px 0;
    width: 100%;
    height: 400px;
}
#left{
    position: absolute;
    left: 1%;
    width: 60%;
    height: 100%;
}
#left img{
    position: absolute;
    left: 20%;
    top: 20%;
    height: 60%;
    width: auto;
}
#left p{
    font-size: 24px;
    font-weight: 500;
    color: #5e72e4;
}
#line{
    position: absolute;
    top: 10%;
    left: 62%;
    width: 0;
    height: 80%;
    border-left:1px solid #59666d;
    opacity: 0.4;
}
#right{
    position: absolute;
    padding-top: 6%;
    right: 1%;
    width: 36%;
    height: 90%;
}
ul{
    width: 100%;
    height: 90%;
    overflow: auto;
}
li{
    width: 100%;
    height: 30px;
    list-style: none;
    padding-left: 2%;
}
li img{
    /* position: absolute; */
    float: left;
    width: 24px;
    height: auto;
    cursor: pointer;
}
li p{
    font-size: medium;
    float: left;
    width: 85%;
    /* 强制不换行 */
    white-space:nowrap;
}

#bottom{
    position: absolute;
    bottom: 4px;
    width: 100%;
    height: 50px;
    background-color: #f4f5f7;
}
#bottom img{
    position: absolute;
    left: 4%;
    top: 16px;
    width: 20px;
    height: auto;
}
#bottom p{
    position: absolute;
    left: 10%;
    top: 6px;
    font-size: 10px;

}

至此，页面初步效果如图：

逻辑实现

梳理：
1）分析发现，一共有两处地方需要发送申请，一次是搜索内容输入完毕按回车键时；一次是点击具体音乐前面的紫色图标时。
2）两次均采用get方式发送异步请求。
3）搜索框处对应的请求发送时，服务器会返回20个相关数据，里面有歌曲名字、封面图片、id等信息。需要用一个循环将所需信息保存起来备用。
4）点击相应的紫色图标时，将其对应的id作为参数一起发送给服务器，服务器会返回一些与该id相关数据，其中就有我们所需的播放该音乐的地址。至此一切就明了了。
提示：

1. 在使用vue来实现该音乐播放器时，要注意用变量将"this"保存下来，不然随着循环的进行，此“this”就非彼“this”了，故就报错了。
   2）注意修改标签的属性值要使用”v-bind“（具有使用见代码）
   下面是代码：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var d = new Vue({
        el : "#musicplay",
        data : {
            text : "",
            thisSinger : "",
            thisSrc : "",
            obj : [] ,
            songImg : "imgs/playimg.png"
        },
        methods : {
            search : function(){
                var that = this;
                this.obj.splice(0, 20);
                axios.get("https://api.imjad.cn/cloudmusic/?type=search&search_type=1&s="+this.name)
                .then(function(datas){
                    for(var i = 0; i < datas.data.result.songs.length; i++ ){
                        that.obj.push({
                            "song" : datas.data.result.songs[i].name,
                            "imgSrc" : datas.data.result.songs[i].al.picUrl,
                            "id" : datas.data.result.songs[i].privilege.id,
                        });
                    }
                });
            },
            playIt : function(i){
                var that = this;
                this.text = this.obj[i].song;
                axios.get("https://api.imjad.cn/cloudmusic/?type=song&br=128000&id="+this.obj[i].id)
                .then(function(ddd){
                    that.thisSrc = ddd.data.data[0].url;
                    that.songImg = that.obj[i].imgSrc;
                });
            }
        }
    });

</script>

效果