1. 项目概述与技术选型思路又到了毕业设计和课程设计扎堆的季节每年这个时候总能看到不少同学在群里问学生成绩管理系统有没有现成的我最初接触这个项目也是在帮某高校同学调试课设的时候前后折腾了两个版本踩了不少坑后来整理出来一套Spring Boot Vue的经典实现方案源码、数据库脚本、设计文档都齐全整体跑下来非常稳定适合拿来做学习参考或二次开发底座。先说清楚这个项目的定位这是一套典型的前后端分离架构学生成绩管理系统。后端基于Spring Boot 2.x构建RESTful API前端使用Vue 2.x Element UI搭建管理界面数据库选用MySQL 5.7/8.0通过MyBatis-Plus做持久层操作。系统实现了管理员、教师、学生三种角色的登录认证教师可以录入、修改、查询成绩学生能查看自己的成绩和排名管理员负责用户管理、班级管理、课程管理等后台维护工作。核心业务覆盖了成绩录入、成绩修改、成绩查询、成绩统计、成绩排名、课程管理和用户管理这些高校教学管理中最常见的场景。为什么选择Spring Boot Vue这套组合答案很简单生态成熟、学习资料多、就业市场需求大。Spring Boot作为Java后端的主流框架内置了Tomcat、自动配置、starter机制开发效率非常高不需要像传统SSH那样写一大堆XML配置。Vue作为渐进式前端框架模板语法简单组件化开发友好配上Element UI组件库很快就能搭建出像样的管理界面。前后端分离的好处是后续扩展和学习路径都清晰后端只需暴露接口前端专注页面交互两个端可以独立调试和部署这在团队协作开发时优势更明显。这个项目适合谁参考如果你是刚接触Spring Boot和Vue的Java学习者可以把它当作一个完整的全栈入门案例跟着拆解读懂后端Controller、Service、Mapper三层结构看懂前端路由、组件、状态管理的基本用法。如果你是正在准备毕设的同学源码和数据库脚本可以直接作为基础框架在现有功能上扩展自己需要的模块。如果你是在职开发者想找一套业务逻辑清晰的教学管理系统做内部培训演示这个项目的代码规范也有一定的参考价值。后面我会按设计思路、核心模块、数据库、实操部署、常见问题的顺序把整个项目掰开揉碎讲清楚很多细节都是实际调试中积累出来的希望能帮大家少走弯路。2. 整体设计思路与架构拆解2.1 前后端分离的核心思想这个系统的核心是前后端完全分离这样说可能有点抽象我用一个生活化的类比解释传统开发模式下前后端像是一家人挤在同一间屋子里后端把页面和业务逻辑绑在一起改一个按钮颜色可能都要动到Java代码前后端分离则像是把前台接待和后台厨房彻底分开前端负责渲染页面、收集用户操作通过HTTP请求把数据发给后端后端只处理业务逻辑并返回JSON格式的结果两者通过约定好的接口文档沟通。实际开发中这样的设计带来了几个明显的好处。第一点是开发效率前端同学和后端同学可以并行工作后端定义好接口返回结构前端就可以拿着Mock数据先做页面第二点是维护清晰所有业务规则收敛在后端Service层所有页面交互逻辑归前端管出问题时排查范围明显缩小第三点是部署灵活前端打包成静态文件交给Nginx托管后端打成Jar包独立运行资源占用和故障隔离都更可控。2.2 后端经典三层架构后端项目采用标准的Controller-Service-Mapper三层结构遵循阿里巴巴Java开发规范中的分层思想。层级核心职责典型类命名Controller层接收请求、参数校验、返回结果StudentControllerService层业务逻辑处理、事务管理StudentService / StudentServiceImplMapper层数据库CRUD操作StudentMapperController层不写业务逻辑只负责HTTP协议层面的解析和响应。Service层是业务的核心成绩计算的规则、权限校验的逻辑都在这一层完成所有需要多表操作的业务都通过事务注解控制。Mapper层基于MyBatis-Plus提供的基础方法配合自定义SQL注解实现复杂统计查询避免了大量重复的XML文件配置。2.3 前端组件化与路由设计前端采用Vue全家桶方案Vue Router负责页面路由跳转Vuex存储登录状态和用户信息Element UI提供表格、表单、弹窗、消息提示等组件。页面结构上按照角色拆分视图登录页所有用户共用入口登录成功后根据角色跳转到不同主界面管理员视图用户管理、班级管理、课程管理、密码重置教师视图我的课程、成绩录入、成绩修改、成绩导出学生视图我的成绩、成绩排名、课程列表路由守卫在main.js里统一配置每次跳转前检查localStorage中保存的token同时校验路由meta里声明的角色权限。这个设计从根本上避免了用户通过修改URL越权访问的问题。2.4 角色权限模型系统设计了三类角色每类角色在菜单可见性和操作权限上都有区分。实现上没有引入Spring Security或Shiro这类重量级安全框架而是采用轻量的Interceptor拦截器方案登录拦截器负责验证请求头中的token解析出用户ID和角色信息存入ThreadLocal供后续业务使用。角色校验单独封装一个注解RequireRole标记在Controller方法上拦截器中判断当前用户角色是否满足注解声明。比如成绩录入接口加RequireRole({teacher})学生端即使拿到接口地址也无法调用成功。这种轻量级方案在中小型管理系统中很实用理解起来也比引入安全框架更直接适合初学者学习权限控制的核心原理。2.5 接口返回结构统一所有接口统一返回同一JSON结构这在前后端分离项目中非常重要。定义一个Result类包含code、message、data三个字段{ code: 200, message: 操作成功, data: {} }code为200表示成功401表示未登录或token失效403表示没有权限500表示服务端异常。前端封装的axios实例在响应拦截器里做统一处理业务代码只需要关心data字段错误提示统一用Message组件弹出。这样的约定避免了每个人写接口都返回不同格式前端解析时写大量重复代码。3. 核心功能模块实现解析3.1 登录认证与Token机制登录流程是这个项目里最有学习价值的部分。用户提交用户名和密码后端先通过用户名查询用户信息用MD5加盐的方式校验密码摘要校验通过后生成一个token返回给前端。token的生成采用JWTJSON Web Token规范默认有效期设为24小时。JWT的构成分为三部分用点号分隔Header头部声明加密算法和token类型Payload载荷存放用户ID、用户名、角色这些非敏感信息Signature签名由Header和Payload结合服务器密钥通过HS256算法生成。前端拿到token后保存在sessionStorage里每次请求在拦截器中自动附加到Authorization请求头后端拦截器解析并校验签名签名有效的请求才允许放行。为什么选择JWT而不是传统的Session方案因为前后端分离场景下接口被前端静态资源、移动端、小程序等多端调用Session机制依赖服务器保存会话状态横向扩展时还要考虑Session同步问题JWT是无状态的服务器不保存任何会话数据天然适合分布式部署。当然JWT也有短板token一旦签发在有效期内无法主动失效所以系统里提供了修改密码后强制重新登录的逻辑算是业务层兜底。3.2 成绩录入与修改功能教师端成绩录入是核心业务。界面采用一个表格左侧列出选课学生列表右侧输入成绩字段支持逐个录入和批量保存。设计时考虑到一个现实场景教师往往在成绩出来后一次性录入全班学生成绩所以批量保存是最常用的操作。前端实现方式是把表格数据绑定到一个数组中每次修改触发行数据的表单校验保证成绩在0~100之间点击保存时把所有行数据一次性提交给后端。后端接口接收一个成绩对象列表通过MyBatis-Plus的saveOrUpdateBatch方法逐条判断记录是否存在boolean hasRecord scoreMapper.selectCount( new LambdaQueryWrapperScore() .eq(Score::getStudentId, item.getStudentId()) .eq(Score::getCourseId, item.getCourseId()) ) 0;存在则执行更新不存在则执行插入这样教师中途补录个别学生成绩时不会产生重复记录。这里踩过一个坑saveOrUpdateBatch不是真正按条件判断的它只根据主键是否存在决定insert还是update所以如果自定义业务主键比如studentId courseId联合唯一索引就必须先手动查询判断否则会出现唯一键冲突。成绩修改功能设计成只能修改自己教的学生成绩后端通过课程教师关联表校验当前登录教师ID是否等于该课程授课教师ID不满足直接抛业务异常前端显示没有权限修改该课程成绩的提示。这个细节很多同期项目没考虑到导致任何教师都能改任何课程的成绩属于严重的数据越权问题。3.3 成绩查询与统计功能学生端成绩查询不是简单查一张表而是需要连表查询出课程名称、学分、任课教师、成绩等级等信息。设计了一个ScoreVO视图对象来承载组装好的数据通过Service层手动组装而不是让前端发起多个请求自己拼接。统计功能是我认为这个项目最值得学习的部分。实现了三个维度的统计平均分统计分组查询每门课程的平均分、最高分、最低分、及格率用于教师查看教学效果成绩分布统计把每门课程的成绩按优秀(90~100)、良好(80~89)、中等(70~79)、及格(60~69)、不及格(0~59)五个区间分组统计人数前端用ECharts柱状图展示学生个人绩点计算根据成绩和学分计算加权平均分公式为Σ(课程成绩 × 课程学分) / Σ(课程学分)很多学校成绩单上关注的排名数据就来源于此。统计查询SQL使用了MyBatis-Plus的selectMaps接口配合GROUP BY语句直接返回ListMapString, Object结构省去了专门定义统计实体类的麻烦。这里要注意的是MySQL的ONLY_FULL_GROUP_BY模式问题直接select *加group by会报错需要改成select具体聚合字段和分组字段这也是很多同学实际运行报错查半天查不出来的原因。3.4 用户管理与密码安全管理员端的用户管理模块覆盖了学生、教师、管理员三类账号的增删改查支持按用户名和姓名模糊查询分页组件使用Element UI的Pagination配合后端的PageHelper分页参数。密码安全方面有两个处理值得关注。密码存储采用了MD5加盐摘要盐值取用户名和固定密钥拼接防止彩虹表直接破解。用户首次导入账号时统一初始化密码为123456管理员可以强制某些账号下次登录时修改密码前端在登录响应中判断强制修改标记后弹窗引导用户设置新密码。删除用户时遇到一个业务关联问题直接删除学生记录会导致成绩表、选课表中出现孤立数据。好在数据库设计时外键约束用了ON DELETE CASCADE级联删除删掉学生后关联成绩自动清理。但这只适用于彻底删除的场景实际教学管理中删除大多应该是停用所以设计中增加了一个status字段管理员可以停用账号而不删除学生登录时状态校验拦截并提示请联系管理员。3.5 数据可视化报表成绩统计的图表展示让这个系统看起来比普通管理项目高了一个档次。前端引入ECharts组件库封装了一个ChartCard基础组件接收option对象动态渲染。教师端课程成绩分布图使用柱状图展示五个分数段人数管理员端班级对比图使用饼图展示各班级平均分对比。数据通过统计接口一次性返回前端在mounted生命周期中发起请求获取数据后转换为图表配置项。图表组件有个复用细节窗口尺寸变化时图表不会自动自适应需要在window的resize事件中调用chart.resize()方法并且组件销毁时移除事件监听否则会造成内存泄漏。封装组件时用this.chart echarts.init(this.$refs.dom)保存实例beforeDestroy钩子中调用window.removeEventListener和this.chart.dispose()。4. 数据库设计与初始化脚本说明4.1 表结构设计数据库是整个系统最核心的资产蚂蚁搬家式的表设计会让业务代码漏洞百出所以这个项目在表结构上做了比较全面的考虑。核心表一共6张关系清晰表名存储内容关键字段sys_user用户账号信息id, username, password, real_name, role, statustb_class班级信息id, class_name, grade, majortb_course课程信息id, course_name, credit, teacher_id, class_idtb_student学生扩展信息id, student_no, user_id, class_idtb_score成绩记录id, student_id, course_id, score, exam_timetb_course_teacher课程教师关联表id, course_id, teacher_idsys_user表是所有角色的统一认证入口通过role字段区分身份student表只存学生特有的信息比如学号和班级这种设计避免了用户表里堆砌大量空字段。tb_score表是业务核心student_id和course_id建立了联合索引因为最常见的查询条件就是按学生查成绩或按课程查成绩。分数段统计场景下score字段走索引范围查询没问题。外键关系上成绩表的student_id指向学生表course_id指向课程表同时在student_id和course_id上加了联合唯一索引从数据库层面保证同一学生同一课程只能有一条成绩记录。4.2 初始化数据脚本项目附带了一个init.sql文件顺序执行后就能得到一个可以演示的完整环境。脚本包含四部分内容表结构定义放在最前面按先父表后子表的顺序建表避免外键约束报错。初始化数据包含3个内置管理员账号、5个教师账号、50个学生账号、8门课程以及对应的选课记录和成绩数据。测试数据用了存储过程批量生成而不是一条条insert语句脚本体积小执行快DROP PROCEDURE IF EXISTS generate_students_data; DELIMITER $$ CREATE PROCEDURE generate_students_data() BEGIN DECLARE i INT DEFAULT 1; WHILE i 50 DO INSERT INTO sys_user (username, password, real_name, role, status) VALUES (CONCAT(student, i), MD5(CONCAT(123456, fixed_salt)), CONCAT(测试学生, i), student, 1); INSERT INTO tb_student (student_no, user_id, class_id) VALUES (CONCAT(202100, LPAD(i, 3, 0)), i 7, (i MOD 3) 1); SET i i 1; END WHILE; END$$ DELIMITER ; CALL generate_students_data();存储过程里用CONCAT配合LPAD拼接学号根据学生编号对3取模分配到不同班级这样数据看起来比较自然。成绩数据按正态分布思路生成避免所有学生都是满分或都是零分这种失真场景。4.3 核心查询SQL解读项目中有几条核心SQL是数据统计的关键单独拿出来解读一下。计算学生个人加权平均分的SQLSELECT SUM(s.score * c.credit) / SUM(c.credit) AS weighted_avg FROM tb_score s JOIN tb_course c ON s.course_id c.id WHERE s.student_id #{studentId}这条SQL的精髓是JOIN两个表把分数和学分关联起来SUM(s.score * c.credit)得到加权总分除以总学分得到平均分。如果学生在某些课程缺考成绩表无记录在计算时会自动少算这门课的学分权重。统计成绩分布区间的SQLSELECT CASE WHEN score 90 THEN 优秀 WHEN score 80 THEN 良好 WHEN score 70 THEN 中等 WHEN score 60 THEN 及格 ELSE 不及格 END AS level, COUNT(*) AS count FROM tb_score WHERE course_id #{courseId} GROUP BY level ORDER BY FIELD(level, 优秀, 良好, 中等, 及格, 不及格)CASE表达式字段分组字段排序用FIELD函数保证输出顺序为优秀→不及格前端图表展示不需要再做额外排序处理。4.4 数据库连接配置与应用数据库连接信息统一放在application.yml配置文件中实际部署时可以根据环境分成application-dev.yml、application-prod.yml多环境配置。生产环境建议修改密码强度、开启SSL连接至少也要修改默认端口。MySQL 8.0版本需要特别注意驱动类名发生了变化从com.mysql.jdbc.Driver改成了com.mysql.cj.jdbc.Driver连接URL需要加上serverTimezoneAsia/Shanghai参数解决时区问题否则系统时间和数据库时间会有8小时偏差。项目初始化时统一处理了这些细节源码中的配置可以直接使用。5. 实操部署从零启动项目5.1 准备工作与环境版本在开始部署之前先把环境准备好。这是踩坑率最高的环节版本不匹配问题能让人怀疑人生。推荐使用以下环境组合软件推荐版本备注JDK1.8Spring Boot 2.x必须Maven3.6依赖管理Node.js14.x/16.xVue2项目建议14MySQL5.7或8.0高版本需调整驱动开发工具IDEA VSCode前后端分开开发JDK版本一定不要用17跑Spring Boot 2.x虽然能启动但会有模块化访问报错Node.js版本太高比如18以上跑Vue2项目有时候会因为OpenSSL兼容问题报错。建议直接装一个NVM管理Node版本按需切换。5.2 后端启动步骤先导入后端代码到IDEA等待Maven下载依赖。注意settings.xml里的镜像源配置必要时换成国内镜像源否则下载速度会让你怀疑人生。修改application.yml中的数据库连接配置spring: datasource: url: jdbc:mysql://localhost:3306/student_score_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver然后执行init.sql脚本在Navicat或命令行中直接source执行即可。启动类上标注了SpringBootApplication右键运行main方法即可启动后端服务端口默认配置为8080。注意如果端口被占用日志中会出现Port 8080 was already in use提示修改server.port端口即可前端代理配置中的目标端口也需要同步修改。后端启动成功后浏览器访问http://localhost:8080/api/ping返回{code:200,message:pong}说明后端服务正常。5.3 前端启动步骤前端是标准的Vue2项目需要安装依赖包。在项目根目录执行npm install如果安装过程中报node-sass相关的错误十有八九是Node版本和node-sass版本不匹配。这里提供两种解决方案换用dart-sass替代node-sass或者用淘宝镜像源重新安装npm config set registry https://registry.npmmirror.com npm install依赖安装成功后修改前端代理配置文件vue.config.js中的devServer配置把target设置为后端地址devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }然后执行npm run dev启动开发服务器访问http://localhost:8081出现登录页即可。用初始账号登录管理员admin/admin123教师teacher1/123456学生student1/123456角色不同看到的菜单完全不同。5.4 前后端联调需要注意的细节联调阶段最常见的错误就是跨域问题。配置了代理跨域问题就不会出现了因为前端访问的/api接口被代理到了后端同源地址但前提是后端接口统一以/api作为前缀。如果某一天直接部署上线不经过代理需要后端配置CORS跨域过滤器才能支持跨域调用。另一个细节是请求Content-Type问题。前端axios默认发送的是application/json格式数据后端Controller接收时需要用RequestBody注解接收JSON对象如果用RequestParam接收前端需要把请求头改成application/x-www-form-urlencoded格式。项目里统一约定用JSON格式交互遵循这条约定就不会踩到传参解析的坑。5.5 生产环境部署参考开发环境用npm run dev跑通之后生产环境部署是另一套流程后端执行mvn clean package打包成jar文件服务器上用nohup java -jar student-score-server.jar 后台运行注意前先执行mvn install确保依赖全部打入包内。前端执行npm run build打包出dist目录包含静态资源文件。部署方式有两种一是通过Nginx把dist作为站点根目录同时配置/api路径反向代理到后端端口二是把dist拷入后端的静态资源目录让Spring Boot统一托管。第二种方式虽然前后端物理上合在一起但目录结构在逻辑上仍是分离的适合小型项目减少Nginx配置成本。6. 常见问题与排查经验实录6.1 登录失败却无报错提示现象输入正确的账号密码页面提示账号或密码错误但去数据库确认过密码明明是对的。排查思路这类问题90%出在密码加密算法不一致。确认数据库中的密码字段是通过什么方式生成的如果init.sql用的MD5函数后端校验时也要用相同的拼接规则和加密方式。还遇到过一种情况初始密码字段包含空格或不可见字符INSERT语句中字符串边界没处理好导致数据异常。处理办法是查库确认数据SELECT id, username, password, LENGTH(password) FROM sys_user WHERE username admin;看到password长度值与预期摘要长度MD5为32位对比就能定位问题。6.2 跨域请求被拦截现象浏览器控制台出现Access to XMLHttpRequest ... has been blocked by CORS policy错误请求状态码为0或没有网络响应。排查思路开发环境出现跨域先确认vue.config.js代理是否生效。npm run dev启动的本地服务中代理配置修改后必须重启dev server只刷新页面是无效的。生产环境出现跨域检查后端是否配置了跨域过滤器或使用了CorsFilter。项目里提供了一个WebConfig配置类实现了addCorsMappings方法允许来源列表、允许方法、允许请求头都要配置完整并且allowedOrigins需要加http://协议前缀。6.3 前端页面能打开但数据为空现象登录成功后页面可以正常显示菜单但表格里一条数据都没有接口请求返回code 200且data为null或空数组。排查思路轮询排查先用postman直接调用后端接口看返回什么排除前端问题。如果postman返回正常说明前端携带的token或参数可能丢失。检查请求拦截器确认axios中header设置是否正确service.interceptors.request.use(config { const token sessionStorage.getItem(token) if (token) { config.headers[Authorization] token } return config })还要注意token字段名是Authorization不是authorization后端从header取值时用的名称要保持一致。6.4 分页查询总页数不对现象数据库有20条记录每页10条应该显示总共2页但页面只显示1页甚至不显示。排查思路MyBatis-Plus分页插件在Spring Boot 2.x中需要手动配置PaginationInterceptor没有注册插件时Page参数分页不生效。检查项目中分页插件配置类是否被正确扫描ConfigurationBean两个注解缺一不可。前端分页组件传参时注意current和size字段名称是驼峰式后端实体字段对应pageNum和pageSize会比较别扭项目统一使用了pageNum/pageSize命名前端传参保持一致。6.5 成绩导出功能乱码现象导出Excel文件在Windows上打开后中文显示乱码或用Excel打开提示文件格式损坏。排查思路CSV导出时需要输出UTF-8 BOM头否则Windows下Excel默认按GBK编码打开导致乱码。在输出流开头写入\uFEFF字符即可解决。对于EasyExcel或POI导出的xlsx文件不存在乱码问题但需要注意数据顺序和表头格式。如果导出过程中出现数据丢失检查每行的字段数是否和表头一致空值字段要用空字符串填充。6.6 核心排查经验速查表问题现象大概率原因处理手段后端启动直接报错退出数据库连接失败检查服务是否启动、端口是否被占用、账号密码是否正确前端执行npm install失败Node版本与依赖冲突换用Node14版本或用dart-sass替代node-sass页面样式错乱Element UI样式未按需加载检查main.js中完整引入还是按需引入btabel样式丢失往往是组件库版本不一致批量保存成绩失败联合唯一索引冲突用saveOrUpdateBatch前手动查询判断再决定插入或更新图表显示空白容器宽度为0或数据格式不正确图表初始化时机放在数据获取后用$nextTick包裹初始化函数7. 个人实操体会与建议用这个项目带过几次课设和毕设也帮不少同学排查过问题整体感受是Spring Boot Vue这套技术栈非常适合做中小型管理系统学习曲线平缓、排错路径清晰、网上资料多。但代码能跑通只是第一步真正提升项目质量的地方往往藏在细节里。我强烈建议拿到源码后不要只跑起来看效果而是沿着几条主线去深入读代码读一遍登录认证的完整链路弄清楚token从生成到校验的每一个环节画一下成绩录入的时序图搞清楚前端表格数据从改动到落库经历了哪些步骤改一次统计SQL尝试自己写一个按班级统计挂科率的查询可能比看十遍代码更有收获。这三个点打通了Spring Boot和Vue的核心用法也就掌握得差不多了。数据库脚本是整个项目最容易忽略又最值得研究的部分。存储过程怎么生成测试数据、联合唯一索引怎么保护业务数据、外键级联删除怎么影响业务逻辑每一处设计都能对应到实际场景。建议你拿到脚本后手动执行几条INSERT语句测试索引约束的作用亲手触发一次唯一键冲突看看报错内容对理解数据库设计帮助很大。后续可以扩展的功能我也简单提一下方向。把Excel模板导入做完善教师可以批量导入成绩而不是手动一个个录入加入课程评价模块学生可以给课程打分和写评语引入Redis缓存把年级排名这种高频读少写的接口缓存起来等等。数据库表结构已经预留了不少字段扩展空间是够的。最后说一个所有新手都会犯的错误不要把项目跑起来就以为万事大吉试着用postman把所有接口整理成一个接口文档清单把参数含义、返回结构记一遍既能加深对系统的理解也是在给自己积攒开发能力。毕竟真实工作中写一手清晰的接口文档比会调几个API更值钱。 
长河君 · 2026/10/18 7:23:23 · 阅读 1.2k Spring Boot+Vue学生成绩管理系统实战：设计、部署与避坑指南
1. 项目概述与技术选型思路又到了毕业设计和课程设计扎堆的季节每年这个时候总能看到不少同学在群里问学生成绩管理系统有没有现成的我最初接触这个项目也是在帮某高校同学调试课设的时候前后折腾了两个版本踩了不少坑后来整理出来一套Spring Boot Vue的经典实现方案源码、数据库脚本、设计文档都齐全整体跑下来非常稳定适合拿来做学习参考或二次开发底座。先说清楚这个项目的定位这是一套典型的前后端分离架构学生成绩管理系统。后端基于Spring Boot 2.x构建RESTful API前端使用Vue 2.x Element UI搭建管理界面数据库选用MySQL 5.7/8.0通过MyBatis-Plus做持久层操作。系统实现了管理员、教师、学生三种角色的登录认证教师可以录入、修改、查询成绩学生能查看自己的成绩和排名管理员负责用户管理、班级管理、课程管理等后台维护工作。核心业务覆盖了成绩录入、成绩修改、成绩查询、成绩统计、成绩排名、课程管理和用户管理这些高校教学管理中最常见的场景。为什么选择Spring Boot Vue这套组合答案很简单生态成熟、学习资料多、就业市场需求大。Spring Boot作为Java后端的主流框架内置了Tomcat、自动配置、starter机制开发效率非常高不需要像传统SSH那样写一大堆XML配置。Vue作为渐进式前端框架模板语法简单组件化开发友好配上Element UI组件库很快就能搭建出像样的管理界面。前后端分离的好处是后续扩展和学习路径都清晰后端只需暴露接口前端专注页面交互两个端可以独立调试和部署这在团队协作开发时优势更明显。这个项目适合谁参考如果你是刚接触Spring Boot和Vue的Java学习者可以把它当作一个完整的全栈入门案例跟着拆解读懂后端Controller、Service、Mapper三层结构看懂前端路由、组件、状态管理的基本用法。如果你是正在准备毕设的同学源码和数据库脚本可以直接作为基础框架在现有功能上扩展自己需要的模块。如果你是在职开发者想找一套业务逻辑清晰的教学管理系统做内部培训演示这个项目的代码规范也有一定的参考价值。后面我会按设计思路、核心模块、数据库、实操部署、常见问题的顺序把整个项目掰开揉碎讲清楚很多细节都是实际调试中积累出来的希望能帮大家少走弯路。2. 整体设计思路与架构拆解2.1 前后端分离的核心思想这个系统的核心是前后端完全分离这样说可能有点抽象我用一个生活化的类比解释传统开发模式下前后端像是一家人挤在同一间屋子里后端把页面和业务逻辑绑在一起改一个按钮颜色可能都要动到Java代码前后端分离则像是把前台接待和后台厨房彻底分开前端负责渲染页面、收集用户操作通过HTTP请求把数据发给后端后端只处理业务逻辑并返回JSON格式的结果两者通过约定好的接口文档沟通。实际开发中这样的设计带来了几个明显的好处。第一点是开发效率前端同学和后端同学可以并行工作后端定义好接口返回结构前端就可以拿着Mock数据先做页面第二点是维护清晰所有业务规则收敛在后端Service层所有页面交互逻辑归前端管出问题时排查范围明显缩小第三点是部署灵活前端打包成静态文件交给Nginx托管后端打成Jar包独立运行资源占用和故障隔离都更可控。2.2 后端经典三层架构后端项目采用标准的Controller-Service-Mapper三层结构遵循阿里巴巴Java开发规范中的分层思想。层级核心职责典型类命名Controller层接收请求、参数校验、返回结果StudentControllerService层业务逻辑处理、事务管理StudentService / StudentServiceImplMapper层数据库CRUD操作StudentMapperController层不写业务逻辑只负责HTTP协议层面的解析和响应。Service层是业务的核心成绩计算的规则、权限校验的逻辑都在这一层完成所有需要多表操作的业务都通过事务注解控制。Mapper层基于MyBatis-Plus提供的基础方法配合自定义SQL注解实现复杂统计查询避免了大量重复的XML文件配置。2.3 前端组件化与路由设计前端采用Vue全家桶方案Vue Router负责页面路由跳转Vuex存储登录状态和用户信息Element UI提供表格、表单、弹窗、消息提示等组件。页面结构上按照角色拆分视图登录页所有用户共用入口登录成功后根据角色跳转到不同主界面管理员视图用户管理、班级管理、课程管理、密码重置教师视图我的课程、成绩录入、成绩修改、成绩导出学生视图我的成绩、成绩排名、课程列表路由守卫在main.js里统一配置每次跳转前检查localStorage中保存的token同时校验路由meta里声明的角色权限。这个设计从根本上避免了用户通过修改URL越权访问的问题。2.4 角色权限模型系统设计了三类角色每类角色在菜单可见性和操作权限上都有区分。实现上没有引入Spring Security或Shiro这类重量级安全框架而是采用轻量的Interceptor拦截器方案登录拦截器负责验证请求头中的token解析出用户ID和角色信息存入ThreadLocal供后续业务使用。角色校验单独封装一个注解RequireRole标记在Controller方法上拦截器中判断当前用户角色是否满足注解声明。比如成绩录入接口加RequireRole({teacher})学生端即使拿到接口地址也无法调用成功。这种轻量级方案在中小型管理系统中很实用理解起来也比引入安全框架更直接适合初学者学习权限控制的核心原理。2.5 接口返回结构统一所有接口统一返回同一JSON结构这在前后端分离项目中非常重要。定义一个Result类包含code、message、data三个字段{ code: 200, message: 操作成功, data: {} }code为200表示成功401表示未登录或token失效403表示没有权限500表示服务端异常。前端封装的axios实例在响应拦截器里做统一处理业务代码只需要关心data字段错误提示统一用Message组件弹出。这样的约定避免了每个人写接口都返回不同格式前端解析时写大量重复代码。3. 核心功能模块实现解析3.1 登录认证与Token机制登录流程是这个项目里最有学习价值的部分。用户提交用户名和密码后端先通过用户名查询用户信息用MD5加盐的方式校验密码摘要校验通过后生成一个token返回给前端。token的生成采用JWTJSON Web Token规范默认有效期设为24小时。JWT的构成分为三部分用点号分隔Header头部声明加密算法和token类型Payload载荷存放用户ID、用户名、角色这些非敏感信息Signature签名由Header和Payload结合服务器密钥通过HS256算法生成。前端拿到token后保存在sessionStorage里每次请求在拦截器中自动附加到Authorization请求头后端拦截器解析并校验签名签名有效的请求才允许放行。为什么选择JWT而不是传统的Session方案因为前后端分离场景下接口被前端静态资源、移动端、小程序等多端调用Session机制依赖服务器保存会话状态横向扩展时还要考虑Session同步问题JWT是无状态的服务器不保存任何会话数据天然适合分布式部署。当然JWT也有短板token一旦签发在有效期内无法主动失效所以系统里提供了修改密码后强制重新登录的逻辑算是业务层兜底。3.2 成绩录入与修改功能教师端成绩录入是核心业务。界面采用一个表格左侧列出选课学生列表右侧输入成绩字段支持逐个录入和批量保存。设计时考虑到一个现实场景教师往往在成绩出来后一次性录入全班学生成绩所以批量保存是最常用的操作。前端实现方式是把表格数据绑定到一个数组中每次修改触发行数据的表单校验保证成绩在0~100之间点击保存时把所有行数据一次性提交给后端。后端接口接收一个成绩对象列表通过MyBatis-Plus的saveOrUpdateBatch方法逐条判断记录是否存在boolean hasRecord scoreMapper.selectCount( new LambdaQueryWrapperScore() .eq(Score::getStudentId, item.getStudentId()) .eq(Score::getCourseId, item.getCourseId()) ) 0;存在则执行更新不存在则执行插入这样教师中途补录个别学生成绩时不会产生重复记录。这里踩过一个坑saveOrUpdateBatch不是真正按条件判断的它只根据主键是否存在决定insert还是update所以如果自定义业务主键比如studentId courseId联合唯一索引就必须先手动查询判断否则会出现唯一键冲突。成绩修改功能设计成只能修改自己教的学生成绩后端通过课程教师关联表校验当前登录教师ID是否等于该课程授课教师ID不满足直接抛业务异常前端显示没有权限修改该课程成绩的提示。这个细节很多同期项目没考虑到导致任何教师都能改任何课程的成绩属于严重的数据越权问题。3.3 成绩查询与统计功能学生端成绩查询不是简单查一张表而是需要连表查询出课程名称、学分、任课教师、成绩等级等信息。设计了一个ScoreVO视图对象来承载组装好的数据通过Service层手动组装而不是让前端发起多个请求自己拼接。统计功能是我认为这个项目最值得学习的部分。实现了三个维度的统计平均分统计分组查询每门课程的平均分、最高分、最低分、及格率用于教师查看教学效果成绩分布统计把每门课程的成绩按优秀(90~100)、良好(80~89)、中等(70~79)、及格(60~69)、不及格(0~59)五个区间分组统计人数前端用ECharts柱状图展示学生个人绩点计算根据成绩和学分计算加权平均分公式为Σ(课程成绩 × 课程学分) / Σ(课程学分)很多学校成绩单上关注的排名数据就来源于此。统计查询SQL使用了MyBatis-Plus的selectMaps接口配合GROUP BY语句直接返回ListMapString, Object结构省去了专门定义统计实体类的麻烦。这里要注意的是MySQL的ONLY_FULL_GROUP_BY模式问题直接select *加group by会报错需要改成select具体聚合字段和分组字段这也是很多同学实际运行报错查半天查不出来的原因。3.4 用户管理与密码安全管理员端的用户管理模块覆盖了学生、教师、管理员三类账号的增删改查支持按用户名和姓名模糊查询分页组件使用Element UI的Pagination配合后端的PageHelper分页参数。密码安全方面有两个处理值得关注。密码存储采用了MD5加盐摘要盐值取用户名和固定密钥拼接防止彩虹表直接破解。用户首次导入账号时统一初始化密码为123456管理员可以强制某些账号下次登录时修改密码前端在登录响应中判断强制修改标记后弹窗引导用户设置新密码。删除用户时遇到一个业务关联问题直接删除学生记录会导致成绩表、选课表中出现孤立数据。好在数据库设计时外键约束用了ON DELETE CASCADE级联删除删掉学生后关联成绩自动清理。但这只适用于彻底删除的场景实际教学管理中删除大多应该是停用所以设计中增加了一个status字段管理员可以停用账号而不删除学生登录时状态校验拦截并提示请联系管理员。3.5 数据可视化报表成绩统计的图表展示让这个系统看起来比普通管理项目高了一个档次。前端引入ECharts组件库封装了一个ChartCard基础组件接收option对象动态渲染。教师端课程成绩分布图使用柱状图展示五个分数段人数管理员端班级对比图使用饼图展示各班级平均分对比。数据通过统计接口一次性返回前端在mounted生命周期中发起请求获取数据后转换为图表配置项。图表组件有个复用细节窗口尺寸变化时图表不会自动自适应需要在window的resize事件中调用chart.resize()方法并且组件销毁时移除事件监听否则会造成内存泄漏。封装组件时用this.chart echarts.init(this.$refs.dom)保存实例beforeDestroy钩子中调用window.removeEventListener和this.chart.dispose()。4. 数据库设计与初始化脚本说明4.1 表结构设计数据库是整个系统最核心的资产蚂蚁搬家式的表设计会让业务代码漏洞百出所以这个项目在表结构上做了比较全面的考虑。核心表一共6张关系清晰表名存储内容关键字段sys_user用户账号信息id, username, password, real_name, role, statustb_class班级信息id, class_name, grade, majortb_course课程信息id, course_name, credit, teacher_id, class_idtb_student学生扩展信息id, student_no, user_id, class_idtb_score成绩记录id, student_id, course_id, score, exam_timetb_course_teacher课程教师关联表id, course_id, teacher_idsys_user表是所有角色的统一认证入口通过role字段区分身份student表只存学生特有的信息比如学号和班级这种设计避免了用户表里堆砌大量空字段。tb_score表是业务核心student_id和course_id建立了联合索引因为最常见的查询条件就是按学生查成绩或按课程查成绩。分数段统计场景下score字段走索引范围查询没问题。外键关系上成绩表的student_id指向学生表course_id指向课程表同时在student_id和course_id上加了联合唯一索引从数据库层面保证同一学生同一课程只能有一条成绩记录。4.2 初始化数据脚本项目附带了一个init.sql文件顺序执行后就能得到一个可以演示的完整环境。脚本包含四部分内容表结构定义放在最前面按先父表后子表的顺序建表避免外键约束报错。初始化数据包含3个内置管理员账号、5个教师账号、50个学生账号、8门课程以及对应的选课记录和成绩数据。测试数据用了存储过程批量生成而不是一条条insert语句脚本体积小执行快DROP PROCEDURE IF EXISTS generate_students_data; DELIMITER $$ CREATE PROCEDURE generate_students_data() BEGIN DECLARE i INT DEFAULT 1; WHILE i 50 DO INSERT INTO sys_user (username, password, real_name, role, status) VALUES (CONCAT(student, i), MD5(CONCAT(123456, fixed_salt)), CONCAT(测试学生, i), student, 1); INSERT INTO tb_student (student_no, user_id, class_id) VALUES (CONCAT(202100, LPAD(i, 3, 0)), i 7, (i MOD 3) 1); SET i i 1; END WHILE; END$$ DELIMITER ; CALL generate_students_data();存储过程里用CONCAT配合LPAD拼接学号根据学生编号对3取模分配到不同班级这样数据看起来比较自然。成绩数据按正态分布思路生成避免所有学生都是满分或都是零分这种失真场景。4.3 核心查询SQL解读项目中有几条核心SQL是数据统计的关键单独拿出来解读一下。计算学生个人加权平均分的SQLSELECT SUM(s.score * c.credit) / SUM(c.credit) AS weighted_avg FROM tb_score s JOIN tb_course c ON s.course_id c.id WHERE s.student_id #{studentId}这条SQL的精髓是JOIN两个表把分数和学分关联起来SUM(s.score * c.credit)得到加权总分除以总学分得到平均分。如果学生在某些课程缺考成绩表无记录在计算时会自动少算这门课的学分权重。统计成绩分布区间的SQLSELECT CASE WHEN score 90 THEN 优秀 WHEN score 80 THEN 良好 WHEN score 70 THEN 中等 WHEN score 60 THEN 及格 ELSE 不及格 END AS level, COUNT(*) AS count FROM tb_score WHERE course_id #{courseId} GROUP BY level ORDER BY FIELD(level, 优秀, 良好, 中等, 及格, 不及格)CASE表达式字段分组字段排序用FIELD函数保证输出顺序为优秀→不及格前端图表展示不需要再做额外排序处理。4.4 数据库连接配置与应用数据库连接信息统一放在application.yml配置文件中实际部署时可以根据环境分成application-dev.yml、application-prod.yml多环境配置。生产环境建议修改密码强度、开启SSL连接至少也要修改默认端口。MySQL 8.0版本需要特别注意驱动类名发生了变化从com.mysql.jdbc.Driver改成了com.mysql.cj.jdbc.Driver连接URL需要加上serverTimezoneAsia/Shanghai参数解决时区问题否则系统时间和数据库时间会有8小时偏差。项目初始化时统一处理了这些细节源码中的配置可以直接使用。5. 实操部署从零启动项目5.1 准备工作与环境版本在开始部署之前先把环境准备好。这是踩坑率最高的环节版本不匹配问题能让人怀疑人生。推荐使用以下环境组合软件推荐版本备注JDK1.8Spring Boot 2.x必须Maven3.6依赖管理Node.js14.x/16.xVue2项目建议14MySQL5.7或8.0高版本需调整驱动开发工具IDEA VSCode前后端分开开发JDK版本一定不要用17跑Spring Boot 2.x虽然能启动但会有模块化访问报错Node.js版本太高比如18以上跑Vue2项目有时候会因为OpenSSL兼容问题报错。建议直接装一个NVM管理Node版本按需切换。5.2 后端启动步骤先导入后端代码到IDEA等待Maven下载依赖。注意settings.xml里的镜像源配置必要时换成国内镜像源否则下载速度会让你怀疑人生。修改application.yml中的数据库连接配置spring: datasource: url: jdbc:mysql://localhost:3306/student_score_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver然后执行init.sql脚本在Navicat或命令行中直接source执行即可。启动类上标注了SpringBootApplication右键运行main方法即可启动后端服务端口默认配置为8080。注意如果端口被占用日志中会出现Port 8080 was already in use提示修改server.port端口即可前端代理配置中的目标端口也需要同步修改。后端启动成功后浏览器访问http://localhost:8080/api/ping返回{code:200,message:pong}说明后端服务正常。5.3 前端启动步骤前端是标准的Vue2项目需要安装依赖包。在项目根目录执行npm install如果安装过程中报node-sass相关的错误十有八九是Node版本和node-sass版本不匹配。这里提供两种解决方案换用dart-sass替代node-sass或者用淘宝镜像源重新安装npm config set registry https://registry.npmmirror.com npm install依赖安装成功后修改前端代理配置文件vue.config.js中的devServer配置把target设置为后端地址devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }然后执行npm run dev启动开发服务器访问http://localhost:8081出现登录页即可。用初始账号登录管理员admin/admin123教师teacher1/123456学生student1/123456角色不同看到的菜单完全不同。5.4 前后端联调需要注意的细节联调阶段最常见的错误就是跨域问题。配置了代理跨域问题就不会出现了因为前端访问的/api接口被代理到了后端同源地址但前提是后端接口统一以/api作为前缀。如果某一天直接部署上线不经过代理需要后端配置CORS跨域过滤器才能支持跨域调用。另一个细节是请求Content-Type问题。前端axios默认发送的是application/json格式数据后端Controller接收时需要用RequestBody注解接收JSON对象如果用RequestParam接收前端需要把请求头改成application/x-www-form-urlencoded格式。项目里统一约定用JSON格式交互遵循这条约定就不会踩到传参解析的坑。5.5 生产环境部署参考开发环境用npm run dev跑通之后生产环境部署是另一套流程后端执行mvn clean package打包成jar文件服务器上用nohup java -jar student-score-server.jar 后台运行注意前先执行mvn install确保依赖全部打入包内。前端执行npm run build打包出dist目录包含静态资源文件。部署方式有两种一是通过Nginx把dist作为站点根目录同时配置/api路径反向代理到后端端口二是把dist拷入后端的静态资源目录让Spring Boot统一托管。第二种方式虽然前后端物理上合在一起但目录结构在逻辑上仍是分离的适合小型项目减少Nginx配置成本。6. 常见问题与排查经验实录6.1 登录失败却无报错提示现象输入正确的账号密码页面提示账号或密码错误但去数据库确认过密码明明是对的。排查思路这类问题90%出在密码加密算法不一致。确认数据库中的密码字段是通过什么方式生成的如果init.sql用的MD5函数后端校验时也要用相同的拼接规则和加密方式。还遇到过一种情况初始密码字段包含空格或不可见字符INSERT语句中字符串边界没处理好导致数据异常。处理办法是查库确认数据SELECT id, username, password, LENGTH(password) FROM sys_user WHERE username admin;看到password长度值与预期摘要长度MD5为32位对比就能定位问题。6.2 跨域请求被拦截现象浏览器控制台出现Access to XMLHttpRequest ... has been blocked by CORS policy错误请求状态码为0或没有网络响应。排查思路开发环境出现跨域先确认vue.config.js代理是否生效。npm run dev启动的本地服务中代理配置修改后必须重启dev server只刷新页面是无效的。生产环境出现跨域检查后端是否配置了跨域过滤器或使用了CorsFilter。项目里提供了一个WebConfig配置类实现了addCorsMappings方法允许来源列表、允许方法、允许请求头都要配置完整并且allowedOrigins需要加http://协议前缀。6.3 前端页面能打开但数据为空现象登录成功后页面可以正常显示菜单但表格里一条数据都没有接口请求返回code 200且data为null或空数组。排查思路轮询排查先用postman直接调用后端接口看返回什么排除前端问题。如果postman返回正常说明前端携带的token或参数可能丢失。检查请求拦截器确认axios中header设置是否正确service.interceptors.request.use(config { const token sessionStorage.getItem(token) if (token) { config.headers[Authorization] token } return config })还要注意token字段名是Authorization不是authorization后端从header取值时用的名称要保持一致。6.4 分页查询总页数不对现象数据库有20条记录每页10条应该显示总共2页但页面只显示1页甚至不显示。排查思路MyBatis-Plus分页插件在Spring Boot 2.x中需要手动配置PaginationInterceptor没有注册插件时Page参数分页不生效。检查项目中分页插件配置类是否被正确扫描ConfigurationBean两个注解缺一不可。前端分页组件传参时注意current和size字段名称是驼峰式后端实体字段对应pageNum和pageSize会比较别扭项目统一使用了pageNum/pageSize命名前端传参保持一致。6.5 成绩导出功能乱码现象导出Excel文件在Windows上打开后中文显示乱码或用Excel打开提示文件格式损坏。排查思路CSV导出时需要输出UTF-8 BOM头否则Windows下Excel默认按GBK编码打开导致乱码。在输出流开头写入\uFEFF字符即可解决。对于EasyExcel或POI导出的xlsx文件不存在乱码问题但需要注意数据顺序和表头格式。如果导出过程中出现数据丢失检查每行的字段数是否和表头一致空值字段要用空字符串填充。6.6 核心排查经验速查表问题现象大概率原因处理手段后端启动直接报错退出数据库连接失败检查服务是否启动、端口是否被占用、账号密码是否正确前端执行npm install失败Node版本与依赖冲突换用Node14版本或用dart-sass替代node-sass页面样式错乱Element UI样式未按需加载检查main.js中完整引入还是按需引入btabel样式丢失往往是组件库版本不一致批量保存成绩失败联合唯一索引冲突用saveOrUpdateBatch前手动查询判断再决定插入或更新图表显示空白容器宽度为0或数据格式不正确图表初始化时机放在数据获取后用$nextTick包裹初始化函数7. 个人实操体会与建议用这个项目带过几次课设和毕设也帮不少同学排查过问题整体感受是Spring Boot Vue这套技术栈非常适合做中小型管理系统学习曲线平缓、排错路径清晰、网上资料多。但代码能跑通只是第一步真正提升项目质量的地方往往藏在细节里。我强烈建议拿到源码后不要只跑起来看效果而是沿着几条主线去深入读代码读一遍登录认证的完整链路弄清楚token从生成到校验的每一个环节画一下成绩录入的时序图搞清楚前端表格数据从改动到落库经历了哪些步骤改一次统计SQL尝试自己写一个按班级统计挂科率的查询可能比看十遍代码更有收获。这三个点打通了Spring Boot和Vue的核心用法也就掌握得差不多了。数据库脚本是整个项目最容易忽略又最值得研究的部分。存储过程怎么生成测试数据、联合唯一索引怎么保护业务数据、外键级联删除怎么影响业务逻辑每一处设计都能对应到实际场景。建议你拿到脚本后手动执行几条INSERT语句测试索引约束的作用亲手触发一次唯一键冲突看看报错内容对理解数据库设计帮助很大。后续可以扩展的功能我也简单提一下方向。把Excel模板导入做完善教师可以批量导入成绩而不是手动一个个录入加入课程评价模块学生可以给课程打分和写评语引入Redis缓存把年级排名这种高频读少写的接口缓存起来等等。数据库表结构已经预留了不少字段扩展空间是够的。最后说一个所有新手都会犯的错误不要把项目跑起来就以为万事大吉试着用postman把所有接口整理成一个接口文档清单把参数含义、返回结构记一遍既能加深对系统的理解也是在给自己积攒开发能力。毕竟真实工作中写一手清晰的接口文档比会调几个API更值钱。