專案介紹
| 功能 | 描述 |
|---|---|
| 首頁推薦 | 首頁頂部為輪播圖下方內容區域為歌單推薦部分 |
| 歌手 | 包括各種分類歌手樂隊可以選擇 |
| 歌單詳情 | 各個歌單在點擊后進入歌單詳情頁面 |
| rank榜 | 各類排行榜 |
| 主題換膚 | 供喜歡樣式選擇 |
| 搜索 | 根據歌曲/歌手相關資訊進行搜索 |
| 歌曲播放模式 | 順序播放、單曲回圈、隨機播放 |
| 關于 | 相關版本資訊 |
專案地址
https://github.com/Mr-programming/vue_music
原專案地址
專案思路
主界面分為 recommend首頁推薦 ，singer歌手選擇，rank排行榜，搜索界面，歌單詳情，播放界面
關于路由跳轉采用路由懶加載的形式，圖片展示采用v-lazy屬性，路由跳轉完畢頁面等待加載時展示loading組件(展示一個gif動態圖)
首頁推薦
首頁推薦和歌手選擇以及rank榜模塊的整體思路類似，在created鉤子中就執行加載資源函式，再將歌單物件陣列中的各個歌單物件展示到相應位置，包括圖片名稱，
子路由模塊
這里給每一個組件(首頁推薦和歌手選擇以及rank榜)都添加子路由，在點擊對應的歌單物件后都會執行兩個函式，第一個向vuex中傳入歌單物件，第二個函式跳轉路由，子組件此時會從vuex中拿到物件同時根據歌單id請求歌曲串列
每個子路由組件中都會有一對公用的父子組件來展示歌單詳情串列，這里子路由組件只起到請求資源的作用，它會把通過歌單物件請求的歌單資訊和歌曲串列傳遞給這對父子組件，其中父組件展示歌單圖片和名字，子組件展歌曲串列
搜索模塊
關于搜索模塊，內部嵌套兩個子組件，一個是搜索框區域search-box，一個是搜索結果區域suggest，在搜索模塊本身created鉤子中加載熱門搜索關鍵字，一旦搜索區域有內容輸入關鍵字部分則會隱藏，
在search-box組件中會系結自定義事件 ，該組件會監聽輸入內容然后觸發自定義事件，從而父組件搜索模塊會拿到輸入結果，這里觸發自定義函式外包裹了節流函式，防止監聽到輸入一個字符就立馬觸發自定義事件函式
在搜索模塊拿到搜索區域的內容時 會把這個字串傳遞給suggest去請求搜索結果并展示
播放模塊
關于播放歌曲組件player ，可以控制是否全屏(默認為全屏)，在通過歌單詳情串列點擊某個歌曲時，會把這個歌曲串列和被點擊歌曲的索引值傳到vuex中，歌曲串列傳到順序串列和播放串列(順序串列是原封不動的傳遞，播放串列會根據當前已選擇的播放模式來判斷是否洗牌)，player組件是根據播放串列中是否有內容來展示的，播放器播放的歌曲是通過mapGetters拿到當前播放串列陣列中指定索引的歌曲物件，在搜索歌曲中 點歌曲會往播放串列和順序串列中插隊，索引重新指向當前點擊歌曲，
當前播放串列
在播放組件全屏時候可以展示當前播放串列，每一個歌曲都可以從播放串列洗掉
關于切換歌曲
關于切換歌曲，切換歌曲只需改變播放串列索引值即可，
關于切換模式
關于切換模式，切換模式有三種：0(順序播放)、1(單曲回圈)、2(隨機播放) ，在點擊順序播放時會把原本的順序串列賦給播放串列(當前播放歌曲索引要重新搜索確保，確保當前播放的歌曲是不變的)，隨機播放是把當前播放串列洗牌，后續同上，
關于主題換膚
關于主題換膚theme：同樣是0,1,2三種 默認為0，在選擇之后所有相關頁面都會改變顏色(通過vuex)
vuex 中的state
const state = {
theme: 0, //主題顏色 默認值為0
disc: {}, //歌單物件
singer: {}, //歌手物件(和歌單物件類似)
rank: {}, //榜單物件(同上)
sequenceList: [], //順序串列
playList: [], //當前播放串列
mode: 0, //播放模式(默認0順序播放 1單曲 2隨機)
playing: false, //播放狀態
fullScreen: false, //是否全屏
currentIndex: -1, //當前播放歌曲的索引,
}
export default state;
App根組件的模板
<template>
<div >
<div class="App_Top">
<Mhead/>
<Tab/>
</div>
<div class="AppContent">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
<div class="bottom">
<player/>
</div>
</div>
</template>
洗牌函式
//洗牌函式的輔助函式
function getRandomInt(min, max) {
//floor為向下取整
return Math.floor(Math.random() * (max - min + 1) + min);
}
//洗牌函式,打亂歌曲順序
export function shuffle(arr) {
let _arr = arr.slice();
//保留arr,制作一個副本
for (let i = 0; i < _arr.length; i++) {
let j = getRandomInt(0, i);
let temp = _arr[i];
_arr[i] = _arr[j];
_arr[j] = temp;
}
return _arr;
}
節流函式
//截流函式 防止輸入一個字符就去請求
export function debounce(func, delay) {
let timer;
return function(...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/300773.html
標籤：其他
上一篇：length ？length() ？ 小可愛分不清楚
下一篇：一杯茶的時間，搞定BEM命名規范