vue網易雲專案筆記

1、使用Vue cli在命令列建立一個vue專案起名music001,如圖:

下載axios,swiper,vue-awesome-swiper

檢查package.json檔案

2.src下建立app.vue

3.在路由檔案router下的index.js中進行配置:

引入HomeView,這個HomeView.vue即是整個專案的主介面

4.在components中新建這四個元件的vue檔案並在HomeView.vue中進行引入並註冊,接下來就可以進行專案的搭建

Components引入四個元件:

(1)topNav.vue(頂部導航欄)

首先是頂部導航欄topNav.vue的搭建,這個元件比較簡單,僅僅是css樣式進行排版,在阿里的向量圖示庫中鏈入一些小的圖示檔案

(2)swiperCom.vue(輪播圖)

再就是導航欄下面的輪播圖swiperCom.vue部分,這個部分需要從網易雲API中獲取實時的圖片,我們需要在當前vue專案中新建一個api資料夾,在api中新建index.js,這裡就需要用到Ajax技術了,而我們之前下載好的axios就是一個封裝好的Ajax庫,直接import引入axios即可.

繼續在api中的index中進行操作,let一個值為我們node的那個地址比如我的node地址為http://localhost:3000,

Let baseUrl=’ http://localhost:3000’即可

接下來我們獲取輪播圖的api:

/banner?type=是網易雲api庫中可以獲取到輪播圖的路徑

使用${}將一個值變成變數,再通過``解析變數

回到swiperCom.vue,import swiper檔案和剛剛在index中新建的getBanner函式

在這裡我們先用data(){return{imgs:[]}}定義返回一個imgs

在使用mounted時,由於是非同步函式要加上async,來呼叫輪播圖圖片,通過這個函式來拿到輪播圖資料

這裡又新加了一個分頁器的函式.

這裡是將res獲取到的資料中的data中的banner中的前三個資料賦值給imgs

在template中使用v-for迴圈資料即可:

這樣輪播圖模組就做好了

(3)iconlist(向量圖示)

下面是一個簡單的靜態頁面iconList,簡單設定一下css樣式即可

（4）musicList（歌單列表）

最後一個元件musicList,這個元件和前面swiper的資料引用方式相似,但我們選擇了組合api的方法再次實現一下這個資料的傳輸

這是組合api的程式碼

使用了onMounted的生命週期函式

現將getMusic獲取的資料儲存到res中.再將res的資料傳給musics,最後return這個musics

這是渲染到頁面上的程式碼.這裡的picUrl,name,playCount都是通過getMusics獲取到的資料的名稱,所以在這裡直接匯入即可

至此，靜態頁面完成。

點開每個歌單都是一個這樣的單獨的頁面,資料也是隨之變換的

先在原有的基礎上新建幾個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獲取到歌單的資料時,觸發這個修改函式,將預設歌單的資料修改為當前歌單的資料

今日專案的開發主要是實現了音樂播放與暫停,切換播放歌曲的功能

首先是一些昨天的程式碼回顧,今天的實現效果和昨天的一些程式碼密切相關:

我們先說這個切換播放歌曲:

切換播放歌曲的原理和修改playlist的方法一致,只是把palylist換成了playCurrentIndex,

讓傳輸來的value修改到playCurrentIndex,就是歌曲的下標,因為他預設是0(第一首)

定義一個新的方法:

setPlayIndex引數和setPlaylist一致不過換掉了傳輸資料的變數

與setPlaylist方法不同的是,這裡並沒有使用commit來傳值,而是使用了mutation來傳值,

在有歌單列表的頁面playlist.vue

即可,這是傳值的兩種方法,最後在每一個數據上繫結點選事件setPlayIndex(i)傳值i(歌曲下標)

再來說說這個音樂播放器的實現:

使用一個audio繫結網易雲音樂的api地址

autoplay:自動播放,paused:當前歌曲的暫停狀態,play():播放當前歌曲,pause()暫停歌曲

準備一個變數控制播放暫停按鈕的切換paused:true 

使用這樣一個函式即可

歌曲詳情頁面

歌曲詳情頁面    定位fixed  脫離文件流 

swiper框架中的內容  定位  脫離文件流

swiper定位的z-index更高或者class優先順序高於歌曲詳情頁面導致歌曲詳情無法覆蓋swiper部分,因為swiper是引入的框架,框架的優先順序更高

修改swiper.css的程式碼即可

定義一個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"

至此專案完成。

搜尋

複製