基于Vue和Spring Boot的智慧考勤系统开发实践

1. 项目背景与核心价值

校园考勤管理一直是教育信息化中的痛点。传统人工点名方式效率低下，纸质记录容易丢失，而市面上多数电子考勤系统要么依赖昂贵的硬件设备，要么存在识别率低、响应慢等问题。我们团队开发的这套智慧考勤系统，通过前端Vue框架实现流畅的交互体验，后端采用Spring Boot构建高可用服务，结合OpenCV实现毫秒级人脸识别，将教师从重复性劳动中解放出来。

这套系统最突出的特点是"三无"设计：无需专用设备（普通摄像头即可）、无感考勤（学生自然通过时自动记录）、无纸化统计（实时生成多维报表）。在某高校试点期间，单节课考勤时间从原来的5-8分钟缩短至10秒内完成，准确率达到99.2%，特别适合教学楼出入口、实验室、图书馆等需要快速核验身份的场所。

2. 技术架构解析

2.1 前端技术选型

采用Vue 3 + TypeScript + Element Plus组合，主要考虑三点：

1. 响应式特性完美适配多终端场景，教师端（PC）、学生端（Mobile）、管理端（大屏）共用同一套核心代码
2. Composition API更适合处理复杂的人脸采集状态逻辑
3. WebSocket实时推送考勤结果需要高性能前端框架

关键代码结构：

typescript复制// 人脸采集组件核心逻辑
const { stream, detected } = useFaceDetection()
onMounted(async () => {
  stream.value = await navigator.mediaDevices.getUserMedia({
    video: { width: 1280, facingMode: 'user' }
  })
})
watch(detected, (val) => {
  if(val) submitAttendance()
})

2.2 后端服务设计

Spring Boot采用分层架构：

• Controller层：处理HTTP/WebSocket请求
• Service层：业务逻辑（考勤规则、异常处理）
• Repository层：JPA操作MySQL
• Task层：定时生成报表

特别设计了双队列消峰策略：

1. Redis缓存即时人脸特征数据
2. Rabbi