Spring Boot+Vue+MyBatisPlus 学生成绩管理系统实战解析

简介一份面向Java开发者的前后端分离项目实战教程以学生成绩管理系统为例完整演示Spring Boot、Vue.js与MyBatisPlus三者的整合开发。资源只有一个PDF文件整体大小为2.8MB内容从数据库设计讲起逐步推进到后端服务、接口开发与前端页面构建。教程详细讲解了用户表、学生表、成绩表三张核心表的建表语句以及用于软删除的删除标记字段设计逻辑后端部分基于Spring Boot框架搭建项目骨架使用MyBatisPlus操作数据库前端部分采用Vue.js框架实现登录、学生列表、成绩录入等页面并通过axios库完成前后端数据交互。读者可以从中掌握数据表关系设计、后端接口编写、前端组件化开发以及前后端分离项目的整体架构。目前已有448人学习适合具备一定Java基础、希望快速上手前后端分离开发的初学者参考。1. 前后端分离的学生成绩管理系统为什么值得拆开看学生成绩管理系统算是 Web 开发里最经典的练习项目了但这次这份实战教程有意思的地方在于它把 Spring Boot 2.7.17 Vue MyBatisPlus 3.4.1 的完整链路走了一遍而且保留了真实项目里才会出现的坑——比如成绩表 XML 里score_math被拼成了socre_math比如学号在软删除机制下故意不加唯一索引。这些细节恰恰是教学项目里最能让人长经验的部分。整套系统只用了三张表用户表、学生表、成绩表却覆盖了 JWT 登录校验、Swagger 接口文档、逻辑删除、参数校验、前后端 RESTful 联调这些日常开发高频考点。适合两类人一是准备用前后端分离做毕设或面试项目的同学可以直接对照源码一步步复现二是工作中用的是 SSM 或 JSP 那套、想了解 MyBatisPlus 到底怎么省 SQL 的工程师。这篇就按「数据库设计 → 后端配置 → 实体与 Mapper → 联调与排错」的顺序把整个项目的关键决策和坑都讲透。2. 数据库设计先行三张表、软删除与学号唯一索引的取舍前后端分离项目里后端最核心的产出是 API而 API 的质量有一半取决于数据库设计。这份教程一上来就把三张表的建表语句给了出来看似简单其实里面藏着两个值得展开的设计点软删除字段的约定以及学号为什么不加唯一索引。2.1 三张表的职责划分与字段设计am_user管登录账号am_student管学生基本信息am_score管每次考试的各科成绩。成绩表通过student_id关联学生表这属于典型的「一学生多成绩」一对多关系。drop table if exists am_user; create table am_user( id bigint not null auto_increment primary key comment 主键id, user_name varchar(50) not null comment 用户名, pwd varchar(50) not null comment 密码, is_deleted tinyint default 0 comment 是否删除1删除0正常 ) comment 用户表; insert into am_user values (1,admin,1234,0); drop table if exists am_student; create table am_student( id bigint not null auto_increment primary key comment 主键id, number varchar(50) not null comment 学号因为使用软删除所以未设置唯一键索引, real_name varchar(50) not null comment 姓名, enroll_time datetime not null default CURRENT_TIMESTAMP comment 入学日期, is_deleted tinyint default 0 comment 是否删除1删除0正常 ) comment 学生表; drop table if exists am_score; create table am_score( id bigint not null auto_increment primary key comment 主键id, student_id bigint not null comment 学生id, exam_name varchar(100) not null comment 考试名称, score_cn decimal(5,2) default 0 comment 语文成绩, score_en decimal(5,2) default 0 comment 英语成绩, score_math decimal(5,2) default 0 comment 数学成绩, is_deleted tinyint default 0 comment 是否删除1删除0正常 ) comment 成绩表;需要说明几个设计决策id全部用bigint auto_increment在单机项目里自增主键的索引写入效率最高完全够用成绩字段用decimal(5,2)而不是double因为考试成绩涉及小数比较和排名decimal能避免浮点误差每条insert语句都显式给出is_deleted默认 0这保证了即使代码层漏传该字段数据也不会被误判为已删除。2.2 逻辑删除字段 is_deleted 的约定与代价三张表都带了is_deleted tinyint default 0。逻辑删除的意思是删除操作不执行delete而是执行update is_deleted 1。这样做的直接好处是数据可恢复、保留审计痕迹在学生成绩这种场景里老师误删一条成绩后可以直接改回标记值找回。代价也很明显所有查询都要带上is_deleted 0条件否则会把已删除数据查出来。MyBatisPlus 解决这个问题的方式是全局逻辑删除配置后面第 3 章会细说。这里要提醒的是tinyint类型的默认值一定要在表结构里写死default 0否则历史数据可能出现null而null在逻辑删除判断时既不等于 0 也不等于 1查询会漏数据。2.3 学号不加唯一索引软删除机制下的典型取舍建表语句里number字段的注释写得很直白「因为使用软删除所以未设置唯一键索引」。这在面试里是一个很好的讨论点。如果加了唯一索引插入一条number 001、is_deleted 1的记录后下次再录入一个同样学号的新学生就会索引冲突因为唯一索引约束的是整行数据而非「未删除」的行。不加唯一索引的结果就是同一学号可以被插入多条记录包括多条未删除记录。如果项目要防重常见做法有几种在 Service 层先查is_deleted 0的记录是否已存在该学号或者用 MySQL 8.0 的生成列配合唯一索引做「部分唯一约束」再或者干脆用deleted_at时间戳字段替代tinyint让每次删除的时间戳都不一样从而允许重复学号存在。这个项目选择的是最轻量的方案不加索引靠业务层控制。跟着教程复现时可以直接照做但上线前建议至少给number加一个普通索引因为学生表的查询基本都走学号条件。3. Spring Boot 2.7.17 启动层配置pom 依赖选型与数据源参数后端项目的基础是 Spring Boot 2.7.17 Java 1.8。这个版本组合现在已经很成熟网上资料多遇到问题也好搜。pom 里值得注意的不是 spring-boot-starter-web 这种标配而是 MyBatisPlus、JWT、Swagger 这三组依赖的具体版本和用途。3.1 pom.xml 里这些依赖分别解决什么问题parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.17/version relativePath/ /parent dependencies !-- ORM 框架MyBatisPlus 核心依赖 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.4.1/version /dependency !-- 代码生成器根据数据表反向生成实体、Mapper、Service -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-generator/artifactId version3.4.1/version /dependency !-- 模板引擎代码生成器依赖它渲染模板 -- dependency groupIdorg.freemarker/groupId artifactIdfreemarker/artifactId version2.3.30/version /dependency !-- MySQL 驱动注意是 5.1.47 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version5.1.47/version /dependency !-- JWT无状态登录令牌 -- dependency groupIdcom.auth0/groupId artifactIdjava-jwt/artifactId version3.11.0/version /dependency !-- Swagger自动生成接口文档 -- dependency groupIdio.springfox/groupId artifactIdspringfox-swagger2/artifactId version2.9.2/version /dependency dependency groupIdio.springfox/groupId artifactIdspringfox-swagger-ui/artifactId version2.9.2/version /dependency /dependencies版本选择上注意三点。第一mybatis-plus-boot-starter3.4.1 与 Spring Boot 2.7.x 兼容良好但如果你把 Spring Boot 升到 3.x就得换用mybatis-plus-spring-boot3-starter因为 Spring Boot 3 的 Jakarta 命名空间变了。第二MySQL 驱动用的 5.1.47 是 5.x 系列的最后一个稳定版如果你的数据库是 MySQL 8.0建议换成mysql-connector-j8.0.33否则连接时可能报Public Key Retrieval is not allowed。第三Swagger 2.9.2 在 Spring Boot 2.6 会遇到路径匹配策略冲突必须加配置spring.mvc.pathmatch.matching-strategyant_path_matcher教程的 application.properties 里已经处理了。3.2 application.properties 逐行拆解数据源、日志、逻辑删除、白名单配置文件是整个后端能不能跑起来的关节。把重点几行拆开看# 服务端口注意不是 8080 server.port8089 # MySQL 连接配置 spring.datasource.driver-class-namecom.mysql.jdbc.Driver spring.datasource.urljdbc:mysql://localhost:3306/test?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimeZoneUTC spring.datasource.usernameroot spring.datasource.passwordmysql123 # JSON 序列化时的时间格式 spring.jackson.date-formatyyyy-MM-dd spring.jackson.time-zoneGMT8 # 打印 MyBatisPlus 执行的 SQL调试用 mybatis-plus.configuration.log-implorg.apache.ibatis.logging.stdout.StdOutImpl # 实体类别名包XML 里可以用短类名 mybatis-plus.type-aliases-packagecom.shrimpking.pojo # 解决 Spring Boot 2.6 之后 Swagger 的路径匹配报错 spring.mvc.pathmatch.matching-strategyant_path_matcher # 全局逻辑删除配置 mybatis-plus.global-config.db-config.logic-delete-fieldis_deleted mybatis-plus.global-config.db-config.logic-delete-value1 mybatis-plus.global-config.db-config.logic-not-delete-value0 # 无需 JWT 登录即可访问的 URL 白名单 auth.ignoreUrls/user/login,/swagger-ui.html,/swagger-resources/**,/csrf,/error,/favicon.ico,/user/login2,/webjars/springfox-swagger-ui/**,/student/add,几个关键参数的调整建议server.port8089是因为本机可能同时跑着其他项目8080 和 8081 容易冲突。如果你本地 8089 也被占了改成 8090 就行但前端 Vue 项目里的 axios 请求地址也要同步改否则跨域请求直接失败。spring.jackson.date-formatyyyy-MM-dd会把后端返回的Date类型序列化成yyyy-MM-dd格式。如果前端 Vue 的 el-date-picker 需要精确到时分秒这里要改成yyyy-MM-dd HH:mm:ss同时数据库字段类型对应datetime才能存得下。mybatis-plus.configuration.log-implorg.apache.ibatis.logging.stdout.StdOutImpl会在控制台打印每一条 SQL 以及参数占位符的替换结果。这个日志在开发时强烈建议打开排查逻辑删除条件是否自动拼接、参数是否传错、分页 SQL 是否正常都得靠它。上线前记得关掉避免日志刷屏和敏感 SQL 泄露。auth.ignoreUrls最后一项/student/add需要注意它把「新增学生」接口直接放进了白名单意味着未登录用户也能调用这个接口新增数据。如果照抄配置部署到公网这是典型的安全隐患。建议上线前从这个列表里移除/student/add只保留登录接口和 Swagger 相关路径。3.3 MyBatisPlus 逻辑删除的完整链路配置里写了三行全局逻辑删除参数后实体类的isDeleted字段上再标TableLogicMyBatisPlus 就会自动处理所有 SQLselect会自动追加WHERE is_deleted 0deleteById会变成UPDATE ... SET is_deleted 1自定义 SQL 如果不走 MyBatisPlus 的 wrapper而是写在 XML 里那就得自己拼is_deleted 0条件这里有一个容易踩的坑如果你的某个查询场景确实需要查已删除的数据比如管理员的回收站列表全局逻辑删除会拦住所有查询此时只能用自定义 SQL 绕过。我会在最后一章给出恢复数据的实际做法。4. 实体类、Mapper 与 ServiceMyBatisPlus 把 SQL 省到什么程度MyBatisPlus 的核心价值在于单表 CRUD 完全不需要手写 SQL。这一章看三个 POJO、三个 Mapper 接口和三个 Service 接口的写法感受一下代码量到底少了多少。4.1 POJO 注解TableName、TableId、TableLogic、TableField先看用户实体类package com.shrimpking.pojo; import com.baomidou.mybatisplus.annotation.TableLogic; import com.baomidou.mybatisplus.annotation.TableName; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import lombok.Data; import lombok.EqualsAndHashCode; Data EqualsAndHashCode(callSuper false) TableName(am_user) public class User implements Serializable { private static final long serialVersionUID 1L; TableId(value id, type IdType.AUTO) private Long id; private String userName; private String pwd; TableLogic private Integer isDeleted; }Data来自 Lombok自动生成 getter/setter代码量直接砍掉一半。TableName(am_user)把实体类和表名绑定因为类名User默认映射到user表如果表名是am_user必须显式声明。TableId(type IdType.AUTO)表示主键由数据库自增生成插入时不传 id由 MySQL 填值。TableLogic标注了逻辑删除字段与全局配置联动。Student 实体类里用了NotBlank和NotNull这是 Jakarta Validation 的参数校验注解NotBlank private String number; NotNull private Date enrollTime;NotBlank校验字符串不为 null 且去掉空格后非空NotNull校验对象不为 null。这些注解要生效Controller 层接收参数时必须加Validated或Valid。教程的代码示例没有贴出 Controller 部分但你跟着写的时候一定记得在方法参数前加Validated RequestBody Student student否则注解不生效非法参数会带着空学号直接入库。4.2 Mapper 接口继承 BaseMapper 后免费获得哪些能力package com.shrimpking.mapper; import com.shrimpking.pojo.Score; import com.baomidou.mybatisplus.core.mapper.BaseMapper; public interface ScoreMapper extends BaseMapperScore { }继承BaseMapperScore后自动拥有了insert、deleteById、updateById、selectById、selectList、selectPage等 17 个方法。对于成绩管理这个场景基础 CRUD 已经全覆盖了。BaseMapper提供的selectPage是分页查询的关键注意 MyBatisPlus 3.4.1 的分页插件需要自己配置一个MybatisPlusInterceptorpackage com.shrimpking.config; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); PaginationInnerInterceptor pagination new PaginationInnerInterceptor(); // 设置最大单页限制为 500防止一次查太多拖垮数据库 pagination.setMaxLimit(500L); interceptor.addInnerInterceptor(pagination); return interceptor; } }这个配置类教程里没有贴出来但实际跑分页功能时必须加否则selectPage会查出全表数据而不是分页结果。网上反映的 mybatisplus 分页失效问题八成就是漏了这个拦截器配置。setMaxLimit(500L)这个参数很实用它能兜底拦截前端传过来的超大分页参数避免一次查询加载过多数据。4.3 Mapper XML 里的 typoscore_math 变成 socre_math 的连锁反应教程里 ScoreMapper.xml 的 resultMap 和 Base_Column_List 都有同一个拼写错误socre_math而不是score_math。这在 MySQL 里不会直接报错因为 MyBatis 的 resultMap 只在做 ORM 映射时使用如果查询 SQL 是额外手写的并且 SQL 里写了socre_mathMySQL 会报Unknown column如果查询走 MyBatisPlus 自动生成的 SQL列名来自实体类字段那么 resultMap 里的错误列名可能根本不会被触发。坏情况是等你某天手写了一条自定义 SQL用了SELECT socre_math FROM am_score错误就暴露了。score_math这列本身也存在命名规范问题。MySQL 在 Linux 下默认表名列名大小写敏感而下划线命名法与 Java 实体类的驼峰命名法scoreMath之间的转换需要 MyBatisPlus 的驼峰映射开关。MyBatisPlus 默认开启map-underscore-to-camel-case所以score_cn能自动映射到scoreCn。如果你在 XML 里手写 resultMap也要记得保持列名和实体字段一一对应用数据库实际列名不要凭记忆写错。4.4 Service 层继承 IService 后多出批量操作能力package com.shrimpking.service; import com.shrimpking.pojo.Score; import com.baomidou.mybatisplus.extension.service.IService; public interface ScoreService extends IServiceScore { }IServiceScore在 BaseMapper 之上又封装了一层多出了saveBatch批量插入、listByIds按 ID 集合查询、lambdaQuery链式查询等方法。典型的链式查询写法// 查某学生的所有成绩按考试名称倒序 ListScore scoreList scoreService.lambdaQuery() .eq(Score::getStudentId, studentId) .orderByDesc(Score::getExamName) .list();lambdaQuery用方法引用代替字符串列名编译期就能发现拼写错误比QueryWrapper的字符串写法安全得多。开发中建议优先用lambdaQuery和lambdaUpdate只有需要动态拼接复杂条件时才退回QueryWrapper。5. 前后端联调时的登录白名单、时区与数据恢复技巧前端 Vue 部分的核心工作是与后端 API 对接。联调阶段最容易出问题的三块登录接口与 JWT 白名单、时间字段的时区偏差、逻辑删除之后的数据恢复。这一章把这三个问题的验证方法和处理技巧说透。5.1 登录白名单JWT 拦截器放行了哪些路径教程配置中的auth.ignoreUrls是一个自定义配置项通常由一个拦截器读取// 伪代码展示拦截器如何读取白名单 String ignoreUrls environment.getProperty(auth.ignoreUrls); ListString urlList Arrays.asList(ignoreUrls.split(,)); // 拦截器里判断请求路径属于白名单则直接放行 if (urlList.contains(request.getRequestURI())) { return true; } // 否则校验请求头中的 Authorization String token request.getHeader(Authorization);联调时验证白名单是否生效的方法很简单先不带 token 访问/user/login应返回 200再不带 token 访问学生列表接口应返回 401 或重定向到登录页。如果发现某个受保护接口能匿名访问检查两处一是配置项里的路径是否和 Controller 的RequestMapping路径完全一致二是拦截器的放行判断是否用了startsWith而不是equals/user/login2这类相似路径很容易被误判放行。Swagger 页面本身也在白名单里所以如果你按教程配置了 Swagger浏览器直接访问http://localhost:8089/swagger-ui.html就能看到所有接口文档。这是一个非常好用的联调工具不用再靠 postman 手动维护接口参数。上线前建议把 swagger 相关路径从白名单移除或者直接用 profile 控制只在 dev 环境开启。5.2 前端联调时的时间字段与时区大坑serverTimeZoneUTC与spring.jackson.time-zoneGMT8的组合是前后端分离项目里最容易出现时间错乱的源头。场景是这样的数据库连接串里写了serverTimeZoneUTC但 JVM 时区是GMT8Jackson 序列化Date类型时用GMT8而 MySQL 驱动按 UTC 存取。最终效果是后端存入数据库的时间比实际时间早 8 小时前端拿到的 JSON 时间字符串按北京时间解析后又对不上。特别是成绩表里如果想记录考试日期这个偏差直接导致考试日期显示的年份都错。验证方法是在 Spring Boot 启动类或配置类里打印当前时间System.out.println(new Date());处理建议有两种。第一种连接串改成serverTimeZoneAsia/Shanghai同时删掉spring.jackson.time-zoneGMT8或保留也行保持一致。第二种实体类的时间字段改用LocalDateTime配合 Jackson 的JavaTimeModule彻底绕开java.util.Date的时区语义。后一种方案更推荐LocalDateTime本身就是无时区概念的时间描述适合成绩录入这种场景。顺带提一个常见问题前端 el-date-picker 传的日期格式如果是2023-01-01T00:00:00.000Z而后端RequestBody接收Date类型时没配格式解析会直接报JSON parse error。解决方式是加一个 Jackson 全局配置spring.jackson.date-formatyyyy-MM-dd HH:mm:ss这样前端传2023-01-01 00:00:00就基本不会出问题。如果你的前端组件就是习惯传 ISO 格式也可以在后端加一个自定义反序列化器但那是后话先用统一格式最省事。5.3 逻辑删除后如何恢复数据update 语句与 MyBatisPlus 的边界逻辑删除最大的优势是数据可恢复。实际场景里常见两种恢复需求恢复单条成绩记录以及恢复某个学生的全部成绩。-- 恢复单条成绩把 is_deleted 改回 0 UPDATE am_score SET is_deleted 0 WHERE id 1 AND is_deleted 1; -- 批量恢复某个学生的全部成绩 UPDATE am_score SET is_deleted 0 WHERE student_id 1 AND is_deleted 1;但这里有个陷阱MyBatisPlus 的逻辑删除配置会让所有自动生成的update语句都拼接WHERE is_deleted 0意味着你没法通过updateById把一条已删除记录改回来。这个场景必须用自定义 SQL在 Mapper XML 里手写一条绕过逻辑删除的 updateupdate idrecoverById UPDATE am_score SET is_deleted 0 WHERE id #{id} /update注意这段 SQL 并不会被全局逻辑删除拦截因为它是你自己写在 XML 里的MyBatisPlus 不会为手写 SQL 注入逻辑删除条件——除非你启用了InterceptorIgnore等高级功能。所以你要自己保证这里的is_deleted条件是对的不要误恢复了「本来就不该出现」的脏数据。同理如果你想在管理后台查看包含已删除学生的列表也需要手写 SQL 或用Select注解Select(SELECT * FROM am_student WHERE number #{number}) ListStudent selectIncludingDeleted(Param(number) String number);这段 SQL 完全绕过了逻辑删除能查出已删除记录供开发者确认数据是否被误删。日常调试时建议先跑这条确认数据还在再执行恢复 SQL两步验证都通过才敢跟业务方说「数据找回来了」。最后一提成绩录入场景里如果前端传的scoreCn只有一位小数后端实体类用的是Double接收而数据库是decimal(5,2)MyBatis 会自动补齐小数位但如果你在前端做了平均值或排名的二次计算Double的精度误差会在数据量变大之后慢慢浮现。正式项目里成绩字段建议统一用BigDecimal接收和运算decimal(5,2)的最大值是 999.99单科成绩不会超够用。Decimal的 equals 运算和比较要基于compareTo而不是equals这也是BigDecimal的另一个隐藏坑写单元测试时容易踩到。本文还有配套的精品资源点击获取