vue实现音乐平台项目

成果

在这里插入图片描述
具体效果看B站视频演示;
B站地址:视频演示
github地址:项目源码
码云地址:项目源码
vue3版本地址:添加链接描述
各位大佬,帮忙点个赞,投个币,star下,万分感谢大家!

项目结构

因为文件较多,我是通过截图然后注释上文字,图片有点多,想要了解的话可以私信我,或者b站也有联系方式。
代码重要部分都详细注释解释了

过程

说说搭建过程吧,从无到有,感觉刚开始就得要有构思,先不急着做,先观察结构上布局,规划好路由的设置,有哪几个部分需要跳转,哪里是公共的,哪里是一直显示的,都要好好想想。
刚开始的话还是要做出页面的大致布局。然后再一个一个组件开发。
对于组件的开发,也要观察组件是否经常被用到,可以的话尽量把组件封装的更完美,这样后续开发会非常轻松。
对于接口的话,有些数据是不完整的,还有些是vip的,所以导致获取不到播放地址,播放不了。
数据不熟悉可以先打印出来观察下,再写进去,有些没有的数据可能需要多次周折才能获取,需要慢慢分析。
接口封装请求数据自我感觉还是挺好用的,是学的codewhy老师的封装方法,不会的可以去学学。
还有时间戳的转化,也可以学习学习,这基本上是开发必备,还有防抖节流等。

问题

说说遇到的问题吧,如果你也遇到了,可以参考我的方法
1.开发模式下请求接口跨域问题 (用代理可解决,具体见源码)
2.打包后静态资源失效 (需要配置绝对路径,如图) 但是切记别在开发模式中用!!!!
在这里插入图片描述
3.打包后接口又跨域了… (解决方法很简单,把跨域配置注释,请求地址换回原地址)
4.另外打包后也还要注释掉路由的history
5.其他的就是一些代码逻辑性的问题 例如 歌词的解释,滚动,轮盘的转动,音乐的播放和切换等。
6.还有就是关于element-ui的问题,建议不会就百度,我也是慢慢啃过来的,而要修改样式的话可以直接检查,复制类名再改,没效果的话估计是权重不够。

说明

项目的功能并没有全部做完,而且性能上也没有做很好的优化,bug也有很多,但是基本功能都能实现。
后续有时间会改进的!当然有大佬想一起参与的话可以滴滴我!

END

最后对你有帮助的话,帮忙点个赞,star下!!!
感谢!!!

仿网易音乐VUE项目 ## 功能特性 1. 登录 2. 刷新登录 3. 发送验证码 4. 校验验证码 5. 注册(修改密码) 6. 获取用户信息 , 歌单,收藏,mv, dj 数量 7. 获取用户歌单 8. 获取用户电台 9. 获取用户关注列表 10. 获取用户粉丝列表 11. 获取用户动态 12. 获取用户播放记录 13. 获取精品歌单 14. 获取歌单详情 15. 搜索 16. 搜索建议 17. 获取歌词 18. 歌曲评论 19. 收藏单曲到歌单 20. 专辑评论 21. 歌单评论 22. mv 评论 23. 电台节目评论 24. banner 25. 获取歌曲详情 26. 获取专辑内容 27. 获取歌手单曲 28. 获取歌手 mv 29. 获取歌手专辑 30. 获取歌手描述 31. 获取相似歌手 32. 获取相似歌单 33. 相似 mv 34. 获取相似音乐 35. 获取最近 5 个听了这首歌的用户 36. 获取每日推荐歌单 37. 获取每日推荐歌曲 38. 私人 FM 39. 签到 40. 喜欢音乐 41. 垃圾桶 42. 歌单 ( 网友精选碟 ) 43. 新碟上架 44. 热门歌手 45. 最新 mv 46. 推荐 mv 47. 推荐歌单 48. 推荐新音乐 49. 推荐电台 50. 推荐节目 51. 独家放送 52. mv 排行 53. 获取 mv 数据 54. 播放 mv/视频 55. 排行榜 56. 歌手榜 57. 云盘 58. 电台 - 推荐 59. 电台 - 分 60. 电台 - 分推荐 61. 电台 - 订阅 62. 电台 - 详情 63. 电台 - 节目 64. 给评论点赞 65. 获取动态 66. 热搜列表(简略) 67. 发送私信 68. 发送私信歌单 69. 新建歌单 70. 收藏/取消收藏歌单 71. 歌单分 72. 收藏的歌手列表 73. 订阅的电台列表 74. 相关歌单推荐 75. 付费精选接口 76. 音乐是否可用检查接口 77. 登录状态 78. 获取视频播放地址 79. 发送/删除评论 80. 热门评论 81. 视频评论 82. 退出登录 83. 所有榜单 84. 所有榜单内容摘要 85. 收藏视频 86. 收藏 MV 87. 视频详情 88. 相关视频 89. 关注用户 90. 新歌速递 91. 喜欢音乐列表(无序) 92. 收藏的 MV 列表 93. 获取最新专辑 94. 听歌打卡 95. 获取视频标签/分下的视频 96. 已收藏专辑列表 97. 获取动态评论 98. 歌单收藏者列表 99. 云盘歌曲删除 100. 热门话题 101. 电台 - 推荐型 102. 电台 - 非热门型 103. 电台 - 今日优选 104. 心动模式/智能播放 105. 转发动态 106. 删除动态 107. 分享歌曲、歌单、mv、电台、电台节目到动态 108. 通知-私信 109. 通知-评论 110. 通知-@我 111. 通知-通知 112. 设置 113. 云盘数据详情 114. 私信内容 115. 我的数字专辑 116. batch批量请求接口 117. 获取视频标签列表 118. 全部mv 119. 网易出品mv 120. 收藏/取消收藏专辑 121. 专辑动态信息 122. 热搜列表(详细) 123. 更换绑定手机 124. 检测手机号码是否已注册 125. 初始化昵称 126. 更新歌单描述 127. 更新歌单名 128. 更新歌单标签 129. 默认搜索关键词 130. 删除歌单 131. 电台banner 132. 用户电台 133. 热门电台 134. 电台 - 节目详情 135. 电台 - 节目榜 136. 电台 - 新晋电台榜/热门电台榜 137. 别热门电台 138. 云村热评 139. 电台24小时节目榜 140. 电台24小时主播榜 141. 电台最热主播榜 142. 电台主播新人榜 143. 电台付费精品榜 144. 歌手热门50首歌曲 145. 购买数字专辑 146. 获取 mv 点赞转发评论数数据 147. 获取视频点赞转发评论数数据 148. 调整歌单顺序 149. 调整歌曲顺序 150. 独家放送列表 151. 获取推荐视频 152. 获取视频分列表 153. 获取全部视频列表接口 154. 获取历史日推可用日期列表 155. 获取历史日推详细数据 156. 国家编码列表 157. 首页-发现 158. 首页-发现-圆形图标入口列表 159. 数字专辑-全部新碟 160. 数字专辑-热门新碟 161. 数字专辑&数字单曲-榜单 162. 数字专辑-语种风格馆 163. 数字专辑详情 ## 环境要求 需要 NodeJS 8.12+ 环境
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值