Vuejs2.0開發仿QQ音樂webpp案例分析
仿QQ音樂webapp是基於Vue2.0，vuex，vue-router，axios和html5的flexible box佈局與及css3的transform，animation，transition組成。Vuejs是一套MVVM框架，主要注重於view層，實現資料雙向繫結與及虛擬DOM，解放你的雙手，讓你不用直接和真實的DOM進行操作，只要資料改變，vue自動檢查DOM結構不同，更新DOM元素結構。其中開發過程之中就遇到手動操作DOM，然後在樣式表之中書寫的樣式無法發揮作用，所以使用Vuejs構建SPA單頁應用的時候應該避免顯式地去操作DOM結構。
-
執行效果如下所示，專案已經基本全部接上了QQ音樂的線上介面，利用Nodejs的express框架做http中間代理轉發前端請求，從而解決前端跨域事件。
1.gif
2.gif
- 開發目錄是通過vue-cli腳手架生成的，其中webpack構建工具是3.10版本，下面是開發目錄的結構，其中紅色標註是比較主要的檔案，其他都是腳手架自動生成的，vuejs開發邏輯與及思路主要放在src目錄進行講解:
-
folderStruct.jpg
-
-
src目錄結構如下所示，common是自定義邏輯檔案，components主要放置開發的元件，router是vue-router定義的檔案，store是vuex狀態管理器的定義資料夾，asset是腳手架生成的靜態資料夾。vuejs開發單頁面應用，採取的單一入口檔案main.js(其中掛載需要在根元件掛載的資源)，App.vue是預設的根元件：
src.jpg
- main.js入口檔案程式碼如下所示，在入口檔案引入了vue-router路由，axios的http請求模組，vuex全域性狀態管理，vue-awesome-swiper輪播元件，fastclick(避免移動端點選延遲300ms的效果)以及vue-lazyload懶載入模組。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 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 /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
- vue-router引入頁面路由，對頁面元件進行導航，其中其他引入大多是自定義的頁面元件:
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"
}]
})
- 關於vuex全域性儲存各個元件需要共享的資料與及改變資料的邏輯，全部儲存在store.js裡面，這是關鍵檔案。包括利用陣列模擬佇列進行播放歌曲的儲存，搜尋歷史的儲存等關鍵邏輯，全部儲存在store.js裡面。
/**
* Created by Administrator on 2017/12/18 0018.
*/
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元件是整個專案的根目錄元件，在這裡掛載其他所有的元件。Mheader是QQ音樂的頭部，包括tab部分和狀態列部分。router-view是將點選tab單項匹配到路由元件載入到這塊內容。而musicDetail元件是可以檢視音樂詳情的元件，採用在App.vue根元件掛載是為了其他載入跳轉操作不至於中斷音樂的播放。audio就是音樂控制面板，當音樂詳情關閉，則就以小化的面板控制音樂。
<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() {
//do something after mounting vue instance
// 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>
-
開發所採用得思路是，在App.vue掛載tab主要路由，通過<router-view>動態載入其他的元件，而musicDetail元件則內嵌在/recomment路由裡面；list元件和toplist元件則以動態路由的防水進行載入之後，通過絕對定位的方式，定位在當前路由元件之上(通過z-index)完成。如果不想元件直接載入在App.vue的路由匹配區域，可以通過當前路由的子路由方式進行元件的載入。
-
發過程中，可以瞭解很多Vuejs學習文件之中不太瞭解的知識點，例如，使用ref避免了我們直接通過DOM進行操作。還有vuejs的transition過度元件的使用實際意義，在web開發過程之中，想display：none這樣突發性的轉換會破壞CSS3的動畫效果。所以採用官方的transition動畫可以很好解決問題。vuex全域性狀態管理器可以為我們提供一個比較方便訪問的類似database。在使用router-view進行路由匹配的時候不要在外面加<keep-alive>，這樣會自動快取資料，無法根據傳入的資料對模板自動過載；在使用vuejs的列表渲染的時候，加上Key(K大寫)可以使列表順序改變，模板會自動重新渲染，否則，不會出現改變的效果。對於音樂上的歌詞解釋感覺費力，請求的歌詞介面，返回的資料需要正則進行處理才可以真正使用在專案之中。其實比較糾結的是vuejs開發的路由載入問題，一直在想，vuejs開發單頁應用，在一個頁面裡面動態載入其他的元件頁面，會不會對頁面造成很大的負載。對專案使用fastclick模組，可以避免移動端的點選延遲300ms效果；其次就是使用vuejs的懶載入模組，懶載入圖片，提高使用者體驗，不會出現載入過程之中的空白情況。
作者：Evtion
連結：https://www.jianshu.com/p/b665f7c0d475
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。