第四章：综合应用
综合应用-介绍
悦听播放器
歌曲搜索：搜索结果显示在左侧列表
歌曲播放：点击按钮播放
歌曲封面：播放歌曲同时，中间封面会同步改变
歌曲评论：右侧显示热评
播放动画：
Mv播放：点击MV弹出遮罩层，播放MV
综合应用-音乐查询
1、回车（v-on .enter事件绑定）
2、获取数据（axios接口，v-model获取输入）
3、渲染数据（v-for数组,that）
| html: <div class="search_bar"> <img src="images/player_title.png" alt="" /> <!-- 搜索歌曲 --> <input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" /> </div> ---------------------- <ul class="song_list"> <li v-for="item in musicList"> <b>{ {item.name}}</b> </li> </ul> ---------- <!-- 开发环境版本，包含了有帮助的命令行警告 --> <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 src="./js/main.js "></script> |
| /* 1:歌曲搜索接口 请求地址:https://autumnfish.cn/search 请求方法:get 请求参数:keywords(查询关键字) 响应内容:歌曲搜索结果 */
./js/main.js: <script> var app = new Vue({ el: "#player", data: { query: "", // 查询关键字 musicList: [], // 歌曲数组 }, methods: { searchMusic: function() { // 歌曲搜索 var that = this; axios.get("https://autumnfish.cn/search?keywords=" + this.query).then( function(response) { that.musicList = response.data.result.songs; }, function(err) {} }); </script> |
综合应用-音乐播放
1、点击播放（v-on .enter事件绑定，自定义参数）
2、获取歌曲地址（axios接口，v-model获取输入）
3、歌曲地址设置（渲染数据）（）
播放歌曲的本质，就是设置audio标签的src属性为网络地址。<audio src=”">
| html: <div class="audio_con"> <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio> </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 src="./js/main.js "></script> |
| /* 2:歌曲url获取接口 请求地址:https://autumnfish.cn/song/url 请求方法:get 请求参数:id(歌曲id) 响应内容:歌曲url地址*/
./js/main.js: <script> var app = new Vue({ el: "#player", data: { query: "", // 查询关键字 musicList: [], // 歌曲数组 musicUrl: "", // 歌曲地址 isPlaying: false, // 播放状态
}, methods: { // 歌曲播放 playMusic: function(musicId) { var that = this; // 获取歌曲地址 axios.get("https://autumnfish.cn/song/url?id=" + musicId).then( function(response) { that.musicUrl = response.data.data[0].url; }, function(err) {});
// 歌曲播放 play: function() { this.isPlaying = true; }, // 歌曲暂停 pause: function() { this.isPlaying = false; }); </script> |
综合应用-歌曲封面
1、点击播放（增加逻辑，同步显示封面）
2、获取歌曲封面（axios接口）
3、歌曲封面设置（渲染数据）（V-blind）
| html: <!-- 歌曲信息容器 --> <div class="player_con" :class="{playing:isPlay}"> <img src="images/player_bar.png" class="play_bar" /> <!-- 黑胶碟片 --> <img src="images/disc.png" class="disc autoRotate" /> <img :src="musicCover " class="cover autoRotate" /> <！-- v-blind 设置元素属性，v-blind:属性名=表达式，简写为：属性名=表达式--> </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 src="./js/main.js "></script> |
| /* 3.歌曲详情获取 请求地址:https://autumnfish.cn/song/detail 请求方法:get 请求参数:ids(歌曲id) 响应内容:歌曲详情(包括封面信息) ./js/main.js: 在播放函数里增加封面逻辑代码（红色部分），点击播放同时设置封面 <script> var app = new Vue({ el: "#player", data: { query: "", // 查询关键字 musicList: [], // 歌曲数组 musicCover: "", // 歌曲封面 }, methods: { // 歌曲播放 playMusic: function(musicId) { var that = this; // 获取歌曲地址 axios.get("https://autumnfish.cn/song/url?id=" + musicId).then( function(response) { that.musicUrl = response.data.data[0].url; }, function(err) {} );
// 歌曲详情获取 axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then( function(response) { // console.log(response); // console.log(response.data.songs[0].al.picUrl); that.musicCover = response.data.songs[0].al.picUrl; }, function(err) {} );
// 歌曲评论获取 axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then( function(response) { // console.log(response); // console.log(response.data.hotComments); that.hotComments = response.data.hotComments; }, function(err) {} ); }); </script> |
综合应用-歌曲评论
1、点击播放（增加逻辑（函数），同步显示评论）
2、获取歌曲评论（axios接口）
3、歌曲评渲染（V-blind）
| html: <!-- 评论容器 --> <h5 class='title'>热门留言</h5> <div class='comment_list'> <dl v-for="item in hotComments"> <!—评论数组--> <dt><img :src="item.user.avatarUrl" alt="" /></dt> <!—用户头像--> <dd class="name">{ {item.user.nickname}}</dd> <!—用户昵称--> <dd class="detail">{ {item.content}}</dd> <!—评内容--> </dl> </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 src="./js/main.js "></script> |
| /* 4.热门评论获取 请求地址:https://autumnfish.cn/comment/hot?type=0 请求方法:get 请求参数:id(歌曲id,地址中的type固定为0) 响应内容:歌曲的热门评论 */
./js/main.js: 在播放函数里增加评论逻辑代码（红色部分），点击播放同时显示评论
<script> var app = new Vue({ el: "#player", data: { query: "", // 查询关键字 musicList: [], // 歌曲数组 musicCover: "", // 歌曲封面 musicUrl: "", // 歌曲地址 hotComments: [], // 歌曲评论
}, methods: { // 歌曲播放 playMusic: function(musicId) { var that = this; // 获取歌曲地址 axios.get("https://autumnfish.cn/song/url?id=" + musicId).then( function(response) { that.musicUrl = response.data.data[0].url; }, function(err) {} );
// 歌曲详情获取 axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then( function(response) { // console.log(response); // console.log(response.data.songs[0].al.picUrl); that.musicCover = response.data.songs[0].al.picUrl; }, function(err) {} );
// 歌曲评论获取 axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then( function(response) { that.hotComments = response.data.hotComments; }, function(err) {} ); }); </script> |
综合应用-播放动画
播放的时候让中间碟片动起来，暂停的时候停止。
实现原理：在中间碟片div属性里，播放比暂停是增加了一个名为playing的class，播放和暂时是两个事件，在对应事件里去增删class.
1、音乐播放事件（V-on play）
2、音乐暂停事件（V-on pause）
3、操纵增删类名（V-blind 对象）
| html: <!-- 评论容器 --> <div class="audio_con"> <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" ></audio> </div> ---------------------- <!-- 歌曲信息容器 --> <div class="player_con" :class="{playing:isPlay}"> <！-- v-blind 设置元素属性，v-blind:属性名=表达式，简写为：属性名=表达式--> <img src="images/player_bar.png" class="play_bar" /> <!-- 黑胶碟片 --> <img src="images/disc.png" class="disc autoRotate" /> <img :src="musicCover " class="cover autoRotate" /> </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 src="./js/main.js "></script> |
|
./js/main.js: data里增加isPlaying属性（红色部分），播放或暂停事件控制属性状态。 进而配合v-blind 控制是否增加class <script> var app = new Vue({ el: "#player", data: { query: "", // 查询关键字 musicList: [], // 歌曲数组 musicCover: "", // 歌曲封面 musicUrl: "", // 歌曲地址 hotComments: [], // 歌曲评论 isPlaying: false, // 动画播放状态 }, methods: { // 歌曲播放 play: function() { this.isPlaying = true; }, // 歌曲暂停 pause: function() { this.isPlaying = false; }, }); </script> |
综合应用-播放MV
点击MV的时候让,在原有播放器的区域内弹出一个遮罩层，该层播放mv。
继续点击任意区域，遮罩消失。
实现原理：
遮罩层的显示与消失，由div中style属性存在与否控制。
播放mv部分是<video>标签，设置去src的地址即可。
1、MV图标显示（V-if ）
2、MV地址获（axios接口 ，传入mvid）
3、遮罩层（V-show,V-on）
4、MV地址设置（V-bind）
| html: <ul class="song_list"> <li v-for="item in musicList"> <b>{ {item.name}}</b> <span> <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i> <!-- v-if 控制mv图标是否显示，@click绑定事件：弹出遮罩，设置播放地址 --> </span> </li> </ul> ---------------------- <div class="video_con" v-show="showVideo"> <!-- v-show控制mv图标是否显示 --> <video ref='video' :src="mvUrl" controls="controls"></video> <div class="mask" @click="closeMv"></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 src="./js/main.js "></script> |
|
./js/main.js: data里增加mv播放区域div的显示状态属性和mv地址（红色部分），MV按钮点击事件控制；遮罩div点击事件控制遮罩层显示（关闭） <script> var app = new Vue({ el: "#player", data: { query: "", // 查询关键字 musicList: [], // 歌曲数组 musicCover: "", // 歌曲封面 musicUrl: "", // 歌曲地址 hotComments: [], // 歌曲评论 isPlaying: false, // 动画播放状态 isShow: false, // 遮罩层的显示状态 mvUrl: "" // mv地址 }, methods: { // 播放mv playMV: function(mvid) { var that = this; axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then( function(response) { that.isShow = true; that.mvUrl = response.data.data.url; }, function(err) {} ); }, // 隐藏 hide: function() { this.isShow = false; } } }); </script> |
疑问：
遮罩层隐藏不显示，MV是都在后台仍然播放？
小结：
当前端页面复杂，通过审查元素的方法，快速定位相关元素。
教程 | 笔记 | 完整代码 ：https://gitee.com/ikunsdc/vue-quick-start
视频：https://www.bilibili.com/video/BV12J411m7MG?from=search&seid=488807520486206024
笔记：https://gitee.com/ikunsdc/vue-quick-start/blob/master/VUE%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.pdf