计算机毕业设计 | SpringBoot+vue移动端音乐网站 音乐播放器(附源码)
1，项目背景
随着计算机技术的发展，网络技术对我们生活和工作显得越来越重要，特别是现在信息高度发达的今天，人们对最新信息的需求和发布迫切的需要及时性。为了满足不同人们对网络需求，各种特色，各种主题的网站也在不断增加。
为了满足音乐爱好者，明星崇拜者，各种专辑痴迷着的需求，一批以音乐为主题的网站也应运而生。
由于以往的静态网页存在单调，维护任务大，缺乏和用户的交互，随着计算机软件知识的推广，动态网页正在走向普通的网页设计师的生活。
本站设计目标就是以SpringBoot和vue为基础框架设计一个以音乐播放动态交互网站，用户可以在浏览过程中，实现和本站信息的交互。
2，需求分析
2.1 系统需求
普通用户可以使用前台系统，当用户在系统中注册信息之后，使用账户密码登录之后可以使用前台系统的所以基本功能，如音乐播放，个人信息修改，音乐收藏，音乐评价，音乐收索等功能。
管理员用户可以通过账户登录之后进行后台管理界面，在后台系统当中管理员可以一览所有的基本数据如系统存在的歌曲数量，歌手数量，以及播放量等等，管理员用户可以对用户模块、歌手模块、歌单模块、评价模块以及分类模块进行增删改查操作。管理员用户还可以修改自身的账户密码。
2.2 功能需求
本系统分为前台系统和后台管理系统，前台系统包括：用户个人信息模块，歌曲模块，评论模块。后台管理系统包括：用户管理模块，歌手管理模块，歌单管理模块，评论管理模块，数据展示模块。
- 用户个人信息模块
| 功能名称 | 功能描述 |
|---|---|
| 用户信息修改 | 用户登录之后可修改自己注册时所填写的信息 |
| 登录 | 用户通过注册好的账户信息进行登录 |
| 注册 | 用户进入指定的界面进行信息填写，个人确认信息以及系统判定信息之后可注册成功。 |
- 歌曲模块
| 功能名称 | 功能描述 |
|---|---|
| 歌曲播放 | 用户点击歌曲，歌曲会自动播放，并且在下方会出现歌曲播放的进度条。 |
| 歌曲下载 | 用户点击歌曲的下载按钮，歌曲会下载到用户的本地磁盘。 |
| 歌曲收藏 | 用户登录之后，可以对喜欢的歌曲进行收藏，只需要点击收藏按钮即可。 |
- 评论模块
| 功能名称 | 功能描述 |
|---|---|
| 歌单评价 | 可以对歌单进行言论评价以及打分。 |
- 用户管理模块
| 功能名称 | 功能描述 |
|---|---|
| 添加用户 | 管理员登录之后可以对普通用户进行添加操作 |
| 修改用户 | 管理员登录之后可以对普通用户的信息进行修改 |
| 查询用户 | 管理员登录之后可以通过翻页进行查询用户，也可以通过关键字进行模糊查询。 |
| 删除用户 | 管理员登录之后可以删除普通用户的账户。 |
- 歌手管理模块
| 功能名称 | 功能描述 |
|---|---|
| 添加歌手 | 管理员登录之后可以对歌手进行添加操作 |
| 修改歌手信息 | 管理员登录之后可以对歌手的信息进行修改操作 |
| 查询歌手 | 管理员登录之后可以进行翻页查找歌手，也可以进行关键字的模糊查询 |
| 删除歌手 | 管理员登录之后可以删除选中的歌手信息 |
- 歌单管理模块
| 功能名称 | 功能描述 |
|---|---|
| 添加歌单 | 管理员登录之后可以对歌单进行添加操作 |
| 修改歌单 | 管理员登录之后可以对歌单的信息进行修改 |
| 查询歌单 | 管理员登录之后可以翻页查询歌单信息，也可以进行模糊查询 |
| 删除歌单 | 管理员登录之后可以删除选中的歌单 |
- 评论管理模块
| 功能名称 | 功能描述 |
|---|---|
| 评论查询 | 管理员登录之后可以对用户的评论进行查看 |
| 评论删除 | 管理员登录之后可以对用户的评论进行删除 |
- 数据展示模块
| 功能名称 | 功能描述 |
|---|---|
| 数据展示 | 管理员登录之后直接进入系统首页，在首页当中会展示歌手，歌曲，歌单等基本数据，还会对歌曲，歌单等数据的分布进行图形化分析以便于分析。 |
3，技术栈
本系统中技术使用，后端技术涉及到Spring Boot，Spring Security，MyBatis-Plus，MySQL，Redis等，前端技术涉及到Vue.js，Element-UI，ECharts，Axios等。
后端技术
| 技术 | 说明 | 官网 |
|---|---|---|
| SpringBoot | Web应用开发框架 | https://spring.io/projects/spring-boot |
| SpringSecurity | 认证和授权框架 | https://spring.io/projects/spring-security |
| MyBatis | ORM框架 | http://www.mybatis.org/mybatis-3/zh/index.html |
| Druid | 数据库连接池 | https://github.com/alibaba/druid |
| JWT | JWT登录支持 | https://github.com/jwtk/jjwt |
| Lombok | Java语言增强库 | https://github.com/rzwitserloot/lombok |
| PageHelper | MyBatis物理分页插件 | http://git.oschina.net/free/Mybatis_PageHelper |
| Redis | Key-Value数据库 | https://redis.io/ |
前端技术
| 技术 | 说明 | 官网 |
|---|---|---|
| Vue | 前端框架 | https://vuejs.org/ |
| Vue-router | 路由框架 | https://router.vuejs.org/ |
| Vuex | 全局状态管理框架 | https://vuex.vuejs.org/ |
| Element | 前端UI框架 | https://element.eleme.io |
| Axios | 前端HTTP框架 | https://github.com/axios/axios |
| v-charts | 基于Echarts的图表框架 | 📣 有源码 获取源码 |
4，系统设计
功能权限设计
5，音乐网站页面展示
5.1 登录/注册
 登录
|
 注册
|
5.2 首页
 首页
|
 首页全览
|
5.3 搜索歌曲
5.4 歌单
|
|
5.4.1 歌单详情
5.5 歌手
 歌手页面
|
 歌手详情页
|
5.6 播放页
 歌曲播放页
|
 歌曲播放列表
|
5.6.1 播放页功能
播放页功能从左到右，分别是：收藏歌曲、下载歌曲、播放列表、音量调节
5.7 我的
 个人中心
|
 编辑个人资料
|
5.8 现场
6，后台管理页面展示
6.1 登录
6.2 首页
6.3 用户管理
 添加用户
|
 修改用户
|
6.3.1 用户收藏管理
6.4 歌手管理
 修改歌手
|
 添加歌手
|
6.4.1 歌手歌曲管理
 添加歌曲
|
 修改歌曲
|
6.5 歌单管理
 添加歌单
|
 修改歌单
|
6.5.1 歌单歌曲管理
6.5.2 歌单评论管理
