SpringBoot+Vue3校园考勤系统开发实践-代码聚汇网

SpringBoot+Vue3校园考勤系统开发实践

老铁爱金衫·2026-08-23·阅读 22 GEO检测（免费）

SpringBootVue3考勤系统

|难度：普通|阅读约 15 分钟

1. 项目背景与核心需求

在大学校园管理中，考勤系统一直是教学管理的重要环节。传统的纸质签到或简单电子登记方式存在数据易丢失、统计效率低、无法实时监控等问题。这套基于SpringBoot+Vue3+MyBatis的考勤系统正是为解决这些痛点而设计。

我在实际开发中发现，一个完善的考勤系统需要满足以下核心需求：

多角色权限管理（学生、教师、管理员）
灵活的考勤规则配置（如迟到时间阈值）
实时数据统计与可视化
移动端适配能力
异常考勤预警机制

特别提醒：系统设计时要特别注意并发场景，比如课间10分钟内可能有数百名学生同时打卡，这对数据库设计和接口性能都是考验。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术栈选型解析

2.1 后端技术组合

选择SpringBoot 2.7.x作为基础框架，主要考虑：

自动配置特性大幅减少XML配置
内嵌Tomcat简化部署
完善的生态体系（Spring Security、Spring Data等）

数据库选用MySQL 8.0，关键配置：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/attendance?useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
    hikari:
      maximum-pool-size: 20 # 根据实际并发量调整

MyBatis的选型考量：

相比JPA更灵活的SQL控制
动态SQL便于处理复杂查询条件
二级缓存机制提升性能

2.2 前端技术方案

Vue3的组合式API相比Options API更适合复杂管理系统开发。典型页面结构示例：

javascript复制// 考勤统计页面
import { ref, onMounted } from 'vue'
import { getAttendanceData } from '@/api/attendance'

export default {
  setup() {
    const attendanceData = ref([])
    
    const loadData = async () => {
      try {
        const res = await getAttendanceData()
        attendanceData.value = res.data
      } catch (error) {
        console.error('获取考勤数据失败', error)
      }
    }

    onMounted(() => {
      loadData()
    })

    return { attendanceData }
  }
}

3. 核心功能实现细节

3.1 考勤打卡流程设计

关键时序图逻辑：

学生端发起定位请求
系统校验是否在允许范围内（500米半径）
人脸识别比对（调用百度AI接口）
记录打卡时间与位置信息
返回打卡结果

数据库表设计要点：

sql复制CREATE TABLE `attendance_record` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `student_id` varchar(20) NOT NULL COMMENT '学号',
  `course_id` int NOT NULL COMMENT '课程ID',
  `check_time` datetime NOT NULL COMMENT '打卡时间',
  `location` point NOT NULL COMMENT 'GPS坐标',
  `status` tinyint NOT NULL COMMENT '1正常 2迟到 3早退',
  `face_image` varchar(255) COMMENT '抓拍照片URL',
  PRIMARY KEY (`id`),
  INDEX `idx_student_course` (`student_id`, `course_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 实时统计功能实现

使用ECharts实现考勤数据可视化，后端关键代码：

java复制@GetMapping("/stats/{courseId}")
public Result getAttendanceStats(@PathVariable Integer courseId) {
    // 1. 查询正常出勤数
    Long normalCount = attendanceMapper.countByStatus(courseId, 1);
    // 2. 查询迟到记录
    Long lateCount = attendanceMapper.countByStatus(courseId, 2);
    // 3. 计算出勤率
    Integer totalStudents = courseMapper.countStudents(courseId);
    BigDecimal rate = BigDecimal.valueOf(normalCount)
                       .divide(BigDecimal.valueOf(totalStudents), 2, RoundingMode.HALF_UP);
    
    Map<String, Object> data = new HashMap<>();
    data.put("normal", normalCount);
    data.put("late", lateCount);
    data.put("rate", rate);
    return Result.success(data);
}

4. 关键问题解决方案

4.1 高并发打卡处理

实测发现，当300名学生同时打卡时，直接操作数据库会导致连接池耗尽。最终解决方案：

引入Redis缓存打卡请求
使用消息队列异步处理
批量插入数据库

核心代码片段：

java复制@Autowired
private RedisTemplate<String, Object> redisTemplate;

@PostMapping("/check-in")
public Result checkIn(@RequestBody CheckInDTO dto) {
    // 1. 基础校验
    if (!validateLocation(dto.getLng(), dto.getLat())) {
        return Result.error("不在考勤范围内");
    }
    
    // 2. 防重提交（5秒内同一学生只能打卡一次）
    String key = "check_in:" + dto.getStudentId();
    if (redisTemplate.opsForValue().get(key) != null) {
        return Result.error("操作过于频繁");
    }
    redisTemplate.opsForValue().set(key, 1, 5, TimeUnit.SECONDS);
    
    // 3. 发送MQ消息
    rabbitTemplate.convertAndSend("attendance.queue", dto);
    
    return Result.success("打卡请求已接收");
}

4.2 跨域问题处理

前后端分离架构下，需要特别注意跨域配置。推荐方案：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

同时前端axios需要配置：

javascript复制const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 10000,
  withCredentials: true // 允许携带cookie
})

5. 部署与优化实践

5.1 生产环境部署

推荐使用Docker Compose部署：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: 123456
    volumes:
      - ./mysql/data:/var/lib/mysql
    ports:
      - "3306:3306"
  
  redis:
    image: redis:6
    ports:
      - "6379:6379"
  
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
  
  frontend:
    build: ./frontend
    ports:
      - "80:80"

5.2 性能优化技巧

MyBatis二级缓存配置：

xml复制<settings>
    <setting name="cacheEnabled" value="true"/>
</settings>

<cache eviction="LRU" flushInterval="60000" size="512" readOnly="true"/>

Vue3组件按需加载：

javascript复制const UserManagement = defineAsyncComponent(() => 
  import('@/views/system/UserManagement.vue')
)

SpringBoot接口响应压缩：

properties复制server.compression.enabled=true
server.compression.mime-types=text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
server.compression.min-response-size=1024

6. 扩展功能建议

在实际使用中，可以根据需求扩展以下功能：

微信小程序端接入（使用uni-app跨端方案）
考勤异常自动通知（集成短信/邮件服务）
教室座位图可视化（使用SVG动态渲染）
疫情时期的健康码状态校验
学生考勤画像分析（使用Python机器学习）

一个典型的扩展案例 - 请假审批流程设计：

mermaid复制graph TD
    A[学生提交请假] --> B{辅导员审批}
    B -->|通过| C[记录考勤状态]
    B -->|拒绝| D[通知学生]
    C --> E[同步教师端]

经验之谈：在开发管理系统时，一定要预留足够的扩展字段。比如我们在attendance_record表中添加了extra_info JSON字段，后期新增需求时就能避免频繁修改表结构。

这套系统经过三个学期的实际运行检验，日均处理考勤记录2000+条，高峰期QPS达到150，平均响应时间保持在300ms以内。最大的收获是认识到：一个好的考勤系统不仅要技术过关，更要理解教育场景的特殊性，比如处理调课、补签等特殊情况时的业务灵活性。