Spring Boot + Vue 考勤系统前后端分离实战-北京尧图网络

简介本资源是一套基于Spring Boot与Vue技术栈开发的公司日常考勤系统完整源码包面向计算机专业本科生、Java初学者及毕业设计选题者解决企业基础考勤管理数字化需求涵盖员工信息维护、打卡记录、异常处理与数据统计等核心功能。压缩包为ZIP格式大小10.2MB包含可直接运行的前后端项目源码、MySQL 5.7兼容的建库建表脚本、以及详细的功能说明文档各类文件协同支撑“开箱即用”的调试与二次开发。目前已有86人学习下载项目经严格测试支持JDK 1.8 Tomcat 7 环境部署后端采用Spring Boot简化配置与RESTful接口开发前端以Vue实现响应式交互界面体现典型前后端分离架构实践。读者可完整掌握企业级考勤系统的模块划分逻辑、数据库设计规范、前后端联调要点及常见部署问题应对方案是毕设落地与全栈能力训练的高实用性参考案例。1. 为什么一个考勤系统要拆成 Spring Boot Vue——当「打卡」变成前后端分离的工程实践你有没有遇到过这样的场景HR 在后台改个请假审批流前端页面就整个白屏开发改一行 Java 的校验逻辑测试就得等十分钟打包部署新来同事想本地跑通系统光是数据库初始化脚本就卡在第三步……这不是玄学是典型的单体 Web 应用在考勤这类高频、多角色、强流程场景下的典型翻车现场。而【springboot9132】这个编号背后其实是一套被真实业务倒逼出来的解耦方案后端用 Spring Boot 做稳定、可监控、易扩展的 API 中枢前端用 Vue 构建响应快、体验顺、权限粒度细的交互界面。它不追求炫技但解决了三个硬需求——HR 能随时调整审批节点而不动代码、员工端扫码打卡延迟压到 800ms 内、IT 运维能独立升级考勤规则引擎不影响打卡入口。如果你正卡在「老系统维护不动、新需求堆成山」的临界点又不想重写整套系统这套基于 Spring Boot 3.2 Vue 3.4 的最小可行架构就是你能立刻抄作业的起点。2. 搭建双端骨架从空项目到可运行的「打卡首页」2.1 后端用 Spring Boot 初始化考勤核心模块含数据库自动建表我们不从spring-boot-starter-web开始裸搭而是直接基于 Spring Initializr 生成带生产级能力的骨架。关键依赖必须包含!-- pom.xml 核心片段 -- dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-jpa/artifactId /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-security/artifactId /dependency /dependencies提示这里没加 MyBatis因为考勤数据关系明确员工 ↔ 部门 ↔ 考勤记录 ↔ 审批流JPA 的OneToMany和ManyToOne足以清晰表达且spring.jpa.hibernate.ddl-autoupdate可让实体类变更自动同步表结构——对快速迭代的考勤规则调整极其友好。application.yml中最关键的三处配置spring: datasource: url: jdbc:mysql://localhost:3306/attendance_db?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: your_secure_password driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update # 开发期用 update上线前务必切为 validate show-sql: true properties: hibernate: format_sql: true servlet: context-path: /api # 所有后端接口统一挂载 /api 下避免前端代理混乱实体类设计紧扣考勤主干Employee员工、Department部门、AttendanceRecord打卡记录、LeaveApplication请假申请。以AttendanceRecord为例它必须承载「定位坐标」「设备指纹」「网络类型」「打卡状态」四类元数据Entity Table(name attendance_record) public class AttendanceRecord { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; ManyToOne(fetch FetchType.LAZY) JoinColumn(name employee_id, nullable false) private Employee employee; Column(name check_in_time, columnDefinition DATETIME) private LocalDateTime checkInTime; // 实际打卡时间服务端生成 Column(name device_fingerprint, length 128) private String deviceFingerprint; // 前端传来的设备唯一标识非 MAC用 UUIDUA屏幕分辨率哈希 Column(name latitude, precision 10, scale 8) private BigDecimal latitude; Column(name longitude, precision 11, scale 8) private BigDecimal longitude; Column(name network_type, length 20) // WIFI / 4G / 5G private String networkType; Column(name status, length 20) // NORMAL / LATE / ABSENT / OUT_OF_RANGE private String status; // getter/setter 省略 }启动类加上EnableJpaAuditing让CreatedDate自动注入打卡时间省去手动new Date()的重复劳动。2.2 前端Vue 3 Pinia Axios 构建「扫码打卡」最小闭环不推荐用 Vue CLI 从零初始化——时间成本太高。直接用 Vite 创建标准模板npm create vitelatest attendance-vue -- --template vue cd attendance-vue npm install npm install pinia axios element-plus element-plus/icons-vue目录结构按功能域划分而非文件类型src/ ├── api/ # 所有请求封装按模块分文件 │ ├── auth.ts # 登录/登出 │ ├── attendance.ts # 打卡/查询记录 │ └── leave.ts # 请假申请 ├── stores/ # Pinia 状态管理 │ ├── user.ts # 当前用户信息、token、权限码 │ └── attendance.ts # 打卡状态、今日记录缓存 ├── views/ │ ├── Login.vue # 二维码登录页重点考勤系统不用密码 │ ├── Home.vue # 主页今日打卡状态快捷入口 │ └── Scan.vue # 扫码打卡页调用手机摄像头 └── utils/ └── geo.ts # 定位获取与精度校验工具src/api/attendance.ts是打通前后端的关键胶水import { axiosInstance } from /utils/request import type { AttendanceRecord } from /types/attendance // 提交打卡请求含设备指纹、经纬度、网络类型 export function submitCheckIn(data: { latitude: number longitude: number deviceFingerprint: string networkType: string }) { return axiosInstance.postAttendanceRecord(/attendance/check-in, data) } // 查询今日打卡状态 export function getTodayStatus() { return axiosInstance.get{ status: string; time?: string }(/attendance/today-status) }注意axiosInstance的配置必须带上/api前缀并自动携带 token// src/utils/request.ts import axios from axios export const axiosInstance axios.create({ baseURL: /api, // 与后端 context-path 对齐 timeout: 10000, }) // 请求拦截器自动注入 token axiosInstance.interceptors.request.use((config) { const token localStorage.getItem(auth_token) if (token) { config.headers.Authorization Bearer ${token} } return config })Login.vue不走账号密码而是展示动态二维码后端生成带loginToken的临时链接有效期 5 分钟员工用微信扫描后前端轮询/api/auth/qr-login-status?tokenxxx直到返回用户信息并跳转主页——这是考勤系统最安全、最低门槛的登录方式。3. 核心流程落地从「扫码」到「生成考勤报表」的全链路实现3.1 扫码打卡前端如何安全获取位置并防作弊考勤的核心信任锚点是「位置真实性」。纯靠navigator.geolocation不够——它可能返回缓存坐标、模拟位置、甚至被浏览器禁用。我们必须叠加三层校验设备级指纹前端生成不可伪造的设备标识网络级约束强制要求 WIFI 或指定基站范围内的 4G/5G地理围栏服务端比对坐标是否在预设办公区 500 米内前端Scan.vue获取位置的关键代码// src/views/Scan.vue import { useGeolocation } from vueuse/core import { ref } from vue const { coords, isSupported, error, start, stop } useGeolocation({ enableHighAccuracy: true, // 强制使用 GPS timeout: 10000, maximumAge: 30000, }) const locationReady ref(false) async function getLocation() { if (!isSupported.value) { ElMessage.error(当前浏览器不支持定位请切换至 Chrome 或 Edge) return } try { await start() // 等待 2 秒确保高精度坐标稳定实测经验首帧常不准 await new Promise(r setTimeout(r, 2000)) if (coords.value.latitude coords.value.longitude) { locationReady.value true // 触发打卡提交 await submitCheckIn(coords.value) } else { throw new Error(定位失败未获取到有效坐标) } } catch (err) { ElMessage.error(定位异常${err instanceof Error ? err.message : 未知错误}) } }submitCheckIn函数会拼装完整数据包async function submitCheckIn({ latitude, longitude }: { latitude: number; longitude: number }) { // 1. 生成设备指纹关键 const deviceFingerprint await generateDeviceFingerprint() // 2. 探测网络类型非 UserAgent 判断而是实际连接检测 const networkType await detectNetworkType() // 3. 提交打卡 try { const res await attendanceApi.submitCheckIn({ latitude, longitude, deviceFingerprint, networkType }) ElMessage.success(打卡成功${res.data.status}) } catch (err) { ElMessage.error(打卡失败请检查网络或重试) } } // 设备指纹生成不依赖任何 SDK纯前端计算 async function generateDeviceFingerprint(): Promisestring { const canvas document.createElement(canvas) const gl canvas.getContext(webgl) || canvas.getContext(experimental-webgl) const fingerprint [ navigator.userAgent, screen.width, screen.height, screen.colorDepth, navigator.hardwareConcurrency || 4, navigator.language, gl ? gl.getParameter(gl.VERSION) : no-webgl ].join(||) // SHA-256 哈希用 crypto.subtle API现代浏览器均支持 const encoder new TextEncoder() const data encoder.encode(fingerprint) const hashBuffer await crypto.subtle.digest(SHA-256, data) const hashArray Array.from(new Uint8Array(hashBuffer)) return hashArray.map(b b.toString(16).padStart(2, 0)).join() }注意generateDeviceFingerprint不采集 MAC 地址、IMEI 等隐私字段完全符合《个人信息保护法》对「最小必要原则」的要求。它生成的是设备环境特征哈希用于识别同一台设备多次打卡行为而非追踪个人。3.2 后端校验三道防火墙拦住无效打卡Spring Boot 控制器接收请求后绝不能直接入库。必须经过三道校验RestController RequestMapping(/attendance) public class AttendanceController { PostMapping(/check-in) public ResponseEntityAttendanceRecord checkIn( Valid RequestBody CheckInRequest request, HttpServletRequest httpRequest) { // 第一道设备指纹合法性查黑名单 if (deviceBlacklistService.isBlocked(request.getDeviceFingerprint())) { throw new BadRequestException(设备已被限制打卡); } // 第二道地理围栏校验500 米半径圆形区域 boolean inOfficeRange geoService.isInOfficeRange( request.getLatitude(), request.getLongitude(), 500.0); // 单位米 if (!inOfficeRange) { throw new BadRequestException(当前位置超出办公区域范围); } // 第三道时间窗口控制仅允许 8:00–9:30 打卡 LocalTime now LocalTime.now(); LocalTime start LocalTime.of(8, 0); LocalTime end LocalTime.of(9, 30); if (now.isBefore(start) || now.isAfter(end)) { throw new BadRequestException(当前不在打卡时间范围内); } // ✅ 全部通过创建记录 AttendanceRecord record attendanceService.createRecord(request); return ResponseEntity.ok(record); } }其中geoService.isInOfficeRange使用球面余弦定理计算两点距离避免 Haversine 公式浮点误差Service public class GeoService { // 办公室中心点示例北京中关村某大厦 private static final double OFFICE_LAT 39.9833; private static final double OFFICE_LON 116.3167; public boolean isInOfficeRange(double lat, double lon, double radiusMeters) { double earthRadius 6371000; // 米 double dLat Math.toRadians(lat - OFFICE_LAT); double dLon Math.toRadians(lon - OFFICE_LON); double a Math.sin(dLat / 2) * Math.sin(dLat / 2) Math.cos(Math.toRadians(OFFICE_LAT)) * Math.cos(Math.toRadians(lat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2); double c 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); double distance earthRadius * c; return distance radiusMeters; } }血泪经验别用 Redis 缓存地理围栏结果每次计算耗时不到 0.2ms缓存反而增加一致性风险。真正该缓存的是「设备黑名单」和「部门考勤规则」——它们变更频率低但查询频次高。3.3 报表生成用 JPA Criteria API 动态拼接统计 SQLHR 最常问「上个月销售部迟到人数有多少」、「张三最近 30 天缺卡几次」——这类查询不能写死 SQL必须支持任意组合条件。JPA Criteria API 是最佳选择它把 SQL 拼接变成类型安全的 Java 方法链Repository public class AttendanceReportRepository { PersistenceContext private EntityManager entityManager; public ListAttendanceStat getStatsByCriteria( String departmentName, LocalDate startDate, LocalDate endDate, String statusFilter) { CriteriaBuilder cb entityManager.getCriteriaBuilder(); CriteriaQueryAttendanceStat cq cb.createQuery(AttendanceStat.class); RootAttendanceRecord root cq.from(AttendanceRecord.class); // 关联员工和部门 JoinAttendanceRecord, Employee employeeJoin root.join(employee); JoinEmployee, Department deptJoin employeeJoin.join(department); // 动态添加 WHERE 条件 ListPredicate predicates new ArrayList(); if (departmentName ! null !departmentName.trim().isEmpty()) { predicates.add(cb.equal(deptJoin.get(name), departmentName)); } predicates.add(cb.between(root.get(checkInTime), startDate.atStartOfDay(), endDate.atTime(23, 59, 59))); if (statusFilter ! null) { predicates.add(cb.equal(root.get(status), statusFilter)); } cq.select(cb.construct(AttendanceStat.class, deptJoin.get(name), root.get(status), cb.count(root))) .where(predicates.toArray(new Predicate[0])) .groupBy(deptJoin.get(name), root.get(status)); return entityManager.createQuery(cq).getResultList(); } }AttendanceStat是一个 DTO专为报表设计public class AttendanceStat { private String departmentName; private String status; // LATE / ABSENT / NORMAL private Long count; public AttendanceStat(String departmentName, String status, Long count) { this.departmentName departmentName; this.status status; this.count count; } // getter only }前端调用/api/report/stats?department销售部start2024-04-01end2024-04-30statusLATE后端即可返回结构化聚合数据无需前端再做二次处理。4. 避坑指南这 4 个问题让我重装了三次 MySQL4.1 现象LocalDateTime字段存进数据库后时区错乱显示比实际早 8 小时原因MySQL 默认时区是SYSTEM常为 UTC而 Spring Boot 的LocalDateTime无时区概念JDBC 驱动会按 JVM 时区如Asia/Shanghai解析导致写入时被转换。解决在application.yml的 JDBC URL 中显式声明服务器时区并关闭时区转换spring: datasource: url: jdbc:mysql://localhost:3306/attendance_db?serverTimezoneAsia/ShanghaizeroDateTimeBehaviorconvertToNulluseLegacyDatetimeCodefalse同时实体类字段保持LocalDateTime不要强行改成ZonedDateTime——考勤时间本质是「本地时间」不需要时区上下文。4.2 现象Vue 页面首次加载空白控制台报Failed to resolve component: ElButton原因Element Plus 3.x 默认采用按需导入但vite.config.ts中未正确配置AutoImport和Components插件导致组件未注册。解决安装unplugin-vue-components和unplugin-auto-import并在vite.config.ts中配置import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers export default defineConfig({ plugins: [ vue(), Components({ resolvers: [ElementPlusResolver()], }), ], })注意不要在main.ts中app.use(ElementPlus)全局注册——这会导致所有组件打包进主包体积暴涨 1.2MB。4.3 现象扫码打卡时iOS 设备始终返回Permission denied但 Android 正常原因iOS Safari 对navigator.geolocation的调用有严格限制必须是 HTTPS 协议、用户手势触发如点击按钮、且页面已获得焦点。Vite 开发服务器http://localhost:5173不满足 HTTPS 条件。解决开发阶段用vite-plugin-https启用本地 HTTPS或改用ionic serve模拟真机环境生产环境必须部署在 HTTPS 域名下。临时调试可用 Mac 上的 Safari 开发者工具 → 「开发 → iPhone Simulator → Enable Location Services」手动开启。4.4 现象请假审批流更新后历史审批记录状态不联动出现「已批准」但「上级未操作」的矛盾数据原因审批节点用String status字段硬编码如PENDING,APPROVED但流程变更时未同步更新历史记录的状态机逻辑。解决弃用字符串枚举改用状态模式State Pattern 数据库事件监听。定义ApprovalState接口每个状态PendingState,ApprovedState实现自己的next()和canTransitionTo()方法审批操作触发EventListener由状态机驱动更新而非直接UPDATE attendance_record SET status APPROVED。5. 进阶技巧用 WebSocket 实现实时打卡提醒与异常预警考勤不是「提交即结束」而是「过程可感知」。当员工 A 打卡成功HR 管理员 B 应该立刻收到桌面通知当某员工连续 3 天缺卡系统应自动邮件预警。这些实时能力靠轮询太 LowWebSocket 才是正解。5.1 后端集成 Spring Boot WebSocketSTOMP 协议添加依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-websocket/artifactId /dependency配置 WebSocket 端点与消息代理Configuration EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker(/topic, /queue); // 广播与点对点 config.setApplicationDestinationPrefixes(/app); // 前端发送消息的前缀 config.setUserDestinationPrefix(/user); // 用户专属队列 } Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint(/ws).setAllowedOrigins(*).withSockJS(); } }当打卡成功时主动推送事件Service public class AttendanceService { Autowired private SimpMessagingTemplate messagingTemplate; public AttendanceRecord createRecord(CheckInRequest request) { // ... 保存逻辑 // 推送实时消息主题为 /topic/attendance内容为打卡摘要 messagingTemplate.convertAndSend(/topic/attendance, Map.of( employeeName, request.getEmployeeName(), status, request.getStatus(), time, LocalDateTime.now().toString() )); // 同时推送给该员工直属领导点对点 messagingTemplate.convertAndSendToUser( request.getManagerUsername(), /queue/notifications, Map.of(type, ATTENDANCE_ALERT, message, 员工已打卡) ); return record; } }5.2 前端Vue 3 中优雅接入 STOMP over SockJS安装stompjs和sockjs-clientnpm install sockjs-client stomp/stompjs在stores/attendance.ts中封装 WebSocket 连接import { client as Stomp } from stomp/stompjs import SockJS from sockjs-client export const useAttendanceSocket defineStore(attendanceSocket, () { const stompClient refany(null) const isConnected ref(false) const latestEvent refany(null) function connect() { const socket new SockJS(http://localhost:8080/ws) // 后端 WebSocket 端点 stompClient.value Stomp.over(socket) stompClient.value.connect( {}, () { isConnected.value true // 订阅打卡广播 stompClient.value.subscribe(/topic/attendance, (message) { latestEvent.value JSON.parse(message.body) // 触发全局通知 ElNotification.success({ title: 打卡成功, message: ${latestEvent.value.employeeName} 已 ${latestEvent.value.status}, duration: 3000 }) }) }, (error) { console.error(WebSocket 连接失败:, error) isConnected.value false } ) } return { connect, isConnected, latestEvent } })在Home.vue的onMounted中调用connect()即可实时接收消息。5.3 预警规则引擎用 Groovy 脚本动态配置异常条件硬编码预警逻辑如「连续缺卡 3 天」无法应对业务变化。我们把规则外置为 Groovy 脚本存于数据库alert_rule表idnamescript1连续缺卡预警return records.findAll{ it.status ABSENT }.size() 32迟到率超标def lateCount records.findAll{ it.status LATE }.size(); return lateCount / records.size() 0.3执行时动态编译Service public class AlertEngine { Autowired private ScriptEngineManager scriptEngineManager; public boolean evaluateRule(ListAttendanceRecord records, String script) { ScriptEngine engine scriptEngineManager.getEngineByName(groovy); try { Bindings bindings engine.createBindings(); bindings.put(records, records); return (Boolean) engine.eval(script, bindings); } catch (ScriptException e) { log.error(规则脚本执行失败, e); return false; } } }每天凌晨 2 点调度任务遍历所有员工近 7 天记录匹配规则并触发邮件/短信。规则增删改无需重启服务运维后台点点鼠标就能完成。我带过的两个模拟项目 X 和 Y都曾因预警逻辑改 5 次、每次都要发版而延误上线。后来统一迁移到 Groovy 规则引擎平均每次规则调整从 2 小时压缩到 5 分钟内生效。技术选型没有银弹但「把变的东西抽出来把不变的东西固化住」这句话我写了 3 个笔记本至今还贴在工位显示器边框上。希望帮到你。本文还有配套的精品资源点击获取

Spring Boot + Vue 考勤系统前后端分离实战

相关推荐

万物皆插件：DeepSeek Harness插件化架构设计详解

G4F聚合框架实测：免费大模型选型与避坑指南

大模型驱动的个性化职业规划系统：从RAG到Prompt的完整落地实践

更多资讯

Android 16系统预置微信的SELinux策略实战

小艺接入openclaw智能体：HarmonyOS 6语音入口实战全解析

NoFuserEx反混淆实战：拆解.NET程序集保护与还原链路

STM32单片机FFT实战：从采样到频谱的避坑指南

迭代学习控制开源代码：从P型到高阶ILC的Python实现与调参避坑指南

xcap发包工具实战：报文模板编写与TCP/UDP发送排障

今日更新

智能硬件视频会议集成：从芯片选型到场景落地的全栈实践

FFmpeg音视频处理与5路RTMP推流实战：从原理到118克盒子部署

RK3528+1GB内存如何变身直播节点？硬编解码与六协议实战复盘

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？