專案發現模組

先在原有的基礎上新建幾個vue專案,views中一個listView,components中listViewTop.vue和playList.vue

這裡的listView算是listViewTop和playList 的父級

歌單詳情頁面的實現效果和之前的大同小異

仍然是在router/index.js中配置一個獲取資料的函式:

然後在父檔案listView中引用函式和兩個子檔案

使用setup函式組合api:

這一步和前面的做法相似,不過多贅述

後面各個元件頁面效果的實現就只需要props獲得父元件的資料然後渲染到頁面的指定位置並進行排版即可

我們在子元件中獲取了父元件中的playlist,所以在排版頁面上只需要去觀察playlist中的各項資料,選擇合適的資料名稱渲染即可

歌單詳情模組 

元件之間共享的資料,都要使用的資料放到狀態管理庫store中

資料存放在store資料夾下的index.js中

在state中建立一個playlist音樂播放列表,預設播放playCurrentIndex:0下標為0(第一條資料)

在mutations中定義一個函式來修改state中的playlist音樂播放列表資料

下面要將預設的歌曲列表改成當前歌單的歌曲列表

要在listView中執行這個修改函式

當listView獲取到歌單的資料時,觸發這個修改函式,將預設歌單的資料修改為當前歌單的資料

全域性音樂播放元件

定義一個show=false(意為預設不顯示),給playMusci元件繫結這個v-show=show,在歌曲小圓標頭像上繫結click=show=!show實現點選歌曲圖示顯示playMusic元件

已經可以點擊出來playMusic,現在定義一個返回按鈕

實現思路:

定義一個自定義函式back:show=!show,然後在playMusic頁面中觸發這個自定義函式

在返回按鈕上@click=”$emit(‘back’)”觸發back自定義函式並執行

將父元件中的歌曲詳情資料,暫停播放按鈕,暫停播放函式等傳輸到子元件中,使用props接受

<div class="bg" :style="{backgroundImage:`url(${playDetail.al.picUrl})`}"></div>

加上背景圖

加上底部的六個按鈕,並給播放和暫停按鈕呼叫play和paused函式

歌曲詳情模組

獲取歌詞:

歌詞是元件之間共享的資料

在store/index.js中定義

在state中定義一個lyric:””空來接收當前播放歌曲的歌詞

在mutations中定義一個新的函式setLyric來修改歌詞的資料

在actions中定義一個reqLyric獲取歌詞的函式

由於用到了await非同步處理,所以加上了async,這裡的let就是獲取到的歌詞資料

獲取歌詞函式的呼叫應在playController中的mounted生命週期函式中呼叫.

由於是非同步actions中的方法,所以這裡使用ispatch觸發

淺淺截個圖來直接說明兩者的不同 以及觸發方式

這時我們的當前歌曲的歌詞已經儲存在了state.lyric中,直接在前端歌詞頁面引入即可

<p>{{$store.state.lyric}}</p>

一個動態class繫結

播放時                                       暫停時

這時通過一個動態class的繫結,在css中修改transform樣式達到動畫效果

使用一個:class=”active=!paused”,在css中定義active的transform樣式

Paused就是之前寫好的播放與暫停的判斷函式

實現點選按鈕切換上一首和下一首

在按鈕頁面定義一個goplay(num)函式,在兩個按鈕上新增click事件並呼叫這個goplay,上一首是goplay(-1),下一首是goplay(+1)

然後從store中獲取當前播放歌曲列表playlist與播放歌曲下標playCurrentIndex

記得import mapState from vuex

然後在methods函式中

Let index=this.playCurrentIndex+num,index就會獲取當前播放歌曲下標playCurrentIndex上一首(-1)或下一首(+1)的下標,使用commit將index的值傳到setPlayIndex函式中來修改當前播放音樂下標.

單是這樣還不夠

,我們還需要一個if判斷,當歌曲下標為第一首時點選上一首會切換到當前列表的最後一首,反之同理:

這樣歌曲就能在當前列表中上下點選切換了

歌曲搜尋模組

在view中新建一個Search.vue並引入

1、封裝搜尋歌曲的api    /search?keywords=

2、給input新增鍵盤按下事件   @keydown.enter="searchSong"

3、編寫searchSong函式，傳送ajax請求，傳遞引數searchKeyword

4、接收ajax返回的歌曲列表，將它v-for迴圈渲染到頁面上

使用者登入驗證與登入狀態維持

使用者登入頁面和個人中心頁面

在store/index.js中新增一個判斷是否登陸的條件

在router/index.js中引入store,然後在router中對store中的資料進行判斷

個人中心模組以及退出登入

獲取登入使用者資訊

1、封裝獲取使用者詳情的api介面

2、呼叫獲取使用者詳情介面，接收到使用者詳情，將使用者詳情儲存到store.state.user.userDetail中

把資料存到本地儲存中

3、 在個人中心頁面訪問使用者詳情的使用者名稱

4,退出賬號操作

單擊退出按鈕,清空是否登陸判斷條件,清空本地儲存登入使用者資訊,回到首頁

修改store中的資料,需要在store中mutations中新建一個方法

在退出按鈕上新增一個cilck事件=’logout’,在methods中定義這個logout函式

需要給img的盒子上一個v-if判斷:

v-if="$store.state.user.userDetail.profile"