目录
- [Java 核心与应用：人脸识别考勤系统](#Java 核心与应用：人脸识别考勤系统)
- 基于Flask和Vue的人脸识别考勤系统设计与实现
-
- 摘要
- [1 绪论](#1 绪论)
-
- [1.1 研究背景](#1.1 研究背景)
- [1.2 研究意义](#1.2 研究意义)
- [1.3 系统目标](#1.3 系统目标)
- [1.4 论文组织结构](#1.4 论文组织结构)
- 本章小结
- [2 相关技术介绍](#2 相关技术介绍)
-
- [2.1 Flask 框架](#2.1 Flask 框架)
- [2.2 ORM 与 Flask-SQLAlchemy](#2.2 ORM 与 Flask-SQLAlchemy)
- [2.3 SQLite 数据库](#2.3 SQLite 数据库)
- [2.4 JWT 身份认证](#2.4 JWT 身份认证)
- [2.5 OpenCV 与人脸识别](#2.5 OpenCV 与人脸识别)
- [2.6 LBPH 算法原理](#2.6 LBPH 算法原理)
- [2.7 Vue 3 与前端工程化](#2.7 Vue 3 与前端工程化)
- [2.8 技术栈总结](#2.8 技术栈总结)
- 本章小结
- [3 系统分析](#3 系统分析)
-
- [3.1 可行性分析](#3.1 可行性分析)
-
- [3.1.1 技术可行性](#3.1.1 技术可行性)
- [3.1.2 经济可行性](#3.1.2 经济可行性)
- [3.1.3 操作可行性](#3.1.3 操作可行性)
- [3.2 需求分析](#3.2 需求分析)
-
- [3.2.1 功能性需求](#3.2.1 功能性需求)
- [3.2.2 非功能性需求](#3.2.2 非功能性需求)
- [3.3 用例分析](#3.3 用例分析)
-
- [3.3.1 系统总体用例图](#3.3.1 系统总体用例图)
- [3.3.2 人脸识别考勤用例图](#3.3.2 人脸识别考勤用例图)
- 本章小结
- [4 系统设计](#4 系统设计)
-
- [4.1 系统架构设计](#4.1 系统架构设计)
-
- [4.1.1 系统架构图](#4.1.1 系统架构图)
- [4.1.2 登录鉴权交互流程](#4.1.2 登录鉴权交互流程)
- [4.2 功能模块设计](#4.2 功能模块设计)
- [4.3 数据库设计](#4.3 数据库设计)
-
- [4.3.1 E-R 图设计](#4.3.1 E-R 图设计)
- [4.3.2 数据表结构设计](#4.3.2 数据表结构设计)
- [4.4 接口设计](#4.4 接口设计)
- [4.5 人脸识别模块设计](#4.5 人脸识别模块设计)
- [4.6 安全设计](#4.6 安全设计)
- 本章小结
- [5 系统实现](#5 系统实现)
-
- [5.1 后端实现](#5.1 后端实现)
- [5.2 前端实现](#5.2 前端实现)
-
- [5.2.1 登录页面实现](#5.2.1 登录页面实现)
- [5.2.2 首页仪表盘实现](#5.2.2 首页仪表盘实现)
- [5.2.3 考勤打卡页面实现](#5.2.3 考勤打卡页面实现)
- [5.2.4 个人信息页面实现](#5.2.4 个人信息页面实现)
- [5.2.5 考勤记录页面实现](#5.2.5 考勤记录页面实现)
- [5.3 后台管理页面实现](#5.3 后台管理页面实现)
-
- [5.3.1 用户管理页面](#5.3.1 用户管理页面)
- [5.3.2 考勤管理页面](#5.3.2 考勤管理页面)
- [5.3.3 系统管理页面](#5.3.3 系统管理页面)
- [5.4 页面交互与体验说明](#5.4 页面交互与体验说明)
- 本章小结
- [6 系统测试](#6 系统测试)
-
- [6.1 测试环境](#6.1 测试环境)
- [6.2 测试方法](#6.2 测试方法)
- [6.3 典型测试用例](#6.3 典型测试用例)
- [6.4 人脸识别性能测试](#6.4 人脸识别性能测试)
- [6.5 测试结果分析](#6.5 测试结果分析)
- 本章小结
- [7 总结与展望](#7 总结与展望)
-
- [7.1 总结](#7.1 总结)
- [7.2 展望](#7.2 展望)
- 参考文献
- 致谢
- 致谢
Java 核心与应用：人脸识别考勤系统
系统演示视频 ：点击查看B站视频
项目获取链接：项目获取
基于Flask和Vue的人脸识别考勤系统设计与实现
摘要
随着企业信息化建设的深入推进以及后疫情时代对非接触式交互的需求增长，传统考勤方式（如指纹打卡、刷卡打卡）在便捷性、安全性和卫生方面存在明显不足。为解决上述问题，本文设计并实现了一套基于 Flask 与 Vue 3 的人脸识别考勤系统。
系统采用前后端分离的 B/S 架构。后端以 Flask 为核心框架，使用 Flask-SQLAlchemy 进行数据持久化，采用 SQLite 数据库存储业务数据；使用 Flask-JWT-Extended 实现基于 JWT 的身份认证与权限控制；核心人脸识别功能基于 OpenCV 库，采用 LBPH（局部二值模式直方图）算法实现人脸特征提取与比对。前端采用 Vue 3 框架，使用 Element Plus 构建用户界面，借助 Vue Router 实现路由管理，Pinia 完成状态管理，Axios 完成接口请求。
系统实现了用户登录注册、人脸注册与识别、人脸登录、考勤打卡（签到/签退）、考勤记录查询与统计、用户管理、考勤管理、系统配置、数据库备份与恢复、系统监控等核心功能。经测试，系统功能完整、运行稳定，可为企业考勤管理提供一体化的信息化支撑。
关键词：人脸识别；考勤系统；Flask；Vue 3；LBPH算法；OpenCV；JWT；前后端分离
1 绪论
1.1 研究背景
考勤管理是企业人力资源管理的重要组成部分，传统考勤方式主要包括纸质签到、磁卡打卡、指纹识别等。然而这些方式存在诸多问题：纸质签到容易造假且统计困难，磁卡打卡存在代打卡现象，指纹识别需要接触设备在卫生方面存在隐患。尤其在后疫情时代，非接触式考勤需求日益增长，传统考勤方式已难以满足企业对便捷性、安全性和卫生性的综合要求。
人脸识别技术作为生物特征识别技术的重要分支，具有非接触、难伪造、使用便捷等优点。随着计算机视觉技术的快速发展，人脸识别技术已经在安防、金融、交通等领域得到广泛应用。将人脸识别技术应用于考勤管理，可以有效解决传统考勤方式的痛点，提升考勤管理的效率和准确性，同时避免设备接触带来的卫生问题。
此外，随着 Web 技术的发展，基于浏览器的应用具有跨平台、易部署、易维护等优势。采用前后端分离架构可以使系统具有更好的可扩展性和可维护性，同时也便于后续功能的迭代升级。因此建设一套基于 Web 的人脸识别考勤系统能够显著提升企业考勤管理效率与员工体验。
1.2 研究意义
本课题一方面验证前后端分离架构在"人脸识别---考勤管理"业务体系中的可行性，为同类系统设计提供参考；另一方面通过将人脸识别技术与 Web 应用相结合，实现非接触式考勤管理，从而提升企业考勤管理效率、降低管理成本、改善员工体验，并有效防止考勤作弊现象。
1.3 系统目标
系统在功能上需要覆盖用户认证（账号密码登录和人脸识别登录）、人脸注册与管理、考勤打卡（通过人脸识别进行签到签退）、考勤记录查询与统计、后台用户管理、考勤记录管理、系统配置（考勤规则设置）、数据库备份与恢复以及系统运行状态监控等核心业务；在性能上需要能够支撑典型办公场景的并发访问，人脸识别响应时间控制在合理范围内，并保证系统稳定运行。
1.4 论文组织结构
本文共分为 7 个章节，依次为绪论、相关技术介绍、系统分析、系统设计（含数据库表结构与 E-R 图）、系统实现、系统测试以及总结与展望。
本章小结
本章介绍了课题研究背景、意义与系统目标，并给出了论文整体结构。通过对传统考勤方式痛点的分析，为后续技术选型与系统设计提供依据。
2 相关技术介绍
2.1 Flask 框架
Flask 是轻量级 Python Web 框架，特点是上手快、扩展性强、生态丰富。本文项目采用 Flask 构建 REST 风格 API，并通过 Blueprint（蓝图）进行模块化路由组织，将认证、考勤、管理、系统等功能分别封装为独立模块（auth、attendance、admin、system），便于维护与扩展。
2.2 ORM 与 Flask-SQLAlchemy
系统使用 Flask-SQLAlchemy 作为 ORM 层，利用 SQLAlchemy 的模型映射能力将数据库表结构映射为 Python 类（如 User、Attendance、SystemConfig、SystemLog 等），简化 CRUD 操作，同时保持对复杂查询与事务能力的支持。ORM 层还能自动处理 SQL 注入防护，提升系统安全性。
2.3 SQLite 数据库
SQLite 是一款轻量级的嵌入式关系型数据库，无需独立的数据库服务器进程，数据存储在单个文件中。SQLite 适用于中小型应用场景，具有零配置、跨平台、高可靠性等特点。本系统选择 SQLite 的原因在于部署简单无需额外安装数据库服务，适合中小企业考勤场景的数据量，同时便于数据备份和迁移。
2.4 JWT 身份认证
系统采用 JWT（JSON Web Token）实现无状态身份认证。用户登录成功后获得 Token，之后的接口请求在请求头携带 Token，后端通过 Flask-JWT-Extended 进行校验并识别当前用户身份，实现权限控制。JWT 的无状态特性使得系统更易于水平扩展，同时避免了服务端 Session 存储的开销。
2.5 OpenCV 与人脸识别
OpenCV（Open Source Computer Vision Library）是一个开源的计算机视觉库，提供了丰富的图像处理和计算机视觉算法。本系统使用 OpenCV 实现人脸检测和人脸识别功能，主要包括使用 Haar 级联分类器进行人脸检测以快速定位图像中的人脸区域，使用 LBPH 人脸识别器进行特征提取和比对，以及图像预处理功能包括灰度转换、直方图均衡化、尺寸调整等。
2.6 LBPH 算法原理
LBPH（Local Binary Patterns Histograms，局部二值模式直方图）是一种经典的人脸识别算法，具有计算简单、对光照变化鲁棒性强等优点。LBPH 算法的基本原理是对于图像中的每个像素将其与周围 8 个相邻像素进行比较，如果中心像素值大于相邻像素值则记为 1 否则记为 0，得到一个 8 位二进制数作为该像素的 LBP 值；然后将人脸图像划分为多个网格区域（如 8×8），对每个网格区域计算 LBP 值的直方图；最后将所有网格的直方图连接形成最终的特征向量，使用距离度量（如卡方距离）计算特征向量之间的相似度进行人脸匹配。
2.7 Vue 3 与前端工程化
前端使用 Vue 3 构建 SPA（单页应用），结合 Vite 进行开发构建。系统在前端侧通过 Vue Router 完成路由管理并区分普通用户页面与管理员页面，使用 Pinia 进行状态管理以管理用户登录状态和全局配置，采用 Element Plus 提供统一的 UI 组件能力，并通过 Axios 完成与后端 API 的数据交互。
2.8 技术栈总结
系统整体技术栈为：后端采用 Flask + Flask-SQLAlchemy 连接 SQLite 数据库，使用 Flask-JWT-Extended 实现 JWT 鉴权，使用 OpenCV + LBPH 算法实现人脸识别；前端采用 Vue 3，配合 Element Plus、Vue Router、Pinia 与 Axios 完成页面与交互。
本章小结
本章对系统所用的后端框架、数据库、认证方案、人脸识别算法以及前端工程化技术进行了详细介绍，为系统实现提供技术基础。
3 系统分析
3.1 可行性分析
3.1.1 技术可行性
Flask 与 Vue 3 均为成熟的主流技术栈，相关组件（ORM、JWT、UI 组件库）生态完善。OpenCV 是业界广泛使用的计算机视觉库，LBPH 算法实现成熟稳定，已在多个人脸识别项目中得到验证。系统采用模块化后端路由与分层服务架构（routes/services/models），技术实现路径清晰。
3.1.2 经济可行性
系统采用开源技术栈，无需额外许可费用；SQLite 数据库无需独立服务器，降低硬件成本；系统可部署在普通 PC 或低配置服务器上，整体成本可控，适合中小企业使用。
3.1.3 操作可行性
前端基于 Element Plus，交互一致性与可用性较好；系统界面简洁直观，用户无需专业培训即可使用；人脸识别操作简单，只需面对摄像头即可完成考勤，学习成本低。
3.2 需求分析
3.2.1 功能性需求
功能性需求主要分为两类：普通用户端需要支持账号密码登录和人脸识别登录、人脸注册（采集人脸图像并存储特征数据）、考勤打卡（通过人脸识别进行签到和签退）、查看个人考勤记录和统计信息以及个人信息管理；管理员端需要完成用户管理（添加、编辑、删除用户，查看人脸注册状态）、考勤管理（查看所有用户考勤记录，手动修改考勤状态，导出考勤数据）、系统配置（设置考勤规则如上下班时间、迟到阈值、人脸识别阈值等）、数据库管理（备份、恢复数据库）以及系统监控（查看系统运行状态、日志信息）。
3.2.2 非功能性需求
系统在非功能性方面需要满足安全性（密码加密存储、JWT 鉴权与前后端双重路由守卫）、可维护性（前后端分离并在后端以 Blueprint + Service 分层）、兼容性（支持主流浏览器且支持 WebRTC 摄像头调用），同时在性能上保证人脸识别响应时间控制在 2 秒以内、支持多用户并发访问，并在可靠性上保证考勤数据准确记录、系统稳定运行。
3.3 用例分析
3.3.1 系统总体用例图
普通用户
登录/注册
人脸注册
考勤打卡
查看考勤记录
个人信息管理
管理员
后台管理
用户管理
考勤管理
系统配置
数据库管理
系统监控
3.3.2 人脸识别考勤用例图
人脸识别考勤
用户
打开摄像头
捕获人脸图像
人脸检测
人脸识别比对
记录考勤信息
返回考勤结果
本章小结
本章完成了可行性与需求分析，并通过用例对关键业务流程进行说明，为系统设计与数据库建模确定边界与重点。
4 系统设计
4.1 系统架构设计
系统采用前后端分离的 B/S 架构，其中前端基于 Vue 3 与 Element Plus 负责页面展示与交互，后端通过 Flask 提供 REST API 处理认证、业务逻辑与数据访问，数据层使用 SQLite 存储业务数据，人脸特征数据以二进制形式存储在数据库中，LBPH 模型文件存储在文件系统中。
4.1.1 系统架构图
数据持久层
业务逻辑层
表示层
/api
Vue 3 前端
Element Plus
摄像头组件
Flask 后端
认证模块
考勤模块
人脸识别模块
系统管理模块
SQLite
文件存储
4.1.2 登录鉴权交互流程
系统支持两种登录方式：账号密码登录和人脸识别登录。在"登录获取 Token → 访问受保护资源"这一链路上采用前后端协同的鉴权策略：前端负责路由守卫与 Token 存储，后端负责 Token 校验与身份识别。
人脸识别服务 Flask后端 Vue前端 用户 人脸识别服务 Flask后端 Vue前端 用户 alt [账号密码登录] [人脸识别登录] 选择登录方式 POST /api/auth/login 返回JWT Token 调用摄像头捕获图像 POST /api/auth/face-login 人脸识别比对 返回识别结果 返回JWT Token 存储Token 携带Token访问业务接口 返回业务数据
4.2 功能模块设计
系统功能分为前台用户界面与后台管理界面两部分：前台提供首页仪表盘（显示用户基本信息、今日考勤状态、本月考勤统计）、考勤打卡（通过人脸识别进行签到和签退）、考勤记录（查看个人考勤历史记录）、个人信息（管理个人资料、注册/更新人脸数据）等用户功能；后台提供用户管理（用户的增删改查、人脸注册状态查看）、考勤管理（所有用户考勤记录查询、考勤状态修改、数据导出）、系统管理（考勤规则配置、数据库备份恢复、系统监控、日志查看）等管理功能。
4.3 数据库设计
数据库采用 SQLite，核心数据表由后端 models 目录下的模型类定义，主要包括用户表、考勤记录表、系统配置表和系统日志表。
4.3.1 E-R 图设计
has
generates
configures
USERS
int
id
PK
string
username
string
email
string
password_hash
string
name
string
department
string
position
string
employee_id
boolean
face_registered
binary
face_data
boolean
is_admin
datetime
created_at
ATTENDANCES
int
id
PK
int
user_id
FK
datetime
check_in_time
datetime
check_out_time
date
date
string
status
text
remarks
SYSTEM_LOGS
int
id
PK
string
level
string
module
text
message
int
user_id
FK
string
ip_address
datetime
created_at
SYSTEM_CONFIGS
int
id
PK
string
key
text
value
string
description
datetime
updated_at
SYSTEM
4.3.2 数据表结构设计
用户表（users）
| 字段名 | 类型 | 约束 | 说明 |
|---|---|---|---|
| id | INTEGER | PK, AUTO_INCREMENT | 用户ID |
| username | VARCHAR(64) | NOT NULL, UNIQUE | 用户名 |
| VARCHAR(120) | UNIQUE | 邮箱 | |
| password_hash | VARCHAR(128) | NOT NULL | 密码（加密存储） |
| name | VARCHAR(64) | NULL | 姓名 |
| department | VARCHAR(64) | NULL | 部门 |
| position | VARCHAR(64) | NULL | 职位 |
| employee_id | VARCHAR(32) | UNIQUE | 工号 |
| face_registered | BOOLEAN | DEFAULT FALSE | 是否已注册人脸 |
| face_encoding | TEXT | NULL | 人脸编码（JSON格式） |
| face_data | BLOB | NULL | 人脸特征数据（二进制） |
| is_admin | BOOLEAN | DEFAULT FALSE | 是否管理员 |
| created_at | DATETIME | DEFAULT CURRENT_TIMESTAMP | 创建时间 |
考勤记录表（attendances）
| 字段名 | 类型 | 约束 | 说明 |
|---|---|---|---|
| id | INTEGER | PK, AUTO_INCREMENT | 考勤记录ID |
| user_id | INTEGER | NOT NULL, FK(users.id) | 用户ID |
| check_in_time | DATETIME | NULL | 签到时间 |
| check_out_time | DATETIME | NULL | 签退时间 |
| date | DATE | NOT NULL | 考勤日期 |
| status | VARCHAR(20) | DEFAULT 'present' | 考勤状态（present/late/absent/leave/early_late） |
| remarks | TEXT | NULL | 备注 |
系统配置表（system_configs）
| 字段名 | 类型 | 约束 | 说明 |
|---|---|---|---|
| id | INTEGER | PK, AUTO_INCREMENT | 配置ID |
| key | VARCHAR(100) | NOT NULL, UNIQUE | 配置键名 |
| value | TEXT | NOT NULL | 配置值 |
| description | VARCHAR(255) | NULL | 配置说明 |
| updated_at | DATETIME | DEFAULT CURRENT_TIMESTAMP | 更新时间 |
系统日志表（system_logs）
| 字段名 | 类型 | 约束 | 说明 |
|---|---|---|---|
| id | INTEGER | PK, AUTO_INCREMENT | 日志ID |
| level | VARCHAR(20) | NOT NULL | 日志级别（INFO/WARNING/ERROR） |
| module | VARCHAR(50) | NOT NULL | 模块名称 |
| message | TEXT | NOT NULL | 日志内容 |
| user_id | INTEGER | FK(users.id), NULL | 关联用户ID |
| ip_address | VARCHAR(50) | NULL | IP地址 |
| created_at | DATETIME | DEFAULT CURRENT_TIMESTAMP | 创建时间 |
4.4 接口设计
系统采用 REST API 设计风格，接口按模块划分为认证、考勤、管理、系统等。主要接口包括：认证相关接口有 POST /api/auth/login（账号密码登录）、POST /api/auth/face-login（人脸识别登录）、POST /api/auth/register（用户注册）、GET /api/auth/info（获取当前用户信息）；考勤相关接口有 POST /api/attendance/check（人脸识别考勤打卡）、GET /api/attendance/status（获取今日考勤状态）、GET /api/attendance/records（获取考勤记录列表）；管理相关接口有 GET /api/admin/users（获取用户列表）、POST /api/admin/users（创建用户）、GET /api/admin/attendance（获取所有考勤记录）；系统相关接口有 GET /api/system/config（获取系统配置）、POST /api/system/backup（创建数据库备份）、GET /api/system/monitor（获取系统监控数据）。
4.5 人脸识别模块设计
人脸注册流程为：前端调用摄像头捕获用户面部图像，将图像转换为 Base64 编码发送到后端，后端使用 Haar 级联分类器检测人脸区域，验证人脸数量（必须为 1）和尺寸（最小 80×80），对人脸图像进行预处理（灰度转换、直方图均衡化、尺寸调整为 128×128），使用 LBPH 算法训练识别器并保存模型文件和人脸特征数据，最后更新用户的 face_registered 状态。
人脸识别流程为：前端调用摄像头捕获用户面部图像，将图像转换为 Base64 编码发送到后端，后端使用 Haar 级联分类器检测人脸区域，对人脸图像进行预处理（与注册时相同），遍历所有已注册人脸的用户加载其 LBPH 模型进行预测获取置信度，选择置信度最低（最相似）的用户，如果置信度低于阈值（70.0）则识别成功并返回识别结果。
系统中 LBPH 算法的主要参数配置为：radius=1（LBP 算子半径）、neighbors=8（采样点数量）、grid_x=8（网格 X 方向单元格数）、grid_y=8（网格 Y 方向单元格数）、threshold=80.0（训练阈值）、recognition_threshold=70.0（识别阈值，置信度低于此值认为匹配成功）。
为提高识别准确率，系统在 LBPH 模型不可用时采用多特征融合策略，结合均方误差（MSE）、模板匹配和直方图比较三种方法，综合置信度计算公式为 confidence = MSE_confidence × 0.3 + Template_confidence × 0.4 + Histogram_confidence × 0.3。
4.6 安全设计
系统采用 JWT Token 作为认证手段，用户密码通过 Werkzeug 的 generate_password_hash 加密存储（使用 PBKDF2 算法包含盐值），并在访问控制上由前端对需要登录的路由进行 token 校验、对管理员路由进行权限校验，同时后端通过 @jwt_required() 装饰器保护敏感接口并额外验证管理员接口的 is_admin 字段。人脸特征数据以二进制形式存储，敏感操作记录日志便于审计追溯。
本章小结
本章给出了系统总体架构、功能模块划分、数据库设计、接口设计和人脸识别模块设计，并说明了核心安全策略。通过结构化设计为后续模块实现与测试提供了清晰蓝图。
5 系统实现
本章重点介绍系统的页面实现与功能实现方式，并通过页面截图展示主要业务流程；后端部分仅作为接口与数据支撑，不展开具体代码细节。
5.1 后端实现
后端主要为前台与后台页面提供统一的业务接口与数据服务，包括登录鉴权、人脸识别、考勤管理、用户管理、系统配置等能力，前端通过统一的 API 调用完成数据加载与状态更新，从而保证"页面交互---业务处理---数据落库"的完整闭环。
后端项目采用分层架构，app.py 作为应用入口负责 Flask 应用工厂和扩展初始化，models 目录包含数据模型层定义用户、考勤、配置、日志等数据结构，routes 目录包含路由控制层按功能模块划分为 auth（认证）、attendance（考勤）、admin（管理）、system（系统）四个蓝图，services 目录包含业务服务层实现人脸识别、考勤处理、数据库管理、系统监控等核心业务逻辑。静态资源目录 static 下的 faces 子目录存储人脸图像、models 子目录存储 LBPH 模型文件、debug 子目录存储调试图像。
5.2 前端实现
前端采用 Vue 3 + Element Plus 实现页面布局与交互体验，整体分为普通用户界面与管理员界面；页面在加载时根据路由进入对应模块，必要时进行登录校验，随后通过接口获取数据并渲染。
前端项目结构中 api 目录封装了与后端交互的接口调用，router 目录定义了路由配置与守卫逻辑，stores 目录使用 Pinia 管理用户登录状态，utils 目录包含摄像头控制和日期处理等工具函数，views 目录包含所有页面组件分为普通用户页面（Login、Dashboard、Attendance、Profile）和管理员页面（admin 子目录下的 UserManagement、AttendanceManagement、SystemManagement）。
5.2.1 登录页面实现
登录页面支持两种登录方式：账号密码登录和人脸识别登录。账号密码登录时用户输入用户名和密码点击登录按钮提交表单，后端验证成功后返回 JWT Token；人脸识别登录时用户点击人脸登录按钮，系统调用摄像头捕获人脸图像，将图像发送到后端进行识别，识别成功后返回 JWT Token。登录页面采用居中卡片式布局，包含系统 Logo、登录表单和登录方式切换按钮，界面简洁直观。
5.2.2 首页仪表盘实现
首页仪表盘展示用户的基本信息和考勤概况，包括用户信息卡片（显示姓名、部门、职位、工号）、今日考勤状态（显示签到时间、签退时间、考勤状态）、本月考勤统计（显示出勤天数、迟到次数、早退次数、缺勤次数）以及快捷操作入口（考勤打卡、查看记录、个人信息）。仪表盘页面帮助用户快速了解自己的考勤情况并提供便捷的功能入口。
5.2.3 考勤打卡页面实现
考勤打卡页面是系统的核心功能页面，用户通过人脸识别完成签到和签退操作。页面布局左侧为摄像头预览区域实时显示摄像头画面，右侧为考勤信息区域显示当前时间和今日考勤状态，底部为操作按钮包括签到和签退按钮。操作流程为用户进入页面后系统自动请求摄像头权限，摄像头画面实时显示在预览区域，用户点击签到/签退按钮后系统捕获当前画面并发送到后端，后端进行人脸识别验证，验证成功后记录考勤信息，前端显示打卡结果。
5.2.4 个人信息页面实现
个人信息页面用于管理用户的个人资料和人脸数据，包括基本信息展示（用户名、姓名、邮箱、部门、职位、工号）、人脸注册状态显示、人脸注册/更新功能（调用摄像头采集人脸图像并注册）以及密码修改功能。人脸注册流程为用户点击"注册人脸"按钮后系统弹出摄像头对话框，用户调整面部位置确保人脸在画面中央，点击"拍照"按钮捕获图像，系统将图像发送到后端进行处理，注册成功后更新页面状态。
5.2.5 考勤记录页面实现
考勤记录页面展示用户的历史考勤数据，支持日期范围筛选（选择查询的起止日期）、考勤状态筛选（按正常、迟到、早退、缺勤等状态筛选）、列表展示（以表格形式展示考勤记录，列包括日期、签到时间、签退时间、考勤状态、备注）以及分页功能（支持分页浏览大量数据）。
5.3 后台管理页面实现
5.3.1 用户管理页面
用户管理页面供管理员管理系统用户，以用户列表为主展示所有用户信息，支持按用户名、姓名、部门搜索，提供新增用户（创建新用户账号）、编辑用户（修改用户信息）、删除用户（删除用户账号）等操作，同时显示用户是否已注册人脸的状态。
5.3.2 考勤管理页面
考勤管理页面供管理员查看和管理所有用户的考勤记录，支持全员考勤查询（查看所有用户的考勤记录）、多条件筛选（按用户、日期、状态筛选）、考勤修改（手动修改考勤状态如补签、销假）以及数据导出（导出考勤数据为 Excel 或 CSV 格式）。
5.3.3 系统管理页面
系统管理页面供管理员进行系统配置和维护，包括考勤规则配置（上班时间设置、下班时间设置、迟到阈值设置、人脸识别阈值设置）、数据库管理（手动备份数据库、查看备份列表、从备份恢复数据库、删除备份文件）、系统监控（CPU 使用率、内存使用率、磁盘使用率、系统运行时间、数据库统计信息）以及日志管理（查看系统日志、按级别和模块筛选）。
5.4 页面交互与体验说明
为保证使用体验，系统在前端侧保持统一的视觉风格与交互反馈：基于 Element Plus 组件库保持界面一致性，关键操作给出明确的成功/失败提示，数据加载时显示 loading 状态，输入表单进行前端验证减少无效请求，未登录用户自动跳转到登录页，非管理员用户无法访问后台管理页面，页面的数据加载与错误提示尽量保持一致以减少用户学习成本并提升可用性。
本章小结
本章围绕前台用户界面与后台管理界面，说明了系统主要功能的实现方式与典型业务流程，从而直观体现系统的可用性与完整性。
6 系统测试
6.1 测试环境
测试环境为 Windows 系统，后端采用 Python 3.7+ 运行 Flask 2.2.3+ 和 OpenCV 4.7.0+，前端采用 Node.js 16+ 运行 Vue 3 + Vite，数据库使用 SQLite 3，浏览器使用 Chrome/Edge（支持 WebRTC），硬件为带摄像头的 PC。
6.2 测试方法
采用黑盒测试为主，覆盖核心业务流程：用户认证、人脸注册与识别、考勤打卡、后台管理等功能模块。测试类型包括功能测试（验证各功能模块是否按预期工作）、边界测试（测试边界条件和异常情况）、安全测试（验证权限控制和数据安全）以及兼容性测试（测试不同浏览器的兼容性）。
6.3 典型测试用例
| 用例编号 | 模块 | 操作步骤 | 期望结果 |
|---|---|---|---|
| TC-01 | 账号密码登录 | 输入正确的用户名和密码，点击登录 | 登录成功，跳转到首页，返回 JWT Token |
| TC-02 | 账号密码登录 | 输入正确用户名和错误密码，点击登录 | 登录失败，显示错误提示 |
| TC-03 | 人脸识别登录 | 已注册人脸的用户进行人脸登录 | 识别成功，登录成功 |
| TC-04 | 人脸识别登录 | 未注册人脸的用户进行人脸登录 | 识别失败，提示未找到匹配用户 |
| TC-05 | 人脸注册 | 正对摄像头拍照进行人脸注册 | 注册成功，人脸状态更新为已注册 |
| TC-06 | 人脸注册 | 拍摄无人脸的图像进行注册 | 注册失败，提示未检测到人脸 |
| TC-07 | 人脸注册 | 拍摄包含多个人脸的图像进行注册 | 注册失败，提示检测到多个人脸 |
| TC-08 | 考勤签到 | 在上班时间内进行人脸识别签到 | 签到成功，状态为正常 |
| TC-09 | 考勤签到 | 在上班时间后进行人脸识别签到 | 签到成功，状态为迟到 |
| TC-10 | 考勤签到 | 已签到后再次进行签到操作 | 提示今日已签到 |
| TC-11 | 权限控制 | 未登录状态下访问首页 | 自动跳转到登录页 |
| TC-12 | 权限控制 | 普通用户尝试访问管理员页面 | 跳转到首页，无法访问 |
| TC-13 | 数据库备份 | 管理员点击备份按钮 | 备份成功，生成备份文件 |
| TC-14 | 系统监控 | 管理员访问系统监控页面 | 正确显示 CPU、内存、磁盘使用率 |
6.4 人脸识别性能测试
人脸识别性能测试结果显示：单用户识别响应时间平均为 0.5-1.5 秒，正常光照条件下识别准确率约 95%，弱光照条件下识别准确率约 85%，单次人脸注册响应时间平均为 1-2 秒，5 用户同时识别时平均响应时间为 2-3 秒/用户。
6.5 测试结果分析
经测试，系统各模块在典型业务流程下运行稳定，接口返回结构统一；前端路由鉴权与后端 JWT 鉴权均能有效阻止未授权访问。
从功能测试结果看，用户认证功能正常支持账号密码和人脸识别两种登录方式，人脸注册功能正常能够正确检测和处理各种异常情况，考勤打卡功能正常能够正确判定考勤状态，后台管理功能正常且权限控制有效。
从性能测试结果看，人脸识别响应时间在可接受范围内，在正常光照条件下识别准确率较高，系统能够支持小规模并发访问。
需要注意的是，弱光照条件下识别准确率有所下降可考虑增加图像增强处理，LBPH 算法对表情变化敏感可考虑引入深度学习模型提升准确率，当前系统适合中小企业使用大规模部署需要优化数据库和识别算法。
本章小结
本章通过典型用例对系统关键流程进行了验证，结果表明功能闭环可用且权限控制有效；同时指出了系统在光照适应性和大规模部署方面的改进方向。
7 总结与展望
7.1 总结
本文围绕企业考勤管理需求，基于 Flask 与 Vue 3 设计并实现了人脸识别考勤系统。系统采用前后端分离架构，通过 SQLite 存储核心业务数据，利用 JWT 实现身份认证与权限控制，核心人脸识别功能基于 OpenCV 的 LBPH 算法实现。
系统主要特点包括：通过人脸识别技术实现非接触式考勤避免传统考勤设备的卫生问题，人脸识别技术有效防止代打卡现象提高考勤数据的真实性，支持账号密码登录和人脸识别登录提供灵活的认证方式，提供用户管理、考勤管理、系统配置、数据备份等完整的后台管理功能，前后端分离架构便于功能扩展和系统升级。
技术实现亮点包括：采用成熟的 LBPH 算法进行人脸识别对光照变化具有较好的鲁棒性，结合 MSE、模板匹配、直方图比较等多种方法提高识别准确率，后端采用 Blueprint + Service 分层架构代码结构清晰，密码加密存储、JWT 鉴权、前后端双重权限控制保障系统安全。
系统局限性在于 LBPH 算法在复杂光照和表情变化下准确率有所下降，SQLite 数据库在大规模并发场景下性能受限，当前系统适合中小企业使用大规模部署需要进一步优化。
7.2 展望
后续可从以下方向进行优化和扩展：
在算法升级方面可引入深度学习模型（如 FaceNet、ArcFace）提高识别准确率，增加活体检测功能防止照片攻击，优化图像预处理算法提高弱光照条件下的识别效果。
在功能扩展方面可开发移动端应用支持手机打卡，增加考勤报表和数据分析功能，支持多种考勤规则（弹性工作制、排班制等），集成请假、加班等人事管理功能。
在架构优化方面可迁移到 MySQL/PostgreSQL 数据库提高并发处理能力，引入 Redis 缓存优化系统性能，支持分布式部署提高系统可用性，容器化部署（Docker/Kubernetes）便于运维管理。
在安全增强方面可增加操作审计日志，支持多因素认证，加强数据加密和隐私保护。
参考文献
1\] Flask Web Development: Developing Web Applications with Python. Miguel Grinberg. O'Reilly Media, 2018. \[2\] Vue.js 3 设计与实现. 霍春阳. 人民邮电出版社, 2022. \[3\] OpenCV 4 计算机视觉项目实战. David Millán Escrivá. 人民邮电出版社, 2020. \[4\] Ahonen T, Hadid A, Pietikainen M. Face description with local binary patterns: Application to face recognition\[J\]. IEEE transactions on pattern analysis and machine intelligence, 2006, 28(12): 2037-2041. \[5\] 人脸识别原理与实战. 王晓华. 机械工业出版社, 2019. \[6\] Flask-JWT-Extended Documentation. https://flask-jwt-extended.readthedocs.io/ \[7\] Element Plus Documentation. https://element-plus.org/ \[8\] OpenCV Documentation. https://docs.opencv.org/ *** ** * ** *** ### 致谢 在本论文的撰写过程中，感谢指导老师的悉心指导和帮助，感谢同学们的支持与鼓励。同时感谢开源社区提供的优秀技术框架和工具，使得本系统的开发得以顺利完成。 honen T, Hadid A, Pietikainen M. Face description with local binary patterns: Application to face recognition\[J\]. IEEE transactions on pattern analysis and machine intelligence, 2006, 28(12): 2037-2041. \[5\] 人脸识别原理与实战. 王晓华. 机械工业出版社, 2019. \[6\] Flask-JWT-Extended Documentation. https://flask-jwt-extended.readthedocs.io/ \[7\] Element Plus Documentation. https://element-plus.org/ \[8\] OpenCV Documentation. https://docs.opencv.org/ *** ** * ** *** ### 致谢 在本论文的撰写过程中，感谢指导老师的悉心指导和帮助，感谢同学们的支持与鼓励。同时感谢开源社区提供的优秀技术框架和工具，使得本系统的开发得以顺利完成。