Cookie Young1. 项目概述：基于SpringBoot+Vue的课堂考勤系统
去年帮学弟调试毕业设计时，发现市面上很多课堂考勤系统要么功能冗余，要么扩展性差。于是用SpringBoot+Vue重构了一套轻量级方案，这个项目特别适合计算机专业学生作为毕业设计或课程设计参考。整套系统包含完整的源码（Java+HTML）、MySQL数据库脚本、以及符合高校规范的毕业论文文档，已经通过某211高校的毕业答辩验收。
系统采用经典的前后端分离架构：后端用SpringBoot提供RESTful API，前端用Vue.js构建交互界面，数据库选用MySQL 8.0。这种技术组合既保证了系统性能，又降低了学习门槛——SpringBoot的自动配置特性让Java新手也能快速搭建后端服务，而Vue的组件化开发模式非常适合管理系统的前端实现。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心功能设计
2.1 多角色权限体系
系统设计了三类用户角色，通过Spring Security实现权限控制：
- 学生：考勤签到、请假申请、记录查询
- 教师：班级管理、考勤统计、异常处理
- 管理员：用户管理、系统配置、数据备份
权限控制的核心在于JWT令牌的实现。这里分享一个实战技巧：在生成Token时除了常规的用户ID，我们还加入了角色标识和班级信息，这样前端可以根据payload直接决定菜单渲染逻辑，减少不必要的权限接口调用。
2.2 考勤业务实现
考勤模块包含三个关键技术点：
- 地理位置签到：
java复制// 考勤范围校验逻辑
public boolean checkLocation(Point studentPoint, Point classPoint) {
double distance = GeoUtils.calculateDistance(
studentPoint.getLat(),
studentPoint.getLng(),
classPoint.getLat(),
classPoint.getLng()
);
return distance <= ALLOWED_RADIUS; // 默认100米范围内有效
}
-
动态考勤码：
采用Redis存储时效性考勤码，教师端生成6位随机码（有效期15分钟），学生端提交时校验。这里有个避坑点：务必设置Redis的过期时间略长于前端显示的倒计时，避免网络延迟导致误判。 -
人脸识别集成：
通过OpenCV+Python实现简易人脸比对服务（需单独部署），SpringBoot通过HTTP调用。实测发现，建议将人脸特征码提前录入，现场只做1:1比对（不要做1:N识别），这样准确率和响应速度都能满足课堂场景。
3. 技术实现详解
3.1 后端SpringBoot搭建
使用Spring Initializr创建项目时，这几个依赖必不可少：
- Spring Web (提供REST接口)
- Spring Security (权限控制)
- MyBatis-Plus (数据库操作)
- Redis (缓存和会话管理)
- Lombok (简化代码)
数据库设计建议采用五张核心表：
- sys_user (用户基础信息)
- sys_role (角色定义)
- course (课程信息)
- attendance_record (考勤记录)
- leave_application (请假申请)
重要提示：一定要给attendance_record表添加复合索引（user_id + course_id + date），否则考勤统计查询会随着数据量增加明显变慢。
3.2 前端Vue开发
推荐使用Vue CLI创建项目，主要依赖：
- Element UI (界面组件)
- Axios (HTTP请求)
- Vue Router (路由管理)
- Vuex (状态管理)
前端工程结构建议按功能模块划分：
code复制src/
├── api/ # 接口定义
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── store/ # Vuex状态
├── utils/ # 工具函数
└── views/ # 页面组件
├── student/ # 学生模块
├── teacher/ # 教师模块
└── admin/ # 管理模块
4. 毕业论文撰写要点
技术类毕业论文常犯的错误是"重实现轻分析"，建议在以下章节加强：
- 需求分析：用UML用例图展示各角色功能
- 技术选型：对比SpringBoot与传统SSM框架的优劣
- 系统设计：包含E-R图、架构图、核心流程图
- 测试方案：用Postman展示接口测试用例
特别提醒：数据库设计章节一定要注明符合第几范式，我们系统满足第三范式（3NF），这在答辩时经常被问到。
5. 常见问题解决方案
5.1 跨域问题
开发环境需要在后端添加配置类：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600);
}
}
5.2 性能优化
- 使用MyBatis-Plus的分页插件避免全表查询
- 高频访问的考勤统计结果缓存到Redis
- 前端采用路由懒加载减少首屏加载时间
5.3 部署注意事项
- Nginx配置需要添加前端路由重定向：
nginx复制location / {
try_files $uri $uri/ /index.html;
}
- SpringBoot应用建议打包成JAR文件，用nohup启动：
bash复制nohup java -jar attendance-system.jar > log.out 2>&1 &
6. 扩展建议
如果想提升项目竞争力，可以考虑：
- 增加微信小程序端（使用Uniapp跨端方案）
- 集成钉钉/企业微信考勤对接
- 加入数据分析模块（使用ECharts展示出勤趋势）
- 实现自动化测试（JUnit+Mockito）
这个项目我在GitHub上维护了持续更新的版本，包含详细的部署文档和视频教程。实际开发中遇到最多的问题其实是MyBatis-Plus的Lambda表达式写法，特别是多表联查时的Wrapper构建，建议准备几个常用查询的代码片段随时复用。