基于Vue全家桶的网络音乐播放器

一个基于Vue全家桶(Vue,Vue-router,Vuex)开发的单页面音乐应用，在学习H5和JavaScript的最开始的时候就想做一个音乐播放器，现在终于实现了当初的想法。虽然这个播放器目前的功能还较为简单，可能存在一些兼容性问题，但是我有时间的话会继续完善这个项目。欢迎喜欢的朋友star、follow，十分感谢

在这里主要是记录一下自己开发过程中遇到的坑和新学习到的东西，相对于这次的实践做一个总结。

预览地址(请使用手机访问或在Chrome开发者手机模式下预览)

因为项目是放在自己的腾讯云服务器上的，所以有可能打开速度比较慢，请见谅。

感谢由 https://github.com/Binaryify/NeteaseCloudMusicApi 所提供的Node.js版网易云音乐API

项目预览

首页

首页(1)

歌单

专辑

播放界面+歌曲列表

搜索列表_歌曲

搜索列表_专辑

搜索列表_歌单

1.关于技术栈的选择

这个项目的依赖模块

 "dependencies": {
 "axios": "^0.16.2",
 "material-design-icons": "^3.0.1",
 "muse-ui": "^2.1.0",
 "stylus": "^0.54.5",
 "stylus-loader": "^3.0.1",
 "vue": "^2.3.3",
 "vue-awesome-swiper": "^2.5.4",
 "vue-router": "^2.3.1",
 "vuex": "^2.3.1"
 }

Vue + Vue-router + Vuex（Vue全家桶）
axios（网络请求）
muse-ui（一个Vue的material design 组件库）
stylus（css预处理器）
后端是采用了由 https://github.com/Binaryify/NeteaseCloudMusicApi 所提供的Node.js版网易云音乐API，可以非常方便的获取到数据

2.应用分析

因为是开发一个网络播放器，所以基本的流程是：首页 => 歌单|专辑|排行榜（未完成）|搜索 => 歌曲播放 => 播放界面以及播放列表。基于这样的流程，我将整个应用拆分成了几个小模块：首页、排行榜、搜索、歌单、专辑、搜索列表、正在播放。这样让整个应用的逻辑更加清晰，在后期需要调整或者查错的时候也更加方便一些。

3.关于正在播放部分

先看一下效果图

正在播放效果图

可以看到，正在播放这一组件实际上是由底部的工具栏、播放列表和弹出的专辑页面组成。实际上目前这个组件的逻辑非常简单：把目前的播放列表和当前播放的索引储存在stroe里面，然后再创建这个组件时获取信息。每次播放歌曲时将提取出来的需要的信息储存在store里面，而musicTray（正在播放组件）中所绑定的相关信息也会实时更新。在每次播放新歌曲时创建一个新的audio对象，然后将旧的audio对象删除，之后再将新创建的audio对象储存在store里面，这样可以保证在切换页面时播放不会中断。

4.关于搜索

在搜索页面发起搜索请求后将用户填写的搜索信息储存至store中，然后在搜索列表页面每次creat的同时获取该信息并发起请求。在每次创建时请求的只包括歌曲列表，专辑、歌单、歌手（未完成）等在每次点击顶部tab时再根据用户的需求获取相关数据，这样可以减少单次数据量，提高用户的试用体验。具体的代码为：

 handleTabChange(val) {
 this.activeTab = val
 if (val === 'songLists') {
 if (this.songLists.length === 0) {
 this.$store.commit('isLoading')
 this.$http.get(api.search(this._searchName, val, this.offset)).then(response => {
 this.songLists = response.data.result.playlists
 this.$store.commit('isLoading')
 })
 }
 }
 }
 

5.关于加载时的动画

我采用的方案是创建了一个loading组件，然后将他的容器的宽高定为屏幕的大小，容器中播放css3动画，用一个变量控制loading组件的显示（v-if="isLoading"），将这个变量存储在store中，以确保每次改变后在不同的组件中都能够获取到正确的变量。将loading组件在APP.vue中引入，之后再通关控制store中的isLoading变量去控制loading组件的显示。

6.关于项目的搭建（node.js服务端的布置）

因为这个应用需要自己使用node搭建服务端，所以没办法使用GitHub pages，正好自己有一个腾讯云学生服务器，所以想把服务端布置在腾讯云的服务器上。但是自己的博客又布置在这个服务器上，服务器是使用apache作为服务端，刚开始直接在服务器上安装node.js然后将应用上传至服务器，发现无法运行。经过搜索之后发现要在 Apache 的配置文件中，打开 mod_proxy 和 mod_proxy_http模块并将node升级至最新稳定版，才能够正常运行node.js应用。