Vue技術棧開發SPA版QQ音樂

時間 2019-12-04

標籤 vue 技術開發 spa 音樂欄目騰訊简体版

原文原文鏈接

QQ音樂webapp是基於 vue2，vuex，vue-router，axios和flexible box佈局與及css3的transform，animation，transition開發。實現了歌曲搜索、歌詞檢索、歌曲播放等功能。項目利用QQ音樂線上真實接口，在數據接口跨域請求中使用了NodeJS的express作請求轉發。css

運行效果

開發目錄

開發目錄是經過vue-cli腳手架生成的，其中webpack構建工具是3.10版本，下面是開發目錄的結構，其中紅色標註是比較主要的文件，其餘都是腳手架自動生成的，vuejs開發邏輯與及思路主要放在src目錄進行講解:前端

├─main.js(程序入口)
├─App.js(掛載頂層組件)
├─common
│    ├─musicOperate.js(音樂播放函數)
│
├─components
│    ├─AudioPane.vue(底部播放組件)
│    ├─globalList.vue
│    ├─history.vue(搜索記錄列表)
│    ├─index.vue(推薦音樂卡片列表)
│    ├─indexlist.vue(推薦音樂列表)
│    ├─List.vue(音樂詳情頁播放列表)
│    ├─loading.vue(加載組件)
│    ├─MusicDetail.vue(音樂詳情組件)
│    ├─my-footer.vue(footer)
│    ├─my-header.vue(頭部)
│    ├─Search.vue(搜索組件)
│    ├─toplist.vue
│
├─router
│    ├─index.js(路由文件)
│
└─store
     ├─store.js(vuex全局store)

複製代碼

src目錄結構以下所示，common是公用組件或函數文件夾components主要放置開發的組件，router是vue-router的路由文件，store是vuex狀態管理器文件夾，asset是腳手架生成的靜態文件夾。vuejs開發單頁面應用，採起的單一入口文件main.js(其中掛載須要在根組件掛載的資源)，App.vue是默認的根組件。vue

入口文件`main.js`分析

main.js入口文件引入了vue-router路由，axios的http請求模塊，vuex全局狀態管理，vue-awesome-swiper輪播組件，fastclick(避免移動端點擊延遲300ms的效果)以及vue-lazyload懶加載模塊。react

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import Vuex from 'vuex'
import store from './store/store.js'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueLazyload from 'vue-lazyload'
import FastClick from 'fastclick'
FastClick.attach(document.body)
Vue.use(Vuex)
Vue.use(VueAwesomeSwiper)
Vue.use(VueLazyload,{
  preLoad:1.3,
  error:"../static/images/load.png",
  loading:"../static/images/load1.png",
  attempt:1
})
Vue.config.productionTip = false
Vue.prototype.$http=axios
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})
複製代碼

項目路由定義

項目路由定義，在router/index.js文件下引入官方推薦路由類庫vue-router,對項目所使用路由進行統必定義:webpack

import Vue from 'vue'
import Router from 'vue-router'
import Index from "@/components/index"
import List from "@/components/List"
import Search from "@/components/Search"
import Toplist from "@/components/toplist"
import IndexList from '@/components/indexlist'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path:'/',
      redirect:'/recomment'
    },
    {
      path: '/recomment',
      name: 'Index',
      component: Index
    },{
      path: '/list',
      name: 'List',
      component: List
    },{
      path: '/search',
      name: 'Search',
      component: Search
    },{
      path:"/toplist",
      component:Toplist
    },{
      path:'/indexlist',
      component:IndexList
    },{
      path:"*",
      redirect:"/recomment"
    }]
})

複製代碼

全局數據管理`store`

在今天開發前端SPA時，不必定須要使用到全局數據管理.vuex相似於react中的redux,採起的都是flux單向數據流的思想。記得redux項目的做者說過,若是你不知道你是否須要redux，那你確定是不須要。在這個單頁SPA項目中，須要在多個不一樣層級的組件中，共享播放列表數據。因此這裏使用vuex保存音樂播放列表簡直是游魚得水，利用數組模擬隊列進行播放歌曲的保存，搜索歷史的保存等關鍵邏輯。ios

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex.Store({
  //定義狀態
  state:{
    toggle:false,
    songPlayList:[{
      mid:'4962990',
      singerAvartar:"https://y.gtimg.cn/music/photo_new/T006R300x300M00000333So02drvak.jpg?max_age=2592000",
      songName:"七里香",
      singer:"周杰倫",
      songSrc:"http://dl.stream.qqmusic.qq.com/C400002ZKnKQ34rbZu.m4a?guid=957707267&vkey=A31FA931F2D4AE48FC9262A169955162673D2882402CF3D4E5FE40F32CD0035C97A18C3BEEA3AE0864D62ED9A8E0DDDC0853D532C1B055AB&uin=&fromtag=999"
    }],
    prevPlayList:[],
    searchHistory:[],
    Mkey:"guid=957707267&vkey=5C23405C26338354E28E61E4679EFE31BCE634C3BC1F4141131DA3C42E45F9C2F20CEA658F41B279C328AA7EB7219CB2B889FCC73918580D&uin=&fromtag=999"
  },
  mutations:{
    //加入搜索歷史記錄
    addSearchWord(state,word){
      state.searchHistory.push(word);
    },
    //清除搜索記錄
    clearHistory(state){
      for(var i=0;i<state.searchHistory.length;i++){
        state.searchHistory.pop();
      }
    },
    //顯示音樂詳情
    changeTog(state,toggle){
      state.toggle=toggle;
    },
    //播放下一首歌曲
    nextSong(state,num){
      var prevSong=state.songPlayList.shift();
      state.prevPlayList.push(prevSong);
    },
    //播放上一首歌曲
    prevSong(state,num){
      var stackTop=state.prevPlayList.pop();
      state.songPlayList.unshift(stackTop);
    },
    changeList(state,index){
      var song=state.songPlayList.splice(index,1);
      state.songPlayList.unshift(song[0]);
    },
    //添加歌曲
    addSong(state,data){
      for(var i=0;i<data.length;i++){
        var singleSong={
          singerAvartar:data[i].singerAvartar,
          songName:data[i].title,
          singer:data[i].singer,
          songSrc:data[i].songSrc,
          mid:data[i].mid
        };
        state.songPlayList.push(singleSong);
      }
    }
  }
})
export default store
複製代碼

`App.vue`根組件

App.vue組件是整個項目的根目錄組件，在這裏掛載其餘全部的組件。Mheader是QQ音樂的導航部分，包括tab部分和狀態欄部分。router-view是將點擊tab單項匹配到路由組件加載到這塊內容。而musicDetail組件是能夠查看音樂詳情的組件，採用在App.vue根組件掛載是爲了其餘加載跳轉操做不至於中斷音樂的播放。audio就是音樂控制面板，當音樂詳情關閉，則就以小化的面板控制音樂。css3

<template>
  <div id="app">
    <Mheader></Mheader>//頭部
    <router-view></router-view>//動態加載路由匹配的內容將生成這裏
    <musicDetail></musicDetail>//爲保證整個項目運行過程當中，音樂播放器能夠不中斷，把他掛載在App.vue
    <audioPane></audioPane>
    <audio id="play"  :src="songPlayList[0].songSrc" @ended="nextSong" @error="nextSong" preload="auto"></audio>//播放器audio
  </div>
</template>
<script type="text/ecmascript-6">
import Mheader from '@/components/my-header';
import audioPane from'@/components/AudioPane';
import musicDetail from '@/components/MusicDetail'
export default {
  components: {
      Mheader,
      audioPane,
      musicDetail,
    },
    methods: {
      nextSong(){

        if(this.$store.state.songPlayList){
          this.$store.commit("nextSong",1);
          var audio=document.getElementById('play');
          audio.addEventListener("canplaythrough", function(){
              audio.play();
          },false);
          if(!this.toggle){
            var state=!this.toggle;
            this.$store.commit('changeTog',state);
          }

        }else{
          console.log("not found this song");
        }

      }
    },
  computed:{
    songPlayList(){
      return this.$store.state.songPlayList;
    }
  },
  mounted() {
    //
     this.$http.get("http://localhost:3000/songList").then((response)=>{
       var data=response.data.cdlist[0].songlist;
       this.$store.commit('addSong',data);
    }).catch((e)=>{
       console.log(e);
    });
  }
}
</script>

<style scoped>
body{
  margin:0;
  overflow: hidden !important;
}
</style>
複製代碼

歌詞數據解析

整個單頁應用，比較難的部分是獲取QQ音樂相應歌曲的歌詞部分。這一部分是經過express獲取線上真實歌詞接口數據。返回的數據須要在前端頁面進行處理。這一部分能夠在musicDetail中獲取，代碼以下:git

lyric() {
      let globalArr = [];
      this.$http
        .get("http://localhost:3000/lyrics?id=" + this.songPlayList[0].mid)
        .then(response => {
          let lyric = response.data.lyric;
          let tmpLyric = this.formatLyric(lyric);
          let Arr = tmpLyric.split("\n");
          for (let i = 0; i < Arr.length; i++) {
            let row = Arr[i].split("]");
            let obj = {};
            if (row[2]) {
              let time = row[1].split("[")[1];
              let second = Math.floor(time.split(":")[1]);
              let minute = parseInt(time.split(":")[0]);
              time = minute * 60 + second;
              obj[time] = row[2];
              globalArr.push(obj);
            } else if (!row[1]) {
              continue;
            } else {
              let time = row[0].split("[")[1];
              let second = Math.floor(time.split(":")[1]);
              let minute = parseInt(time.split(":")[0]);
              time = second + minute * 60;
              obj[time] = row[1];
              globalArr.push(obj);
            }
          }
        })
        .catch(e => {
          console.log(e);
        });
      this.downloaded = true;
      return globalArr;
    }
複製代碼

開發思路

在App.vue掛載tab主要路由，經過<router-view>動態加載其餘的組件，而musicDetail組件則內嵌在/recomment路由裏面；list組件和toplist組件則以動態路由的防水進行加載以後，經過絕對定位的方式，定位在當前路由組件之上(經過z-index)完成。若是不想組件直接加載在App.vue的路由匹配區域，能夠經過當前路由的子路由方式進行組件的加載。github