vue实现音乐平台项目

成果

具体效果看B站视频演示；
B站地址：视频演示
github地址：项目源码
码云地址：项目源码
vue3版本地址：添加链接描述
各位大佬，帮忙点个赞，投个币，star下,万分感谢大家！

项目结构

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

过程

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

问题

说说遇到的问题吧，如果你也遇到了，可以参考我的方法
1.开发模式下请求接口跨域问题（用代理可解决，具体见源码）
2.打包后静态资源失效 (需要配置绝对路径，如图) 但是切记别在开发模式中用！！！！

3.打包后接口又跨域了… （解决方法很简单，把跨域配置注释，请求地址换回原地址）
4.另外打包后也还要注释掉路由的history
5.其他的就是一些代码逻辑性的问题例如歌词的解释，滚动，轮盘的转动，音乐的播放和切换等。
6.还有就是关于element-ui的问题，建议不会就百度，我也是慢慢啃过来的，而要修改样式的话可以直接检查，复制类名再改，没效果的话估计是权重不够。

说明

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

END

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

vue实现音乐平台项目相关推荐

实训说明书在线音乐平台项目规格说明书
在线音乐平台项目规格说明书概况项目名称在线音乐平台行业网络媒体架构类型 B/S结构开发技术 1. B/S开发环境
强力推荐，SpringBoot + Vue + MyBatis 音乐网站项目
项目说明本音乐网站的客户端和管理端使用 VUE 框架来实现,服务端使用 Spring Boot + MyBatis 来实现,数据库使用了 MySQL. 项目功能音乐播放用户登录注册用户信息编辑 ...
一款基于SpringBoot + MyBatis + Vue 的音乐网站项目
项目说明本音乐网站的客户端和管理端使用 VUE 框架来实现,服务端使用 Spring Boot + MyBatis 来实现,数据库使用了 MySQL. 项目功能音乐播放用户登录注册用户信息编辑 ...
音乐平台项目的几个问题总结(头像裁剪以及跨页面播放音乐)
关于头像裁剪 1.上传图片的裁剪,并没有采用后端裁剪,而采用前端裁剪,基于cropbox进行了修改编码使用一个隐藏的input框存放存放到数据库 2.本来想在后端解析base64编码重新生成文件, ...
Vue电商平台项目（1）
前端:vue脚手架后端:nodejs 分析:懒加载,swiper,搜索,搜索记录,注册登录,短信验证码, 1.短信验证码登录|注册; 2.Vuex:地址 ...
基于Spring Boot+vue在线音乐平台
文章目录项目介绍主要功能截图: 后台登录首页用户管理歌手管理前台首页登录注册个人资料歌手详情歌手歌单部分代码展示设计总结项目获取方式
vue仿写音乐App项目移动端（部分）
在这一个月期间跟着逆战班级做的一个基于vue的音乐App项目项目目录结构如下: public文件夹用于存放公用文件.src用于存放项目源代码 1.App组件代码 <template>&l ...
Java+MySQL基于springboot+vue音乐平台#毕业设计
项目编号:Java+MySQL spring260-基于springboot音乐平台#毕业设计开发语言:Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomca ...
基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...

vue实现音乐平台项目

成果

项目结构

过程

问题

说明

END

vue实现音乐平台项目相关推荐

最新文章

热门文章