本系统采用SpringBoot、Vue、HTML、CSS、JavaScript等技术实现了音乐播发及音乐推荐平台,此平台具有用户登录、歌曲搜索、用户喜欢歌曲推荐、热门歌曲推荐等主要功能。通过音乐推荐系统,系统会根据用户喜好推荐歌曲,用户操作更少,使用体验更加舒适便捷,本系统仅展示部分源码和功能展示。
1、系统首页展示
进入系统前台主页系统会展示10条歌单,在主页顶部导航栏点击歌单会分类展示所有歌单,用户可以根据喜好点击喜欢的类别的歌单
![](https://img-blog.csdnimg.cn/img_convert/e5e28d79831ed3b0d61d3245601b8788.png)
2、用户搜索歌曲
用户点击搜索框,可以根据歌曲名或者歌手名搜索自己想听的歌曲或歌手,搜索结果会展示在结果界面,用户点击歌曲可以进行播放操作
![](https://img-blog.csdnimg.cn/img_convert/ca5b1919878eae1d143349e0c9dc14bd.png)
3、歌手分类信息展示
进入系统前台主页系统会展示10名歌手,在主页顶部导航栏点击歌手会分类展示所有歌手,用户可以根据喜好点击喜欢的类别的歌手
![](https://img-blog.csdnimg.cn/img_convert/e1f25c9405ca9bfbff42d3e9ef606dc9.png)
4、后台信息展示
管理员登录进入后台管理界面,系统首页会显示所有信息,包括用户总数、歌曲总数、歌手数量、歌单数量;用户性别比例图;歌手性别比例图;歌曲类型分布图;歌手国籍分布图,管理员一目了然
![](https://img-blog.csdnimg.cn/img_convert/25458203043d26f205021759bf5a02e4.png)
5、用户管理
管理员可以浏览所有用户的信息,也可以利用搜索框根据用户名进行筛选,找到相应的用户。管理员可以管理全体用户。点击用户头像下方更新图片,可以选择图片进行上传,用户头像会实时更新。点击收藏,会进入用户收藏歌曲列表,可以对用户收藏歌曲进行删除、批量删除操作
![](https://img-blog.csdnimg.cn/img_convert/bdb70cdaee722932c05fdf3b7b5b50f1.png)
本音乐网站的客户端和管理端使用VUE 框架来实现,服务端使用 Spring Boot + MyBatis 来实现,数据库使用了 MySQL。
后端:Spring Boot + MyBatis + Hadoop
前端:Vue + Vue-Router + Vuex + Axios + Element-UI
开发环境:
JDK: jdk1.8.0_221
MySQL:5.7.35 for Win64 (x86_64)
Node:v10.16.0
IDE:IntelliJ IDEA 2021、VSCode
系统首页代码实现
![](https://img-blog.csdnimg.cn/img_convert/e2f5dd5a266b93aa367474208dbb8b1e.png)
登录页面代码实现
![](https://img-blog.csdnimg.cn/img_convert/f27490d921379d4851e5a71bb22ae202.png)
服务端部分代码
![](https://img-blog.csdnimg.cn/img_convert/12312a1fb051a17420d2f11bb6ed554c.png)