简介基于Spring Boot与Vue的前后端分离在线教育平台是一套面向计算机相关专业毕业设计的完整项目源码可应用于毕业设计、课程设计或期末大作业。系统覆盖课程管理、教师管理、会员管理、权限控制、学科分类、数据统计等模块并通过前后端分离架构实现在线学习与课程管理核心流程。压缩包共194个文件、约1.67MB源码以165个Java文件为主后端包含EduCourseService、EduTeacherService、AclUserService等业务服务类前端涵盖Vue.js页面组件、Vuex状态管理与接口请求数据层提供SQL脚本含用户表、课程表、成绩表等表结构与基础数据另有YAML配置、XML映射和PNG设计图等辅助资源。配套文档包含系统设计文档、数据库设计文档、功能说明、接口文档和部署指南可帮助理解项目结构、快速启动并完成二次开发。目前已有66人学习/下载适合需要实战练习Spring Boot与Vue整合、希望快速搭建毕设项目的学习者。1. 拿到这个压缩包的第一件事先搞清楚它能不能跑起来“毕业设计-基于SpringBootVue前后端分离的在线教育平台项目源码数据库文档说明.zip”这种压缩包我接手过不止一次。里面通常是一个 SpringBoot 后端接口工程、一个 Vue 前端工程、一份 SQL 数据库脚本外加一篇说明文档业务上把用户、课程、章节、订单、收藏这些在线教育最常见的功能都串了起来。很多人解压后按自己的习惯安装最新版 JDK、Node 和 MySQL然后被一连串报错劝退以为是源码有问题。我的观点相反这类项目跑不起来的多数原因是启动顺序和版本配对错了不是代码烂。这篇文章就按“先看懂结构 → 真正跑起来 → 数据库改造 → 避坑 → 打包交付”的顺序讲完适合要做毕设、接手别人源码或想用前后端分离完整练手的人。2. 先看压缩包里有什么SpringBoot 后端与 Vue 前端到底怎么分工2.1 前后端到底在分什么接口层、页面层与数据流向所谓“前后端分离”不是把代码放在两个文件夹里就叫分离而是运行时有两个进程开发时两套环境发布时可以合并也可以独立部署。后端 SpringBoot 只负责提供 JSON 接口比如/login、/course/list、/order/create前端 Vue 只负责渲染页面、管理路由、控制交互。两者之间唯一的联系就是 HTTP 请求和 JSON 响应。在线教育平台典型的数据流向是这样的用户在登录页输入账号密码Vue 组件收集表单数据通过 axios 发起 POST 请求到 SpringBoot 的 ControllerController 不直接写业务逻辑而是转给 ServiceService 调用 MyBatis 的 Mapper 接口去操作 MySQL 数据库数据库返回结果后逐层传回最终以 JSON 格式回到 VueVue 再把数据渲染到页面上。理解这一条链路后面所有排错都围绕它展开。在线教育这个业务场景很适合前后端分离。课程列表、课程详情、视频播放、评论分页这些页面交互很重改动的频率高而下单、支付回调、库存扣减、权限校验这些后端逻辑要求事务和安全性。两者拆开后前端调接口后端管业务互不干扰。对毕业设计而言能说清楚这种拆分解决了什么问题比堆十几个功能页面更让老师认可。2.2 后端工程三件套pom.xml、application.yml、MyBatis 映射我翻开一个 SpringBoot 后端工程不会急着点运行按钮而是先看三个文件pom.xml、application.yml、以及 MyBatis 的 Mapper XML。这三个文件决定了项目能不能编译、连什么库、SQL 写在哪。pom.xml里最重要的一项是spring-boot-starter-parent的版本号它直接决定你要用哪个版本的 JDK。大部分毕设项目用的是 SpringBoot 2.x对应 JDK 8 或 11如果写成 3.x就要求 JDK 17 以上而且包名从javax.*换成了jakarta.*。这就是后面最常见的“版本太高”问题来源。其次是mybatis-spring-boot-starter或mybatis-plus-boot-starter以及mysql-connector-j的版本MySQL 8 和 MySQL 5.7 对连接驱动的要求不同。看 pom 时养成习惯把 JDK 版本、数据库驱动版本、MyBatis 版本三个数字记在脑子里。application.yml是后端运行时的配置中心。需要关注四个参数server.port后端端口、server.servlet.context-path接口前缀、spring.datasource.url数据库连接串、spring.datasource.username/password数据库账号密码。很多项目启动不起来不是代码问题而是这里面的库名、密码和本机不匹配。配合 MyBatis 还有一个关键参数mybatis.mapper-locations它指定 Mapper XML 文件的位置写错的话运行时会报Invalid bound statement。这是我在 pom.xml 里最常确认的依赖块parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent dependencies dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.2/version /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency /dependencies这段配置说明两点SpringBoot 2.7.x 对应 MyBatis starter 2.x 是常见搭配不会出现javax与jakarta冲突MySQL 驱动依赖是runtime范围编译期不参与但运行时必须有。如果你拿到的是 SpringBoot 3.x 的 pom同样要看这个位置判断自己本机的 JDK 是否够用。我的习惯是先把这一块的版本记下来再去装环境而不是反过来。Mapper XML 是 MyBatis 容易被忽视的黑匣子。常见的约定是 XML 文件放在resources/mapper目录下namespace写成 Mapper 接口的全限定名id写成接口方法名。比如接口里有个UserMapper.selectByUsernameXML 里就必须有select idselectByUsername resultTypecom.xxx.entity.User。如果发现启动没问题、但调用时报Invalid bound statement多半是 XML 没被扫描到或者mapper-locations路径写错。2.3 前端工程五件套router、store、axios、views、vue.config.jsVue 端打开后不要直接npm install先看package.json。dependencies里写明了是 Vue 2 还是 Vue 3是 Element UI 还是 Element Plus有没有 axios、vue-router、vuex。scripts里写着启动命令通常是npm run serve。当年很多项目用的是 Vue 2 Vue CLI 4/5 Element UI如果你本机 Node 版本太高或太低安装依赖时会在 node-sass 上翻车。前端代码的理解顺序我一般这样走先看src/main.js这是入口文件知道挂了哪些插件和路由再看src/router/index.js看路由表和登录守卫然后看src/api目录下的 axios 封装确认接口地址怎么拼接的最后才是src/views下面的页面组件。反向看容易迷失在组件细节里。axios 封装是所有接口请求的统一出口。常见的做法是给实例设一个baseURL比如/dev-api在请求拦截器里把登录后拿到的 token 塞进 header在响应拦截器里统一处理 401 跳转登录页。如果这个文件里baseURL写死成某个固定 IP而你本地后端口不一样就会出现“前端页面正常、接口全挂”的现象。vue.config.js里最关键的是devServer.proxy它把前端开发服务器的请求转发到后端真实地址从而绕开跨域。举例来说前端跑在 8080 端口后端跑在 8081 端口浏览器直接请求 8081 会被 CORS 拦但通过代理转发就不会。下面是毕设项目里非常典型的配置module.exports { devServer: { port: 8080, proxy: { /dev-api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/dev-api: } } } } };这里target必须写后端真实地址注意如果后端配了context-path: /edu那么target要写成http://localhost:8081/edu或者保留/dev-api的 rewrite 规则去拼接。changeOrigin: true的作用是让后端收到的 Host 头变成后端地址很多后端没配 CORS只认这一招。第一次接触的时候最容易忽略的是“改完vue.config.js必须重启npm run serve”代理配置只在启动时读取一次。3. 从零把它跑起来环境准备、建库导数据、双端启动3.1 装环境前先读配置JDK、Node、MySQL 怎么对上版本这一步看起来基础却是这套源码能不能跑起来的分水岭。很多人在解压后直接装最新版 JDK 和 Node结果启动时报错一堆最后怀疑源码有问题其实只是版本配对错了。我先看pom.xml里的java.version。SpringBoot 2.x 项目写的是 1.8 或 11那本机 JDK 就用 8 或 11如果是 SpringBoot 3.x写的是 17那 JDK 至少 17。这里有个血泪经验高版本 JDK 可以编译低版本代码但反过来不行SpringBoot 3.x 换了jakarta包名直接把 2.x 项目放到 JDK 17 下编译会报“package javax.servlet does not exist”这不是代码问题是生态迁移。Node 版本看package.json。Vue CLI 4 用在 Node 10~14 上没问题Vue CLI 5 建议 Node 14 以上如果项目里有node-sass它跟 Node 版本绑定非常死Node 18 装旧版 node-sass 大概率直接编译失败。解决办法是看项目有没有.nvmrc没有就先试 Node 14/16这是 vue-cli 系项目最稳的区间。MySQL 版本主要看连接串里的驱动。MySQL 8 要用com.mysql.cj.jdbc.DriverMySQL 5.7 可以用旧驱动反过来用com.mysql.jdbc.Driver连 MySQL 8 会直接报错。所以装 MySQL 之前先看一眼application.yml里的driver-class-name确定是 5.7 还是 8.0。下面是一个常见的版本匹配速查表软件建议版本判断依据JDK8 或 11对应 SpringBoot 2.xpom.xml 里java.versionNode14 或 16对应 Vue CLI 4/5package.json 里的 vue-cli-service 版本MySQL5.7 或 8.0连接串里的 driver-class-nameMaven3.6和 IDE 自带的版本即可我的经验环境安装是这个项目里最不值得花时间硬刚的环节。与其去搜“为什么 node-sass 装不上”不如直接装一个和项目匹配的 Node 版本十分钟搞定。3.2 后端启动三步走改配置、导 SQL、跑 spring-boot:run后端启动说复杂也复杂说简单也简单改好数据库配置把 SQL 导进 MySQL然后启动 SpringBoot 主类。这三步的顺序不能反。先改application.yml。毕设项目的数据库名通常写在 url 里比如jdbc:mysql://localhost:3306/edu_education。如果你的 MySQL 里还没有这个库先创建或者导入 SQL 时让脚本自己建。用户名密码改成你本地的不要沿用压缩包里别人的。下面是一段常见的配置server: port: 8081 servlet: context-path: /edu spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/edu_education?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.edu.entity参数含义server.port是后端端口前端代理指向的就是它context-path是接口前缀没有的话不用写characterEncodingutf8解决中文乱码serverTimezoneAsia/Shanghai解决 MySQL 8 的时区报错。mapper-locations必须是实际 XML 路径我见过有人把 XML 放在java包下但这里写classpath:mapper/结果启动后所有 SQL 都失效。然后导入 SQL。先确定 SQL 文件里的建库语句是否需要手动建库。打开.sql文件看第一行如果是CREATE DATABASE那直接全量导入如果没有就先手动建库。导入命令mysql -u root -p --default-character-setutf8mb4 /path/to/edu_education.sql--default-character-setutf8mb4这个参数不能省。很多 SQL 脚本里带中文菜单名、课程名不用这个参数导入数据会变成乱码后面查问题又得排查半天。导入完成后用mysql -u root -p -e use edu_education; show tables;确认一下表数量至少要有用户表、课程表、订单表这些核心表才算导成功。最后启动后端。IDEA 里直接运行主类命令行用 Mavenmvn spring-boot:run启动成功的标志是日志里出现Tomcat started on port(s): 8081。这行日志没有出现之前接口都是不可用的。有人习惯一启动就去点前端页面然后说接口不通其实后端根本没起来。后端起来后可以先用 curl 验证一个接口curl http://localhost:8081/edu/login返回 JSON 说明后端链路基本通。如果返回 404检查context-path和接口路径有没有写对如果返回 401 或 500说明接口本身在跑只是没带参数或数据库有问题已经进入下一个排错阶段。3.3 前端启动两步走npm install 与 vue.config.js 代理前端启动相对简单但npm install是最容易出幺蛾子的一步。依赖安装失败、node-sass 编译报错、版本冲突这三个问题至少会遇到一个。我的处理顺序是先删掉可能已经存在的node_modules和package-lock.json再执行安装。保留package-lock.json的话npm install会严格按锁文件装如果锁文件是别人的环境生成的很可能装出问题但如果你信任这个锁文件用npm ci会更快更稳。这一步没有绝对正确我的习惯是先试npm install失败再清理重来npm install安装完成后启动开发服务器npm run serve看到App running at: http://localhost:8080就说明前端起来了。此时打开页面如果接口数据出不来大部分问题出在代理。前端代理配置我在第 2.3 节里给过一个例子这里补一个带后端context-path的变体proxy: { /dev-api: { target: http://localhost:8081/edu, changeOrigin: true, pathRewrite: { ^/dev-api: } } }这段配置的作用是前端发请求到/dev-api/login代理转发到http://localhost:8081/edu/loginpathRewrite把/dev-api前缀在转发时去掉。如果后端没有context-pathtarget 直接写http://localhost:8081即可。改完代理必须重启npm run serve这是每次都有人踩的坑。双端都起来并完成一次真实登录后整套源码才算真正跑通。到这一步你才算拥有了这套在线教育平台而不是单纯解压了一个文件夹。4. 数据库设计与初始数据在线教育平台的表结构长什么样4.1 用户、课程、订单三组核心表的关系在线教育平台的数据库设计是毕设答辩时老师最常追问的部分。常见的设计是七到十张表围绕用户、课程、订单三条主线展开。用户侧一张user表字段包含id、username、password、role、nickname、avatar。role字段区分管理员、讲师、学员有的项目会拆成三张表但毕业设计体量下一张表加字段更常见。课程侧course_category课程分类、course课程主表、course_section章节章节下可能还有course_lesson课时有的项目把章节和课时合并成一张表。订单侧orders字段包含order_no、user_id、course_id、amount、status、create_time。它们之间的关系user与orders是一对多course与orders是一对多course与course_section是一对多用户和课程之间通过收藏表favorite构成多对多。下面是一个常见的表结构清单表名作用关键字段user用户表username, password, rolecourse_category课程分类name, sortcourse课程主表title, cover, price, teacher_idcourse_section章节/课时course_id, title, video_urlorders订单表order_no, user_id, course_id, statusfavorite收藏表user_id, course_id理解这套关系对改前端页面很有帮助。比如课程详情页要显示“讲师是谁、章节列表、是否已购买、是否已收藏”一次详情请求在后端可能联查了user、course_section、orders、favorite四张表。如果你在页面看到某块数据为空先判断是 SQL 联查条件错了还是前端没传对参数。4.2 从 SQL 里挖出初始账号与密码这套源码能不能登录取决于 SQL 脚本里有没有初始数据。大多数毕设项目会在user表里预置一个admin账号或者一个测试学员账号。打开.sql文件搜索INSERT INTO user就能看到初始记录。这里最常见的情况是密码不是明文而是 MD5 值。比如admin的密码字段写着e10adc3949ba59abbe56e057f20f883e这是123456的 MD5。要确认加密方式去后端源码里搜MD5或PasswordEncoder。如果项目里用了 Spring Security可能是 BCrypt如果是自己写的工具类大概率是 MD5。加密方式找错了你用明文写进 SQL登录永远失败。如果不想深究加密方式还有一个更直接的方案自己注册一个新账号然后把它的密码复制给 admin。注册接口会按项目自己的加密规则生成密码你只需要把新账号的password字段更新到 admin 行即可UPDATE user SET password (SELECT password FROM (SELECT * FROM user) AS tmp WHERE username testuser) WHERE username admin;这段 SQL 用子查询避免了 MySQL 不允许“在更新目标表上直接查询”的限制。执行前先确认testuser真实存在、且密码是最新注册的有效记录。用这种方式改初始密码不用关心加密算法是最省事的做法。改完用 admin 登录能进后台管理页说明账号链路没问题。4.3 中文与 emoji 乱码建库就要定好字符集乱码是这类项目里最常见的隐性坑。页面显示课程名称变成???或者登录后用户名乱码大多数不是代码问题而是建库时字符集没定好。MySQL 8 默认字符集是utf8mb4但 5.7 及一些从旧环境导出的脚本可能用的是latin1或utf8。utf8在 MySQL 里实际是utf8mb3不支持 emoji 和部分生僻字在线教育课程名、用户昵称里出现表情符号并不少见所以最佳实践是建库直接指定utf8mb4CREATE DATABASE IF NOT EXISTS edu_education DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;如果你已经建好库、导完数据才发现乱码可以后期转换ALTER DATABASE edu_education CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ALTER TABLE course CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;注意CONVERT TO会转换表和所有字符列的数据。执行前先备份因为一旦转换旧数据里已经乱码的字符不会自动恢复。字符集只是乱码的第一层还有application.yml里的characterEncodingutf8我在 3.2 节强调过以及前端页面的编码。三层对齐了中文才会正常。5. 我把这类项目跑起来的五次翻车现象、原因、解决办法5.1 前端能开、接口全挂跨域与代理不生效现象npm run serve正常页面能打开但一登录就报Network Error浏览器 F12 里能看到CORS或ERR_CONNECTION_REFUSED。原因axios 的baseURL写的是后端完整地址浏览器直接跨域访问被拦或者代理配了但没重启前端还在直连后端端口。解决开发环境优先用 vue.config.js 的代理改完必须重启。如果后端坚持要自己处理跨域也可以在后端加一个过滤器这是我常用的最小实现Component public class CorsFilter implements Filter { Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response (HttpServletResponse) res; response.setHeader(Access-Control-Allow-Origin, *); response.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); response.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); chain.doFilter(req, res); } }这段代码把允许来源设为*开发和毕设演示够用生产环境就不推荐要收紧到具体域名。加了过滤器后记得重启后端。5.2 SpringBoot 版本太高导致启动直接失败现象后端启动时编译报错package javax.servlet does not exist或者运行时报ClassNotFoundException: javax.servlet.Filter。原因你本机装了高版本 JDK而项目是 SpringBoot 2.x 写的pom 里依赖的是javax命名空间SpringBoot 3.x 已经把包名迁移到jakarta版本太高直接对不上。解决看 pom 里spring-boot-starter-parent的版本如果是 2.x把 JDK 切到 8 或 11。IDEA 里设置 Project SDKMaven 的 JDK for importer 也一起改。记住不要用“升级 SpringBoot 版本”来适应新 JDK因为javax到jakarta的改法不是改一两个 import 就能完事涉及内置 Tomcat、Spring Security 等一串依赖。5.3 数据库连接报时区错误启动失败一半现象后端启动时报错里面能看到The server time zone value ... is unrecognized或者Public Key Retrieval is not allowed。原因MySQL 8 的时区设置不是标准名称驱动默认不信任服务器公钥造成连接被拒。解决在application.yml的 url 里补参数回头看我 3.2 节给的那段配置serverTimezoneAsia/Shanghai解决时区allowPublicKeyRetrievaltrue解决公钥问题useSSLfalse关掉 SSL 加密连接减少干扰。这三个参数对 MySQL 8 来说基本是必填项少了哪个都可能起不来。5.4 后端起来了接口仍然 404context-path 与代理前缀没对齐现象后端日志显示Tomcat started on port(s): 8081但前端所有请求都返回 404直接用 curl 访问也 404。原因后端配置了server.servlet.context-path: /edu访问路径是http://localhost:8081/edu/login而前端代理 target 写的是http://localhost:8081少了一截/edu请求打到后端后找不到/login这个路由。解决把代理 target 改成带前缀的地址。前端请求用/dev-api/login转发到http://localhost:8081/edu/loginproxy: { /dev-api: { target: http://localhost:8081/edu, changeOrigin: true, pathRewrite: { ^/dev-api: } } }如果后端没有 context-pathtarget 就不加前缀。验证方法很简单先用 curl 直接访问http://localhost:8081/edu/login确认带前缀能通再回头检查前端代理问题立刻定位。5.5 中文乱码三处一起改缺一不可现象页面课程名、用户名显示为???或一堆乱码数据库里直接查却是正常中文。原因字符集问题通常叠加。建库不是 utf8mb4、连接串没加characterEncodingutf8、IDEA 控制台输出编码是 GBK这三处任一不对表现就是乱码。解决按 4.3 节改库字符集在application.yml的 url 里加useUnicodetruecharacterEncodingutf8在 IDEA 里把 VM options 加-Dfile.encodingUTF-8。改完数据库重启后端改完连接串也重启后端。乱码问题最忌讳只改一处必须三层一起看。6. 把它变成能交的部署包前端打包放进 SpringBoot还是分开部署6.1 两种交付方式怎么选毕业设计交付和个人项目演示我推荐把前端打包后放进 SpringBoot打成一个 jar。这样老师拿到一个文件双击或一行命令就能跑不需要额外装 Nginx、不需要解释端口转发。方式是把npm run build生成的dist目录复制到后端src/main/resources/static下再重新打包后端。操作命令npm run build cp -r dist/* ../backend/src/main/resources/static/ cd ../backend mvn clean package -DskipTestsnpm run build生成的是压缩后的静态文件cp把文件合进后端资源目录mvn clean package -DskipTests清理旧产物、跳过测试、打出一个可执行 jar。最后用java -jar target/xxx.jar启动浏览器访问http://localhost:8081前端页面直接由 SpringBoot 托管。6.2 history 路由刷新 404 的补救把 Vue 打包进 SpringBoot 后第一个遇到的坑通常是从首页点进详情页没问题但刷新后就 404。原因是 vue-router 默认用 history 模式路径是真实的浏览器地址后端没有对应路由处理。与其在后端写 fallback 转发我更倾向于在打包前把路由切成 hash 模式const router new VueRouter({ mode: hash, routes });mode: hash让 URL 变成/#/course/detail/1刷新时不会再向后端请求对应路径对毕设演示来说体验完全够用。我第一次打包就吃过这个亏页面能开首页一刷新就白屏报 404后来一律先用 hash 模式省去配后端转发的麻烦。分离部署留给确实需要上线的场景毕设交付用单包更省心。希望这份从解压到打包的完整路径能帮你在 SpringBoot 和 Vue 这套组合上少走弯路。本文还有配套的精品资源点击获取 SpringBoot+Vue前后端分离在线教育平台项目从解压到部署全流程
简介基于Spring Boot与Vue的前后端分离在线教育平台是一套面向计算机相关专业毕业设计的完整项目源码可应用于毕业设计、课程设计或期末大作业。系统覆盖课程管理、教师管理、会员管理、权限控制、学科分类、数据统计等模块并通过前后端分离架构实现在线学习与课程管理核心流程。压缩包共194个文件、约1.67MB源码以165个Java文件为主后端包含EduCourseService、EduTeacherService、AclUserService等业务服务类前端涵盖Vue.js页面组件、Vuex状态管理与接口请求数据层提供SQL脚本含用户表、课程表、成绩表等表结构与基础数据另有YAML配置、XML映射和PNG设计图等辅助资源。配套文档包含系统设计文档、数据库设计文档、功能说明、接口文档和部署指南可帮助理解项目结构、快速启动并完成二次开发。目前已有66人学习/下载适合需要实战练习Spring Boot与Vue整合、希望快速搭建毕设项目的学习者。1. 拿到这个压缩包的第一件事先搞清楚它能不能跑起来“毕业设计-基于SpringBootVue前后端分离的在线教育平台项目源码数据库文档说明.zip”这种压缩包我接手过不止一次。里面通常是一个 SpringBoot 后端接口工程、一个 Vue 前端工程、一份 SQL 数据库脚本外加一篇说明文档业务上把用户、课程、章节、订单、收藏这些在线教育最常见的功能都串了起来。很多人解压后按自己的习惯安装最新版 JDK、Node 和 MySQL然后被一连串报错劝退以为是源码有问题。我的观点相反这类项目跑不起来的多数原因是启动顺序和版本配对错了不是代码烂。这篇文章就按“先看懂结构 → 真正跑起来 → 数据库改造 → 避坑 → 打包交付”的顺序讲完适合要做毕设、接手别人源码或想用前后端分离完整练手的人。2. 先看压缩包里有什么SpringBoot 后端与 Vue 前端到底怎么分工2.1 前后端到底在分什么接口层、页面层与数据流向所谓“前后端分离”不是把代码放在两个文件夹里就叫分离而是运行时有两个进程开发时两套环境发布时可以合并也可以独立部署。后端 SpringBoot 只负责提供 JSON 接口比如/login、/course/list、/order/create前端 Vue 只负责渲染页面、管理路由、控制交互。两者之间唯一的联系就是 HTTP 请求和 JSON 响应。在线教育平台典型的数据流向是这样的用户在登录页输入账号密码Vue 组件收集表单数据通过 axios 发起 POST 请求到 SpringBoot 的 ControllerController 不直接写业务逻辑而是转给 ServiceService 调用 MyBatis 的 Mapper 接口去操作 MySQL 数据库数据库返回结果后逐层传回最终以 JSON 格式回到 VueVue 再把数据渲染到页面上。理解这一条链路后面所有排错都围绕它展开。在线教育这个业务场景很适合前后端分离。课程列表、课程详情、视频播放、评论分页这些页面交互很重改动的频率高而下单、支付回调、库存扣减、权限校验这些后端逻辑要求事务和安全性。两者拆开后前端调接口后端管业务互不干扰。对毕业设计而言能说清楚这种拆分解决了什么问题比堆十几个功能页面更让老师认可。2.2 后端工程三件套pom.xml、application.yml、MyBatis 映射我翻开一个 SpringBoot 后端工程不会急着点运行按钮而是先看三个文件pom.xml、application.yml、以及 MyBatis 的 Mapper XML。这三个文件决定了项目能不能编译、连什么库、SQL 写在哪。pom.xml里最重要的一项是spring-boot-starter-parent的版本号它直接决定你要用哪个版本的 JDK。大部分毕设项目用的是 SpringBoot 2.x对应 JDK 8 或 11如果写成 3.x就要求 JDK 17 以上而且包名从javax.*换成了jakarta.*。这就是后面最常见的“版本太高”问题来源。其次是mybatis-spring-boot-starter或mybatis-plus-boot-starter以及mysql-connector-j的版本MySQL 8 和 MySQL 5.7 对连接驱动的要求不同。看 pom 时养成习惯把 JDK 版本、数据库驱动版本、MyBatis 版本三个数字记在脑子里。application.yml是后端运行时的配置中心。需要关注四个参数server.port后端端口、server.servlet.context-path接口前缀、spring.datasource.url数据库连接串、spring.datasource.username/password数据库账号密码。很多项目启动不起来不是代码问题而是这里面的库名、密码和本机不匹配。配合 MyBatis 还有一个关键参数mybatis.mapper-locations它指定 Mapper XML 文件的位置写错的话运行时会报Invalid bound statement。这是我在 pom.xml 里最常确认的依赖块parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent dependencies dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.2/version /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency /dependencies这段配置说明两点SpringBoot 2.7.x 对应 MyBatis starter 2.x 是常见搭配不会出现javax与jakarta冲突MySQL 驱动依赖是runtime范围编译期不参与但运行时必须有。如果你拿到的是 SpringBoot 3.x 的 pom同样要看这个位置判断自己本机的 JDK 是否够用。我的习惯是先把这一块的版本记下来再去装环境而不是反过来。Mapper XML 是 MyBatis 容易被忽视的黑匣子。常见的约定是 XML 文件放在resources/mapper目录下namespace写成 Mapper 接口的全限定名id写成接口方法名。比如接口里有个UserMapper.selectByUsernameXML 里就必须有select idselectByUsername resultTypecom.xxx.entity.User。如果发现启动没问题、但调用时报Invalid bound statement多半是 XML 没被扫描到或者mapper-locations路径写错。2.3 前端工程五件套router、store、axios、views、vue.config.jsVue 端打开后不要直接npm install先看package.json。dependencies里写明了是 Vue 2 还是 Vue 3是 Element UI 还是 Element Plus有没有 axios、vue-router、vuex。scripts里写着启动命令通常是npm run serve。当年很多项目用的是 Vue 2 Vue CLI 4/5 Element UI如果你本机 Node 版本太高或太低安装依赖时会在 node-sass 上翻车。前端代码的理解顺序我一般这样走先看src/main.js这是入口文件知道挂了哪些插件和路由再看src/router/index.js看路由表和登录守卫然后看src/api目录下的 axios 封装确认接口地址怎么拼接的最后才是src/views下面的页面组件。反向看容易迷失在组件细节里。axios 封装是所有接口请求的统一出口。常见的做法是给实例设一个baseURL比如/dev-api在请求拦截器里把登录后拿到的 token 塞进 header在响应拦截器里统一处理 401 跳转登录页。如果这个文件里baseURL写死成某个固定 IP而你本地后端口不一样就会出现“前端页面正常、接口全挂”的现象。vue.config.js里最关键的是devServer.proxy它把前端开发服务器的请求转发到后端真实地址从而绕开跨域。举例来说前端跑在 8080 端口后端跑在 8081 端口浏览器直接请求 8081 会被 CORS 拦但通过代理转发就不会。下面是毕设项目里非常典型的配置module.exports { devServer: { port: 8080, proxy: { /dev-api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/dev-api: } } } } };这里target必须写后端真实地址注意如果后端配了context-path: /edu那么target要写成http://localhost:8081/edu或者保留/dev-api的 rewrite 规则去拼接。changeOrigin: true的作用是让后端收到的 Host 头变成后端地址很多后端没配 CORS只认这一招。第一次接触的时候最容易忽略的是“改完vue.config.js必须重启npm run serve”代理配置只在启动时读取一次。3. 从零把它跑起来环境准备、建库导数据、双端启动3.1 装环境前先读配置JDK、Node、MySQL 怎么对上版本这一步看起来基础却是这套源码能不能跑起来的分水岭。很多人在解压后直接装最新版 JDK 和 Node结果启动时报错一堆最后怀疑源码有问题其实只是版本配对错了。我先看pom.xml里的java.version。SpringBoot 2.x 项目写的是 1.8 或 11那本机 JDK 就用 8 或 11如果是 SpringBoot 3.x写的是 17那 JDK 至少 17。这里有个血泪经验高版本 JDK 可以编译低版本代码但反过来不行SpringBoot 3.x 换了jakarta包名直接把 2.x 项目放到 JDK 17 下编译会报“package javax.servlet does not exist”这不是代码问题是生态迁移。Node 版本看package.json。Vue CLI 4 用在 Node 10~14 上没问题Vue CLI 5 建议 Node 14 以上如果项目里有node-sass它跟 Node 版本绑定非常死Node 18 装旧版 node-sass 大概率直接编译失败。解决办法是看项目有没有.nvmrc没有就先试 Node 14/16这是 vue-cli 系项目最稳的区间。MySQL 版本主要看连接串里的驱动。MySQL 8 要用com.mysql.cj.jdbc.DriverMySQL 5.7 可以用旧驱动反过来用com.mysql.jdbc.Driver连 MySQL 8 会直接报错。所以装 MySQL 之前先看一眼application.yml里的driver-class-name确定是 5.7 还是 8.0。下面是一个常见的版本匹配速查表软件建议版本判断依据JDK8 或 11对应 SpringBoot 2.xpom.xml 里java.versionNode14 或 16对应 Vue CLI 4/5package.json 里的 vue-cli-service 版本MySQL5.7 或 8.0连接串里的 driver-class-nameMaven3.6和 IDE 自带的版本即可我的经验环境安装是这个项目里最不值得花时间硬刚的环节。与其去搜“为什么 node-sass 装不上”不如直接装一个和项目匹配的 Node 版本十分钟搞定。3.2 后端启动三步走改配置、导 SQL、跑 spring-boot:run后端启动说复杂也复杂说简单也简单改好数据库配置把 SQL 导进 MySQL然后启动 SpringBoot 主类。这三步的顺序不能反。先改application.yml。毕设项目的数据库名通常写在 url 里比如jdbc:mysql://localhost:3306/edu_education。如果你的 MySQL 里还没有这个库先创建或者导入 SQL 时让脚本自己建。用户名密码改成你本地的不要沿用压缩包里别人的。下面是一段常见的配置server: port: 8081 servlet: context-path: /edu spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/edu_education?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.edu.entity参数含义server.port是后端端口前端代理指向的就是它context-path是接口前缀没有的话不用写characterEncodingutf8解决中文乱码serverTimezoneAsia/Shanghai解决 MySQL 8 的时区报错。mapper-locations必须是实际 XML 路径我见过有人把 XML 放在java包下但这里写classpath:mapper/结果启动后所有 SQL 都失效。然后导入 SQL。先确定 SQL 文件里的建库语句是否需要手动建库。打开.sql文件看第一行如果是CREATE DATABASE那直接全量导入如果没有就先手动建库。导入命令mysql -u root -p --default-character-setutf8mb4 /path/to/edu_education.sql--default-character-setutf8mb4这个参数不能省。很多 SQL 脚本里带中文菜单名、课程名不用这个参数导入数据会变成乱码后面查问题又得排查半天。导入完成后用mysql -u root -p -e use edu_education; show tables;确认一下表数量至少要有用户表、课程表、订单表这些核心表才算导成功。最后启动后端。IDEA 里直接运行主类命令行用 Mavenmvn spring-boot:run启动成功的标志是日志里出现Tomcat started on port(s): 8081。这行日志没有出现之前接口都是不可用的。有人习惯一启动就去点前端页面然后说接口不通其实后端根本没起来。后端起来后可以先用 curl 验证一个接口curl http://localhost:8081/edu/login返回 JSON 说明后端链路基本通。如果返回 404检查context-path和接口路径有没有写对如果返回 401 或 500说明接口本身在跑只是没带参数或数据库有问题已经进入下一个排错阶段。3.3 前端启动两步走npm install 与 vue.config.js 代理前端启动相对简单但npm install是最容易出幺蛾子的一步。依赖安装失败、node-sass 编译报错、版本冲突这三个问题至少会遇到一个。我的处理顺序是先删掉可能已经存在的node_modules和package-lock.json再执行安装。保留package-lock.json的话npm install会严格按锁文件装如果锁文件是别人的环境生成的很可能装出问题但如果你信任这个锁文件用npm ci会更快更稳。这一步没有绝对正确我的习惯是先试npm install失败再清理重来npm install安装完成后启动开发服务器npm run serve看到App running at: http://localhost:8080就说明前端起来了。此时打开页面如果接口数据出不来大部分问题出在代理。前端代理配置我在第 2.3 节里给过一个例子这里补一个带后端context-path的变体proxy: { /dev-api: { target: http://localhost:8081/edu, changeOrigin: true, pathRewrite: { ^/dev-api: } } }这段配置的作用是前端发请求到/dev-api/login代理转发到http://localhost:8081/edu/loginpathRewrite把/dev-api前缀在转发时去掉。如果后端没有context-pathtarget 直接写http://localhost:8081即可。改完代理必须重启npm run serve这是每次都有人踩的坑。双端都起来并完成一次真实登录后整套源码才算真正跑通。到这一步你才算拥有了这套在线教育平台而不是单纯解压了一个文件夹。4. 数据库设计与初始数据在线教育平台的表结构长什么样4.1 用户、课程、订单三组核心表的关系在线教育平台的数据库设计是毕设答辩时老师最常追问的部分。常见的设计是七到十张表围绕用户、课程、订单三条主线展开。用户侧一张user表字段包含id、username、password、role、nickname、avatar。role字段区分管理员、讲师、学员有的项目会拆成三张表但毕业设计体量下一张表加字段更常见。课程侧course_category课程分类、course课程主表、course_section章节章节下可能还有course_lesson课时有的项目把章节和课时合并成一张表。订单侧orders字段包含order_no、user_id、course_id、amount、status、create_time。它们之间的关系user与orders是一对多course与orders是一对多course与course_section是一对多用户和课程之间通过收藏表favorite构成多对多。下面是一个常见的表结构清单表名作用关键字段user用户表username, password, rolecourse_category课程分类name, sortcourse课程主表title, cover, price, teacher_idcourse_section章节/课时course_id, title, video_urlorders订单表order_no, user_id, course_id, statusfavorite收藏表user_id, course_id理解这套关系对改前端页面很有帮助。比如课程详情页要显示“讲师是谁、章节列表、是否已购买、是否已收藏”一次详情请求在后端可能联查了user、course_section、orders、favorite四张表。如果你在页面看到某块数据为空先判断是 SQL 联查条件错了还是前端没传对参数。4.2 从 SQL 里挖出初始账号与密码这套源码能不能登录取决于 SQL 脚本里有没有初始数据。大多数毕设项目会在user表里预置一个admin账号或者一个测试学员账号。打开.sql文件搜索INSERT INTO user就能看到初始记录。这里最常见的情况是密码不是明文而是 MD5 值。比如admin的密码字段写着e10adc3949ba59abbe56e057f20f883e这是123456的 MD5。要确认加密方式去后端源码里搜MD5或PasswordEncoder。如果项目里用了 Spring Security可能是 BCrypt如果是自己写的工具类大概率是 MD5。加密方式找错了你用明文写进 SQL登录永远失败。如果不想深究加密方式还有一个更直接的方案自己注册一个新账号然后把它的密码复制给 admin。注册接口会按项目自己的加密规则生成密码你只需要把新账号的password字段更新到 admin 行即可UPDATE user SET password (SELECT password FROM (SELECT * FROM user) AS tmp WHERE username testuser) WHERE username admin;这段 SQL 用子查询避免了 MySQL 不允许“在更新目标表上直接查询”的限制。执行前先确认testuser真实存在、且密码是最新注册的有效记录。用这种方式改初始密码不用关心加密算法是最省事的做法。改完用 admin 登录能进后台管理页说明账号链路没问题。4.3 中文与 emoji 乱码建库就要定好字符集乱码是这类项目里最常见的隐性坑。页面显示课程名称变成???或者登录后用户名乱码大多数不是代码问题而是建库时字符集没定好。MySQL 8 默认字符集是utf8mb4但 5.7 及一些从旧环境导出的脚本可能用的是latin1或utf8。utf8在 MySQL 里实际是utf8mb3不支持 emoji 和部分生僻字在线教育课程名、用户昵称里出现表情符号并不少见所以最佳实践是建库直接指定utf8mb4CREATE DATABASE IF NOT EXISTS edu_education DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;如果你已经建好库、导完数据才发现乱码可以后期转换ALTER DATABASE edu_education CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ALTER TABLE course CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;注意CONVERT TO会转换表和所有字符列的数据。执行前先备份因为一旦转换旧数据里已经乱码的字符不会自动恢复。字符集只是乱码的第一层还有application.yml里的characterEncodingutf8我在 3.2 节强调过以及前端页面的编码。三层对齐了中文才会正常。5. 我把这类项目跑起来的五次翻车现象、原因、解决办法5.1 前端能开、接口全挂跨域与代理不生效现象npm run serve正常页面能打开但一登录就报Network Error浏览器 F12 里能看到CORS或ERR_CONNECTION_REFUSED。原因axios 的baseURL写的是后端完整地址浏览器直接跨域访问被拦或者代理配了但没重启前端还在直连后端端口。解决开发环境优先用 vue.config.js 的代理改完必须重启。如果后端坚持要自己处理跨域也可以在后端加一个过滤器这是我常用的最小实现Component public class CorsFilter implements Filter { Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response (HttpServletResponse) res; response.setHeader(Access-Control-Allow-Origin, *); response.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); response.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); chain.doFilter(req, res); } }这段代码把允许来源设为*开发和毕设演示够用生产环境就不推荐要收紧到具体域名。加了过滤器后记得重启后端。5.2 SpringBoot 版本太高导致启动直接失败现象后端启动时编译报错package javax.servlet does not exist或者运行时报ClassNotFoundException: javax.servlet.Filter。原因你本机装了高版本 JDK而项目是 SpringBoot 2.x 写的pom 里依赖的是javax命名空间SpringBoot 3.x 已经把包名迁移到jakarta版本太高直接对不上。解决看 pom 里spring-boot-starter-parent的版本如果是 2.x把 JDK 切到 8 或 11。IDEA 里设置 Project SDKMaven 的 JDK for importer 也一起改。记住不要用“升级 SpringBoot 版本”来适应新 JDK因为javax到jakarta的改法不是改一两个 import 就能完事涉及内置 Tomcat、Spring Security 等一串依赖。5.3 数据库连接报时区错误启动失败一半现象后端启动时报错里面能看到The server time zone value ... is unrecognized或者Public Key Retrieval is not allowed。原因MySQL 8 的时区设置不是标准名称驱动默认不信任服务器公钥造成连接被拒。解决在application.yml的 url 里补参数回头看我 3.2 节给的那段配置serverTimezoneAsia/Shanghai解决时区allowPublicKeyRetrievaltrue解决公钥问题useSSLfalse关掉 SSL 加密连接减少干扰。这三个参数对 MySQL 8 来说基本是必填项少了哪个都可能起不来。5.4 后端起来了接口仍然 404context-path 与代理前缀没对齐现象后端日志显示Tomcat started on port(s): 8081但前端所有请求都返回 404直接用 curl 访问也 404。原因后端配置了server.servlet.context-path: /edu访问路径是http://localhost:8081/edu/login而前端代理 target 写的是http://localhost:8081少了一截/edu请求打到后端后找不到/login这个路由。解决把代理 target 改成带前缀的地址。前端请求用/dev-api/login转发到http://localhost:8081/edu/loginproxy: { /dev-api: { target: http://localhost:8081/edu, changeOrigin: true, pathRewrite: { ^/dev-api: } } }如果后端没有 context-pathtarget 就不加前缀。验证方法很简单先用 curl 直接访问http://localhost:8081/edu/login确认带前缀能通再回头检查前端代理问题立刻定位。5.5 中文乱码三处一起改缺一不可现象页面课程名、用户名显示为???或一堆乱码数据库里直接查却是正常中文。原因字符集问题通常叠加。建库不是 utf8mb4、连接串没加characterEncodingutf8、IDEA 控制台输出编码是 GBK这三处任一不对表现就是乱码。解决按 4.3 节改库字符集在application.yml的 url 里加useUnicodetruecharacterEncodingutf8在 IDEA 里把 VM options 加-Dfile.encodingUTF-8。改完数据库重启后端改完连接串也重启后端。乱码问题最忌讳只改一处必须三层一起看。6. 把它变成能交的部署包前端打包放进 SpringBoot还是分开部署6.1 两种交付方式怎么选毕业设计交付和个人项目演示我推荐把前端打包后放进 SpringBoot打成一个 jar。这样老师拿到一个文件双击或一行命令就能跑不需要额外装 Nginx、不需要解释端口转发。方式是把npm run build生成的dist目录复制到后端src/main/resources/static下再重新打包后端。操作命令npm run build cp -r dist/* ../backend/src/main/resources/static/ cd ../backend mvn clean package -DskipTestsnpm run build生成的是压缩后的静态文件cp把文件合进后端资源目录mvn clean package -DskipTests清理旧产物、跳过测试、打出一个可执行 jar。最后用java -jar target/xxx.jar启动浏览器访问http://localhost:8081前端页面直接由 SpringBoot 托管。6.2 history 路由刷新 404 的补救把 Vue 打包进 SpringBoot 后第一个遇到的坑通常是从首页点进详情页没问题但刷新后就 404。原因是 vue-router 默认用 history 模式路径是真实的浏览器地址后端没有对应路由处理。与其在后端写 fallback 转发我更倾向于在打包前把路由切成 hash 模式const router new VueRouter({ mode: hash, routes });mode: hash让 URL 变成/#/course/detail/1刷新时不会再向后端请求对应路径对毕设演示来说体验完全够用。我第一次打包就吃过这个亏页面能开首页一刷新就白屏报 404后来一律先用 hash 模式省去配后端转发的麻烦。分离部署留给确实需要上线的场景毕设交付用单包更省心。希望这份从解压到打包的完整路径能帮你在 SpringBoot 和 Vue 这套组合上少走弯路。本文还有配套的精品资源点击获取