考勤系统这种东西，网上搜一圈源码并不少，但真正能做到前后端分离、结构清晰、能顺利跑起来并且敢写进简历里的，确实得挑一挑。今天要拆的这套SpringBoot+Vue大学生考勤系统管理平台，恰好就是那种“毕设课设都能交差、学完还能举一反三”的项目。整个项目基于Java技术栈，后端用SpringBoot扛业务，前端用Vue做交互，数据落在MySQL里，从学生签到、教师审批到管理员统计，闭环完整，拿来写论文、做答辩演示、甚至改一改接成公司内部考勤原型，都够用。下面我从架构设计到实际运行，把关键细节和踩过的坑一次说清楚。

1. 项目整体设计与技术架构拆解

1.1 为什么选SpringBoot+Vue这套组合

国内做管理类Web系统，SpringBoot+Vue+MySQL几乎可以算是“标准答案”。不是因为它最潮，而是因为它最能平衡开发效率、学习成本和后续维护。SpringBoot框架最核心的价值是“自动配置+开箱即用”，相比传统的SSH（Spring+Struts+Hibernate）那套XML堆积时代，现在写一个RESTful接口就像喝水一样简单，你只要加上@RestController、@Service、@Mapper这几个注解，业务代码就能层层递进，不用自己管理Bean生命周期，不用手写复杂的事务模板。这对学生做毕设来说特别友好，因为你可以把精力放在“业务功能有没有做全”上，而不是整天和配置文件打架。

Vue这边同理。Vue上手曲线平滑，单文件组件、响应式数据绑定、Vue Router路由管理、Vuex/Pinia状态管理，这些概念虽然听起来多，但只要跟着本项目过一遍，基本就能形成肌肉记忆。更关键的是，前后端分离的开发模式，让前端和后端可以并行推进：后端返回JSON数据，前端只管渲染界面，分工人一多也不容易互相阻塞。

选MySQL更不用论证，市面上大部分教学资源、云服务器教程都以它为例，遇到问题随手一搜就有答案。对这个体量的考勤系统来说，MySQL在并发量、事务支持、数据一致性上的表现绰绰有余。关系型数据库对这种结构化业务数据（学生表、课程表、考勤记录表）天然契合，用不上NoSQL那套东西。

1.2 系统整体分层与模块划分

这套考勤系统在功能上大致分成三大块：学生端、教师端、管理员端。每个角色看到的菜单和操作权限都不一样，这也是管理系统的通用套路。

从后端代码结构上看，采用的是标准的Controller-Service-Mapper三层结构：

• Controller层：负责接收前端请求、参数校验、调用Service、返回统一结果包装类。
• Service层：存放业务逻辑，比如“签到是否重复”“请假是否冲突”“课程是否属于该教师”，这些判断全部放在Service里，不能扔给Controller。
• Mapper层：基于MyBatis或MyBatis-Plus操作数据库，简单的CRUD靠内置方法，复杂的多表统计用SQL注解或XML文件。

实体类对应数据库表，另外包一层VO（View Object）专门用来返回给前端。为什么要整VO而不是直接返回实体？因为实体里可能带有密码、创建时间这些不该暴露的字段，而前端需要的可能是“学生姓名+班级名+签到状态”的组合数据，直接返回实体还得前端自己去拼，没有意义。

前端结构则按Vue的标准目录来组织，页面组件放在views下，公共组件放components，路由单独一个router目录，状态管理用store，请求统一封装在utils/request.js。这里有个小细节值得学：把Axios实例的baseURL、拦截器、错误处理全部封装好，每个页面调用接口时不需要关心token怎么加、报错怎么弹，代码瞬间干净很多。

1.3 数据库表设计的心得

考勤系统的核心表大概有这几张：学生表、教师表、课程表、班级表、学生选课表、考勤记录表、请假申请表。如果做得细一点，还可以加一张管理员表或者直接复用教师表加角色字段。

我见过不少毕设数据库设计败在两张表上：一是学生选课表，很多新手喜欢直接在课程表里存一个“选课学生ID列表”，用逗号分隔，查询时再split，这种设计能跑，但统计某个班出勤率时会让你哭；二是考勤记录表，最简单正确的做法是“学生ID+课程ID+上课日期+考勤状态+签到时间”一行一条，状态用1出勤、2迟到、3缺勤、4请假这种数字字典，不要存中文，方便后续统计和扩展。

2. 核心功能模块与实现细节

2.1 用户认证与权限控制

考勤系统的权限模型不复杂，就是三种角色：学生、教师、管理员，对应前端的三种路由菜单。后端权限控制用Spring Security或者拦截器都能做，但以学习为导向建议用拦截器+自定义注解的方式，因为你能更清楚地看到“一个请求进来之后到底发生了什么”。

具体实现上，登录接口校验账号密码后，生成一个Token返回给前端。这里不推荐搞复杂的JWT密钥管理，直接用一个UUID作为token字符串，存到Redis里设置过期时间，Redis的key带上用户ID，value存角色信息。前端拿到token之后，每次请求在Authorization请求头里带上，后端写一个AuthInterceptor拦截器，preHandle方法里解析token、查Redis、把用户信息塞到ThreadLocal或请求参数里，放行或者返回401。

有个细节：对于“学生只能操作自己的数据”这种需求，后端不能只靠前端隐藏按钮，要在Service层做归属校验。比如学生修改个人资料，要比较当前登录用户的ID和要修改记录的studentId是否一致。前端限制是体验层面的，后端校验才是安全层面的，这句话值得记下来，答辩时老师问权限控制你也能有理有据。

2.2 考勤签到与二维码定位

这套系统的签到功能，可以做成两种模式：普通签到和二维码签到。普通签到就是学生在指定时间范围内点击签到按钮，系统记录当前时间，后端判断是否在有效时段内，以及是否重复签到。二维码签到的本质则是教师端动态生成一个包含课程ID和当前时间戳的二维码，学生用手机扫一扫完成签到，后端核对二维码有效期和课程归属。

这里最难防的是“代签到”。真实场景下有GPS定位、WiFi MAC校验这些手段，但作为毕设，做到“同一个学生同一节课只能签一次”已经达标。要是你想提高一点完成度，可以在签到表里加一个sign_ip字段，记录签到时的IP地址，教师在后台能看到“本课程签到IP异常率”，这是一个很好的加分点，答辩时能讲讲思路就行。

2.3 请假审批流程设计

请假流程是考勤系统里最容易做成一坨屎的功能，因为涉及状态流转。最简单的可落地方案是：学生提交请假申请，包含请假开始时间、结束时间、请假事由，后端根据课程安排自动统计会影响哪些课程；教师端看到待审批列表，点击通过或驳回。请假通过后，考勤统计时会把对应日期范围内、该学生选的那门课自动置为“请假”状态。

状态设计上，用0待审批、1已通过、2已驳回三个数字即可。千万注意并发问题：学生提交请假时，如果教师同时在审批，会出现状态覆盖，解决办法是在更新语句里加WHERE status = 0条件，更新行数为0说明已被处理，前端再根据结果提示。

2.4 考勤统计和可视化报表

统计模块是整张答卷的“亮点题”。比如按课程统计出勤率、缺勤率、迟到率，按班级统计某个时间段内的考勤排名，按学生维度统计个人出勤日历。这里后端SQL的写法很关键，我给你看一段核心统计查询：

SELECT c.course_name, SUM(CASE WHEN a.status = 1 THEN 1 ELSE 0 END) AS present_count, SUM(CASE WHEN a.status = 2 THEN 1 ELSE 0 END) AS late_count, SUM(CASE WHEN a.status = 3 THEN 1 ELSE 0 END) AS absent_count, SUM(CASE WHEN a.status = 4 THEN 1 ELSE 0 END) AS leave_count, COUNT(*) AS total_count FROM attendance_record a LEFT JOIN course c ON a.course_id = c.id WHERE a.course_id = #{courseId} GROUP BY a.course_id

这条SQL能一次查出某一门课的四种状态分布，不需要在内存里做二次计算。前端拿到数据后，用ECharts画柱状图或饼图，视觉效果好，答辩演示时也直观。

3. 实操过程与核心环境搭建指南

3.1 开发环境准备

硬件和软件方面，Windows、macOS都行，推荐直接用IDEA全家桶旗舰版，社区版也能用但缺少一些Spring Boot插件。Node.js版本建议用18或20 LTS，别用太新的，部分Vue CLI项目在Node 22上容易报依赖兼容问题。后端JDK用1.8或者11均可，SpringBoot 2.7.x对应JDK 8和11都能跑，整体兼容性最稳妥。

数据库这边，MySQL 5.7和8.0都可以。这里我特别提醒一下：MySQL 8.0的用户认证插件是caching_sha2_password，而某些老版本连接驱动不支持，你会看到Unable to load authentication plugin之类的报错。解决方案有两个：要么在pom.xml里把MyBatis-Plus或JDBC驱动版本提到8.0.x以上，要么创建用户时指定mysql_native_password。不想踩坑就直接用MySQL 5.7，反正考勤系统用不上MySQL 8的新特性。

3.2 后端项目初始化与启动

后端项目可以直接基于Spring Initializr创建，依赖选择Spring Web、MyBatis Framework（或MyBatis-Plus）、MySQL Driver、Lombok。拿MyBatis-Plus举例，它能把单表CRUD代码量砍掉一半，特别适合写课设，代码整洁还不容易出错。

关键配置文件application.yml，核心注意事项如下：

server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/attendance_system?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: your_password redis: host: localhost port: 6379 mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0

连接串里serverTimezone=Asia/Shanghai一定要加，否则数据库连接会报时区错误。map-underscore-to-camel-case开启后，数据库的course_name字段能自动映射成courseName，省去一堆@TableField注解。

启动后端时，如果8080端口被占用，可以在application.yml里换端口，但记得前端request.js里的baseURL要同步修改，这个问题我在第四章节还会细说。

3.3 前端项目构建与对接

前端用Vue CLI创建项目，命令很简单：

vue create attendance-frontend

路由如果用Vue Router，需要手动安装vue-router@4以及状态管理pinia。项目跑起来后npm run serve默认端口是8080，和后端冲突，必须在vue.config.js里配置：

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } })

这个配置解决了跨域问题。开发阶段用proxy代理，让前端请求/api开头时自动转发到后端8080，这样浏览器地址栏始终是3000端口，不触发跨域拦截，后端也不需要额外写@CrossOrigin。部署到生产环境时，更推荐的做法是用Nginx统一监听80端口，把/api路径反向代理到SpringBoot服务上，前端打包后的静态文件交给Nginx托管。

登录流程对接时注意：后端Result包装类里一般有code、message、data三个字段。前端Axios拦截器响应阶段统一判断res.data.code === 200，不是则弹出message并强制退出登录。这个统一拦截思路很多项目都在用，提前养成好习惯后面找工作也顺手。

3.4 数据库初始化与测试数据

项目里应提供一个init.sql脚本，包含建表语句和测试数据。测试数据这块我吃过大亏：只插三五个学生，页面上分页功能根本看不出效果。建议至少给每个班插入20个学生，按日期生成连续一个月的考勤记录，统计数据才不会看起来稀稀拉拉。

这里给你一个SQL模板，生成测试考勤记录的思路是：先查所有选课关系，然后用存储过程循环生成过去30天内每天每条记录的状态随机值：

INSERT INTO attendance_record (student_id, course_id, sign_date, status, sign_time) SELECT sc.student_id, sc.course_id, DATE_SUB(CURDATE(), INTERVAL n DAY), FLOOR(1 + RAND() * 4), CASE WHEN FLOOR(1 + RAND() * 4) = 1 THEN '08:30:00' ELSE NULL END FROM student_course sc CROSS JOIN ( SELECT 0 n UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 -- 继续加到30即可 ) numbers WHERE sc.student_id BETWEEN 1 AND 50;

刷完数据后，用Navicat或DataGrip看一眼统计结果，柱状图能出高低起伏，答辩演示效果会好很多。

4. 常见问题与排查技巧实录

4.1 数据库连接失败的几种现场

报错信息：Access denied for user 'root'@'localhost'。八成是密码不对，或者root用户本机登录权限没开，检查application.yml里的密码以及MySQL账号的host权限。报错Public Key Retrieval is not allowed，这是MySQL 8强制要求安全连接导致的，在JDBC连接串后面加上allowPublicKeyRetrieval=true就能解决。报错Unknown database 'attendance_system'，说明数据库名不存在，先手动执行init.sql建库建表。

连接串里还有一个经典坑：useSSL=false必须写，否则MySQL 8会打印大量SSL警告，虽然不影响运行，但控制台刷屏看着心烦，查错也会被干扰。

4.2 前端请求404或500的排查思路

前端页面打开后，调用接口报404，先按这个顺序排查：打开浏览器开发者工具，看Network面板，请求URL到底是什么。如果URL是http://localhost:8080/api/attend/record，而后端Controller映射是/attend/record，可能是baseURL配了http://localhost:8080/api但后端context-path不是/api，这时候要么加server.servlet.context-path: /api，要么去掉baseURL里的/api前缀。方法千千万，统一才是关键。

报500就更好分析了，后端控制台一定有一行红色异常堆栈。最常见的空指针是“某个Service注入的Mapper为null”，检查Mapper接口上有没有加@Mapper注解，或者在启动类上加了@MapperScan。此外，MyBatis的XML文件有语法错误时，启动就会报BindingException，IDE会直接标红，照着改就行。

4.3 跨域、Cookie与Token的坑

前后端分离项目，如果后端开启了@CrossOrigin或全局CORS配置，同时前端又是跨域请求，会出现一种诡异现象：预请求OPTIONS能通，但真正带身份证明的POST请求又拿不到数据。问题根源是预请求通过了，但后端收到业务请求时，因为自定义Header（Authorization）没在允许列表里，直接被拦了。

稳妥的跨域配置是在后端加一个配置类：

@Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); config.addAllowedOriginPattern("*"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }

但如果你在生产环境用了Nginx做反向代理，业务请求都是同源的，理论上根本不需要开启CORS。这也是我推荐“开发用Vue代理、部署用Nginx代理”的原因，能把跨域问题消灭在萌芽阶段。

4.4 考勤时间判断与定时任务

有关卡在这里的：学生过了签到时间还能成功签上，或者教师在非上课时间段也能发起签到。这是因为时间判断逻辑写在了前端JS里，而后端接口没校验。正确做法是：后端在发起签到的Service里，判断当前时间是否在课程安排表的时间段内，比如teacher_course_schedule表里存了start_time和end_time，前端传来课程ID，后端严格比对。

如果想在“签到时间结束后自动把未签到学生标记为缺勤”，那就需要定时任务。SpringBoot里用@Scheduled注解即可，固定每天夜里跑一次，或者每节课结束后的15分钟跑一次。注意@Scheduled方法所在类要加@EnableScheduling，并且方法不能有参数，任务逻辑里查询所有今天有课且还没有考勤记录的学生，批量插入状态为缺勤的记录。

4.5 版本兼容性速查表

考察时间久了会发现，大多数毕设项目的坑都集中在版本兼容上。整理一张速查表直接抄：

动手之前先对着这张表检查本机环境，能帮你节约至少半天折腾时间。

5. 项目部署与答辩准备经验

5.1 从本地跑到服务器部署

毕设不只是让老师看看Demo，很多学校要求部署到云服务器上演示。这时候别再用Vue开发服务器转发，而是用npm run build打出dist静态目录，然后把dist目录扔到Nginx的html目录下，Nginx配置server块：

server { listen 80; server_name your_domain; root /usr/share/nginx/html; index index.html; location /api/ { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

注意proxy_pass http://localhost:8080;后面没有/，表示保留原始URI，也就是/api/login仍然转发为http://localhost:8080/api/login；如果写了http://localhost:8080/，那会变成http://localhost:8080/login，就得和后端接口路径对应调整。这个细节极容易踩坑，一定要记清楚。

后端打成jar包放服务器上，用nohup java -jar attendance-system.jar > log.txt 2>&1 &后台启动。数据库导入时也要注意编码，MySQL建库时指定utf8mb4，避免中文乱码。

5.2 演示数据与演示脚本

答辩时最尴尬的场面是现场连数据库查数据，结果表格空空的。提前准备一套带日期跨度的演示数据，或者做一个“一键生成演示数据”的后端接口，只给管理员调用。演示时按这个顺序走流程比较顺：

先管理员登录，打开班级考勤统计，让柱状图和饼图可展示；再教师登录，点开课程的二维码签到页面，手机扫码签到，后台能看到刚签到记录；最后学生登录，提交一个请假申请，切回教师端审批，再回学生端能看到状态变化。这一套流程把角色权限、核心功能全部覆盖了，流畅演示大概5分钟，老师想打断提问也有足够的素材接招。

5.3 论文里怎么写“重难点”

论文的技术难点部分不用编造高深词汇，写这三块就够扎实：基于Redis的Token认证机制与拦截器实现、基于二维码的课程签到方案设计与防重复签到约束、考勤数据的多维度统计SQL优化。每块配上核心代码片段和说明，凑一两个整节一点问题没有。

流程图不要花哨，Visio或Draw.io画清楚“学生-教师-管理员”三条业务线即可。数据库ER图记得导出，课程表和选课表是多对多关系，通过中间表连接，这是评审老师最常看的点。

6. 源码学习与扩展方向

这套源码对于新手最好的打开方式，先读init.sql了解数据模型，再选一条简单链路从Controller到Mapper走一遍，比如登录接口就是一个清晰的起点。不要一头扎进全部代码里，容易迷失。打通一个请求闭环后，再去看考勤签到、请假流程这种带状态流转的模块，逻辑理解会顺很多。

学有余力的同学，可以试试这几个方向：加入Redis存储考勤签到数据，定时期限到了再批量写回数据库，体验一下缓存与持久化配合的经典方案；把教师端开课功能扩展成二维码有效期动态刷新，过期作废，跟真实场景贴近；或者把统计接口改成按班级、按院系、按时间段聚合，一个接口搞定多级钻取查询。拿着这套基础去扩展，面试时聊项目完全不虚。

如果你是想快速跑通一个完整项目用来交差，那更简单：环境按文章开头搭好，导入init.sql，后端启动、前端启动，按顺序表登录三个角色，拍几张截图，论文框架往上面套，基本上两天能搞定大部分事情。唯一要嘱咐的是一次别改太多东西，任何时候只改一个模块调试通了再动下一个，否则报错都找不到出处。

考勤系统这种业务，看似简单但功能环环相扣。我印象最深的一次，是在改“学生请假后考勤自动置为请假”时，因为没处理重复签到记录，导致一个学生出现“同一天既请假又签到”的数据，统计结果直接乱了。后来每次设计状态流转前，都会先画一张状态机图，把触发条件和边界情况写清楚，再动手写代码。这套源码完全够你稳稳过检，把数据模型吃透、把权限流程理顺，收获远不止一个毕设。