【个人练习】网易云音乐PC端仿站 Vue 2（七）

时间：2023-04-23 21:51:01 | 来源：网站运营

时间：2023-04-23 21:51:01 来源：网站运营

【个人练习】网易云音乐PC端仿站 Vue 2（七）：

目录

【个人练习】网易云音乐PC端仿站 Vue 2（一）

【个人练习】网易云音乐PC端仿站 Vue 2（二）

【个人练习】网易云音乐PC端仿站 Vue 2（三）

【个人练习】网易云音乐PC端仿站 Vue 2（四）

【个人练习】网易云音乐PC端仿站 Vue 2（五）

【个人练习】网易云音乐PC端仿站 Vue 2（六）

【个人练习】网易云音乐PC端仿站 Vue 2（七）

9 我的音乐页面

9-1 未登录状态

点击页面中的“立即登录”按钮，弹出登录框。

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


// 我的音乐未登录页面<template><div class="not-logged"> <!-- 立即登录按钮 --> <a href="javascript:;" class="btn" @click="$bus.$emit('appear')"></a></div></template>

9-2 已登录状态

1. 接口：

获取用户信息，歌单，收藏，MV，DJ数量
说明 : 登录后调用此接口 , 可以获取用户信息
接口地址 : /user/subcount

获取用户歌单
说明 : 登录后调用此接口 , 传入用户 id, 可以获取用户歌单
必选参数 : uid : 用户 id
可选参数 :
limit : 返回数量 , 默认为 30
offset : 偏移数量，用于分页 , 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0
接口地址 : /user/playlist

收藏的歌手列表
说明 : 调用此接口,可获取收藏的歌手列表
接口地址 : /artist/sublist

收藏的MV列表
说明 : 调用此接口,可获取收藏的 MV 列表
接口地址 : /mv/sublist

电台的订阅列表
说明 : 登录后调用此接口 , 可获取订阅的电台列表
接口地址 : /dj/sublist

2. 我的音乐一级路由为/my，通过二级路由区分当前展示的内容：我的歌手(/my/artist)、我的视频(/my/mv)、我的电台(/my/radio)、创建/收藏的歌单(/my/playlist/:id)

3. 播放歌单和播放歌曲：修改本地localStorage中存储的当前播放歌曲和歌单的ID，通过调用全局事件总线上绑定的自定义事件，播放歌曲。(后面播放专辑中歌曲方法类似)

// 我的音乐-歌单页面<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>


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

10 关注页面

10-1 未登录状态

和“我的音乐”页面未登录状态类似，点击立即登录按钮，触发全局事件总线上绑定的自定义事件，弹出登录框。

10-2 已登录状态

接口：

获取用户详情
说明 : 登录后调用此接口 , 传入用户 id, 可以获取用户详情
必选参数 : uid : 用户 id
接口地址 : /user/detail

获取用户动态
说明 : 登录后调用此接口 , 传入用户 id, 可以获取用户动态
必选参数 : uid : 用户 id
可选参数 : limit : 返回数量 , 默认为 30
lasttime : 返回数据的 lasttime ,默认-1,传入上一次返回结果的 lasttime,将会返回下一页的数据
接口地址 : /user/event

11 专辑、歌单、歌手、歌曲页面

1. 专辑、歌单、歌手、歌曲页面均使用路由query的id标识当前展示的专辑、歌单、歌手或歌曲的ID。
2. 用到的接口：

专辑页面：

获取专辑内容
说明 : 调用此接口 , 传入专辑 id, 可获得专辑内容
必选参数 : id: 专辑 id
接口地址 : /album

专辑评论
说明 : 调用此接口 , 传入音乐 id 和 limit 参数 , 可获得该专辑的所有评论 ( 不需要 登录 )
必选参数 : id: 专辑 id
可选参数 : limit: 取出评论数量 , 默认为 20
offset: 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*20, 其中 20 为 limit 的值
before: 分页参数,取上一页最后一项的 time 获取下一页数据(获取超过 5000 条评论的时候需要用到)
接口地址 : /comment/album

歌单页面：

相关歌单推荐
说明 : 调用此接口,传入歌单 id 可获取相关歌单
必选参数 : id : 歌单 id
接口地址 : /related/playlist

收藏/取消收藏歌单
说明 : 调用此接口 , 传入类型和歌单 id 可收藏歌单或者取消收藏歌单
必选参数 :
t : 类型,1:收藏,2:取消收藏 id : 歌单 id
接口地址 : /playlist/subscribe

歌手页面：

获取相似歌手
说明 : 调用此接口 , 传入歌手 id, 可获得相似歌手
必选参数 : id: 歌手 id
接口地址 : /simi/artist

获取歌手描述
说明 : 调用此接口 , 传入歌手 id, 可获得歌手描述
必选参数 : id: 歌手 id
接口地址 : /artist/desc

歌手热门50首歌曲
说明 : 调用此接口,可获取歌手热门 50 首歌曲
必选参数 :
id : 歌手 id
接口地址 : /artist/top/song

获取歌手专辑
说明 : 调用此接口 , 传入歌手 id, 可获得歌手专辑内容
必选参数 : id: 歌手 id
可选参数 : limit: 取出数量 , 默认为 30
offset: 偏移数量 , 用于分页 , 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认 为 0
接口地址 : /artist/album

获取歌手MV
说明 : 调用此接口 , 传入歌手 id, 可获得歌手 mv 信息 , 具体 mv 播放地址可调 用/mv传入此接口获得的 mvid 来拿到 , 如 : /artist/mv?id=6452,/mv?mvid=5461064
必选参数 : id: 歌手 id, 可由搜索接口获得
接口地址 : /artist/mv

收藏/取消收藏歌手
说明 : 调用此接口,可收藏歌手
必选参数 :
id : 歌手 id
t:操作,1 为收藏,其他为取消收藏
接口地址 : /artist/sub

歌曲页面：

获取相似音乐
说明 : 调用此接口 , 传入歌曲 id, 可获得相似歌曲
必选参数 : id: 歌曲 id
接口地址 : /simi/song

歌曲评论
说明 : 调用此接口 , 传入音乐 id 和 limit 参数 , 可获得该音乐的所有评论 ( 不需要登录 )
必选参数 : id: 音乐 id
可选参数 : limit: 取出评论数量 , 默认为 20
offset: 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*20, 其中 20 为 limit 的值
before: 分页参数,取上一页最后一项的 time 获取下一页数据(获取超过 5000 条评论的时候需要用到)
接口地址 : /comment/music

3. 在其他页面使用<router-link>标签点击跳转到专辑、歌单、歌手或歌曲页面：

<template><div> <!-- 跳转到专辑页面 --> <router-link :to="{path: '/album', query: {id: `${item.id}`}}"></router-link> <!-- 跳转到歌单页面 --> <router-link :to="{path: '/playlist', query: {id: `${item.id}`}}"></router-link> <!-- 跳转到歌手页面 --> <router-link :to="{path: '/artist', query: {id: `${item.id}`}}"></router-link> <!-- 跳转到歌曲页面 --> <router-link :to="{path: '/song', query: {id: `${item.id}`}}"></router-link></div></template>4. 通过接口获取到的专辑介绍信息（歌单介绍、歌手艺人介绍、歌曲介绍类似）需要将字符串中的换行符/n转换为<br>，并使用v-html赋值给<p>标签展示，否则不能解析HTML标签。