当前位置：首页 > news >正文

SpringBoot3+Vue3+MySQL 音乐分享创作网站前后端分离源码实战

news 2026/8/9 10:32:26

一、项目简介

拾音集是一个面向原创音乐分享与创作场景的完整前后端分离项目。系统后端基于 Spring Boot 3 提供 RESTful API，前端基于 Vue 3 构建单页应用，数据存储使用 MySQL 8.x。系统内置普通用户、创作者、管理员三种角色，覆盖了从音乐作品上传、审核、发布、播放、评论、收藏、关注、私信到后台数据统计与内容管理的完整业务闭环。项目代码结构清晰，接口设计规范，适合作为 Java 全栈开发的学习案例或二次开发的基础模板。

二、技术栈

技术	说明
后端框架	Spring Boot 3.x
ORM	MyBatis-Plus（含分页插件与自动填充）
权限方案	基于 HttpSession 的登录校验
密码加密	Hutool MD5
文件上传	MultipartFile + 本地存储
前端框架	Vue 3（Composition API + script setup）
状态管理	Pinia（userStore）
构建工具	Vite
前端组件库	Element Plus
路由	Vue Router（Hash 模式）
HTTP 客户端	Axios
数据库	MySQL 8.x
跨域处理	CORS 全局过滤器

三、功能模块

管理员端

数据概览仪表盘：展示注册用户数、创作者数、已发布作品数、待审核作品数、总播放量、评论数、收藏数、待处理举报数等核心指标，便于运营决策。
用户管理：查看用户列表，支持按昵称或用户名模糊搜索，分页展示用户信息。
用户状态控制：启用或禁用用户账号，禁用后该用户无法登录系统。
重置用户密码：一键将指定用户密码重置为 123456，并自动进行 MD5 加密存储。
作品管理：查看所有作品列表，支持按审核状态筛选和按标题关键词搜索。
作品审核：对待审核作品执行通过或拒绝操作，更新作品状态字段。
删除违规作品：对已发布但存在违规内容的作品执行删除。
评论管理：查看全站评论列表，支持按内容关键词搜索，展示评论用户头像昵称及对应歌曲名称。
删除评论：对违规评论执行软删除，将状态字段置为 0。
举报管理：查看举报列表，支持按待处理或已处理状态筛选。
处理举报：将举报标记为已处理，并记录处理时间。
活动管理：新增活动，填写标题、描述、封面、起止时间及状态字段。
活动编辑与删除：修改活动信息或删除过期活动。

普通用户端

注册与登录：注册时选择角色（普通用户或创作者），提交用户名、密码、昵称等字段；登录采用 MD5 加密校验，并按角色自动跳转至对应首页或面板。
首页推荐作品：按播放量降序展示前 10 条已发布作品。
最新作品列表：按创建时间降序展示前 10 条已发布作品。
作品详情页：展示封面、创作者头像昵称、分类、歌词、描述、播放量、收藏数及评论数。
音频播放：调用后端接口生成 WAV 音频流，支持 30 秒演示音频播放。
收藏与取消收藏：通过 toggle 接口切换收藏状态，重复点击可收藏或取消。
发表评论：提交评论内容并关联作品 ID，评论状态默认为正常。
关注与取消关注：通过 toggle 接口关注或取消关注创作者，支持检查当前是否已关注。
查看关注/粉丝列表：展示用户昵称与头像。
个人主页：展示头像、昵称、简介、邮箱、手机号、角色、关注数与粉丝数。
编辑个人资料：修改头像、昵称、简介、邮箱、手机号。
我的收藏列表：查看所有已收藏的音乐作品。
我的关注列表：查看所有已关注的用户。
私信功能：向指定用户发送私信，填写接收者 ID 与内容，消息默认为未读状态。
聊天会话：查看与某用户的聊天记录，按时间升序排列，并自动将对方发来的未读消息标记为已读。
联系人列表：按最近消息时间排序，展示最后一条消息内容。
未读消息与通知：查看未读消息数量，查看通知列表（按时间降序），支持单条标记已读和全部标记已读。
举报功能：举报作品或评论，提交举报类型、目标 ID、原因，状态为待处理。
探索页：按分类筛选作品，支持按标题关键词搜索。
活动浏览：查看进行中的活动，包含标题、描述、封面及起止时间。
退出登录：销毁服务端 Session。

创作者端

上传音乐作品：填写标题、分类、描述、歌词，上传封面图片和音频文件。
作品管理：查看所有已发布、待审核、已拒绝作品，支持按状态筛选。
编辑作品信息：修改已上传作品的标题、分类、描述、歌词、封面等字段。
删除作品：删除自己名下的音乐作品。
作品统计：查看作品总数、已发布数量、总播放量、总收藏数、总评论数。
互动数据查看：查看评论列表，包含用户头像昵称、评论内容及时间。
编辑创作者资料：修改头像、昵称、简介、邮箱、手机号。
消息与私信：查看未读消息与通知，发送和接收私信。

四、项目总结

本项目在技术选型上紧跟主流，后端采用 Spring Boot 3 + MyBatis-Plus，前端使用 Vue 3 + Pinia + Element Plus，前后端通过 RESTful API 交互，并处理了 CORS 跨域与 Session 会话保持。业务功能覆盖完整，从作品上传、审核、播放到社交互动、私信通知，再到后台数据统计与内容治理，形成了闭环。代码结构分层清晰，接口命名规范，适合用于学习 Spring Boot 3 与 Vue 3 的前后端分离开发流程，也可作为音乐类内容社区项目的开发基座，在此基础上扩展推荐算法、评论回复或音频转码等进阶功能。