引言

数字音乐已成为日常娱乐的重要入口，用户不仅希望快速找到心仪歌曲，还希望在同一平台完成播放、收藏、评论与社区交流。传统静态网页或单一播放页面难以支撑分类检索、播放统计、个性化推荐与内容运营等复合需求。对于学习 Web 全栈开发的同学而言，搭建一套结构清晰、功能完整的在线音乐平台，既能练熟前后端分离与文件上传，也能理解音乐类业务的数据建模方式。

本课题实现的 Vue 在线音乐平台面向普通听众与平台管理员两类角色：用户可在浏览器中浏览歌手与歌曲、在线播放音频、维护个人歌单、参与论坛讨论并阅读音乐资讯；管理员在后台维护歌曲库、分类标签、轮播图与资讯内容，并对用户、评论和帖子进行统一管理。系统以 Spring Boot 提供 REST 接口，Vue 3 构建交互界面，MySQL 持久化业务数据，适合作为毕业设计或课程综合实训的参考实现。

系统概述

本系统采用 B/S 架构，分为用户门户与管理后台两个 Web 端。普通用户通过顶部导航进入歌手、歌曲、排行榜、个性推荐、论坛、资讯等模块；登录后可在个人中心修改资料、管理歌单与论坛帖子。管理员通过独立登录页进入后台，左侧菜单切换用户管理、歌曲分类、歌手、歌曲、标签、论坛、评论、资讯、轮播图等模块。

主要业务链路为：管理员录入歌手与歌曲资源 → 用户检索并播放 → 收藏至歌单或发表评论 → 论坛互动与资讯浏览 → 后台统计维护与内容审核。歌曲播放量、收藏量会在详情页实时展示，排行榜按播放量排序，推荐模块基于标签相似度为用户推送相关曲目。

技术架构

系统采用 Spring Boot 2.5.3 作为服务端框架，MyBatis 2.2.0 完成 ORM 映射，MySQL 存储业务数据；前端使用 Vue 3.2.13、Vue Router 4、Vuex 4 与 Element Plus 1.0.2-beta.63 构建单页应用，Axios 负责接口通信，WangEditor 支持资讯与歌手介绍的富文本编辑，ECharts 可用于后台统计展示。整体分为表现层、业务层与数据层：表现层负责页面渲染、路由跳转与音频播放交互；业务层完成权限校验、分页查询、收藏逻辑与推荐计算；数据层通过 Mapper XML 访问数据库。

层次	技术选型	说明
表现层	Vue 3 + Element Plus	用户门户与管理后台共用组件体系
业务层	Spring Boot 2.5.3	Controller 暴露 REST 接口，Service 封装业务规则
数据层	MySQL + MyBatis 2.2.0	12 张核心业务表，支持分页与关联查询

后端服务默认端口 8089，上下文路径为 /MusicPlatform；前端开发服务通过 Vue CLI 启动，接口基地址配置为本地后端地址。

核心功能

歌手与歌曲浏览

用户进入歌手列表页可查看各位歌手的封面与浏览量，点击歌手名称进入详情页浏览其代表作。左侧歌曲分类栏提供流行、摇滚、轻音乐、欧美、日韩等入口，便于按风格筛选曲库。歌曲列表支持按名称关键字搜索，卡片式展示封面、歌手与分类信息，点击后跳转详情页。

用户登录与个人中心

未登录用户可在登录页输入用户名与密码，系统校验通过后写入会话信息并允许访问收藏、评论等需登录功能。个人中心欢迎页展示头像、姓名、电话等资料，左侧菜单提供我的歌单、我的论坛、修改信息与修改密码等入口，形成完整的账户自服务闭环。

歌曲播放、收藏与歌单

歌曲详情页展示封面、类别、歌手、播放量、收藏量与标签。用户可点击「收藏到歌单」将曲目加入个人列表，也可下载音频文件到本地；页面底部集成播放器控件，支持进度拖动与音量调节。歌单播放页以表格列出已收藏歌曲，点击「播放」即可切换当前曲目并连续收听，满足日常听歌场景。

排行榜、推荐与社区

音乐排行榜按播放量降序展示热门歌曲，个性推荐模块利用标签余弦相似度算法，根据用户偏好推送相关曲目。论坛支持发布主题与楼层回复，歌曲详情页可发表评论；资讯模块以图文形式发布行业动态，丰富平台内容生态。前台顶部导航栏统一串联首页、歌手、歌曲、排行榜、论坛、资讯、个性推荐与歌单播放等入口。

后台运营管理

管理员登录后台后可在用户管理页按用户名、姓名检索注册用户，执行详情、编辑与删除操作。歌曲管理支持上传封面与 MP3 文件、设置分类与多标签；歌手、分类、标签、资讯、轮播图等模块均提供标准增删改查表单。轮播图添加页通过上传组件选择本地图片，提交后写入数据库并在用户端首页轮播展示，实现运营内容的可视化配置。

数据库设计

系统数据库 musicplatform 包含 12 张核心业务表，主要包括：

• user：存储注册用户用户名、密码、头像、姓名、电话、地址与注册时间
• admin：后台管理员账号、角色与权限标识
• song：歌曲名称、分类、歌手、封面与音频路径、播放量 see、收藏量 fav、标签字段
• singer：歌手名称、头像、简介富文本与浏览量
• fenlei、cfenlei：歌曲大类分类与细粒度标签
• fav：用户歌单收藏记录，含歌曲编号、收藏时间与是否当前播放标识 iscur
• bbs：论坛主题与回复，pid 为 0 表示主帖，非 0 表示楼层回复
• ping：歌曲评论及管理员 reply 回复内容
• zixun：音乐资讯标题、封面、简介与正文
• pic：首页轮播图名称与图片路径

歌曲表中的 see、fav 字段随播放与收藏操作递增，为排行榜与详情展示提供数据支撑；收藏表 iscur 字段标识歌单播放队列中的当前曲目。

界面与交互展示

下图汇总演示录像中的关键界面，便于理解从用户浏览到后台维护的完整操作路径。用户端以深色背景搭配白色内容卡片，突出专辑封面与播放器；管理端采用左侧菜单加右侧表格的经典布局，Element Plus 组件保证表单与分页交互的一致性。

部署与运行

运行环境建议 JDK 1.8、Maven 3.x、MySQL 5.7 及以上、Node.js 14 及以上与现代浏览器。部署时先在 MySQL 中创建 MusicPlatform 库并执行 DB 目录下 musicplatform.sql 初始化表结构与示例数据，再修改 application.yml 中的数据库连接信息。后端在 MusicPlatformServer 目录执行 mvn spring-boot:run 启动，前端在 MusicPlatformWeb 目录执行 npm install 与 npm run dev 启动开发服务。确认前端 http.js 中 base 地址与后端端口一致后即可联调。生产环境部署后请自行修改默认管理员与普通用户密码，勿继续使用演示弱口令。

总结

本课题完整覆盖了在线音乐平台的核心链路：资源管理、在线播放、歌单收藏、社区互动与后台运营。技术选型上前后端分离清晰，MyBatis 映射便于理解 SQL 与实体关系，Vue 3 组件化则利于扩展移动端或小程序。后续可在现有架构上接入第三方音乐 API、增加会员订阅、消息推送或基于协同过滤的推荐算法，进一步贴近商业产品形态。

本文为毕业设计学习交流，演示系统功能与技术实现思路，仅供学习参考。