基于SpringBoot+Vue的前后端分离的音乐播放系统(用户端)和音乐管理系统(后台管理) | SpringBoot+Vue入门练手项目

🙋大家好！我是毛毛张!
🌈个人首页： 神马都会亿点点的毛毛张

今天毛毛张分享的是最近复现的一个基于SpringBoot+Vue的入门练手项目的简介

1.项目简介

1.1 项目概述

• 今天毛毛张分享的是最近复现了一个练手的前后端分离的项目，改项目一个基于Java的Springboot框架和Vue框架，使用MySQL数据库的音乐管理系统，以满足用户对音乐的播放和管理需求
• 这是毛毛张在淘宝上面购买的一个项目，并对源代码进行了重构了，原始的代码前后端发送和接收数据的格式都不是JSON格式，为了顺应现在业务的需求，毛毛张通过前后端联调，重新修改了前后端发送和接收数据的格式
• 在持久层将原始的Mybatis更换成MyBatis-Plus，虽然阿里巴巴已经禁用了Mybatis-Plus，但是对于一个初学者，对数据库不熟悉的人来说，降低了写SQL语句的难度，能够把一个完整的项目先做出来才是关键。
• 前端技术栈：
  • Vue.js
  • Vuex
  • Vue Router
  • Element UI
  • Axios
  • Node.js
  • npm
  • ECMAScript 6 (ES6)
• 后端技术栈：
  • Java8（JDK1.8）
  • SpringBoot2
  • Mybatis-Plus3
  • MySQL
  • Druid
  • Lombok
  • Hutool
  • FastJSON
  • SpringBoot DevTools
  • AOP
  • Knife4J
• 适用范围： 学过一点JavaWeb，并且刚学完SpringBoot，想找一个练手的项目的人

1.2 项目展示

1.2.1 用户端界面展示

• 首页：
  
  

• 歌单页面：
  

• 歌手页面：
  

• 用户页面：
  

1.2.2 后台管理系统界面展示

• 后端界面：
  

• 用户管理界面：
  

• 歌手管理界面：
  

• 歌单管理界面：
  

1.3 代码及文件目录

• 毛毛张已经将代码上传到CSDN资源库，代码获取链接：https://download.csdn.net/download/weixin_48235955/89921222

1.3.1 后端文件说明

1.3.2 管理后台前端代码文件说明

1.3.3 用户界面前端代码文件说明

2.项目部署

2.1 后端

2.1.1 准备环境

• Java8(JDK1.8)、IDEA、Maven、Mysql5.7+、Navicat

2.1.2 启动步骤

• 打开IDEA后，选择 “open” 打开 “music-backend”" 项目
• IDEA配置好 “JDK1.8” 和 “Maven”，刷新等待编译成功
• 使用Navicat导入数据库文件 db_Music.sql
• 在"application.yml"中配置好数据库配置
  • 如果需要系统支持协调过滤的推荐算法，推荐音乐歌单，将“userRecommend”设置为true
    
• 启动后端SpringBoot工程

2.2 前端

• 前端分用户端和管理端，需要分开编译

2.2.1 准备环境

• Node 16.13.2，或者更高的版本（可能出现不兼容编译失败的情况）

2.2.2 启动步骤

• 打开 “music-frontend-user”、“music-frontend-admin” 目录
  • 这里可以选择使用 “cmd”、“Vscode”、“WebStorm”、“IDEA” 等能够打开和编译vue环境即可
• 在"终端"执行命令：

  npm config set registry https://registry.npmmirror.com
  

• 在"终端"执行命令：等待编译成功

npm  install

2.3 体验

• 启动完成后显示相关登录地址
• 用户前台访问地址：http://localhost:9173/
  • 账号： user / user
• 管理员访问地址：http://localhost:9172
  • 账号： admin / 123456
• 如果不对，可以直接查看数据库的admin和consumer表查看用户名和密码

3.数据库介绍

• 由于这个项目的数据库表名设计的不是很好，毛毛张在此对这个数据库中的各个表进行了详细的介绍

admin表

• 该表中存储的是管理员的账户和密码

数据名称	数据类型	数据描述
id	int	主键
name	varchar(255)	管理员的账号
password	varchar(255)	管理员的密码

collect表

• 存储用户收藏的表
  • 每一个条目代表，用户的id，用户收藏的类型、歌曲的id、歌单的id、以及收藏时间

数据名称	数据类型	数据描述
id	int	主键
user_id	int	用户id
type	tinyint(1)	收藏类型
song_id	int	歌曲id
song_list_id	int	歌单id
create_time	datetime(0)	收藏时间

comment表

• 用户对歌曲或者歌单的评论

数据名称	数据类型	数据描述
id	int	主键
user_id	int	用户id
type	tinyint(1)	评论类型
song_id	int	歌曲id
song_list_id	int	歌单id
content	varchar(255)	评论内容
create_time	datetime(0)	收藏时间
up	int	评论点赞数

consumer表

• 注册用户信息表

数据名称	数据类型	数据描述
id	int	主键
username	varchar(255)	账号
password	varchar(255)	密码
sex	tinyint(1)	性别
phone_num	char(15)	电话
email	char(30)	邮箱
birth	datetime(0)	生日
introduction	varchar(255)	签名
location	varchar(255)	地区
avator	varchar(255)	头像
create_time	datetime(0)	创建时间
update_time	datetime(0)	更新时间

list_song表

• 该表存储了歌曲所对应的歌单

数据名称	数据类型	数据描述
id	int	主键
song_id	int	歌曲id
song_list_id	int	歌单id

rank表

• 该表存储了用户对歌单的评分表

数据名称	数据类型	数据描述
id	int	主键
song_list_id	int	歌单id
consumer_id	int	用户id
score	int	评分

singer表

• 存储的歌手对应的信息

数据名称	数据类型	数据描述
id	int	主键
name	varchar(255)	姓名
sex	tinyint(1)	性别
pic	varchar(255)	头像
birth	datetime(0)	生日
location	varchar(255)	地区
introduction	varchar(1600)	简介

song表

• 存储了歌曲对应的信息

数据名称	数据类型	数据描述
id	int	主键
singer_id	int	歌手id
name	varchar(255)	歌名
introduction	varchar(255)	简介
create_time	datetime(0)	创建时间
update_time	datetime(0)	更新时间
pic	varchar(255)	歌曲图片
lyric	text	歌词
url	varchar(255)	歌曲地址

song_list表

• 存储了歌单信息

数据名称	数据类型	数据描述
id	int	主键
title	varchar(255)	标题
pic	varchar(255)	歌单图片
introduction	text	简介
style	varchar(255)	风格
------------	------------	------------
id	int	主键
title	varchar(255)	标题
pic	varchar(255)	歌单图片
introduction	text	简介
style	varchar(255)	风格

---

都看到这了，不妨一键三连再走吧！

🌈欢迎和毛毛张一起探讨和交流！
联系方式点击下方个人名片

---