删除无用文件

README.md

@@ -6,7 +6,7 @@ A vue mobile music project
 
 `npm install`
 
-## 启动后台API服务
+## 启动后台 API 服务
 
 `npm run server`
 
@@ -20,7 +20,48 @@ A vue mobile music project
 
 ## 项目部署
 
-`sh deploy.sh`
+`npm run deploy`
+
+> 修改 deploy.sh 文件 中的部署命令
+> scp -r server/\* 你的服务器用户名@你的服务器公网 IP:服务器项目存放目录
+
+## 实现功能
+
+- [x] 歌手
+
+  - [x] 歌曲
+  - [x] 专辑
+  - [x] MV
+
+* [x] 歌单
+  - [x] 全部分类
+  - [x] 歌单列表
+  - [x] 歌单详情
+* [x] 视频
+  - [x] 视频播放
+  - [x] 分类选择
+* [x] 搜索
+  - [x] 热门搜索
+  - [x] 搜索历史
+  - [x] 分页加载
+* [x] 播放器
+  - [x] 吸底播放
+  - [x] 全屏播放
+  - [x] 进度条
+  - [x] 上一首
+  - [x] 下一首
+  - [x] 播放/暂停
+  - [x] 播放模式
+  - [ ] 收藏
+  - [x] 音质选择
+  - [x] 音量控制
+  - [x] 歌词展示
+
+## 使用技术栈
+
+`vue + vuex + vue-router` 
+`express 搭建服务端 API`
+`vue + vuex + vue-router`
 
 ## 页面截图
 

package.json

@@ -16,7 +16,7 @@
     "unit": "jest --config test/unit/jest.conf.js --coverage",
     "test": "npm run unit",
     "build": "node build/build.js",
-    "deploy":"sh deploy.sh"
+    "deploy": "sh deploy.sh"
   },
   "transformModules": {
     "cube-ui": {
@@ -44,7 +44,6 @@
     "v-tap": "^3.0.3",
     "vue": "^2.5.2",
     "vue-lazyload": "^1.2.6",
-    "vue-nprogress": "^0.1.5",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1",
     "vue-touch": "^2.0.0-beta.4",

server/controller/musicPlayData.js

@@ -41,14 +41,14 @@ exports.getMusicPlayData = function(req, res) {
     function(error, response, body) {
       if (!error && response.statusCode == 200) {
         res.send(body)
-        // console.log(body)
+         
       }
     }
   )
 }
-// exports.getMusicPlayData()
+
 exports.getLyric = function(req, res) {
-  // body...
+   
 
   var musicid = req.query.musicid
   var options = {
@@ -101,7 +101,7 @@ exports.getSongPlayUrl = songmid => {
         headers: {
           referer: 'http://u.y.qq.com',
         },
-        // body: songParams
+
         body: JSON.stringify(songParams),
       },
       function(error, response, body) {

server/controller/mv.js

@@ -81,7 +81,7 @@ exports.getHotMvList = function(req, res) {
 
 exports.getMvTagList = function(req, res) {
   const query = req.query
-  // query = qs.stringify(query)
+   
   let data = {
     comm: { ct: 24 },
     mv_tag: {

server/package.json

@@ -10,12 +10,6 @@
   "scripts": {
     "start": "pm2 start index.js --name='vue-music'"
   },
-  "transformModules": {
-    "cube-ui": {
-      "transform": "cube-ui/src/modules/${member}",
-      "kebabCase": true
-    }
-  },
   "dependencies": {
     "compression": "^1.7.4",
     "connect-history-api-fallback": "^1.6.0",

server/router.js

@@ -25,7 +25,7 @@ router.get('/getMusicPlayData', musicPlayDataCb.getMusicPlayData)
 router.get('/getLyric', musicPlayDataCb.getLyric)
 
 router.get('/getAlbumSongList', singerCallback.getAlbumSongList)
-// router.get('/getBLyric', musicPlayDataCb.getBLyric)
+ 
 // 获取搜索热词
 router.get('/getHotKey', searchCb.getHotKey)
 router.get('/getSongSearchResult', searchCb.getSongSearchResult)

src/App.vue

@@ -1,12 +1,20 @@
-
 <template>
   <div @click.once="initPlay" id="app" style>
     <div class="page">
-      <nav-bar class="home-navbar" :navList="navList" namePrefix="home" ref="navbar"></nav-bar>
-      <!-- <cube-loading class="loadingIcon" v-if="!pageLoaded"></cube-loading> -->
+      <nav-bar
+        class="home-navbar"
+        :navList="navList"
+        namePrefix="home"
+        ref="navbar"
+      ></nav-bar>
+
       <transition :name="transitionName">
         <keep-alive max="1">
-          <router-view :style="zIndex" :key="$route.query.id" :class="[{fullScreenFixed},pageCls]" />
+          <router-view
+            :style="zIndex"
+            :key="$route.query.id"
+            :class="[{ fullScreenFixed }, pageCls]"
+          />
         </keep-alive>
       </transition>
     </div>
@@ -17,116 +25,110 @@
   </div>
 </template>
 <script>
-import SongPlayer from '@/pages/songPlayer'
+import SongPlayer from "@/pages/songPlayer";
 export default {
   data() {
     return {
-      transitionName: '',
+      transitionName: "",
       navbarHeight: 0,
       duration: 400,
       navList: [
         {
-          label: '歌手',
-          name: 'singer'
+          label: "歌手",
+          name: "singer"
           // link: '/singer'
         },
         {
-          label: '歌单',
-          name: 'songSheet'
+          label: "歌单",
+          name: "songSheet"
           // link: '/songSheet'
         },
         {
-          label: '视频',
-          name: 'mv',
-          link: '/mv'
+          label: "视频",
+          name: "mv",
+          link: "/mv"
         },
         {
-          label: '搜索',
-          name: 'search',
-          link: '/search'
+          label: "搜索",
+          name: "search",
+          link: "/search"
         }
       ]
-    }
+    };
   },
   computed: {
     zIndex() {
       return this.$route.name
         ? {
             zIndex: this.$route.matched[0].meta.index
           }
-        : {}
+        : {};
     },
     pageCls() {
-      return this.$route.name ? this.$route.matched[0].name + '-page' : ''
+      return this.$route.name ? this.$route.matched[0].name + "-page" : "";
     },
     fullScreenFixed() {
-      // console.log(this.$route);
-      var matchRoutes = this.$route.matched
-      return matchRoutes[0] && matchRoutes[0].meta.fullScreenFixed
+      var matchRoutes = this.$route.matched;
+      return matchRoutes[0] && matchRoutes[0].meta.fullScreenFixed;
     }
   },
   watch: {
     $route: function(to, from) {
       if (!to.name || !from.name) {
-        return
+        return;
       }
-      this.oldRoute = from
-      // ('route changed');
-      this.setTransitionName(to, from)
+      this.oldRoute = from;
+      this.setTransitionName(to, from);
     }
   },
   components: { SongPlayer },
   methods: {
     enter(el, done) {
-      // console.log('enter', this.$route);
-      el.style.zIndex = this.$route.matched[0].meta.index
-      setTimeout(done, this.duration)
+      el.style.zIndex = this.$route.matched[0].meta.index;
+      setTimeout(done, this.duration);
     },
     afterEnter(el) {
-      el.style.removeProperty('z-index')
-      // console.log('afterEnter');
+      el.style.removeProperty("z-index");
     },
     leave(el, done) {
-      // console.log('leave', this.$route);
-      el.style.zIndex = this.oldRoute.matched[0].meta.index
+      el.style.zIndex = this.oldRoute.matched[0].meta.index;
 
-      setTimeout(done, this.duration)
+      setTimeout(done, this.duration);
     },
     afterLeave(el) {
-      // console.log('after-leave');
-      el.style.removeProperty('z-index')
+      el.style.removeProperty("z-index");
     },
     setTransitionName(to, from) {
-      to = to.matched[0]
-      from = from.matched[0]
+      to = to.matched[0];
+      from = from.matched[0];
 
-      const fromIndex = from.meta.index
-      const toIndex = to.meta.index
+      const fromIndex = from.meta.index;
+      const toIndex = to.meta.index;
       if (toIndex < fromIndex) {
-        this.transitionName = 'prev'
+        this.transitionName = "prev";
         if (fromIndex >= 4) {
-          this.transitionName = 'back'
+          this.transitionName = "back";
         }
       } else {
-        this.transitionName = 'next'
+        this.transitionName = "next";
         if (!to.meta.isHome) {
-          this.transitionName = 'forward'
+          this.transitionName = "forward";
         }
       }
     },
     initPlay() {
-      $('audio')[0]
+      $("audio")[0]
         .play()
         .catch(err => {
-          console.error(err)
-        })
+          console.error(err);
+        });
     }
   }
-}
+};
 </script>
 <style scoped lang="less">
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
@@ -136,7 +138,6 @@ export default {
     position: fixed;
     width: 100vw;
     top: 0;
-    // overflow-y: auto;
   }
 
   .home-navbar {
@@ -175,11 +176,6 @@ export default {
   transform: translate3d(-100vw, 0, 0);
 }
 
-.next-enter-to,
-.prev-leave {
-  // transform: translate3d(0, 0, 0)
-}
-
 .back-enter,
 .forward-leave-to {
   transform: translate3d(-20vw, 0, 0);

src/components/musicList.vue

@@ -73,7 +73,7 @@ export default {
   border-radius: 3px;
 
   .sortIndex {
-    // width: 20px;
+    
     margin-right: 10px;
 
     &.newLoad {
@@ -99,15 +99,13 @@ export default {
 
     .text-singer {
       width: 50%;
-      // margin-left: auto;
+       
       text-align: right;
-      // padding-right: 5px;
+       
 
       min-width: 0;
 
-      .singer {
-        // color: #ccc;
-      }
+       
     }
   }
 }