【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（七）

時(shí)間：2023-04-23 21:51:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-23 21:51:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（七）：

目錄

【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（一）

【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（二）

【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（三）

【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（四）

【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（五）

【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（六）

【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（七）

9 我的音樂(lè)頁(yè)面

9-1 未登錄狀態(tài)

點(diǎn)擊頁(yè)面中的“立即登錄”按鈕，彈出登錄框。

// Header組件<script>export default { mounted() { this.$bus.$on('appear', () => { this.openLoginBox() }) }}</script>


// 我的音樂(lè)未登錄頁(yè)面<template><div class="not-logged"> <!-- 立即登錄按鈕 --> <a href="javascript:;" class="btn" @click="$bus.$emit('appear')"></a></div></template>

9-2 已登錄狀態(tài)

1. 接口：

獲取用戶信息，歌單，收藏，MV，DJ數(shù)量
說(shuō)明 : 登錄后調(diào)用此接口 , 可以獲取用戶信息
接口地址 : /user/subcount

獲取用戶歌單
說(shuō)明 : 登錄后調(diào)用此接口 , 傳入用戶 id, 可以獲取用戶歌單
必選參數(shù) : uid : 用戶 id
可選參數(shù) :
limit : 返回?cái)?shù)量 , 默認(rèn)為 30
offset : 偏移數(shù)量，用于分頁(yè) , 如 :( 頁(yè)數(shù) -1)*30, 其中 30 為 limit 的值 , 默認(rèn)為 0
接口地址 : /user/playlist

收藏的歌手列表
說(shuō)明 : 調(diào)用此接口,可獲取收藏的歌手列表
接口地址 : /artist/sublist

收藏的MV列表
說(shuō)明 : 調(diào)用此接口,可獲取收藏的 MV 列表
接口地址 : /mv/sublist

電臺(tái)的訂閱列表
說(shuō)明 : 登錄后調(diào)用此接口 , 可獲取訂閱的電臺(tái)列表
接口地址 : /dj/sublist

2. 我的音樂(lè)一級(jí)路由為/my，通過(guò)二級(jí)路由區(qū)分當(dāng)前展示的內(nèi)容：我的歌手(/my/artist)、我的視頻(/my/mv)、我的電臺(tái)(/my/radio)、創(chuàng)建/收藏的歌單(/my/playlist/:id)

3. 播放歌單和播放歌曲：修改本地localStorage中存儲(chǔ)的當(dāng)前播放歌曲和歌單的ID，通過(guò)調(diào)用全局事件總線上綁定的自定義事件，播放歌曲。(后面播放專輯中歌曲方法類似)

// 我的音樂(lè)-歌單頁(yè)面<script>export default { data () { return { playlistInfo: {}, // 歌單信息 } } methods: { // 播放歌單 async setPlaylist() { let ids = []; this.playlistInfo.trackIds.forEach(item => { ids.push(item.id) }) await this.$store.dispatch('music/setMusicNow', ids[0]) ids = ids.join(',') await this.$store.dispatch('music/setMusicList', ids) this.$bus.$emit('play') }, // 播放歌曲 async playMusic(id) { await this.$store.dispatch('music/setMusicNow', id) await this.$store.dispatch('music/addMusic', id) this.$bus.$emit('play') }, }}</script>


// 音樂(lè)播放器組件<script>export default { mounted() { this.$bus.$on('play', () => { this.playMusic() // 播放歌曲 }) }}</script>

10 關(guān)注頁(yè)面

10-1 未登錄狀態(tài)

和“我的音樂(lè)”頁(yè)面未登錄狀態(tài)類似，點(diǎn)擊立即登錄按鈕，觸發(fā)全局事件總線上綁定的自定義事件，彈出登錄框。

10-2 已登錄狀態(tài)

接口：

獲取用戶詳情
說(shuō)明 : 登錄后調(diào)用此接口 , 傳入用戶 id, 可以獲取用戶詳情
必選參數(shù) : uid : 用戶 id
接口地址 : /user/detail

獲取用戶動(dòng)態(tài)
說(shuō)明 : 登錄后調(diào)用此接口 , 傳入用戶 id, 可以獲取用戶動(dòng)態(tài)
必選參數(shù) : uid : 用戶 id
可選參數(shù) : limit : 返回?cái)?shù)量 , 默認(rèn)為 30
lasttime : 返回?cái)?shù)據(jù)的 lasttime ,默認(rèn)-1,傳入上一次返回結(jié)果的 lasttime,將會(huì)返回下一頁(yè)的數(shù)據(jù)
接口地址 : /user/event

11 專輯、歌單、歌手、歌曲頁(yè)面

1. 專輯、歌單、歌手、歌曲頁(yè)面均使用路由query的id標(biāo)識(shí)當(dāng)前展示的專輯、歌單、歌手或歌曲的ID。
2. 用到的接口：

專輯頁(yè)面：

獲取專輯內(nèi)容
說(shuō)明 : 調(diào)用此接口 , 傳入專輯 id, 可獲得專輯內(nèi)容
必選參數(shù) : id: 專輯 id
接口地址 : /album

專輯評(píng)論
說(shuō)明 : 調(diào)用此接口 , 傳入音樂(lè) id 和 limit 參數(shù) , 可獲得該專輯的所有評(píng)論 ( 不需要 登錄 )
必選參數(shù) : id: 專輯 id
可選參數(shù) : limit: 取出評(píng)論數(shù)量 , 默認(rèn)為 20
offset: 偏移數(shù)量 , 用于分頁(yè) , 如 :( 評(píng)論頁(yè)數(shù) -1)*20, 其中 20 為 limit 的值
before: 分頁(yè)參數(shù),取上一頁(yè)最后一項(xiàng)的 time 獲取下一頁(yè)數(shù)據(jù)(獲取超過(guò) 5000 條評(píng)論的時(shí)候需要用到)
接口地址 : /comment/album

歌單頁(yè)面：

相關(guān)歌單推薦
說(shuō)明 : 調(diào)用此接口,傳入歌單 id 可獲取相關(guān)歌單
必選參數(shù) : id : 歌單 id
接口地址 : /related/playlist

收藏/取消收藏歌單
說(shuō)明 : 調(diào)用此接口 , 傳入類型和歌單 id 可收藏歌單或者取消收藏歌單
必選參數(shù) :
t : 類型,1:收藏,2:取消收藏 id : 歌單 id
接口地址 : /playlist/subscribe

歌手頁(yè)面：

獲取相似歌手
說(shuō)明 : 調(diào)用此接口 , 傳入歌手 id, 可獲得相似歌手
必選參數(shù) : id: 歌手 id
接口地址 : /simi/artist

獲取歌手描述
說(shuō)明 : 調(diào)用此接口 , 傳入歌手 id, 可獲得歌手描述
必選參數(shù) : id: 歌手 id
接口地址 : /artist/desc

歌手熱門50首歌曲
說(shuō)明 : 調(diào)用此接口,可獲取歌手熱門 50 首歌曲
必選參數(shù) :
id : 歌手 id
接口地址 : /artist/top/song

獲取歌手專輯
說(shuō)明 : 調(diào)用此接口 , 傳入歌手 id, 可獲得歌手專輯內(nèi)容
必選參數(shù) : id: 歌手 id
可選參數(shù) : limit: 取出數(shù)量 , 默認(rèn)為 30
offset: 偏移數(shù)量 , 用于分頁(yè) , 如 :( 頁(yè)數(shù) -1)*30, 其中 30 為 limit 的值 , 默認(rèn) 為 0
接口地址 : /artist/album

獲取歌手MV
說(shuō)明 : 調(diào)用此接口 , 傳入歌手 id, 可獲得歌手 mv 信息 , 具體 mv 播放地址可調(diào) 用/mv傳入此接口獲得的 mvid 來(lái)拿到 , 如 : /artist/mv?id=6452,/mv?mvid=5461064
必選參數(shù) : id: 歌手 id, 可由搜索接口獲得
接口地址 : /artist/mv

收藏/取消收藏歌手
說(shuō)明 : 調(diào)用此接口,可收藏歌手
必選參數(shù) :
id : 歌手 id
t:操作,1 為收藏,其他為取消收藏
接口地址 : /artist/sub

歌曲頁(yè)面：

獲取相似音樂(lè)
說(shuō)明 : 調(diào)用此接口 , 傳入歌曲 id, 可獲得相似歌曲
必選參數(shù) : id: 歌曲 id
接口地址 : /simi/song

歌曲評(píng)論
說(shuō)明 : 調(diào)用此接口 , 傳入音樂(lè) id 和 limit 參數(shù) , 可獲得該音樂(lè)的所有評(píng)論 ( 不需要登錄 )
必選參數(shù) : id: 音樂(lè) id
可選參數(shù) : limit: 取出評(píng)論數(shù)量 , 默認(rèn)為 20
offset: 偏移數(shù)量 , 用于分頁(yè) , 如 :( 評(píng)論頁(yè)數(shù) -1)*20, 其中 20 為 limit 的值
before: 分頁(yè)參數(shù),取上一頁(yè)最后一項(xiàng)的 time 獲取下一頁(yè)數(shù)據(jù)(獲取超過(guò) 5000 條評(píng)論的時(shí)候需要用到)
接口地址 : /comment/music

3. 在其他頁(yè)面使用<router-link>標(biāo)簽點(diǎn)擊跳轉(zhuǎn)到專輯、歌單、歌手或歌曲頁(yè)面：

<template><div> <!-- 跳轉(zhuǎn)到專輯頁(yè)面 --> <router-link :to="{path: '/album', query: {id: `${item.id}`}}"></router-link> <!-- 跳轉(zhuǎn)到歌單頁(yè)面 --> <router-link :to="{path: '/playlist', query: {id: `${item.id}`}}"></router-link> <!-- 跳轉(zhuǎn)到歌手頁(yè)面 --> <router-link :to="{path: '/artist', query: {id: `${item.id}`}}"></router-link> <!-- 跳轉(zhuǎn)到歌曲頁(yè)面 --> <router-link :to="{path: '/song', query: {id: `${item.id}`}}"></router-link></div></template>4. 通過(guò)接口獲取到的專輯介紹信息（歌單介紹、歌手藝人介紹、歌曲介紹類似）需要將字符串中的換行符/n轉(zhuǎn)換為<br>，并使用v-html賦值給<p>標(biāo)簽展示，否則不能解析HTML標(biāo)簽。