<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天天悦听player</title>
<!-- 样式 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrap">
<!-- 播放器主体区域 -->
<div id="player" class="play_wrap">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="songname" @keyup.enter="search"/>
<!-- 回车 -->
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list">
<li v-for="item in musicArr">
<a href="javascript:;" v-on:click="getsong(item.id)"></a>
<!-- 歌曲名的显示 -->
<b>{{item.name}} {{item.artists[0].name}}</b>
<!-- mv的图标 -->
<span v-if="item.mvid != 0" v-on:click="playMV(item.mvid)"><i></i></span>
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲封面信息容器 -->
<div class="player_con" v-bind:class="{playing:isplaying}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<!-- 歌曲封面图片 -->
<img :src="imgsrc" class="cover autoRotate" />
</div>
<!-- 歌曲评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="item in hotcomments">
<!--评论人的图像 -->
<dt><img v-bind:src="item.user.avatarUrl" alt=""></dt>
<!-- 评论人的昵称 -->
<dd class="name">{{item.user.nickname}}</dd>
<!-- 评论人的评论内容 -->
<dd class="detail">
{{item.content}}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<!-- 歌曲播放 -->
<div class="audio_con">
<audio ref='audio' v-bind:src="srcurl" controls autoplay loop class="myaudio" @play="play" @pause="pause"></audio>
</div>
<!-- mv的播放的遮罩层 -->
<div class="video_con" v-show="isshow">
<video v-bind:src="mvurl" controls autoplay></video>
<!-- 遮罩层，给他绑定事件，取消遮罩 -->
<div class="mask" @click="hide" ref="mv"></div>
</div>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:'#player',
data: {
songname:'摩天动物园',
musicArr:[],
srcurl:'',
imgsrc:'',
hotcomments:[],
isplaying:false,
mvurl:'',
isshow:false
},
methods: {
search() {
let name = this.songname;
axios
.get("https://autumnfish.cn/search?keywords=" + name)
.then(response=>this.musicArr=response.data.result.songs);
},
getsong(id) {
/* url */
axios
.get("https://autumnfish.cn/song/url?id=" + id)
.then(response=>this.srcurl=response.data.data[0].url);
/* img */
axios
.get("https://autumnfish.cn/song/detail?ids=" + id)
.then(response=>this.imgsrc=response.data.songs[0].al.picUrl);
/* comment */
axios
.get("https://autumnfish.cn/comment/hot?type=0&id=" + id)
.then(response=>this.hotcomments=response.data.hotComments);
},
play() {
this.isplaying = true;
},
pause() {
this.isplaying = false;
},
playMV(mvid) {
axios
.get("https://autumnfish.cn/mv/url?id=" + mvid)
.then(response=>{
this.mvurl=response.data.data.url;
this.isshow=true;
})
},
hide() {
this.isshow=false;
this.$refs.mv.pause();
}
}
})
</script>
</body>
</html>
加深对Vue的各种指令的理解，v-bind绑定属性、v-on绑定事件（按键修饰符enter）、v-for遍历数组，v-if、v-show的条件指令，表单数据的双向绑定v-model，还有使用Axios框架发送AJAX请求。
推荐使用谷歌插件FeHelper（前端助手）或者Postman工具，可以将AJAX请求返回的json字符串格式化，这样对从测试接口中返回的数据更加清楚。
