一、背景介绍
大家好，我是谢杰，是一位自学大半年的前端爱好者，用此项目来练练手，希望能找到一份工作真正踏入前端的大门，为了目标继续努力奋斗。(以下内容纯手打，诸多不足仅供学习参考)
二、项目功能
- 登录功能
- 轮播图
- 音乐播放添加列表
- MV的播放页面
- 加载更多功能
- 用户评论功能
- 播放页面歌词滚动功能
三、登录模块
需求分析：完成用户登录。
逻辑分析：判断账号密码是否正确，把token和登陆状态储存到localStorage，使用axios完成数据请求。
效果展示图：用网易云音乐的账号密码登录，我这里只是演示登录的样式。
四、轮播图
使用说明：使用js插件swiper5版本，设置轮播自动播放autoplay: true，点击后继续轮播需要设置disableOnInteraction: false，设置slider容器同时显示的数量slidesPerView为1，设置分页器导航pagination，设置前进后退按钮navigation，样式可调。
效果展示图：
五、音乐播放添加至列表
需求分析：将点击播放的音乐或歌单加入到播放列表，并且按顺序排序显示歌名、歌手名和时长。
逻辑分析：由于vuex可以管理共享状态，所以将函数放在Actions里，Action 提交mutation方法，通过mutation来改变state，异步修改播放状态和列表，状态所有组件共享。
1、单首音乐播放：
监听单首播放按钮的点击，触发playChoiceSong方法
//添加并播放当前选择的歌曲
playChoiceSong({ commit, state }, { list }) {
commit("setPlayList", playListconcat(list, state.playList));
commit("setPlayIndex", state.playList.findIndex(ele => list[0].id === ele.id));
}
2、歌单全部播放：
点击歌单播放或添加按钮组件触发一个自定义port事件，父组件使用@port注册绑定事件函数replacePlayListAndPlay()完成替换当前列表所有音乐到播放列表并播放，addSong()完成添加音乐到播放列表。
//添加音乐到播放列表
addSong({ commit, state }, { list }) {
commit("setPlayList", playListconcat(list, state.playList));
},
//替换当前列表所有音乐到播放列表并播放
replacePlayListAndPlay({ commit }, { list }) {
commit("setPlayList", playListconcat(list, []));
commit("setPlayIndex", 0);
},
六、MV的播放页面
需求分析：播放mv。
逻辑分析：下载使用DPlayer播放器，在获取MvUrl的时候初始化DPlayer。
npm install dplayer --save
------------------------------------
this.dp = new DPlayer({
container: document.getElementById("dplayer"),
autoplay: true,
video: {
url: res.data.url
}
});
效果展示图：
七、加载更多功能
需求分析：继续请求数据。
逻辑分析：用@click.native监听LoadMoreBtn组件，点击触发loadMore方法，调用getAllMvList()方法加载MV的列表。
八、用户评论功能
效果图展示：
九、播放页面歌词滚动功能
需求分析：实现歌词跟随声音滚动，当前歌词居中显示并且改变样式。
逻辑分析：首先处理请求的歌词数据，把处理后的数据push到数组中，再把歌词渲染到页面上，用watch监听当前播放时间，条件判断如果Math.abs(currentTime - lastTime) >= 1为true，说明拖动了进度条，获取当前歌词的索引值，使用原生js方法scrollTo，跳转到当前歌词，如果是上下滚动了页面，还是会调用scrollTo方法，跳回到当前歌词，最后再监听歌曲信息是否改变，将当前歌词的索引值重置为0。
效果展示图：全屏截图的话太大了 ，截取了主要部分，拖动进度条实现当前歌词居中也没问题。
十、性能优化
用watch监听isMusicDetailShow，点击歌词展示才发送请求和渲染歌词内容，当歌词隐藏时设置一个定时器，延迟3秒后清空歌词内容，再次展示时清除上一个定时器。
let timer = null;
watch: {
isMusicDetailShow(isMusicDetailShow) {
clearTimeout(timer);
this.clean = false;
if (this.isMusicDetailShow && this.curPlayInfo.id != "") {
this.getLyric(this.curPlayInfo.id);
} else if (isMusicDetailShow == false) {
timer = setTimeout(() => {
this.clean = true;
}, 3000);
}
}
},
十一、问题总结
1、视频和歌单两个页面，用window.addEventListener监听scoll滚动触发loadmore方法，但是两个页面交替滚动会发生冲突，所以就设置成点击加载更多就行了。
2、重复点击我的音乐会出现路由重复报错，在router文件夹下的index.js添加以下代码
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};
路由重复报错解决了，但是在未登录时点击我的音乐，有时候不会跳转到登陆页面，目前还没解决，登陆一下就正常了。
