简介本资源是一套面向计算机专业本科生的Java毕业设计实战项目——少儿编程管理系统采用SSM后端框架与Vue前端技术栈构建适用于教育类Web系统开发学习与毕设参考。系统按管理员与家长双角色设计权限体系涵盖课程分类/信息管理、学生档案维护、购课与课程学习全流程、通知公告及反馈处理等核心模块贴合真实教培平台业务逻辑。压缩包共839个文件含131个Java后端业务类、49个Vue组件、164个JS交互脚本、53个CSS样式文件及79个GIF动效资源配合SQL建表脚本、Maven配置与Tomcat部署脚本bat/cmd完整支撑本地快速运行整体大小26.78MB。已有142人学习下载提供从需求分析、前后端分离实现、数据库设计到答辩PPT与论文LW的一站式交付内容结构清晰、注释规范便于二次开发与功能扩展。1. 这不是又一个“SSMVue模板”而是一套能跑通家长真实操作流的少儿编程后台从登录到购课完成所有按钮都连着真实数据库事务你可能已经下载过十来个标着“SSMVue毕业设计”的压缩包解压后发现首页能渲染、登录框能弹出、但一点击“购买课程”就报404或500后台日志里全是NullPointerException数据库表空空如也甚至student表里连主键自增都没配——这种“能看不能动”的半成品在答辩现场被老师点开“课程分类管理”页面刷新三次都加载不出下拉框当场冷场。而这个「少儿编程管理系统」不一样它把家长端最核心的“选课→下单→支付模拟→查看已购课表”整条链路全打通了管理员端的“课程上架/下架”会实时触发前端课程列表更新学生信息修改后家长个人中心里的孩子头像和年级字段同步刷新。它不追求炫酷动画或微服务拆分而是用最朴素的 SSMSpringSpringMVCMyBatis三层结构 Vue2 单页应用把权限隔离、数据联动、事务回滚这些毕业设计最容易翻车的点全落在可验证的代码行里。适合 Java 初学者做毕设、想补全 Web 全栈实操链路的转行人、或者需要快速搭出家长试用 demo 的教培小团队——只要你敢改application.properties里的数据库地址就能在本地跑出一个带真实增删改查的系统。2. 从零启动三步还原开发环境关键不是装软件而是绕过 Maven 和 Tomcat 的默认陷阱2.1 环境准备为什么必须用 JDK1.8 Tomcat7 MySQL5.7这不是凑版本号而是 SSM 组件的真实兼容边界。Spring 4.3.x本项目所用对 JDK1.8 的 Lambda 表达式支持稳定但若强行升到 JDK17Transactional注解在 Service 层会失效——因为 Spring AOP 的 CGLIB 代理机制在高版本 JVM 上需额外配置--add-opens参数而毕业答辩现场没时间调 JVM 参数。Tomcat7 是硬性要求本项目web.xml中servlet-mapping使用了 Servlet 3.0 规范的通配符写法/api/*Tomcat6 不识别MySQL5.7 则是因为course_info表中create_time字段用了DEFAULT CURRENT_TIMESTAMP这是 5.6.5 之后才支持的语法但 Navicat11 连接 5.7 时默认开启sql_modeSTRICT_TRANS_TABLES会导致插入空字符串失败——这点后面避坑章节细说。JDK、Tomcat、MySQL 三者版本必须严格匹配我建议直接用压缩包里docs/environment-setup.md提供的离线安装包清单避免官网下载时误选新版。2.2 数据库初始化Navicat 导入不是点“执行”就完事别跳过这一步项目根目录下的db/shaoer_programming.sql是完整建库脚本但直接双击导入会失败——因为脚本开头有CREATE DATABASE IF NOT EXISTS shaoer_programming DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;而 Navicat 默认连接用的是utf8字符集实际是utf8mb3导致utf8mb4创建失败。正确做法在 Navicat 新建连接时“高级”选项卡勾选“使用 Unicode UTF-8”手动新建数据库shaoer_programming字符集选utf8mb4排序规则选utf8mb4_unicode_ci右键该库 → “运行SQL文件”选择shaoer_programming.sql取消勾选“停止遇到错误时”因脚本中有重复建表语句如DROP TABLE IF EXISTS admin;。提示导入后检查admin表初始账号密码是admin/123456parent表里有两条测试数据parent_id1对应学生student_id1这是后续登录验证的基础。2.3 项目导入 IDEAMaven 依赖不是mvn clean install就能解决压缩包里pom.xml声明了spring-webmvc:4.3.29.RELEASE但 Maven 中央仓库该版本已被标记为deprecatedIDEA 默认不会拉取。必须手动指定镜像源!-- 在 pom.xml 的 repositories 标签下添加 -- repository idaliyun/id nameAliyun Repository/name urlhttps://maven.aliyun.com/repository/public/url releasesenabledtrue/enabled/releases snapshotsenabledfalse/enabled/snapshots /repository然后右键项目 →Maven→Reload project。若仍报mybatis-spring:1.3.2找不到说明本地.m2/repository缓存损坏需删除org/mybatis/spring文件夹后重载。2.4 启动三连击.bat脚本背后的真相压缩包里1-install.bat、2-run.bat、3-build.bat并非按顺序执行——这是新手最大误区。1-install.bat本质是mvn clean compile package -Dmaven.test.skiptrue生成target/shaoer_programming.war2-run.bat不是直接启动 Tomcat而是调用startup.bat位于tomcat/bin/但前提是CATALINA_HOME环境变量已指向你的 Tomcat 目录3-build.bat其实是mvn clean compile仅编译不打包用于快速验证 Java 代码语法。正确流程先确保CATALINA_HOME已配置如D:\apache-tomcat-7.0.109再双击1-install.bat生成 WAR 包最后双击2-run.bat启动 Tomcat。WAR 包会自动部署到tomcat/webapps/下访问http://localhost:8080/shaoer_programming即可。3. 权限与路由SSM 后端拦截器 Vue 前端守卫的双重校验不是只靠 sessionId3.1 后端权限控制LoginInterceptor如何精准拦截未登录请求项目src/main/java/com/shaoer/interceptor/LoginInterceptor.java是权限核心。它继承HandlerInterceptorAdapter重写preHandle方法public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 1. 放行静态资源和登录接口 String uri request.getRequestURI(); if (uri.contains(/static/) || uri.equals(/login) || uri.equals(/doLogin)) { return true; } // 2. 检查 session 中是否存在 user 对象管理员或家长 User user (User) request.getSession().getAttribute(user); if (user null) { // 3. 未登录则重定向到登录页并携带原请求路径实现登录后跳回 String redirectUrl /login?redirect URLEncoder.encode(uri, UTF-8); response.sendRedirect(redirectUrl); return false; } // 4. 权限校验管理员可访问所有 /admin/**家长只能访问 /parent/** String role user.getRole(); // 数据库中 role 字段值为 admin 或 parent if (admin.equals(role) uri.startsWith(/admin/)) { return true; } else if (parent.equals(role) uri.startsWith(/parent/)) { return true; } else { // 5. 角色越权返回 403 response.sendError(HttpServletResponse.SC_FORBIDDEN, Access Denied); return false; } }关键点request.getSession().getAttribute(user)是登录成功后存入的而user.getRole()直接读取数据库user表的role字段不是硬编码这意味着你新增一个teacher角色只需改数据库role值并扩展if分支无需动前端路由。3.2 前端路由守卫Vue Router 的beforeEach如何与后端协同src/router/index.js中定义了路由元信息{ path: /admin/course, name: CourseManagement, component: () import(/views/admin/CourseManagement.vue), meta: { requiresAuth: true, role: admin // 标记该路由仅管理员可访问 } }全局守卫逻辑router.beforeEach((to, from, next) { const token localStorage.getItem(token); // 登录后存的 JWT本项目简化为 sessionId const userRole localStorage.getItem(userRole); // 存储角色避免每次读 session if (to.meta.requiresAuth !token) { next(/login); } else if (to.meta.role to.meta.role ! userRole) { // 角色不匹配跳转 403 页面 next(/403); } else { next(); } });注意userRole是登录成功后由后端接口/api/user/info返回并存入localStorage的不是前端猜的——这保证了前后端角色一致性。若你修改了数据库user.role值前端无需改代码只要后端/api/user/info接口返回正确的role字段即可。3.3 权限按钮级控制Vue 指令v-has-role的实现原理src/directive/hasRole.js定义了自定义指令export default { inserted(el, binding) { const roles binding.value; // 指令传入的权限数组如 [admin] const userRole localStorage.getItem(userRole); if (!roles.includes(userRole)) { el.style.display none; // 隐藏按钮而非禁用禁用仍可提交 } } };在模板中使用button v-has-role[admin] clickdeleteCourse删除课程/button这比v-ifuserRoleadmin更灵活——未来扩展多角色如[admin,teacher]时只需改指令参数不用重写模板逻辑。4. 核心业务闭环家长购课流程的 5 个关键事务点每个都经得起断电测试4.1 购课下单OrderService的事务传播行为为何设为REQUIREDsrc/main/java/com/shaoer/service/impl/OrderServiceImpl.java中Transactional(propagation Propagation.REQUIRED, rollbackFor Exception.class) public void createOrder(Order order) throws Exception { // 1. 插入订单主表 orderMapper.insert(order); // 2. 更新课程库存扣减 Course course courseMapper.selectById(order.getCourseId()); if (course.getStock() 0) { throw new RuntimeException(课程库存不足); } course.setStock(course.getStock() - 1); courseMapper.updateById(course); // 3. 关联学生与课程中间表 StudentCourse sc new StudentCourse(); sc.setStudentId(order.getStudentId()); sc.setCourseId(order.getCourseId()); studentCourseMapper.insert(sc); }Propagation.REQUIRED确保整个方法在一个数据库事务中执行若第 2 步扣库存失败如并发超卖第 1 步插入的订单会自动回滚不会留下脏数据。rollbackFor Exception.class是关键——默认只对RuntimeException回滚而throw new RuntimeException(...)显式抛出保证异常被捕获并触发回滚。4.2 支付模拟为什么用pay_status字段而非真实支付网关项目中没有接入支付宝/微信而是用order表的pay_status字段模拟pay_status含义前端显示0待支付“立即支付”按钮1已支付“已购课程”标签2已取消灰色“已取消”支付操作本质是UPDATE order SET pay_status1 WHERE order_id?。这样设计是为了毕业答辩时可控老师点击“支付”后你能立刻在数据库看到状态变更无需等待第三方回调。若需对接真实支付只需替换OrderController.pay()方法中的 SQL 更新为调用支付 SDK并增加异步回调接口处理notify_url。4.3 课程学习记录StudentCourse中间表如何支撑“学完进度”统计student_course表结构CREATE TABLE student_course ( id bigint(20) NOT NULL AUTO_INCREMENT, student_id bigint(20) NOT NULL, course_id bigint(20) NOT NULL, status tinyint(1) DEFAULT 0, -- 0:未开始, 1:学习中, 2:已完成 progress int(3) DEFAULT 0, -- 百分比0~100 PRIMARY KEY (id), UNIQUE KEY uk_student_course (student_id,course_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;家长端“我的课程”页面调用/api/parent/my-courses接口SQL 查询SELECT c.*, sc.status, sc.progress FROM course_info c JOIN student_course sc ON c.id sc.course_id WHERE sc.student_id ? AND c.status 1;status字段区分课程状态c.status1表示课程已上架sc.status记录学生学习状态二者分离设计避免耦合——课程下架不影响学生历史学习记录。5. 避坑指南那些让答辩前夜崩溃的 4 个真实问题以及血泪修复方案5.1 现象登录后首页空白浏览器控制台报Uncaught TypeError: Cannot read property name of undefined原因IndexHeader.vue中mounted()钩子调用this.getUserInfo()获取用户信息但后端/api/user/info接口返回null。根源是LoginInterceptor拦截了该请求——因为getUserInfo()请求路径/api/user/info不在preHandle的放行列表中uri.equals(/login)只放行/login不放行/api/user/info。解决修改LoginInterceptor.java在放行判断中加入if (uri.contains(/static/) || uri.equals(/login) || uri.equals(/doLogin) || uri.startsWith(/api/user/)) { return true; }5.2 现象Navicat 导入 SQL 后course_info表create_time字段全为0000-00-00 00:00:00原因MySQL 5.7 默认sql_mode包含NO_ZERO_DATE禁止插入零日期。而建表语句中create_time定义为datetime DEFAULT CURRENT_TIMESTAMP但某些 INSERT 语句未显式赋值触发零日期插入。解决执行 SQL 修改模式SET GLOBAL sql_mode(SELECT REPLACE(sql_mode,NO_ZERO_DATE,)); SET GLOBAL sql_mode(SELECT REPLACE(sql_mode,NO_ZERO_IN_DATE,));或在my.cnf中永久配置[mysqld] sql_modeSTRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION5.3 现象2-run.bat启动后 Tomcat 日志报SEVERE: Error filterStart项目无法部署原因web.xml中CharacterEncodingFilter过滤器配置了encoding初始化参数但filter-class写成了org.springframework.web.filter.CharacterEncodingFilter正确而init-param的param-name写成了encoding正确但param-value写成了UTF-8末尾有空格。Tomcat 解析时认为空格导致值无效。解决打开src/main/webapp/WEB-INF/web.xml检查filter标签内init-param param-nameencoding/param-name param-valueUTF-8/param-value !-- 确保无空格 -- /init-param5.4 现象家长购买课程后“我的课程”列表不更新需手动刷新页面原因Vue 组件MyCourses.vue的created()钩子中调用this.loadCourses()加载数据但购课成功后未主动触发重新加载。this.$router.push(/parent/my-courses)只是跳转路由不重新执行created。解决在购课成功回调中使用$forceUpdate()或更优雅地// 购课成功后 this.$message.success(购买成功); this.$router.push(/parent/my-courses); // 强制刷新组件数据 this.$nextTick(() { this.loadCourses(); // 重新调用加载方法 });或在MyCourses.vue中监听路由变化watch: { $route(to, from) { if (to.name MyCourses) { this.loadCourses(); } } }6. 进阶技巧用git diff快速定位毕业设计修改点以及答辩演示的 3 个必演场景6.1 修改痕迹追踪为什么git init后第一件事是git add .并git commit -m init毕业设计答辩时老师常问“这部分是你自己写的吗” 若你直接在原始源码上改很难证明原创性。正确做法解压java毕业设计之少儿编程管理系统.zip到新文件夹git init初始化仓库git add .添加所有文件git commit -m init: original source from download开始修改比如改application.properties的数据库地址、IndexMain.vue的欢迎文案、CourseController.java的课程列表分页逻辑每次修改后git add -u git commit -m feat: add xxx。答辩时打开 Git Bash执行git log --oneline展示你的提交历史再用git diff HEAD~3 HEAD对比最近三次修改清晰呈现工作量。老师一眼看出你改了哪些 Controller、哪些 Vue 组件、是否理解 MVC 分层——这比口头解释“我改了很多”有力十倍。6.2 答辩演示脚本三个必演、不可跳过的场景不要从首页开始讲按以下顺序演示直击评审关注点场景操作步骤为什么必演场景1权限隔离验证1. 用admin/123456登录 → 进入“课程分类管理” → 新增分类“Python入门”2. 退出用parent/123456登录 → 尝试访问/admin/course-category→ 触发 403 页面3. 切换到/parent/my-courses→ 确认新分类下的课程已显示。证明你理解 RBAC且前后端权限校验一致不是前端v-if硬编码。场景2事务一致性验证1. 用家长账号进入“课程详情页”查看某课程库存为52. 打开两个浏览器标签页同时点击“立即购买”两次3. 查看数据库course_info表库存变为3而非4且order表只有两条记录。证明Transactional生效解决了超卖问题不是简单加锁。场景3数据联动验证1. 管理员修改学生张三的年级为“五年级”2. 家长账号登录 → 进入“个人中心” → 查看孩子信息年级同步更新3. 再进入“我的课程”确认课程列表未受影响。证明你理解数据关联student表与student_course表分离且缓存/响应式更新机制可靠。6.3 最后一道防线答辩前夜的 checklist 表别信“应该没问题”。我给自己定的铁律每次答辩前 24 小时必须逐项手检检查项操作不通过后果数据库连接在 IDEA 的 Database 工具中用jdbc:mysql://localhost:3306/shaoer_programming?useSSLfalseserverTimezoneGMT%2B8测试连接连不上 → 后台全挂答辩直接终止静态资源路径访问http://localhost:8080/shaoer_programming/static/css/app.css确认 CSS 文件可下载404 → 页面白屏前端同学会怀疑你没配web.xml的default servlet登录态持久化登录后关闭浏览器重新打开http://localhost:8080/shaoer_programming检查是否仍显示“欢迎管理员”Session 失效 → 证明web.xml中session-configsession-timeout30/session-timeout/session-config未生效或 Tomcat 配置错误日志输出在log4j.properties中确认log4j.rootLoggerDEBUG, stdout, file启动后检查logs/catalina.out是否有INFO com.shaoer.controller.AdminController - Admin login success无日志 → 无法向老师证明接口被调用答辩时解释不清流程从那以后我每次答辩前都强制走一遍这个 checklist哪怕只剩 1 小时。它不能让你得高分但能让你不因低级失误丢掉及格线。希望帮到你。本文还有配套的精品资源点击获取 SSM+Vue少儿编程后台：真实购课事务与权限闭环实现
简介本资源是一套面向计算机专业本科生的Java毕业设计实战项目——少儿编程管理系统采用SSM后端框架与Vue前端技术栈构建适用于教育类Web系统开发学习与毕设参考。系统按管理员与家长双角色设计权限体系涵盖课程分类/信息管理、学生档案维护、购课与课程学习全流程、通知公告及反馈处理等核心模块贴合真实教培平台业务逻辑。压缩包共839个文件含131个Java后端业务类、49个Vue组件、164个JS交互脚本、53个CSS样式文件及79个GIF动效资源配合SQL建表脚本、Maven配置与Tomcat部署脚本bat/cmd完整支撑本地快速运行整体大小26.78MB。已有142人学习下载提供从需求分析、前后端分离实现、数据库设计到答辩PPT与论文LW的一站式交付内容结构清晰、注释规范便于二次开发与功能扩展。1. 这不是又一个“SSMVue模板”而是一套能跑通家长真实操作流的少儿编程后台从登录到购课完成所有按钮都连着真实数据库事务你可能已经下载过十来个标着“SSMVue毕业设计”的压缩包解压后发现首页能渲染、登录框能弹出、但一点击“购买课程”就报404或500后台日志里全是NullPointerException数据库表空空如也甚至student表里连主键自增都没配——这种“能看不能动”的半成品在答辩现场被老师点开“课程分类管理”页面刷新三次都加载不出下拉框当场冷场。而这个「少儿编程管理系统」不一样它把家长端最核心的“选课→下单→支付模拟→查看已购课表”整条链路全打通了管理员端的“课程上架/下架”会实时触发前端课程列表更新学生信息修改后家长个人中心里的孩子头像和年级字段同步刷新。它不追求炫酷动画或微服务拆分而是用最朴素的 SSMSpringSpringMVCMyBatis三层结构 Vue2 单页应用把权限隔离、数据联动、事务回滚这些毕业设计最容易翻车的点全落在可验证的代码行里。适合 Java 初学者做毕设、想补全 Web 全栈实操链路的转行人、或者需要快速搭出家长试用 demo 的教培小团队——只要你敢改application.properties里的数据库地址就能在本地跑出一个带真实增删改查的系统。2. 从零启动三步还原开发环境关键不是装软件而是绕过 Maven 和 Tomcat 的默认陷阱2.1 环境准备为什么必须用 JDK1.8 Tomcat7 MySQL5.7这不是凑版本号而是 SSM 组件的真实兼容边界。Spring 4.3.x本项目所用对 JDK1.8 的 Lambda 表达式支持稳定但若强行升到 JDK17Transactional注解在 Service 层会失效——因为 Spring AOP 的 CGLIB 代理机制在高版本 JVM 上需额外配置--add-opens参数而毕业答辩现场没时间调 JVM 参数。Tomcat7 是硬性要求本项目web.xml中servlet-mapping使用了 Servlet 3.0 规范的通配符写法/api/*Tomcat6 不识别MySQL5.7 则是因为course_info表中create_time字段用了DEFAULT CURRENT_TIMESTAMP这是 5.6.5 之后才支持的语法但 Navicat11 连接 5.7 时默认开启sql_modeSTRICT_TRANS_TABLES会导致插入空字符串失败——这点后面避坑章节细说。JDK、Tomcat、MySQL 三者版本必须严格匹配我建议直接用压缩包里docs/environment-setup.md提供的离线安装包清单避免官网下载时误选新版。2.2 数据库初始化Navicat 导入不是点“执行”就完事别跳过这一步项目根目录下的db/shaoer_programming.sql是完整建库脚本但直接双击导入会失败——因为脚本开头有CREATE DATABASE IF NOT EXISTS shaoer_programming DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;而 Navicat 默认连接用的是utf8字符集实际是utf8mb3导致utf8mb4创建失败。正确做法在 Navicat 新建连接时“高级”选项卡勾选“使用 Unicode UTF-8”手动新建数据库shaoer_programming字符集选utf8mb4排序规则选utf8mb4_unicode_ci右键该库 → “运行SQL文件”选择shaoer_programming.sql取消勾选“停止遇到错误时”因脚本中有重复建表语句如DROP TABLE IF EXISTS admin;。提示导入后检查admin表初始账号密码是admin/123456parent表里有两条测试数据parent_id1对应学生student_id1这是后续登录验证的基础。2.3 项目导入 IDEAMaven 依赖不是mvn clean install就能解决压缩包里pom.xml声明了spring-webmvc:4.3.29.RELEASE但 Maven 中央仓库该版本已被标记为deprecatedIDEA 默认不会拉取。必须手动指定镜像源!-- 在 pom.xml 的 repositories 标签下添加 -- repository idaliyun/id nameAliyun Repository/name urlhttps://maven.aliyun.com/repository/public/url releasesenabledtrue/enabled/releases snapshotsenabledfalse/enabled/snapshots /repository然后右键项目 →Maven→Reload project。若仍报mybatis-spring:1.3.2找不到说明本地.m2/repository缓存损坏需删除org/mybatis/spring文件夹后重载。2.4 启动三连击.bat脚本背后的真相压缩包里1-install.bat、2-run.bat、3-build.bat并非按顺序执行——这是新手最大误区。1-install.bat本质是mvn clean compile package -Dmaven.test.skiptrue生成target/shaoer_programming.war2-run.bat不是直接启动 Tomcat而是调用startup.bat位于tomcat/bin/但前提是CATALINA_HOME环境变量已指向你的 Tomcat 目录3-build.bat其实是mvn clean compile仅编译不打包用于快速验证 Java 代码语法。正确流程先确保CATALINA_HOME已配置如D:\apache-tomcat-7.0.109再双击1-install.bat生成 WAR 包最后双击2-run.bat启动 Tomcat。WAR 包会自动部署到tomcat/webapps/下访问http://localhost:8080/shaoer_programming即可。3. 权限与路由SSM 后端拦截器 Vue 前端守卫的双重校验不是只靠 sessionId3.1 后端权限控制LoginInterceptor如何精准拦截未登录请求项目src/main/java/com/shaoer/interceptor/LoginInterceptor.java是权限核心。它继承HandlerInterceptorAdapter重写preHandle方法public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 1. 放行静态资源和登录接口 String uri request.getRequestURI(); if (uri.contains(/static/) || uri.equals(/login) || uri.equals(/doLogin)) { return true; } // 2. 检查 session 中是否存在 user 对象管理员或家长 User user (User) request.getSession().getAttribute(user); if (user null) { // 3. 未登录则重定向到登录页并携带原请求路径实现登录后跳回 String redirectUrl /login?redirect URLEncoder.encode(uri, UTF-8); response.sendRedirect(redirectUrl); return false; } // 4. 权限校验管理员可访问所有 /admin/**家长只能访问 /parent/** String role user.getRole(); // 数据库中 role 字段值为 admin 或 parent if (admin.equals(role) uri.startsWith(/admin/)) { return true; } else if (parent.equals(role) uri.startsWith(/parent/)) { return true; } else { // 5. 角色越权返回 403 response.sendError(HttpServletResponse.SC_FORBIDDEN, Access Denied); return false; } }关键点request.getSession().getAttribute(user)是登录成功后存入的而user.getRole()直接读取数据库user表的role字段不是硬编码这意味着你新增一个teacher角色只需改数据库role值并扩展if分支无需动前端路由。3.2 前端路由守卫Vue Router 的beforeEach如何与后端协同src/router/index.js中定义了路由元信息{ path: /admin/course, name: CourseManagement, component: () import(/views/admin/CourseManagement.vue), meta: { requiresAuth: true, role: admin // 标记该路由仅管理员可访问 } }全局守卫逻辑router.beforeEach((to, from, next) { const token localStorage.getItem(token); // 登录后存的 JWT本项目简化为 sessionId const userRole localStorage.getItem(userRole); // 存储角色避免每次读 session if (to.meta.requiresAuth !token) { next(/login); } else if (to.meta.role to.meta.role ! userRole) { // 角色不匹配跳转 403 页面 next(/403); } else { next(); } });注意userRole是登录成功后由后端接口/api/user/info返回并存入localStorage的不是前端猜的——这保证了前后端角色一致性。若你修改了数据库user.role值前端无需改代码只要后端/api/user/info接口返回正确的role字段即可。3.3 权限按钮级控制Vue 指令v-has-role的实现原理src/directive/hasRole.js定义了自定义指令export default { inserted(el, binding) { const roles binding.value; // 指令传入的权限数组如 [admin] const userRole localStorage.getItem(userRole); if (!roles.includes(userRole)) { el.style.display none; // 隐藏按钮而非禁用禁用仍可提交 } } };在模板中使用button v-has-role[admin] clickdeleteCourse删除课程/button这比v-ifuserRoleadmin更灵活——未来扩展多角色如[admin,teacher]时只需改指令参数不用重写模板逻辑。4. 核心业务闭环家长购课流程的 5 个关键事务点每个都经得起断电测试4.1 购课下单OrderService的事务传播行为为何设为REQUIREDsrc/main/java/com/shaoer/service/impl/OrderServiceImpl.java中Transactional(propagation Propagation.REQUIRED, rollbackFor Exception.class) public void createOrder(Order order) throws Exception { // 1. 插入订单主表 orderMapper.insert(order); // 2. 更新课程库存扣减 Course course courseMapper.selectById(order.getCourseId()); if (course.getStock() 0) { throw new RuntimeException(课程库存不足); } course.setStock(course.getStock() - 1); courseMapper.updateById(course); // 3. 关联学生与课程中间表 StudentCourse sc new StudentCourse(); sc.setStudentId(order.getStudentId()); sc.setCourseId(order.getCourseId()); studentCourseMapper.insert(sc); }Propagation.REQUIRED确保整个方法在一个数据库事务中执行若第 2 步扣库存失败如并发超卖第 1 步插入的订单会自动回滚不会留下脏数据。rollbackFor Exception.class是关键——默认只对RuntimeException回滚而throw new RuntimeException(...)显式抛出保证异常被捕获并触发回滚。4.2 支付模拟为什么用pay_status字段而非真实支付网关项目中没有接入支付宝/微信而是用order表的pay_status字段模拟pay_status含义前端显示0待支付“立即支付”按钮1已支付“已购课程”标签2已取消灰色“已取消”支付操作本质是UPDATE order SET pay_status1 WHERE order_id?。这样设计是为了毕业答辩时可控老师点击“支付”后你能立刻在数据库看到状态变更无需等待第三方回调。若需对接真实支付只需替换OrderController.pay()方法中的 SQL 更新为调用支付 SDK并增加异步回调接口处理notify_url。4.3 课程学习记录StudentCourse中间表如何支撑“学完进度”统计student_course表结构CREATE TABLE student_course ( id bigint(20) NOT NULL AUTO_INCREMENT, student_id bigint(20) NOT NULL, course_id bigint(20) NOT NULL, status tinyint(1) DEFAULT 0, -- 0:未开始, 1:学习中, 2:已完成 progress int(3) DEFAULT 0, -- 百分比0~100 PRIMARY KEY (id), UNIQUE KEY uk_student_course (student_id,course_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;家长端“我的课程”页面调用/api/parent/my-courses接口SQL 查询SELECT c.*, sc.status, sc.progress FROM course_info c JOIN student_course sc ON c.id sc.course_id WHERE sc.student_id ? AND c.status 1;status字段区分课程状态c.status1表示课程已上架sc.status记录学生学习状态二者分离设计避免耦合——课程下架不影响学生历史学习记录。5. 避坑指南那些让答辩前夜崩溃的 4 个真实问题以及血泪修复方案5.1 现象登录后首页空白浏览器控制台报Uncaught TypeError: Cannot read property name of undefined原因IndexHeader.vue中mounted()钩子调用this.getUserInfo()获取用户信息但后端/api/user/info接口返回null。根源是LoginInterceptor拦截了该请求——因为getUserInfo()请求路径/api/user/info不在preHandle的放行列表中uri.equals(/login)只放行/login不放行/api/user/info。解决修改LoginInterceptor.java在放行判断中加入if (uri.contains(/static/) || uri.equals(/login) || uri.equals(/doLogin) || uri.startsWith(/api/user/)) { return true; }5.2 现象Navicat 导入 SQL 后course_info表create_time字段全为0000-00-00 00:00:00原因MySQL 5.7 默认sql_mode包含NO_ZERO_DATE禁止插入零日期。而建表语句中create_time定义为datetime DEFAULT CURRENT_TIMESTAMP但某些 INSERT 语句未显式赋值触发零日期插入。解决执行 SQL 修改模式SET GLOBAL sql_mode(SELECT REPLACE(sql_mode,NO_ZERO_DATE,)); SET GLOBAL sql_mode(SELECT REPLACE(sql_mode,NO_ZERO_IN_DATE,));或在my.cnf中永久配置[mysqld] sql_modeSTRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION5.3 现象2-run.bat启动后 Tomcat 日志报SEVERE: Error filterStart项目无法部署原因web.xml中CharacterEncodingFilter过滤器配置了encoding初始化参数但filter-class写成了org.springframework.web.filter.CharacterEncodingFilter正确而init-param的param-name写成了encoding正确但param-value写成了UTF-8末尾有空格。Tomcat 解析时认为空格导致值无效。解决打开src/main/webapp/WEB-INF/web.xml检查filter标签内init-param param-nameencoding/param-name param-valueUTF-8/param-value !-- 确保无空格 -- /init-param5.4 现象家长购买课程后“我的课程”列表不更新需手动刷新页面原因Vue 组件MyCourses.vue的created()钩子中调用this.loadCourses()加载数据但购课成功后未主动触发重新加载。this.$router.push(/parent/my-courses)只是跳转路由不重新执行created。解决在购课成功回调中使用$forceUpdate()或更优雅地// 购课成功后 this.$message.success(购买成功); this.$router.push(/parent/my-courses); // 强制刷新组件数据 this.$nextTick(() { this.loadCourses(); // 重新调用加载方法 });或在MyCourses.vue中监听路由变化watch: { $route(to, from) { if (to.name MyCourses) { this.loadCourses(); } } }6. 进阶技巧用git diff快速定位毕业设计修改点以及答辩演示的 3 个必演场景6.1 修改痕迹追踪为什么git init后第一件事是git add .并git commit -m init毕业设计答辩时老师常问“这部分是你自己写的吗” 若你直接在原始源码上改很难证明原创性。正确做法解压java毕业设计之少儿编程管理系统.zip到新文件夹git init初始化仓库git add .添加所有文件git commit -m init: original source from download开始修改比如改application.properties的数据库地址、IndexMain.vue的欢迎文案、CourseController.java的课程列表分页逻辑每次修改后git add -u git commit -m feat: add xxx。答辩时打开 Git Bash执行git log --oneline展示你的提交历史再用git diff HEAD~3 HEAD对比最近三次修改清晰呈现工作量。老师一眼看出你改了哪些 Controller、哪些 Vue 组件、是否理解 MVC 分层——这比口头解释“我改了很多”有力十倍。6.2 答辩演示脚本三个必演、不可跳过的场景不要从首页开始讲按以下顺序演示直击评审关注点场景操作步骤为什么必演场景1权限隔离验证1. 用admin/123456登录 → 进入“课程分类管理” → 新增分类“Python入门”2. 退出用parent/123456登录 → 尝试访问/admin/course-category→ 触发 403 页面3. 切换到/parent/my-courses→ 确认新分类下的课程已显示。证明你理解 RBAC且前后端权限校验一致不是前端v-if硬编码。场景2事务一致性验证1. 用家长账号进入“课程详情页”查看某课程库存为52. 打开两个浏览器标签页同时点击“立即购买”两次3. 查看数据库course_info表库存变为3而非4且order表只有两条记录。证明Transactional生效解决了超卖问题不是简单加锁。场景3数据联动验证1. 管理员修改学生张三的年级为“五年级”2. 家长账号登录 → 进入“个人中心” → 查看孩子信息年级同步更新3. 再进入“我的课程”确认课程列表未受影响。证明你理解数据关联student表与student_course表分离且缓存/响应式更新机制可靠。6.3 最后一道防线答辩前夜的 checklist 表别信“应该没问题”。我给自己定的铁律每次答辩前 24 小时必须逐项手检检查项操作不通过后果数据库连接在 IDEA 的 Database 工具中用jdbc:mysql://localhost:3306/shaoer_programming?useSSLfalseserverTimezoneGMT%2B8测试连接连不上 → 后台全挂答辩直接终止静态资源路径访问http://localhost:8080/shaoer_programming/static/css/app.css确认 CSS 文件可下载404 → 页面白屏前端同学会怀疑你没配web.xml的default servlet登录态持久化登录后关闭浏览器重新打开http://localhost:8080/shaoer_programming检查是否仍显示“欢迎管理员”Session 失效 → 证明web.xml中session-configsession-timeout30/session-timeout/session-config未生效或 Tomcat 配置错误日志输出在log4j.properties中确认log4j.rootLoggerDEBUG, stdout, file启动后检查logs/catalina.out是否有INFO com.shaoer.controller.AdminController - Admin login success无日志 → 无法向老师证明接口被调用答辩时解释不清流程从那以后我每次答辩前都强制走一遍这个 checklist哪怕只剩 1 小时。它不能让你得高分但能让你不因低级失误丢掉及格线。希望帮到你。本文还有配套的精品资源点击获取