从零搭建智能打卡系统（一）：项目概述与技术选型
最近在准备一个Web程序设计课程设计，我和几个同学决定做一个实用的企业考勤管理系统。说实话，一开始我们也没想到这个项目会这么复杂，从简单的打卡功能到人脸识别、数据可视化，一路踩坑无数，但也学到了很多。
今天开始，我想用这个系列文章记录我们开发"智能打卡系统"的全过程，希望能给正在学习Java Web和Vue.js的朋友们一些参考。
一、项目背景与需求分析
1.1 为什么选择考勤系统？
说实话，选择这个项目有几个原因：
首先，考勤系统是企业管理的刚需，有实际应用场景。我们不想做一个"玩具项目"，而是希望做出能真正解决实际问题的系统。
其次，这个项目能覆盖Web开发的多个核心知识点：
用户认证与权限管理
前后端分离架构
数据库设计与优化
第三方API集成（人脸识别）
数据可视化展示
最后，我们想挑战一下自己。传统的考勤系统太简单，我们想加入一些"智能"元素，比如人脸识别打卡、智能统计分析等。
1.2 核心功能规划
经过讨论，我们确定了以下几个核心模块：
用户管理模块
用户注册登录（含邮箱验证码）
角色权限管理（管理员、部门经理、普通员工）
部门组织架构
人脸照片上传
智能打卡模块
基础打卡功能（签到/签退）
人脸识别打卡
弹性工作制支持（08:00-10:00签到窗口）
迟到早退自动判定
考勤统计模块
月度考勤统计
工作时长计算
加班时长自动计算
数据可视化图表
请假管理模块
请假申请（事假、病假、年假）
部门经理审批流程
请假记录查询
补卡申请模块
签到/签退补卡申请
补卡审批流程
补卡记录管理
二、技术栈选型
2.1 后端技术选型
选择技术栈时，我们考虑了几个因素：学习成本、社区支持、项目需求。
Spring Boot 4.0
为什么选择Spring Boot？
快速开发，减少配置
丰富的生态和文档
与Java 17完美兼容
内置Tomcat，部署简单
// 项目主启动类示例
@SpringBootApplication
public class BackendApplication {
public static void main(String[] args) {
SpringApplication.run(BackendApplication.class, args);
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
}
数据库：MySQL 8.0
选择MySQL的原因：
稳定可靠，社区活跃
支持JSON类型，适合存储人脸照片URL
与Spring Data JPA集成简单
数据持久化：Spring Data JPA
使用JPA而不是MyBatis：
减少SQL编写，提高开发效率
自动生成基础CRUD操作
支持复杂查询方法命名
// 用户仓库示例
public interface UserRepository extends JpaRepository<User, Long> {
Optional<User> findByUsername(String username);
boolean existsByUsername(String username);
boolean existsByEmail(String email);
}
安全认证：JWT + BCrypt
JWT用于无状态认证
BCrypt加密用户密码
结合拦截器实现权限控制
2.2 前端技术选型
Vue.js 3.x
选择Vue.js而不是React：
学习曲线平缓，适合团队协作
中文文档完善
与Element Plus集成良好
Element Plus 2.x
为什么选择Element Plus？
组件丰富，满足企业级需求
设计规范，界面美观
社区活跃，问题解决快
构建工具：Vite
放弃Webpack选择Vite：
启动速度快，开发体验好
配置简单，开箱即用
支持热更新，开发效率高
图表库：ECharts
选择ECharts而不是其他图表库：
功能强大，图表类型丰富
中文文档完善
与Vue.js集成简单
2.3 第三方服务集成
人脸识别：阿里云人脸识别API
为什么选择阿里云？
识别准确率高
API文档清晰
有免费额度，适合学习使用
邮件服务：163邮箱SMTP
使用163邮箱发送验证码：
配置简单，免费使用
发送速度快
支持SSL加密
对象存储：阿里云OSS
存储人脸照片：
存储成本低
访问速度快
支持CDN加速
三、项目架构设计
3.1 前后端分离架构
我们采用经典的前后端分离架构：
┌─────────────┐ HTTP/HTTPS ┌─────────────┐
│ 前端应用 │◄────────────────►│ 后端API │
│ (Vue.js) │ JSON数据 │ (Spring Boot)│
└─────────────┘ └─────────────┘
│
▼
┌─────────────┐
│ 数据库 │
│ (MySQL) │
└─────────────┘
这种架构的好处：
前后端独立开发，互不干扰
前端可以使用任何技术栈
后端专注于业务逻辑和数据处理
便于后续扩展和维护
3.2 后端分层架构
后端采用经典的三层架构：
┌─────────────────────────────────────────┐
│ Controller层 │
│ 处理HTTP请求，参数验证，调用Service │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ Service层 │
│ 业务逻辑实现，事务管理 │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ Repository层 │
│ 数据访问，使用Spring Data JPA │
└─────────────────────────────────────────┘
3.3 数据库设计
数据库设计我们遵循几个原则：
表结构尽量简单，避免过度设计
使用外键约束保证数据完整性
为常用查询字段添加索引
合理使用数据类型，避免浪费空间
核心表设计：
users：用户表attendance_records：考勤记录表leave_records：请假记录表supplement_records：补卡申请表departments：部门表roles：角色表
四、开发环境搭建
4.1 后端开发环境
# 检查Java版本
java -version
# 输出：java version "17.0.1" 2021-10-19 LTS
# 检查Maven版本
mvn -v
# 输出：Apache Maven 3.8.4
# 创建Spring Boot项目
# 使用Spring Initializr或IDE创建
4.2 前端开发环境
# 检查Node.js版本
node -v
# 输出：v18.17.0
# 检查npm版本
npm -v
# 输出：9.6.7
# 创建Vue项目
npm create vue@latest
4.3 数据库环境
-- 创建数据库
CREATE DATABASE sailtrack
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
-- 创建用户并授权
CREATE USER 'sailtrack'@'%' IDENTIFIED BY 'sailtrackadmin12@';
GRANT ALL PRIVILEGES ON sailtrack.* TO 'sailtrack'@'%';
FLUSH PRIVILEGES;
五、遇到的第一个坑：远程数据库连接
说实话，项目一开始就遇到了问题。我们想使用远程数据库，方便团队协作，但配置起来并不顺利。
5.1 问题描述
在application.properties中配置了远程数据库：
spring.datasource.url=jdbc:mysql://server.wangjunsheng.top:3306/sailtrack
spring.datasource.username=sailtrack
spring.datasource.password=sailtrackadmin12@
启动项目时报错：
Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago.
5.2 问题分析
经过排查，发现几个问题：
远程服务器防火墙未开放3306端口
MySQL用户权限配置问题
时区设置不一致
5.3 解决方案
# 修改后的配置
spring.datasource.url=jdbc:mysql://server.wangjunsheng.top:3306/sailtrack?useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
spring.datasource.username=sailtrack
spring.datasource.password=sailtrackadmin12@
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
同时需要在服务器上执行：
-- 修改用户权限
ALTER USER 'sailtrack'@'%' IDENTIFIED WITH mysql_native_password BY 'sailtrackadmin12@';
FLUSH PRIVILEGES;
六、项目启动与验证
6.1 后端启动
# 进入后端目录
cd backend
# 清理并构建项目
mvn clean install
# 运行项目
mvn spring-boot:run
看到这个输出，说明后端启动成功：
Started BackendApplication in 3.456 seconds (process running for 3.789)
6.2 前端启动
# 进入前端目录
cd web
# 安装依赖
npm install
# 运行开发服务器
npm run dev
访问 http://localhost:3000 可以看到前端界面。
6.3 接口测试
使用curl测试基础接口：
# 测试健康检查接口
curl http://localhost:8080/api/test/health
# 预期返回
{"ok":true,"code":200,"message":"服务正常运行"}
七、总结与下一步计划
7.1 本章总结
这一章我们主要完成了：
项目需求分析：明确了系统的核心功能模块
技术栈选型：选择了合适的前后端技术
架构设计：设计了前后端分离的架构
环境搭建：配置了开发环境和远程数据库
问题解决：解决了远程数据库连接问题
7.2 踩坑经验
通过这个阶段，我学到了几个重要的经验：
第一，技术选型要综合考虑学习成本、项目需求和团队能力。不要盲目追求新技术，适合的才是最好的。
第二，数据库配置要仔细。时区、字符集、SSL设置等细节问题很容易被忽略，但会导致各种奇怪的问题。
第三，文档很重要。我们一开始没有详细记录配置过程，后来遇到问题又要重新排查，浪费了很多时间。
7.3 下一步计划
在下一篇文章中，我将详细介绍：
用户认证模块的实现：包括注册、登录、邮箱验证码
JWT认证的实现：如何生成和验证Token
全局异常处理：统一处理业务异常
CORS跨域配置：解决前后端分离的跨域问题
说实话，用户认证这部分我们踩了不少坑，特别是JWT的配置和验证码的实现。下一篇文章我会详细记录这些问题的解决过程。
技术如人生，每一个项目都是一次成长的机会。虽然起步阶段遇到了各种问题，但正是这些问题的解决过程，让我们对技术有了更深的理解。
如果你也在学习Java Web开发，或者正在做一个类似的项目，希望这篇文章能给你一些启发。有问题欢迎在评论区交流，我们一起学习进步！
默认评论
Halo系统提供的评论