简介基于SpringBoot与Vue.js构建的前后端分离在线音乐播放系统面向计算机专业毕业设计及Java全栈开发者涵盖前台用户端与后台管理端功能完整且界面美观比传统管理类课题更具实际应用价值。包体为1份PDF文档共1.77MB内容包含项目目录结构、开发环境配置JDK、Maven、Node.js、MySQL等、数据库初始化步骤及前后端启动方法并配有页面功能说明与运行示意可帮助读者快速搭建并运行项目。文档还梳理了前台Home、登录、歌词、歌单、歌手等页面和后台用户、歌曲、评论等管理模块便于理解整体业务逻辑与代码结构。已有6201人学习下载适合需要参考完整SpringBootVue方案、完善毕业设计或提升全栈实战能力的开发者。1. 这个音乐系统能给你什么如果你在找毕业设计课题大概率已经看腻了在线考试、人事管理、二手车交易这类项目——功能没毛病但界面千篇一律答辩时老师翻两页PPT就失去兴趣了。这个基于SpringBoot和Vue的在线音乐播放系统是另一类东西它是真的能打开浏览器听歌、搜歌、看歌词、建歌单的项目前台用户端和后台管理端分离功能覆盖了音乐平台的核心链路而不是停留在CRUD的演示层面。从技术角度看这个项目的价值在于它把「前后端分离」这件事落得很完整。后端用SpringBoot提供REST接口前端分两个独立工程——music-client跑用户端music-manage跑管理后台两者分别通过HTTP请求和后端通信。你不仅能练到SpringBoot的接口设计、MyBatis操作MySQL还能接触到Vue Router路由组织、Vuex状态管理、Axios封装这些前端工程化的常规操作。这套系统对两类人最有用一类是正在做毕设、希望系统「能演示、有亮点、扛得住提问」的学生另一类是刚入门前后端分离开发、想找一个完整项目拆开看工程师怎么组织代码的开发者。下文会从环境版本选型、数据库结构、前后端运行流程、到二次开发技巧完整走一遍。2. 环境版本选型为什么每个版本都卡得这么死拿到压缩包后你会发现作者对软件版本的要求近乎苛刻JDK必须1.8、Maven必须3.6.1、Node必须装Vue2.9对应的版本、数据库必须MySQL5.7。这不是强迫症而是这套技术栈在版本上存在强耦合关系踩过坑的人才知道要这样锁版本。2.1 JDK与SpringBoot的版本绑定SpringBoot 2.x系列基于JDK8构建虽然也能在JDK11或17上运行但很多底层依赖比如Tomcat嵌入版本、MyBatis Starter的兼容性在更高JDK下会出现莫名奇妙的异常。最常见的问题是javax包和jakarta包的冲突——SpringBoot 3.0后Oracle把Java EE API移交给了Eclipse基金会包名从javax.*改成了jakarta.*如果你的代码是从2.x迁移到3.x所有import javax.servlet相关的代码都要改。这个项目用的是HTTP API方式通信只要后端版本锁定前端用Vue 2.9就不会有跨域之外的兼容问题。检查JDK版本用java -version输出里出现1.8.0_xxx就是正确的。如果机器上装了多个JDK在IDEA的File - Project Structure - SDK里手动指定JDK1.8同时检查Settings - Build Tools - Maven - Runner里的JRE是否也指向1.8。很多同学项目跑不起来不是代码问题是Maven用了JDK17去编译JDK8语法的代码报出invalid target release这时无论怎么clean都没用。2.2 Maven配置与阿里云镜像Maven 3.6.1是2019年的版本和SpringBoot 2.x的插件兼容性最好。Maven 3.8对中央仓库的HTTPS要求更严格某些旧私服地址会直接拒绝连接。安装后要做两件事第一在settings.xml的mirrors节点里配置阿里云镜像第二确认本地仓库路径不是系统盘避免权限问题。作者在压缩包里附了自己的settings.xml直接替换掉Maven安装目录conf/settings.xml就行。如果你需要自己配置核心内容如下mirror idaliyunmaven/id mirrorOfcentral/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirrormirrorOf填central表示只镜像中央仓库不会影响你自己远程仓库的访问public是阿里云聚合仓库同时代理了Maven Central和JCenterSpringBoot的绝大多数依赖都能从这里拉到速度比直接连中央仓库快一个量级。2.3 Node与Vue版本的前置约束前端工程是Vue 2.9脚手架生成的也就意味着Node版本不能太新。Node 17及以上版本在运行旧Webpack配置时会报opensslErrorStack错误原因是Webpack 4依赖的OpenSSL 1.1和Node 17默认的OpenSSL 3不兼容典型的报错是Error: error:0308010C:digital envelope routines::unsupported解决方案不是去升级Webpack而是安装Node 14或16 LTS版本然后确认npm和Vue CLI版本node -v npm -v vue --versionNode 14配Vue CLI 4.x是这个项目的标准组合。如果你用的是nvm管理Node版本直接切换即可nvm install 14.21.3 nvm use 14.21.32.4 数据库环境与Navicat导入MySQL 5.7是SpringBoot 2.x最稳妥的搭档。MySQL 8.0之后的认证插件换成了caching_sha2_password而旧版JDBC驱动不认识这个插件会抛出Unable to load authentication plugin异常。如果非要装MySQL 8.0需要改application.properties里的驱动配置或者在MySQL里把用户的认证插件改回mysql_native_password。Navicat 15的破解教程网上一搜一大把但更保险的做法是装现在官方免费的DBeaver Community版连接MySQL 5.7完全无压力。连接参数参数值说明主机localhost本机默认端口3306MySQL默认端口用户名root安装时设置密码自定义要和application.properties中一致这里有个容易踩的坑安装MySQL时如果没设密码Navicat连接时留空即可但application.properties中spring.datasource.password也要留空否则会报Access denied。3. 后端工程结构与数据库设计解压压缩包后会看到核心目录music-server这就是SpringBoot的后端工程。它不是一个Maven多模块项目而是一个典型的单模块Web应用结构清晰适合作为毕设代码讲解。3.1 核心依赖与配置说明pom.xml里引入的依赖决定了整个后端的能力边界dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependencyspring-boot-starter-web内嵌了Tomcat和Spring MVC这是提供REST接口的基础MyBatis Starter负责数据库ORMMySQL Connector是JDBC驱动。这三个组合是SpringBoot 2.x时代最主流的数据访问方案。数据库连接配置在src/main/resources/application.propertiesspring.datasource.urljdbc:mysql://localhost:3306/music?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneGMT%2B8 spring.datasource.usernameroot spring.datasource.password你的密码 spring.datasource.driver-class-namecom.mysql.jdbc.DrivercharacterEncodingutf-8保证中文歌曲名、歌手名不乱码serverTimezoneGMT%2B8必须设置否则高版本MySQL驱动会报时区错误useSSLfalse跳过SSL握手本地开发能显著提速。3.2 九张表的数据模型数据库名为music包含九张表这九张表构成了一个完整的音乐平台数据关系网表名核心字段作用adminid, username, password管理员登录验证singerid, name, sex, pic, location歌手基本信息songid, singer_id, name, url, lyric歌曲信息和歌词文件路径song_listid, title, pic, style, introduction歌单基本信息和分类list_songid, song_id, song_list_id歌单和歌曲的关联表consumerid, username, password, avator前台注册用户信息collectid, user_id, type, song_id收藏记录type区分歌曲或歌单commentid, user_id, song_id, content用户评论adminid, username, password管理后台账号设计上有两个值得注意的点list_song是一个典型的多对多中间表因为一首歌可以出现在多个歌单里一个歌单也可以包含多首歌collect表中用type字段区分收藏的是单曲还是歌单避免拆成两张表。这些设计决策在答辩时都是可以展开讲的加分项。3.3 Controller接口分层后端代码组织采用标准的Controller-Service-Mapper三层架构以歌曲模块为例RestController RequestMapping(/song) public class SongController { Autowired private SongService songService; GetMapping(/detail) public Result selectByPrimaryKey(RequestParam Integer id) { return Result.success(songService.selectByPrimaryKey(id)); } GetMapping(/singer/detail) public Result selectBySingerId(RequestParam Integer singerId) { return Result.success(songService.selectBySingerId(singerId)); } }RestController返回JSON数据而不是视图页面这就是前后端分离的通信基础RequestMapping(/song)定义了模块级路由前缀前端调用/song/detail?id1时Spring MVC会自动把id参数绑定到方法的id变量上。后端启动后默认监听8080端口IDEA里运行MusicServerApplication主类看到Tomcat started on port(s): 8080就说明启动成功了。一个常见问题是8080被其他程序占用比如之前残留的Node进程application.properties中可加server.port8181换端口但这样前端代码里的baseURL也要同步修改。4. 前端双工程运行与联调前端拆成music-client和music-manage两个独立工程这是这个项目在结构上区别于普通毕设的地方。两个工程共享同一套后端API但服务对象完全不同。4.1 前台用户端music-clientmusic-client是用户端的Vue工程进入目录后安装依赖并启动cd music-client npm install # 如压缩包已带node_modules可跳过 npm run devnpm run dev执行的是package.json中scripts节点下的dev命令脚手架生成时配置的是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js。webpack-dev-server会启动一个开发服务器并监听端口默认配置在config/index.js中module.exports { dev: { port: 8083, proxyTable: { /: { target: http://localhost:8181, changeOrigin: true } } } }这里的proxyTable是联调的关键它把所有未知路径的请求代理到后端8181端口。也就是说前端开发服务器收到/song/detail请求后会把请求转发给后端处理绕过了跨域问题。changeOrigin:true会修改请求头中的Host字段让后端认为请求来自同源。浏览器访问http://localhost:8083后进入的是Home主页。主页通过/api/song之类的模块调用后端接口例如SongList组件里的逻辑export const getSongList () { return request({ url: /songList, method: get }) }这段代码中的request是Axios实例的封装/songList是相对路径最终拼接成完整URL走代理转发到后端。Axios封装的核心目的是统一处理错误码和携带token比如在request拦截器里加上service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config })4.2 后台管理端music-managemusic-manage的启动方式和client完全一样只是默认端口是8080。注意这里有个冲突隐患后端SpringBoot默认也是8080端口。如果先启动了后端又启动manage前端后启动的那个会报Port 8080 is already in use。解决办法有两个先启动后端占用8080再把manage的config/index.js端口改成8081module.exports { dev: { port: 8081, proxyTable: {} } }或者反过来后端改端口manage保持8080。不管怎么改记得proxyTable要指向真正的后端地址。开发时要学会看浏览器F12里的Network面板——点击某个菜单时如果请求显示红色失败先看请求URL是不是正确路由到了后端端口这是联调时最基础的排查手段。4.3 管理员登录验证后台管理端运行起来后用压缩包中给出的账号admin、密码1登录。登录逻辑并不复杂前端提交表单数据到后端后端查询admin表验证身份PostMapping(/login) public Result login(RequestBody Admin admin) { Admin dbAdmin adminService.verifyPassword(admin.getUsername(), admin.getPassword()); if (dbAdmin ! null) { return Result.success(登录成功, dbAdmin); } else { return Result.error(用户名或密码错误); } }后端验证通过后返回用户信息前端把返回的数据存到Vuex中并用beforeEach路由守卫拦截未登录状态跳转到Login页。整个认证逻辑不涉及JWT或Session是纯接口调用这正是毕设项目的常见做法——演示效果好且易于解释。5. 二次开发技巧扩展功能与避开常见坑这个项目的界面和基础功能已经完成但真正让它在答辩时拿高分的往往是你额外加进去的东西。这里的几个方向难度都不大对SpringBoot和Vue有一定理解就能完成。5.1 给歌单表扩展字段在原表基础上直接加字段是最省事的扩展方式。比如要给歌单增加「播放次数」统计先在Navicat中执行ALTER TABLE song_list ADD COLUMN play_count INT DEFAULT 0 COMMENT 播放次数;然后在后端的SongList实体类加一个playCount字段注意MyBatis开启驼峰转换再在Mapper接口中加一个更新的方法。前端歌单卡片组件读取play_count字段显示每次点击调用更新接口就能实现一个简单的热度排序。这类小功能代码量不大但能体现你对整个请求链路的掌握程度。5.2 批量导入歌曲的正确姿势项目自带的SQL文件已有测试数据但如果你要换成自己的歌曲要注意有三张表要同步插入song表保存歌曲基本信息list_song表把歌曲挂到某个歌单下如果歌曲有歌词还要把歌词文本存成lrc文件并在song表的lyric字段填入路径。常见做法是做一个简单的导入页面用文件上传接口接收歌曲文件和歌词文件返回上传后的URL后写入数据库。前端上传歌曲的代码可以这样复用const formData new FormData() formData.append(file, file) formData.append(singerId, singerId) formData.append(name, name) request.post(/song/add, formData, { headers: { Content-Type: multipart/form-data } })后端对应位置用RequestParam(file) MultipartFile file接收文件保存到本地磁盘的上传目录并把相对路径存入数据库。5.3 高频报错排查运行过程中最常见的四类问题按经验整理如下表格症状原因排查方向前端页面白屏且控制台报webpack-dev-server错误Node版本过高降到Node 14并重装node_modules后端启动报APPLICATION FAILED TO START数据库连接失败或密码错误检查MySQL服务和application.properties登录后接口401/403前端未携带token查看Axios请求头是否带了Authorization上传图片/歌曲后访问404静态资源映射未配置SpringBoot需实现WebMvcConfigurer映射本地目录最后补一个所有毕设必查的细节答辩时不要展示npm run dev开发模式建议提前执行npm run build构建生产包用Nginx或serve工具托管构建产物后端单独运行这样演示的是生产环境部署。面试官或评委问起来你能清晰说出开发环境和生产环境的差别这个项目的价值才算真正被看见。本文还有配套的精品资源点击获取