这次介绍的项目编号是 068名称为“基于 SpringBoot Vue3 前后端分离的员工考勤管理系统”。它并不是一个 AI 工具也不是微服务中间件而是一套非常典型的 Java Web 后台管理工程后端使用 SpringBoot 提供 RESTful API前端使用 Vue3 和 Vite 构建页面两者通过 HTTP 接口联调。这类项目在国内课程设计和毕业设计中的出现频率非常高也是很多开发者刚接触“前后端分离”时最常上手的一类模板。这个项目值得花时间看主要有三个原因第一SpringBoot 和 Vue3 是目前国内 Java 后端与前端开发中占比很高的技术组合很多公司新项目的技术选型仍然围绕它们展开第二“员工考勤管理系统”这个业务足够有代表性涉及员工档案、考勤记录、请假申请、统计报表等通用管理模块逻辑清晰非常适合做前后端分离项目实战第三前后端分离项目真正的难点大多集中在部署和联调环节包括数据库初始化、JWT 权限校验、跨域请求、前端路由刷新 404、Nginx 托管静态文件等这套项目刚好能把所有坑暴露出来。本文会围绕这套项目展开先用核心能力速览交代整体结构再从环境准备、数据库初始化、后端启动、前端启动、接口联调、功能测试到 Nginx 部署逐步演示。最后补充资源占用观察、常见问题排查清单和最佳实践。如果你正在做 SpringBoot Vue3 相关题目的课设或毕设或者想找一套完整的前后端分离项目练手这篇文章可以直接作为部署参考。1. 项目定位与核心能力速览先给项目做一个快速定位。“员工考勤管理系统”这个名字决定了业务范围通常可以从四个核心模块去理解基础数据维护包括部门和员工档案考勤数据采集包括打卡、补卡或按日期登记考勤状态请假流程包括请假申请与审批统计分析包括考勤记录查询、月度统计和导出。具体模块数量需要看项目源码中的实际业务表设计但整体边界基本不会脱离这些内容。下表整理了这套系统需要关注的维度。部分参数以实际下载到的项目代码为准因为同一选题会存在不同的封装版本。维度说明项目类型前后端分离的员工考勤管理系统后端技术栈SpringBoot涉及 Web、Security/拦截器、MyBatis/MyBatis-Plus/JPA 等组件前端技术栈Vue3、Vite、Vue Router、Axios、状态管理、Element Plus页面风格后台管理系统侧边栏菜单 顶栏 表格表单布局数据库以 MySQL 为主是否使用 Redis 需要看项目里的实际配置鉴权方式JWT Token也可以是 Spring Security JWT 或简单拦截器方案部署方式后端打包为 jar前端构建成静态文件后由 Nginx 托管主要功能部门管理、员工档案、考勤打卡或记录登记、请假申请与审批、统计导出适合人群Java Web 学习者、毕业设计/课程设计学生、需要后台管理系统参考模板的开发者需要说明的是这种标题下不同作者提供的代码封装差别较大。有的项目用 MyBatis-Plus 做持久层有的用 JPA有的前端用 Element Plus有的用 Ant Design Vue鉴权有的走 Spring Security有的用拦截器。拿到代码后先花十分钟看一遍项目结构再动手部署不要照着别人的教程盲目执行命令。本文所有配置示例也会标注需要替换的路径、端口和工程名。从学习角度看这个项目最有价值的部分不是考勤算法本身而是前后端分离的工程组织方式。后端负责把业务数据暴露成 JSON 接口前端负责把接口数据渲染成页面两者通过 Token 维持用户登录状态。理解这套完整链路后再做商品管理、机房预约、会议室系统等类似选题基本只需要换业务表和页面。2. 适用场景与技术边界先说适合谁。第一类是正在准备毕业设计或课程设计的学生。考勤系统功能齐全、演示效果好容易讲清楚数据库设计和接口设计第二类是刚开始学习 SpringBoot 和 Vue3 的开发者可以通过项目源码看到后端接口、前端路由、状态管理、权限拦截是怎么组织起来的第三类是后续准备自己搭建中后台管理系统的开发者可以直接借用这套项目中的通用代码例如全局异常处理、统一返回结果、登录鉴权再替换成自己的业务模块。能解决的问题也很明确把传统 Excel 考勤记录转化为线上管理流程给员工提供统一入口使用浏览器即可完成打卡、请假提交和考勤状态查询给管理员提供数据统计视图减少人工统计工作。不适合的场景需要单独提醒。如果是工厂车间、外包团队、连锁门店这样存在多班次、跨区域、复杂排班考勤规则的场景不能直接用这种通用考勤系统。这类系统通常没有成熟的排班引擎、打卡设备对接、定位围栏能力硬套会导致数据不准确。如果要用于真实企业必须做大量二次开发或者改用更成熟的商业化考勤产品。使用边界还涉及合规问题。员工考勤信息与员工姓名、工号、部门、打卡时间等个人数据相关属于敏感信息。该系统的“演示环境、测试环境、课程设计环境”不应直接使用真实员工数据如果实际部署到学校或公司应确认使用目的已获得单位授权并且数据访问范围只对必要人员开放。公开二次开发时也要把默认账号密码、数据库连接信息全部改掉避免信息泄露。3. 本地部署先弄明白的三件事拿到项目源码后先不要急着双击启动。先把三件事确认清楚能少走很多弯路。3.1 后端环境JDK 与 MavenSpringBoot 项目对 JDK 版本比较敏感。如果是 SpringBoot 2.x通常使用 JDK 8如果是 SpringBoot 3.x必须使用 JDK 17 以上。很多同学失败的原因不是代码问题而是用 JDK 8 去跑 SpringBoot 3 项目编译阶段就报错。启动前要看项目中的pom.xml文件里java.version标签写的是什么版本。如果项目配置的是 JDK 8就安装 JDK 8如果项目配置的是 JDK 17就安装 JDK 17。建议同时安装多个 JDK 版本时在 IDEA 或命令行中明确指定当前项目使用的 JDK。也可以在 IDEA 的 “Project Structure” 中设置项目 SDK在 “Settings” 中设置 Maven 使用的 JDK 版本。Maven 方面主要关注Maven Home Path指向是否正常以及本地仓库是否配置好。国内网络状态下建议在settings.xml中配置阿里云镜像否则依赖下载时会很长。3.2 前端环境Node 与 npm前端项目如果使用 Vue3 Vite通常要求 Node.js 版本不能太低。Vite 5 以上版本官方建议使用 Node.js 18 或更高。可以在命令行执行node -v和npm -v确认版本如果版本太旧建议安装 Node.js 18 以上版本。npm 拉取依赖同样建议配置国内镜像npm config get registry npm config set registry https://registry.npmmirror.com这里需要说明镜像地址以你所在网络环境可用性为准配置后可以明显提升依赖安装速度。3.3 数据库脚本与字符集考勤系统通常需要新建数据库并导入项目提供的sql脚本。脚本一般放在项目根目录的sql目录、database目录或后端resources目录下的db文件夹中。用 Navicat 或命令行导入前需要新建一个空白数据库。数据库名称以项目中的 JDBC 配置为准常见名可能是attendance、employee_attendance但也可能不同请看application.yml中的连接地址修改。导入后必须核对三件事表是否创建成功是否有初始化管理员账号数据库用户是否正确。管理员账号通常写在 SQL 的数据插入语句中默认密码一般是123456、admin123之类但最终以项目文档说明为准。4. 后端 SpringBoot 环境准备与启动4.1 修改数据库连接配置后端项目核心配置文件是src/main/resources/application.yml或application.properties。需要修改的无非是数据库地址、用户名、密码。下面给出一份兼容程度较高的 YAML 示例具体字段名需要按项目实际调整server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/attendance_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 你的数据库密码 servlet: multipart: max-file-size: 20MB max-request-size: 20MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl注意attendance_db需要替换成实际新建的数据库名。如果项目使用的是application.properties则把同样的配置改成spring.datasource.url、spring.datasource.username、spring.datasource.password的平铺形式即可。登录相关的配置可能还会出现在application.yml中比如 JWT 密钥和过期时间类似于jwt: secret: your-jwt-secret-change-me expire: 86400000这类配置也要改成你自己的随机密钥不要保留项目默认明文。前端和后端联调时如果修改了 JWT 配置需要重启后端服务才生效。4.2 启动后端服务在 IDEA 中找到主启动类类名通常类似AttendanceApplication.java类上有SpringBootApplication注解。右键选择运行也可以使用 Maven 命令mvn clean package -DskipTests打包成功后在项目target目录下会生成一个 jar 包假设名称是attendance-server.jar用命令启动java -jar target/attendance-server.jar后端启动成功的标志是控制台出现类似 “Started Application in x.xxx seconds” 的日志同时端口 8080 上没有其他冲突服务。启动失败时优先检查日志中最上层的报错原因因为异常堆栈尾部往往是本项目错误而真正的原因经常在顶部几句提示中。5. 前端 Vue3 环境准备与启动5.1 安装依赖与开发模式启动前端项目目录一般叫vue3-admin、frontend或web。进入该目录后先执行依赖安装npm install如果在执行这一步时报错先确认 Node 版本和 npm 镜像再删除node_modules目录后重试。依赖安装完成后本地开发模式直接运行npm run dev启动日志会显示本地访问地址例如VITE v5.x.x ready in xxx ms ➜ Local: http://localhost:5173/浏览器访问 Vite 输出的地址即可看到登录页面。如果后端同时启动在 8080 端口登录操作能否成功取决于前端开发服务器是否做了接口代理。常见做法是在 Vite 配置文件vite.config.js中配置server.proxy将/api前缀的请求代理到后端地址。示例配置如下import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })注意这只是开发环境的代理。生产环境部署时一般由 Nginx 统一处理前端静态资源和/api接口转发不需要保留 Vite 代理。5.2 前端目录结构速读Vue3 项目通常会包含以下目录目录/文件作用src/api存放接口请求方法一般按模块拆分为员工、考勤、请假等文件src/router路由配置定义登录页、首页、各业务页和权限守卫src/store状态管理保存用户信息、Token 等src/views页面组件每个业务模块对应一个文件夹src/utils/request.jsAxios 实例封装统一处理 Token 和响应错误vite.config.jsVite 配置包含开发端口和代理第一次看项目只需要理解“页面请求从哪来、Token 存哪里、接口文件怎么调用”这三件事。例如登录成功后用户 Token 被存储到localStorage或Pinia中后续每个请求在 Axios 拦截器中自动加Authorization请求头后端通过拦截器校验 Token 后再决定是否返回数据。6. 前后端联调与 Nginx 部署本地开发阶段跑通前端和后端只算完成了第一步。真正接近线上的是把前端构建产物部署到 Nginx并用 Nginx 反向代理后端接口。6.1 生产构建前端项目执行构建命令npm run build执行完成后目录下会生成dist文件夹里面是压缩后的静态文件包括 HTML、JavaScript、CSS 和图片资源。把这个dist目录上传到服务器后还需要配置 Vue Router。项目如果使用 history 模式页面 URL 会去掉#直接访问比如/attendance这样的路径。Nginx 如果没有兜底配置刷新页面时会出现 404原因是 Nginx 找不到对应的物理文件。6.2 Nginx 配置示例下面是一份常见的 Nginx 配置把项目部署在 80 端口后端接口转发到本机 8080server { listen 80; server_name localhost; root /usr/share/nginx/html/dist; index index.html; # 前端单页应用路由兜底 location / { try_files $uri $uri/ /index.html; } # 后端 API location /api/ { proxy_pass http://127.0.0.1:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }这里的/usr/share/nginx/html/dist需要替换成你实际存放前端构建产物的路径。proxy_pass后面的后端地址也要替换为实际地址。修改配置后执行nginx -t nginx -s reload如果nginx -t没有报错就说明配置语法正确。此时浏览器访问服务器地址登录页能显示登录请求能从 Nginx 转发到后端整个生产链路就算打通了。6.3 部署环境中常见的前后端分离问题后端端口除非有安全组限制否则不要对公网完全开放。部署到 Linux 服务器时可以只让 Nginx 监听 80后端 jar 只监听127.0.0.1这样外部请求统一经过 Nginx降低暴露风险。如果后端和前端不在同一台机器则后端需要监听0.0.0.0同时在防火墙放行指定端口。前后端分离项目最容易出现的部署问题是前端请求地址写成了localhost:8080。浏览器虽然是本机访问 Nginx但后端和前端跨域了更规范的做法是让所有请求走同域下的/api前缀由 Nginx 转发。7. 考勤业务功能测试与效果验证项目跑起来之后不要只停留在“登录成功能看到页面”这一步需要按真实管理流程逐项测试。下面按“基础数据 → 考勤操作 → 统计导出”的顺序给出一套验证流程。7.1 登录与角色权限验证用项目 SQL 脚本中初始化的管理员账号登录。成功后会进入首页页面左侧通常展示菜单栏例如首页看板、员工管理、考勤管理、请假审批等。建议先做两级验证第一使用错误密码登录看页面是否有统一提示第二退出登录后直接访问需要权限的页面路由观察路由守卫是否拦截并跳回登录页。预期结果是登录失败不会打出一条未处理的红色报错退出登录后刷新页面不能绕过权限直接看到后台内容。如果发现退出后刷新页面仍然能看到表格数据说明前端路由守卫或者后端接口 Token 校验没有完全生效。7.2 部门与员工档案维护进入部门管理页面测试添加、修改、删除部门。接着进入员工管理页面添加一条测试员工数据至少包含工号、姓名、所属部门和入职日期。员工字段中如果包含手机号、身份证号等信息建议在测试阶段填写模拟数据。需要注意的验证重点是员工列表的分页是否正常。先批量插入 20 到 30 条测试数据切换分页页码观察页码切换是否重新请求后端接口。新增员工后刷新页面数据是否仍然保留以此判断数据是否真的写入 MySQL。7.3 考勤打卡与考勤记录考勤模块在系统中有两种实现可能一种是员工通过页面点击“打卡”系统自动记录当前时间另一种由管理员按日期补录考勤状态。如果项目提供打卡按钮则用测试员工账号登录在打卡时间段内点击上下班打卡再到考勤记录页面查看是否生成数据。如果项目没有实际打卡交互而是管理员手动添加考勤记录则重点测试新增记录时日期选择、考勤状态枚举是否正常。例如选择“正常、迟到、请假、缺卡”中的任意状态保存后列表状态展示是否准确。在测试记录中还要观察时间字段的存储格式。数据库若使用datetime前端显示时可能出现时区差 8 小时的问题这种情况通常需要检查 JDBC 连接串的serverTimezone参数以及前端是否做了时间格式化。7.4 请假申请与审批流程员工账号登录后进入请假页面填写请假开始时间、结束时间、请假类型和事由提交申请。退出员工账号切换到管理员账号在审批列表中找到这笔申请执行同意或驳回操作。最后再用员工账号查状态确认申请状态已经从“待审批”变为“已同意”或“已驳回”。这个流程是考勤管理系统的重点也是验收时最容易出彩的部分。验证的关键点在于审批操作后后端数据库中的状态字段是否正确更新而不是页面上的临时状态。7.5 月度考勤统计与导出最后一个测试点是统计报表。进入考勤统计页面选择统计月份查看当月每个员工的出勤天数、迟到次数、请假天数等数据是否和图里的考勤记录一致。如果系统提供 Excel 导出功能点击导出后应得到一个可打开的 Excel 文件。导出失败时优先看后端控制台日志可能是文件路径不存在也可能是导出依赖的 Apache POI 版本冲突。批量导出数据量较大时还要注意接口响应时间导出操作最好不放在主线程里无限等待。8. 接口 API 调用与权限验证前端页面的所有操作本质上都是在调用后端 API。前后端分离项目学习时最好能脱离页面直接用接口测试工具把流程跑一遍。这样更容易理解 Token 的工作方式。8.1 接口调用基本流程考勤系统的接口风格通常是 RESTful。后端接口路径一般以/api开头资源名称使用复数形式例如/api/users/login、/api/employees/page。具体路径以后端 Controller 上的注解为准。两个通用关键点是登录接口返回 Token前端保存 Token后续请求在请求头中加入Authorization: Bearer token后端每次校验 Token 是否有效。如果 Token 过期或缺失后端返回 401。用 curl 模拟登录请求的通用示例curl -X POST http://localhost:8080/api/login \ -H Content-Type: application/json \ -d { \username\: \admin\, \password\: \123456\ }将返回体中的 Token 复制出来后调用其他接口时需要携带curl -X GET http://localhost:8080/api/attendance/statistics?month2025-06 \ -H Authorization: Bearer 你的token注意以上只是通用调用格式。真实项目中的登录路径、请求参数、返回结构需要以后端代码为准。建议使用 Apifox、Postman 或 IDEA 内置的 HTTP Client 保存一套接口请求方便二次开发时反复调试。8.2 前端 Axios 封装思路Vue3 项目一般通过src/utils/request.js封装 Axios 实例。一个比较完整的封装思路如下import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器自动携带 Token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器统一处理后端返回结构 request.interceptors.response.use( response { const res response.data if (res.code res.code ! 200) { return Promise.reject(new Error(res.message || 请求失败)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default request这一段代码的主要作用是不管哪个页面发起请求都会自动带上 Token出现 401 时统一跳转登录页。理解了这个封装就不会在业务代码里到处写“手动加 Token”的逻辑。8.3 接口联调时要注意的跨域问题浏览器开发时如果前端直接请求http://localhost:8080而后端没有配置跨域通常会报CORS error。解决办法有两种后端加全局 CORS 配置前端用 Vite 代理。生产环境用 Nginx 反代则很少遇到跨域问题因为页面和接口是同源地址。如果后端需要放开跨域常见写法是增加一个配置类允许指定来源和请求头。示例import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:5173) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*); } }注意这段代码针对的是 Spring MVC 项目且allowedOrigins要替换成前端实际地址。生产环境如果没有跨域需求建议直接用 Nginx 同源代理不使用这种全放开的配置。9. 资源占用与性能观察管理系统类型项目不像 AI 推理那样需要高显存或 GPU性能观察重点在于 CPU 占用、内存占用和数据库慢查询。9.1 后端资源观察后端项目默认以 jar 方式运行时内存占用取决于 JVM 参数和业务负载。如果想限定内存可以在启动时指定java -Xms512m -Xmx1024m -jar target/attendance-server.jar注意-Xms512m和-Xmx1024m是 JVM 参数示例真实大小要根据服务器内存调整。启动后通过jconsole或操作系统的任务管理器观察 Java 进程的内存使用情况。在开发调试阶段如果控制台打印了大量 SQL 日志说明 MyBatis 配置了 SQL 日志输出建议在本地查看完成之后关闭。关闭后可以减少 CPU 与磁盘 IO 的消耗。9.2 前端资源观察打开浏览器开发者工具中的 Network 面板可以查看到页面加载时静态资源大小和接口耗时。如果生产环境页面首屏加载慢常见原因是没有压缩前端打包产物或者没有给静态资源配置缓存。Vite 默认会分包但依然建议在 Nginx 中为js/css文件配置缓存时间。9.3 考勤统计对数据库的影响考勤统计接口如果查询范围是整个月、全表所有员工在数据量大时会造成慢查询。测试阶段可以先看 SQL 是否走了索引例如员工编号、考勤日期字段是否有索引。时间维度统计最好养成“按月查询”的习惯避免一次性查全量数据。系统一旦运行半年以上考勤表数据量会快速增长建议后续在日期字段上建立索引。9.4 如何降低联调时的性能干扰如果前端和后端跑在同一台电脑上后端启动、前端 HMR 热更新和 MySQL 同时运行会占用较多内存。电脑配置较低时可以把 IDEA 的内存限制调小关掉不需要的浏览器插件或者把 MySQL 服务分布式启动。但要注意前端使用 Vite 开发模式时本身就有较高的内存占用如果出现卡顿优先尝试把node_modules中的依赖重新安装排除因依赖版本不一致导致的加载问题。10. 常见问题与排查清单下面整理一套高频问题的排查表格。问题现象可能原因排查方式解决方案后端启动失败报数据库连接失败数据库没有启动用户名密码错误数据库名错误检查 MySQL 服务状态检查application.yml修正连接地址、用户名、密码新建正确的数据库导入 SQL 报错数据库字符集不对SQL 文件版本与 MySQL 版本不兼容查看具体报错行检查脚本头部是否有库名先新建 utf8mb4 数据库再执行脚本必要时升级 SQL 版本前端npm install卡住网络慢npm 镜像未配置查看终端输出检查node_modules目录配置国内镜像后重新安装登录接口 404前端请求接口路径和后端不一致在 Network 面板查看请求 URL修改环境变量或代理配置登录成功后请求列表接口仍返回未认证Token 没有保存成功或请求头没带检查 localStorage 是否有 token查看请求头修正 Axios 拦截器重新登录前端开发模式请求接口报跨域没有配置 Vite 代理后端没有放开跨域看浏览器报错是 CORS 还是 404配置 Vite proxy 或后端 CORS 配置页面刷新后 404Vue Router history 模式未配置兜底用 curl 访问页面路径确认返回内容Nginx 加try_files $uri $uri/ /index.html;后端能启动但页面无法登录Redis 服务缺失或连接失败初始化账号不存在查看后端日志查看数据库用户表启动 Redis 服务或重新初始化账号导出 Excel 失败文件路径不存在、权限不够、POI 依赖冲突查看后端日志堆栈创建导出目录并确认目录可写检查依赖版本上传员工头像失败文件大小超出限制确认上传文件大小修改spring.servlet.multipart.max-file-size另外还有两个容易被忽略的问题如果后端修改了端口记得同步修改 Vite 代理目标和 Nginxproxy_pass如果前端登录页始终打不开先检查前后端两个服务是否都已经启动并监听对应端口再检查本机防火墙是否拦截了端口访问。11. 最佳实践与后续扩展整套项目跑通后不要急着删掉工程建议继续做三件工程化整理。第一数据库脚本版本化。现在的初始化 SQL 可能只包含建表和初始化数据后续二次修改时不要直接在数据库里手工改表而是把修改语句整理成增量脚本按日期命名放进sql目录。这样项目换电脑、换服务器时能快速恢复一套可用的数据库结构。第二统一返回结果和全局异常。前后端分离项目如果每个接口都返回不同结构的 JSON前端处理起来会非常痛苦。可以统一使用包含code、message、data三个字段的返回对象并在后端增加全局异常处理保证在任何异常场景下前端都能拿到结构一致的响应。第三保护配置信息。像数据库密码、JWT 密钥这样的敏感配置务必从代码中抽离使用环境变量或外部配置文件注入。部署到服务器后不要使用项目 README 中提到的默认账号密码至少修改管理员密码关闭测试账号。合规上不要省事。在课程设计或开源示例中使用演示数据应当使用虚构的姓名和工号不应当把真实员工手机号、身份证或考勤位置信息作为示例数据上传到公开仓库。如果系统用于公司内部真实业务应当提前确认员工隐私告知、数据授权范围和数据删除机制。任何时候都不要把只允许内网访问的员工考勤数据直接暴露到公网。总体上这个 SpringBoot Vue3 前后端分离的员工考勤管理系统最值得尝试的点在于它把管理类项目所需的登录鉴权、菜单路由、表格 CRUD、表单校验、统计反馈完整串联起来非常适合作为第一次独立完成的前后端分离项目。建议最先验证的是数据库初始化和登录链路只要管理员账号能通过页面顺利登录后续的功能测试都能按统一套路展开。最容易踩的坑则是前端 history 路由在 Nginx 下刷新 404以及启动时 JDK 版本和数据库连接信息不匹配。后续扩展方向可以围绕“更接近真实考勤”做三个升级接入企业微信、钉钉或飞书的打卡事件让考勤记录自动同步把请假审批流程改成更灵活的工作流引擎可以应对跨部门审批、多人会签等场景增加统计图可视化将月出勤率、迟到趋势、请假分布用图表呈现。只要把当前这套前后端分离链路跑通后续扩展的难点就只在业务模型设计上而不是技术框架本身。建议把这次的部署过程和踩坑记录直接整理成一份 Markdown README放到项目根目录后面重新部署时会节省大量时间。 
长河君 · 2026/9/4 4:24:56 · 阅读 1.2k SpringBoot+Vue3前后端分离员工考勤管理系统部署实践
这次介绍的项目编号是 068名称为“基于 SpringBoot Vue3 前后端分离的员工考勤管理系统”。它并不是一个 AI 工具也不是微服务中间件而是一套非常典型的 Java Web 后台管理工程后端使用 SpringBoot 提供 RESTful API前端使用 Vue3 和 Vite 构建页面两者通过 HTTP 接口联调。这类项目在国内课程设计和毕业设计中的出现频率非常高也是很多开发者刚接触“前后端分离”时最常上手的一类模板。这个项目值得花时间看主要有三个原因第一SpringBoot 和 Vue3 是目前国内 Java 后端与前端开发中占比很高的技术组合很多公司新项目的技术选型仍然围绕它们展开第二“员工考勤管理系统”这个业务足够有代表性涉及员工档案、考勤记录、请假申请、统计报表等通用管理模块逻辑清晰非常适合做前后端分离项目实战第三前后端分离项目真正的难点大多集中在部署和联调环节包括数据库初始化、JWT 权限校验、跨域请求、前端路由刷新 404、Nginx 托管静态文件等这套项目刚好能把所有坑暴露出来。本文会围绕这套项目展开先用核心能力速览交代整体结构再从环境准备、数据库初始化、后端启动、前端启动、接口联调、功能测试到 Nginx 部署逐步演示。最后补充资源占用观察、常见问题排查清单和最佳实践。如果你正在做 SpringBoot Vue3 相关题目的课设或毕设或者想找一套完整的前后端分离项目练手这篇文章可以直接作为部署参考。1. 项目定位与核心能力速览先给项目做一个快速定位。“员工考勤管理系统”这个名字决定了业务范围通常可以从四个核心模块去理解基础数据维护包括部门和员工档案考勤数据采集包括打卡、补卡或按日期登记考勤状态请假流程包括请假申请与审批统计分析包括考勤记录查询、月度统计和导出。具体模块数量需要看项目源码中的实际业务表设计但整体边界基本不会脱离这些内容。下表整理了这套系统需要关注的维度。部分参数以实际下载到的项目代码为准因为同一选题会存在不同的封装版本。维度说明项目类型前后端分离的员工考勤管理系统后端技术栈SpringBoot涉及 Web、Security/拦截器、MyBatis/MyBatis-Plus/JPA 等组件前端技术栈Vue3、Vite、Vue Router、Axios、状态管理、Element Plus页面风格后台管理系统侧边栏菜单 顶栏 表格表单布局数据库以 MySQL 为主是否使用 Redis 需要看项目里的实际配置鉴权方式JWT Token也可以是 Spring Security JWT 或简单拦截器方案部署方式后端打包为 jar前端构建成静态文件后由 Nginx 托管主要功能部门管理、员工档案、考勤打卡或记录登记、请假申请与审批、统计导出适合人群Java Web 学习者、毕业设计/课程设计学生、需要后台管理系统参考模板的开发者需要说明的是这种标题下不同作者提供的代码封装差别较大。有的项目用 MyBatis-Plus 做持久层有的用 JPA有的前端用 Element Plus有的用 Ant Design Vue鉴权有的走 Spring Security有的用拦截器。拿到代码后先花十分钟看一遍项目结构再动手部署不要照着别人的教程盲目执行命令。本文所有配置示例也会标注需要替换的路径、端口和工程名。从学习角度看这个项目最有价值的部分不是考勤算法本身而是前后端分离的工程组织方式。后端负责把业务数据暴露成 JSON 接口前端负责把接口数据渲染成页面两者通过 Token 维持用户登录状态。理解这套完整链路后再做商品管理、机房预约、会议室系统等类似选题基本只需要换业务表和页面。2. 适用场景与技术边界先说适合谁。第一类是正在准备毕业设计或课程设计的学生。考勤系统功能齐全、演示效果好容易讲清楚数据库设计和接口设计第二类是刚开始学习 SpringBoot 和 Vue3 的开发者可以通过项目源码看到后端接口、前端路由、状态管理、权限拦截是怎么组织起来的第三类是后续准备自己搭建中后台管理系统的开发者可以直接借用这套项目中的通用代码例如全局异常处理、统一返回结果、登录鉴权再替换成自己的业务模块。能解决的问题也很明确把传统 Excel 考勤记录转化为线上管理流程给员工提供统一入口使用浏览器即可完成打卡、请假提交和考勤状态查询给管理员提供数据统计视图减少人工统计工作。不适合的场景需要单独提醒。如果是工厂车间、外包团队、连锁门店这样存在多班次、跨区域、复杂排班考勤规则的场景不能直接用这种通用考勤系统。这类系统通常没有成熟的排班引擎、打卡设备对接、定位围栏能力硬套会导致数据不准确。如果要用于真实企业必须做大量二次开发或者改用更成熟的商业化考勤产品。使用边界还涉及合规问题。员工考勤信息与员工姓名、工号、部门、打卡时间等个人数据相关属于敏感信息。该系统的“演示环境、测试环境、课程设计环境”不应直接使用真实员工数据如果实际部署到学校或公司应确认使用目的已获得单位授权并且数据访问范围只对必要人员开放。公开二次开发时也要把默认账号密码、数据库连接信息全部改掉避免信息泄露。3. 本地部署先弄明白的三件事拿到项目源码后先不要急着双击启动。先把三件事确认清楚能少走很多弯路。3.1 后端环境JDK 与 MavenSpringBoot 项目对 JDK 版本比较敏感。如果是 SpringBoot 2.x通常使用 JDK 8如果是 SpringBoot 3.x必须使用 JDK 17 以上。很多同学失败的原因不是代码问题而是用 JDK 8 去跑 SpringBoot 3 项目编译阶段就报错。启动前要看项目中的pom.xml文件里java.version标签写的是什么版本。如果项目配置的是 JDK 8就安装 JDK 8如果项目配置的是 JDK 17就安装 JDK 17。建议同时安装多个 JDK 版本时在 IDEA 或命令行中明确指定当前项目使用的 JDK。也可以在 IDEA 的 “Project Structure” 中设置项目 SDK在 “Settings” 中设置 Maven 使用的 JDK 版本。Maven 方面主要关注Maven Home Path指向是否正常以及本地仓库是否配置好。国内网络状态下建议在settings.xml中配置阿里云镜像否则依赖下载时会很长。3.2 前端环境Node 与 npm前端项目如果使用 Vue3 Vite通常要求 Node.js 版本不能太低。Vite 5 以上版本官方建议使用 Node.js 18 或更高。可以在命令行执行node -v和npm -v确认版本如果版本太旧建议安装 Node.js 18 以上版本。npm 拉取依赖同样建议配置国内镜像npm config get registry npm config set registry https://registry.npmmirror.com这里需要说明镜像地址以你所在网络环境可用性为准配置后可以明显提升依赖安装速度。3.3 数据库脚本与字符集考勤系统通常需要新建数据库并导入项目提供的sql脚本。脚本一般放在项目根目录的sql目录、database目录或后端resources目录下的db文件夹中。用 Navicat 或命令行导入前需要新建一个空白数据库。数据库名称以项目中的 JDBC 配置为准常见名可能是attendance、employee_attendance但也可能不同请看application.yml中的连接地址修改。导入后必须核对三件事表是否创建成功是否有初始化管理员账号数据库用户是否正确。管理员账号通常写在 SQL 的数据插入语句中默认密码一般是123456、admin123之类但最终以项目文档说明为准。4. 后端 SpringBoot 环境准备与启动4.1 修改数据库连接配置后端项目核心配置文件是src/main/resources/application.yml或application.properties。需要修改的无非是数据库地址、用户名、密码。下面给出一份兼容程度较高的 YAML 示例具体字段名需要按项目实际调整server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/attendance_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 你的数据库密码 servlet: multipart: max-file-size: 20MB max-request-size: 20MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl注意attendance_db需要替换成实际新建的数据库名。如果项目使用的是application.properties则把同样的配置改成spring.datasource.url、spring.datasource.username、spring.datasource.password的平铺形式即可。登录相关的配置可能还会出现在application.yml中比如 JWT 密钥和过期时间类似于jwt: secret: your-jwt-secret-change-me expire: 86400000这类配置也要改成你自己的随机密钥不要保留项目默认明文。前端和后端联调时如果修改了 JWT 配置需要重启后端服务才生效。4.2 启动后端服务在 IDEA 中找到主启动类类名通常类似AttendanceApplication.java类上有SpringBootApplication注解。右键选择运行也可以使用 Maven 命令mvn clean package -DskipTests打包成功后在项目target目录下会生成一个 jar 包假设名称是attendance-server.jar用命令启动java -jar target/attendance-server.jar后端启动成功的标志是控制台出现类似 “Started Application in x.xxx seconds” 的日志同时端口 8080 上没有其他冲突服务。启动失败时优先检查日志中最上层的报错原因因为异常堆栈尾部往往是本项目错误而真正的原因经常在顶部几句提示中。5. 前端 Vue3 环境准备与启动5.1 安装依赖与开发模式启动前端项目目录一般叫vue3-admin、frontend或web。进入该目录后先执行依赖安装npm install如果在执行这一步时报错先确认 Node 版本和 npm 镜像再删除node_modules目录后重试。依赖安装完成后本地开发模式直接运行npm run dev启动日志会显示本地访问地址例如VITE v5.x.x ready in xxx ms ➜ Local: http://localhost:5173/浏览器访问 Vite 输出的地址即可看到登录页面。如果后端同时启动在 8080 端口登录操作能否成功取决于前端开发服务器是否做了接口代理。常见做法是在 Vite 配置文件vite.config.js中配置server.proxy将/api前缀的请求代理到后端地址。示例配置如下import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })注意这只是开发环境的代理。生产环境部署时一般由 Nginx 统一处理前端静态资源和/api接口转发不需要保留 Vite 代理。5.2 前端目录结构速读Vue3 项目通常会包含以下目录目录/文件作用src/api存放接口请求方法一般按模块拆分为员工、考勤、请假等文件src/router路由配置定义登录页、首页、各业务页和权限守卫src/store状态管理保存用户信息、Token 等src/views页面组件每个业务模块对应一个文件夹src/utils/request.jsAxios 实例封装统一处理 Token 和响应错误vite.config.jsVite 配置包含开发端口和代理第一次看项目只需要理解“页面请求从哪来、Token 存哪里、接口文件怎么调用”这三件事。例如登录成功后用户 Token 被存储到localStorage或Pinia中后续每个请求在 Axios 拦截器中自动加Authorization请求头后端通过拦截器校验 Token 后再决定是否返回数据。6. 前后端联调与 Nginx 部署本地开发阶段跑通前端和后端只算完成了第一步。真正接近线上的是把前端构建产物部署到 Nginx并用 Nginx 反向代理后端接口。6.1 生产构建前端项目执行构建命令npm run build执行完成后目录下会生成dist文件夹里面是压缩后的静态文件包括 HTML、JavaScript、CSS 和图片资源。把这个dist目录上传到服务器后还需要配置 Vue Router。项目如果使用 history 模式页面 URL 会去掉#直接访问比如/attendance这样的路径。Nginx 如果没有兜底配置刷新页面时会出现 404原因是 Nginx 找不到对应的物理文件。6.2 Nginx 配置示例下面是一份常见的 Nginx 配置把项目部署在 80 端口后端接口转发到本机 8080server { listen 80; server_name localhost; root /usr/share/nginx/html/dist; index index.html; # 前端单页应用路由兜底 location / { try_files $uri $uri/ /index.html; } # 后端 API location /api/ { proxy_pass http://127.0.0.1:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }这里的/usr/share/nginx/html/dist需要替换成你实际存放前端构建产物的路径。proxy_pass后面的后端地址也要替换为实际地址。修改配置后执行nginx -t nginx -s reload如果nginx -t没有报错就说明配置语法正确。此时浏览器访问服务器地址登录页能显示登录请求能从 Nginx 转发到后端整个生产链路就算打通了。6.3 部署环境中常见的前后端分离问题后端端口除非有安全组限制否则不要对公网完全开放。部署到 Linux 服务器时可以只让 Nginx 监听 80后端 jar 只监听127.0.0.1这样外部请求统一经过 Nginx降低暴露风险。如果后端和前端不在同一台机器则后端需要监听0.0.0.0同时在防火墙放行指定端口。前后端分离项目最容易出现的部署问题是前端请求地址写成了localhost:8080。浏览器虽然是本机访问 Nginx但后端和前端跨域了更规范的做法是让所有请求走同域下的/api前缀由 Nginx 转发。7. 考勤业务功能测试与效果验证项目跑起来之后不要只停留在“登录成功能看到页面”这一步需要按真实管理流程逐项测试。下面按“基础数据 → 考勤操作 → 统计导出”的顺序给出一套验证流程。7.1 登录与角色权限验证用项目 SQL 脚本中初始化的管理员账号登录。成功后会进入首页页面左侧通常展示菜单栏例如首页看板、员工管理、考勤管理、请假审批等。建议先做两级验证第一使用错误密码登录看页面是否有统一提示第二退出登录后直接访问需要权限的页面路由观察路由守卫是否拦截并跳回登录页。预期结果是登录失败不会打出一条未处理的红色报错退出登录后刷新页面不能绕过权限直接看到后台内容。如果发现退出后刷新页面仍然能看到表格数据说明前端路由守卫或者后端接口 Token 校验没有完全生效。7.2 部门与员工档案维护进入部门管理页面测试添加、修改、删除部门。接着进入员工管理页面添加一条测试员工数据至少包含工号、姓名、所属部门和入职日期。员工字段中如果包含手机号、身份证号等信息建议在测试阶段填写模拟数据。需要注意的验证重点是员工列表的分页是否正常。先批量插入 20 到 30 条测试数据切换分页页码观察页码切换是否重新请求后端接口。新增员工后刷新页面数据是否仍然保留以此判断数据是否真的写入 MySQL。7.3 考勤打卡与考勤记录考勤模块在系统中有两种实现可能一种是员工通过页面点击“打卡”系统自动记录当前时间另一种由管理员按日期补录考勤状态。如果项目提供打卡按钮则用测试员工账号登录在打卡时间段内点击上下班打卡再到考勤记录页面查看是否生成数据。如果项目没有实际打卡交互而是管理员手动添加考勤记录则重点测试新增记录时日期选择、考勤状态枚举是否正常。例如选择“正常、迟到、请假、缺卡”中的任意状态保存后列表状态展示是否准确。在测试记录中还要观察时间字段的存储格式。数据库若使用datetime前端显示时可能出现时区差 8 小时的问题这种情况通常需要检查 JDBC 连接串的serverTimezone参数以及前端是否做了时间格式化。7.4 请假申请与审批流程员工账号登录后进入请假页面填写请假开始时间、结束时间、请假类型和事由提交申请。退出员工账号切换到管理员账号在审批列表中找到这笔申请执行同意或驳回操作。最后再用员工账号查状态确认申请状态已经从“待审批”变为“已同意”或“已驳回”。这个流程是考勤管理系统的重点也是验收时最容易出彩的部分。验证的关键点在于审批操作后后端数据库中的状态字段是否正确更新而不是页面上的临时状态。7.5 月度考勤统计与导出最后一个测试点是统计报表。进入考勤统计页面选择统计月份查看当月每个员工的出勤天数、迟到次数、请假天数等数据是否和图里的考勤记录一致。如果系统提供 Excel 导出功能点击导出后应得到一个可打开的 Excel 文件。导出失败时优先看后端控制台日志可能是文件路径不存在也可能是导出依赖的 Apache POI 版本冲突。批量导出数据量较大时还要注意接口响应时间导出操作最好不放在主线程里无限等待。8. 接口 API 调用与权限验证前端页面的所有操作本质上都是在调用后端 API。前后端分离项目学习时最好能脱离页面直接用接口测试工具把流程跑一遍。这样更容易理解 Token 的工作方式。8.1 接口调用基本流程考勤系统的接口风格通常是 RESTful。后端接口路径一般以/api开头资源名称使用复数形式例如/api/users/login、/api/employees/page。具体路径以后端 Controller 上的注解为准。两个通用关键点是登录接口返回 Token前端保存 Token后续请求在请求头中加入Authorization: Bearer token后端每次校验 Token 是否有效。如果 Token 过期或缺失后端返回 401。用 curl 模拟登录请求的通用示例curl -X POST http://localhost:8080/api/login \ -H Content-Type: application/json \ -d { \username\: \admin\, \password\: \123456\ }将返回体中的 Token 复制出来后调用其他接口时需要携带curl -X GET http://localhost:8080/api/attendance/statistics?month2025-06 \ -H Authorization: Bearer 你的token注意以上只是通用调用格式。真实项目中的登录路径、请求参数、返回结构需要以后端代码为准。建议使用 Apifox、Postman 或 IDEA 内置的 HTTP Client 保存一套接口请求方便二次开发时反复调试。8.2 前端 Axios 封装思路Vue3 项目一般通过src/utils/request.js封装 Axios 实例。一个比较完整的封装思路如下import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器自动携带 Token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器统一处理后端返回结构 request.interceptors.response.use( response { const res response.data if (res.code res.code ! 200) { return Promise.reject(new Error(res.message || 请求失败)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default request这一段代码的主要作用是不管哪个页面发起请求都会自动带上 Token出现 401 时统一跳转登录页。理解了这个封装就不会在业务代码里到处写“手动加 Token”的逻辑。8.3 接口联调时要注意的跨域问题浏览器开发时如果前端直接请求http://localhost:8080而后端没有配置跨域通常会报CORS error。解决办法有两种后端加全局 CORS 配置前端用 Vite 代理。生产环境用 Nginx 反代则很少遇到跨域问题因为页面和接口是同源地址。如果后端需要放开跨域常见写法是增加一个配置类允许指定来源和请求头。示例import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:5173) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*); } }注意这段代码针对的是 Spring MVC 项目且allowedOrigins要替换成前端实际地址。生产环境如果没有跨域需求建议直接用 Nginx 同源代理不使用这种全放开的配置。9. 资源占用与性能观察管理系统类型项目不像 AI 推理那样需要高显存或 GPU性能观察重点在于 CPU 占用、内存占用和数据库慢查询。9.1 后端资源观察后端项目默认以 jar 方式运行时内存占用取决于 JVM 参数和业务负载。如果想限定内存可以在启动时指定java -Xms512m -Xmx1024m -jar target/attendance-server.jar注意-Xms512m和-Xmx1024m是 JVM 参数示例真实大小要根据服务器内存调整。启动后通过jconsole或操作系统的任务管理器观察 Java 进程的内存使用情况。在开发调试阶段如果控制台打印了大量 SQL 日志说明 MyBatis 配置了 SQL 日志输出建议在本地查看完成之后关闭。关闭后可以减少 CPU 与磁盘 IO 的消耗。9.2 前端资源观察打开浏览器开发者工具中的 Network 面板可以查看到页面加载时静态资源大小和接口耗时。如果生产环境页面首屏加载慢常见原因是没有压缩前端打包产物或者没有给静态资源配置缓存。Vite 默认会分包但依然建议在 Nginx 中为js/css文件配置缓存时间。9.3 考勤统计对数据库的影响考勤统计接口如果查询范围是整个月、全表所有员工在数据量大时会造成慢查询。测试阶段可以先看 SQL 是否走了索引例如员工编号、考勤日期字段是否有索引。时间维度统计最好养成“按月查询”的习惯避免一次性查全量数据。系统一旦运行半年以上考勤表数据量会快速增长建议后续在日期字段上建立索引。9.4 如何降低联调时的性能干扰如果前端和后端跑在同一台电脑上后端启动、前端 HMR 热更新和 MySQL 同时运行会占用较多内存。电脑配置较低时可以把 IDEA 的内存限制调小关掉不需要的浏览器插件或者把 MySQL 服务分布式启动。但要注意前端使用 Vite 开发模式时本身就有较高的内存占用如果出现卡顿优先尝试把node_modules中的依赖重新安装排除因依赖版本不一致导致的加载问题。10. 常见问题与排查清单下面整理一套高频问题的排查表格。问题现象可能原因排查方式解决方案后端启动失败报数据库连接失败数据库没有启动用户名密码错误数据库名错误检查 MySQL 服务状态检查application.yml修正连接地址、用户名、密码新建正确的数据库导入 SQL 报错数据库字符集不对SQL 文件版本与 MySQL 版本不兼容查看具体报错行检查脚本头部是否有库名先新建 utf8mb4 数据库再执行脚本必要时升级 SQL 版本前端npm install卡住网络慢npm 镜像未配置查看终端输出检查node_modules目录配置国内镜像后重新安装登录接口 404前端请求接口路径和后端不一致在 Network 面板查看请求 URL修改环境变量或代理配置登录成功后请求列表接口仍返回未认证Token 没有保存成功或请求头没带检查 localStorage 是否有 token查看请求头修正 Axios 拦截器重新登录前端开发模式请求接口报跨域没有配置 Vite 代理后端没有放开跨域看浏览器报错是 CORS 还是 404配置 Vite proxy 或后端 CORS 配置页面刷新后 404Vue Router history 模式未配置兜底用 curl 访问页面路径确认返回内容Nginx 加try_files $uri $uri/ /index.html;后端能启动但页面无法登录Redis 服务缺失或连接失败初始化账号不存在查看后端日志查看数据库用户表启动 Redis 服务或重新初始化账号导出 Excel 失败文件路径不存在、权限不够、POI 依赖冲突查看后端日志堆栈创建导出目录并确认目录可写检查依赖版本上传员工头像失败文件大小超出限制确认上传文件大小修改spring.servlet.multipart.max-file-size另外还有两个容易被忽略的问题如果后端修改了端口记得同步修改 Vite 代理目标和 Nginxproxy_pass如果前端登录页始终打不开先检查前后端两个服务是否都已经启动并监听对应端口再检查本机防火墙是否拦截了端口访问。11. 最佳实践与后续扩展整套项目跑通后不要急着删掉工程建议继续做三件工程化整理。第一数据库脚本版本化。现在的初始化 SQL 可能只包含建表和初始化数据后续二次修改时不要直接在数据库里手工改表而是把修改语句整理成增量脚本按日期命名放进sql目录。这样项目换电脑、换服务器时能快速恢复一套可用的数据库结构。第二统一返回结果和全局异常。前后端分离项目如果每个接口都返回不同结构的 JSON前端处理起来会非常痛苦。可以统一使用包含code、message、data三个字段的返回对象并在后端增加全局异常处理保证在任何异常场景下前端都能拿到结构一致的响应。第三保护配置信息。像数据库密码、JWT 密钥这样的敏感配置务必从代码中抽离使用环境变量或外部配置文件注入。部署到服务器后不要使用项目 README 中提到的默认账号密码至少修改管理员密码关闭测试账号。合规上不要省事。在课程设计或开源示例中使用演示数据应当使用虚构的姓名和工号不应当把真实员工手机号、身份证或考勤位置信息作为示例数据上传到公开仓库。如果系统用于公司内部真实业务应当提前确认员工隐私告知、数据授权范围和数据删除机制。任何时候都不要把只允许内网访问的员工考勤数据直接暴露到公网。总体上这个 SpringBoot Vue3 前后端分离的员工考勤管理系统最值得尝试的点在于它把管理类项目所需的登录鉴权、菜单路由、表格 CRUD、表单校验、统计反馈完整串联起来非常适合作为第一次独立完成的前后端分离项目。建议最先验证的是数据库初始化和登录链路只要管理员账号能通过页面顺利登录后续的功能测试都能按统一套路展开。最容易踩的坑则是前端 history 路由在 Nginx 下刷新 404以及启动时 JDK 版本和数据库连接信息不匹配。后续扩展方向可以围绕“更接近真实考勤”做三个升级接入企业微信、钉钉或飞书的打卡事件让考勤记录自动同步把请假审批流程改成更灵活的工作流引擎可以应对跨部门审批、多人会签等场景增加统计图可视化将月出勤率、迟到趋势、请假分布用图表呈现。只要把当前这套前后端分离链路跑通后续扩展的难点就只在业务模型设计上而不是技术框架本身。建议把这次的部署过程和踩坑记录直接整理成一份 Markdown README放到项目根目录后面重新部署时会节省大量时间。