尧图网页设计 
简介这是一套基于SpringBootVue实现的前后端分离人事管理系统适合正在准备毕业设计、课程项目的计算机专业学生以及希望快速搭建人事管理平台的开发者。项目围绕用户认证、员工信息、组织架构、考勤休假、薪资福利、系统管理等核心模块展开涵盖从后端RESTful API到前端交互界面的完整实现思路。压缩包共185个文件大小仅2MB主要包括81个Java后端源码、29个JavaScript与24个Vue前端页面、14个XML配置、10个Mapper映射文件以及1个SQL数据库脚本等便于直接导入数据库并运行调试。目前已有71人学习下载适合作为课题参考与二次开发基础。通过该项目可掌握Spring Security权限控制、MyBatis数据持久化、VueElement UI页面构建等关键技术并学习到前后端联调、项目结构划分及工程化配置的实用经验。1. 人事管理系统毕设选题为什么SpringBootVue是风险最低的全栈方案SpringBootVue实现人事管理系统是Java方向毕业设计里性价比最高的一张牌。它不像商城系统那么卷也不像纯增删改查那样显得没工作量模块上正好覆盖登录鉴权、员工档案、部门组织、考勤记录、薪资台账这几条主线前端有列表、表单、弹窗和路由守卫后端有拦截器、分页和统一返回结构一套做下来就是一个完整的前后端分离闭环。这篇笔记直接拆这套方案从数据库设计讲到接口实现再到Vue页面与打包部署最后把跨域、日期串台、打包路径这几个高频翻车点一次说清。按这个路径走两周内跑通主体用来应付开题、中期检查和答辩完全够用。2. 人事管理系统的模块拆解与技术选型先定边界再写代码做毕设最容易犯的错不是代码写不出来而是一上来就建库建表写了三天发现角色和部门的关系理不清又回头改表。所以这一章先把系统的边界和表结构定下来这是答辩必问也是后面写代码的地基。2.1 系统角色与核心模块管理员、员工、部门、考勤、薪资怎么划分人事管理系统最常见的角色划分是两类管理员和普通员工。管理员负责维护员工档案、管理部门结构、录入考勤数据、核算薪资普通员工登录后只能查看自己的信息修改自己的手机号和邮箱。有的题目会额外要求一个HR角色本质上是管理员的权限子集毕业设计阶段没有必要把权限模型做得很复杂一张用户表里加一个role字段配合前端菜单按角色渲染就足够应付提问了。模块划分推荐按业务主线切成六块登录与个人中心、员工档案管理、部门管理、考勤管理、薪资管理、可视化统计。其中可视化统计是加分项用ECharts画部门人数分布和近半年入职趋势答辩演示时一眼就能让老师看到工作量的厚度。如果时间紧张只想保底员工档案、部门、考勤这三块已经能撑起一篇合格毕设的主体。这里有一个边界要提前想清楚不要顺手把请假审批也做进来。请假是流程审批需要状态流转、审批人和审批记录而考勤只是打卡记录一张表加几行数据就是全部。题目叫“人事管理系统”时把考勤做成记录查询就足够了一旦卷进流程设计工作量会翻倍答辩还容易被追问“你的审批状态机怎么设计的”到时候很难收场。选型上SpringBootVue是毕业设计风险最低的组合SpringBoot的自动配置让项目结构清晰微服务时代它依然是面试里绕不开的框架Vue的组件化让页面复用简单。这组合在国内教程多、案例多遇到报错一搜就能找到答案答辩被问“springboot项目结构怎么组织”“vue路由守卫怎么写”也都是经典题准备起来不费劲。2.2 数据库表设计五张核心表与字段约定表设计是答辩必问的所以字段命名和类型要能讲出理由。下面这套结构建议直接抄主键统一用bigint自增id所有表都带create_time字段配合MyBatis-Plus的自动填充省得每个新增接口手写时间。用户表、员工表、部门表、考勤表、薪资表是五张核心表关系也不复杂部门表是树形的有parent_id员工表挂在部门下dept_id外键考勤表和薪资表都以员工表的id作为emp_id关联。下面是每张表的关键字段和说明。表名关键字段类型约定说明userid, username, password, real_name, role, dept_id, statuspassword用varchar(100)用户表存登录账号密码存BCrypt加密串deptid, name, parent_id, leaderparent_id默认0为根部门部门表自关联树形结构employeeid, emp_no, name, gender, phone, email, dept_id, position, hire_date, statusemp_no唯一gender用tinyint员工档案表工号是业务主键attendanceid, emp_id, work_date, check_in_time, check_out_time, status时间都用datetime考勤记录表一个员工一天一行salaryid, emp_id, month, base_salary, bonus, deduction, actual_salary金额用decimal(10,2)薪资表month格式统一2025-01几个字段约定值得单独强调。密码字段必须用varchar(100)因为BCrypt加密后的密文固定60个字符用varchar(50)会导致插入时直接报错或截断这个我帮人改错过。性别和状态这类字段统一用tinyint前端用字典映射成“男/女”“启用/禁用”比直接存中文干净得多。金额字段一律decimal(10,2)绝对不要用double答辩时被问到“为什么金额不用浮点型”这是一个标准答案浮点在计算金钱时会有精度损失。2.3 Restful接口规范与统一返回结构前后端分离项目里接口约定是两个人的事在毕设里就是“上一秒的你”和“下一秒的你”不统一后面联调就是灾难。我一般会先写一个Result类作为所有接口的返回包装字段固定三个code、message、data。code200代表成功500代表业务异常401代表未登录或token失效。这样前端axios的响应拦截器看到code不等于200就可以统一弹提示不用每个页面各写一遍错误处理。接口路径按资源来命名/api/employee/list是分页查询/api/employee/{id}是查详情/api/employee是新增和修改/api/employee/delete/{id}是删除考勤和薪资同理。分页参数前后端约定为pageNum和pageSize虽然MyBatis-Plus原生用的是current和size但Controller里做一层转换成本很低却能保证前端代码的可读性。一个常见的疑问是为什么删除不用Restful风格的DELETE我的做法是删除用POST因为毕设里很多过滤器和拦截器默认只处理POST出现问题时的排查成本低很多。答辩时能讲清楚“规范是死的实现要配合业务选型”比死记一条标准要好。3. SpringBoot后端落地依赖配置、JWT鉴权与员工接口后端是整套系统的承重墙我建议按“工程初始化→登录鉴权→业务接口”的顺序写先跑起来再填肉。这一章用的组合是SpringBoot 2.7 MyBatis-Plus JWT覆盖了毕设答辩最常被问到的后端考点。3.1 项目结构与pom依赖一份能直接跑的配置创建项目时常见做法是在IDEA里用Spring Initializr生成或者直接去start.spring.io下载压缩包再导入。SpringBoot版本请选2.7.x不要一上来追3.x——3.x对JDK17有硬性要求很多实验室电脑还是JDK8版本不匹配连启动都过不去这种“springboot版本太高”的翻车最不值得。pom.xml里的核心依赖如下parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version /parent dependencies !-- Web启动器自带Tomcat和Jackson -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis-Plus 3.5.x封装CRUD和分页 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- MySQL驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency !-- JWT三件套注意版本要一致 -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.11.5/version /dependency !-- Lombok减少getter/setter样板代码 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies说明一下选型逻辑MyBatis-Plus是毕业设计场景下的最优解它的BaseMapper直接提供selectById、selectPage等方法单表CRUD基本不用写SQLJWT用来做登录态管理比会话Cookie更适合前后端分离。三个jjwt依赖必须一起引入缺一个启动时就会报类找不到不少同学栽在这上面。接着是application.yml的核心配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/hrms?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0参数要点url里的serverTimezoneAsia/Shanghai必须加否则MySQL 8驱动默认用UTC查出来的时间会差8小时jackson配置同时指定了日期格式和时区解决后端返回给前端的时间格式问题map-underscore-to-camel-case让数据库的dept_id自动映射成实体类的deptId这是MyBatis-Plus的默认行为这里显式写出来只是提醒你检查。log-impl用StdOutImpl可以在控制台看到SQL语句联调时排查问题非常有用。3.2 JWT登录与拦截器token怎么生成、怎么校验登录流程是前端把username和password传到/auth/login后端比对BCrypt加密密码成功后生成token返回前端后续请求在Header里带Authorization字段。拦截器在每次请求进来时检查token校验通过才放行。先看JwtUtil一个工具类搞定生成和解析Component public class JwtUtil { // 密钥生产环境不要硬编码这里方便演示 private final String secret your-secret-key-please-change-in-production; // 过期时间24小时单位毫秒 private final long expire 86400000; public String createToken(Long userId, String username) { return Jwts.builder() .setSubject(String.valueOf(userId)) .claim(username, username) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() expire)) .signWith(Keys.hmacShaKeyFor(secret.getBytes()), SignatureAlgorithm.HS256) .compact(); } public Claims parseToken(String token) { return Jwts.parserBuilder() .setSigningKey(Keys.hmacShaKeyFor(secret.getBytes())) .build() .parseClaimsJws(token) .getBody(); } }这里要特别说明signWith的写法0.11.5版本的JJWT要求同时传入Key对象和签名算法老教程里的signWith(SignatureAlgorithm.HS256, secret)在新版本会报Deprecated甚至直接抛异常。parseToken解析失败时会抛出JwtException拦截器里要捕获并返回401。登录接口和拦截器配合起来是这个样子RestController RequestMapping(/auth) public class AuthController { Autowired private UserService userService; Autowired private JwtUtil jwtUtil; PostMapping(/login) public Result login(RequestBody LoginRequest req) { User user userService.lambdaQuery().eq(User::getUsername, req.getUsername()).one(); if (user null || !BCrypt.checkpw(req.getPassword(), user.getPassword())) { return Result.error(500, 用户名或密码错误); } if (user.getStatus() 0) { return Result.error(500, 账号已被禁用); } String token jwtUtil.createToken(user.getId(), user.getUsername()); return Result.success(token); } }登录接口有几个容易被问到的细节。密码比对用BCrypt.checkpw不要把数据库里的密文解密再比较BCrypt是不可逆哈希状态判断放在密码校验之后避免通过错误提示区分“账号不存在”和“密码错误”被当成安全问题。拦截器代码如下Component public class JwtInterceptor implements HandlerInterceptor { Autowired private JwtUtil jwtUtil; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (request.getMethod().equals(OPTIONS)) { return true; // 放行跨域预检请求 } String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { token token.substring(7); } try { Claims claims jwtUtil.parseToken(token); request.setAttribute(userId, claims.getSubject()); return true; } catch (Exception e) { response.setStatus(401); response.setContentType(application/json;charsetUTF-8); response.getWriter().write({\code\:401,\message\:\未登录或token已过期\}); return false; } } }这里的token前缀Bearer是行业惯例前端axios里会统一拼接。OPTIONS预检请求必须放行否则前端跨域调用时会被拦截在预检阶段。返回401时直接用response写出JSON保证前端拦截器能拿到统一的code。拦截器注册到WebMvcConfigurer并放行登录接口和静态资源路径注册代码就不展开了只要记得excludePathPatterns(/auth/login, /doc.html, /webjars/**)就行。3.3 员工管理接口与MyBatis-Plus分页参数员工管理是整个系统最核心的CRUD接口做了分页查询、条件搜索、新增修改删除。分页参数用pageNum和pageSizeController里转换成MyBatis-Plus的Page对象。RestController RequestMapping(/api/employee) public class EmployeeController { Autowired private EmployeeService employeeService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword, RequestParam(required false) Long deptId) { PageEmployee page new Page(pageNum, pageSize); LambdaQueryWrapperEmployee wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(keyword), Employee::getName, keyword) .or().like(StringUtils.hasText(keyword), Employee::getEmpNo, keyword) .eq(deptId ! null, Employee::getDeptId, deptId) .orderByDesc(Employee::getCreateTime); PageEmployee result employeeService.page(page, wrapper); return Result.success(result); } PostMapping(/save) public Result save(RequestBody Employee employee) { if (employee.getId() null) { employee.setEmpNo(generateEmpNo()); employeeService.save(employee); } else { employeeService.updateById(employee); } return Result.success(); } PostMapping(/delete/{id}) public Result delete(PathVariable Long id) { employeeService.removeById(id); return Result.success(); } }有几个参数值得展开。pageNum默认1、pageSize默认10前端没传时不会报错keyword用like匹配姓名和工号注意这里的or()会让条件变成(keyword匹配姓名)或(工号匹配)需要加括号时用and(nested)包裹否则语义会跑偏这是LambdaQueryWrapper最容易写错的地方。新增和修改共用/save接口判断依据是id是否为空前端表单只需要传同一套JSON结构。generateEmpNo()常见做法是取当前日期加序列号比如EMP20250101001实现上用日期格式化再拼上随机或自增数字。这里不贴具体代码因为每个系统的工号规则不一样答辩时老师反而会问“你的工号规则怎么设计的”能讲清楚就行。4. Vue前端落地路由守卫、axios封装与员工管理页面后端接口有了前端就是把这些接口变成能点的页面。这一章用Vite Vue 3 Element Plus这是目前最主流的组合vue安装及环境配置的教程也最好找。如果你学校要求Vue 2核心逻辑是一样的只是API写法略有差异。4.1 工程初始化与目录规划springboot vue 项目的标准骨架创建前端工程用Vite最快npm create vitelatest hrms-web -- --template vue cd hrms-web npm install npm install element-plus axios vue-routerVite创建的项目结构干净src目录下我一般再建这几个子目录api放axios请求函数router放路由配置views放页面组件utils放公共工具。有点规模的springboot vue项目都会用这套分层页面多的时候不会乱。配套还需要在main.js里全局注册Element Plusimport { createApp } from vue import App from ./App.vue import ElementPlus from element-plus import element-plus/dist/index.css import router from ./router/index.js const app createApp(App) app.use(ElementPlus) app.use(router) app.mount(#app)Element Plus按需引入更省包体积但毕业设计项目组件数量有限全量引入能少配一个按需插件省下的时间用来写业务更划算。全局注册之后el-table、el-dialog这些组件可以直接在任意页面使用不用每个文件import一次。4.2 axios封装与登录态持久化token往哪放、401怎么办axios封装是前端必写的一层所有请求统一走这一个实例才能在响应里统一处理token失效。下面是utils/request.js的完整写法import axios from axios import { ElMessage } from element-plus import router from ../router/index.js 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 }) // 响应拦截器统一处理业务码和401 let isRedirecting false request.interceptors.response.use( response { const res response.data if (res.code 200) { return res } ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) if (!isRedirecting) { isRedirecting true ElMessage.error(登录已过期请重新登录) router.push(/login) } } return Promise.reject(error) } ) export default request几个关键点baseURL写/api配合Vite的代理配置开发环境下请求全部转发到后端8080避开了跨域问题token存localStorage刷新页面不丢失isRedirecting这个标志变量是防止多个接口同时返回401时路由被重复跳转导致页面闪烁。这些细节在springboot面试题里也常被拿出来问属于“你说你做过前后端分离”的实证。路由守卫在router/index.js里让未登录的用户只能访问登录页import { createRouter, createWebHashHistory } from vue-router const routes [ { path: /login, component: () import(../views/Login.vue), meta: { title: 登录 } }, { path: /, component: () import(../layout/Index.vue), redirect: /employee, children: [ { path: employee, component: () import(../views/Employee.vue) }, { path: dept, component: () import(../views/Dept.vue) }, { path: attendance, component: () import(../views/Attendance.vue) }, { path: salary, component: () import(../views/Salary.vue) } ] } ] const router createRouter({ history: createWebHashHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else if (!token) { next(/login) } else { next() } }) export default router这里我特意用了createWebHashHistory而不是createWebHistory后面章节会解释在打包部署阶段这个选择能省掉一个大坑。路由守卫逻辑很简单目标路由是登录页就放行没有token就跳登录页。毕业设计阶段不需要做细粒度的角色路由拦截页面级控制就够用了。4.3 员工管理页面表格、搜索、分页和弹窗表单员工管理页面是工作量最大的一个页面它集中了列表查询、搜索、分页、弹窗表单、编辑回显这五件事。页面结构用Element Plus拼装关键部分拆开看。模板部分template div classemployee-page el-card el-form inline el-form-item label关键字 el-input v-modelquery.keyword placeholder姓名或工号 clearable keyup.enterhandleSearch / /el-form-item el-form-item label部门 el-select v-modelquery.deptId clearable placeholder全部部门 el-option v-ford in deptList :keyd.id :labeld.name :valued.id / /el-select /el-form-item el-form-item el-button typeprimary clickhandleSearch查询/el-button el-button typesuccess clickopenDialog()新增员工/el-button /el-form-item /el-form el-table :datatableData border stripe el-table-column propempNo label工号 width120 / el-table-column propname label姓名 width100 / el-table-column propdeptName label部门 width120 / el-table-column propphone label手机号 width130 / el-table-column prophireDate label入职日期 width120 / el-table-column label操作 fixedright width150 template #default{ row } el-button link typeprimary clickopenDialog(row)编辑/el-button el-button link typedanger clickhandleDelete(row.id)删除/el-button /template /el-table-column /el-table el-pagination v-model:current-pagequery.pageNum v-model:page-sizequery.pageSize :totaltotal layouttotal, prev, pager, next current-changefetchData / /el-card /div /template对应的脚本逻辑import { reactive, ref, onMounted } from vue import request from ../utils/request.js const query reactive({ pageNum: 1, pageSize: 10, keyword: , deptId: null }) const tableData ref([]) const total ref(0) const fetchData async () { const res await request.get(/employee/list, { params: query }) tableData.value res.data.records total.value res.data.total } const handleSearch () { query.pageNum 1 // 搜索时必须回到第一页否则可能停在空页 fetchData() } const handleDelete async (id) { await request.post(/employee/delete/ id) ElMessage.success(删除成功) fetchData() } onMounted(fetchData)这里的核心细节是handleSearch里先把pageNum重置为1。很多新手翻车就在这在第5页搜索一个关键词结果返回0条因为第5页确实没有匹配数据但用户会感觉“搜索坏了”。分页组件用v-model绑定pageNum和pageSize页码变化时自动触发fetchData这是一个双向绑定的典型用法。新增和编辑共用一个弹窗打开时根据是否有row来区分。编辑时用row直接把表单数据灌进去用reactive对象承接。提交时调用/save接口成功后关闭弹窗并刷新列表。表单校验可以用el-form的rules属性必填项配好就行这块代码量大但逻辑简单照着Element Plus官方示例改就能过。5. 前后端联调避坑跨域、日期串台与打包路径的翻车现场联调阶段是毕设心态最容易崩的阶段。前面单跑后端、单跑前端都没问题一连起来全是问题而且错误信息五花八门。这里把我见过的、自己踩过的5个高频坑按“现象→原因→解决”写清楚都是血泪经验。5.1 跨域浏览器直接拦了你的请求现象前端启动在5173端口后端在8080端口登录接口调用后F12控制台报错“blocked by CORS policy”接口在Postman里完全正常。原因前后端分离后端口不同浏览器认为这是跨域请求。后端如果不返回CORS响应头浏览器就把响应拦截掉。这跟后端代码没关系是浏览器安全策略干的。解决开发环境下最省事的方案是用Vite代理前端看到的是同源请求。在vite.config.js里配置export default defineConfig({ server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })配置后axios的baseURL直接写/api浏览器请求的是http://localhost:5173/api/xxxVite把请求转发给后端8080。changeOrigin设为true后后端看到的请求Host是8080不会因为Host不一致拒绝。生产环境前后端同源部署时这个代理不用管但如果前端单独部署在nginx上就要在nginx里写类似的proxy_pass。如果坚持要后端开CORS记住用allowedOriginPatterns而不是allowedOrigins前者才能在携带Cookie或凭证时正常工作。5.2 日期时区早上8点凭空消失现象数据库里存的时间是2025-01-01 08:00:00后端查询返回给前端变成了2025-01-01 00:00:00或者前端选了1月1日传到后端变成12月31日。原因两个叠加。MySQL驱动连接串没指定serverTimezone时默认UTC和东八区差8小时Jackson序列化LocalDateTime时没配格式输出的字符串前端没法正确解析。日期时间字段在数据库、后端、前端三个环节各理解一遍任何一环偏差都会串台。解决连接串加serverTimezoneAsia/Shanghaiapplication.yml里配jackson的date-format和时间区。后端实体类里日期字段用LocalDate和LocalDateTime别用java.util.Date前者是类型安全的序列化行为也更可预测。前端传参时如果格式是“yyyy-MM-dd”后端Controller用DateTimeFormat(pattern yyyy-MM-dd)接收或者全局统一成yyyy-MM-dd HH:mm:ss。这套组合搞定后时间相关的灵异现象基本绝迹。5.3 前端打包放进SpringBoot刷新404和静态资源路径现象前端执行npm run build后把dist目录里的文件复制到SpringBoot的src/main/resources/static下启动后端访问首页正常但点击菜单跳转后再按F5刷新页面变成404或者页面能开但JS和CSS文件加载不出来。原因前端路由用了history模式刷新时浏览器请求后端服务器的具体路径SpringBoot没有对应的Controller返回404静态资源404是因为Vite默认的base是绝对路径/打包产物里的js/css引用的是根路径部署在非根路径时全挂。解决毕设最稳的方案是前端路由改用createWebHashHistoryURL变成http://localhost:8080/#/employee刷新时请求的始终是index.html天然无痛。打包时再在vite.config.js里设置base: ./让静态资源用相对路径加载能兼容各种部署路径。这两个改动加起来不超过10行能省掉一晚上的排查时间。如果你为了好看非要history模式那需要在SpringBoot写一个转发Controller把非接口路径转发到/index.html属于能做但没必要。5.4 Token失效明明刚登录请求却报401现象前端登录成功后调员工列表接口直接返回401或者在页面上停了一会儿再操作又是401。原因拦截器把不需要鉴权的请求也拦了。登录接口本身没放行登录请求进来时还没有token自然被拦截另一种是token过期时间设得太短比如30分钟页面看久了再去操作就失效。解决拦截器排除路径要列全至少包括/auth/login和静态资源。我的习惯是先在拦截器里打印出request.getRequestURI()看到底是哪个请求被拦再对照白名单逐条排除。token过期时间直接设24小时毕业设计没人会考核这点安全细节别给自己找麻烦。前端响应拦截器里对401统一处理清token跳登录页这个前面已经写了。另外注意多个请求同时401会导致重复跳转用标志变量控制一下。5.5 端口占用和MySQL时区报警现象后端启动直接崩控制台报“Port 8080 was already in use”或连接MySQL时报“The server time zone value Öйú±ê׼ʱ¼ä is unrecognized”。原因端口被其他进程占了多见于演示电脑上之前起过别的服务没关干净MySQL的时区配置是中文系统默认值驱动不认这种非标准时区写法。解决端口占用时用netstat -ano | findstr 8080查到PID然后taskkill /pid 进程号 /f或者干脆改server.port换一个不冲突的端口。时区问题还是那句连接串写死serverTimezoneAsia/Shanghai。这两个都是环境问题不属于代码bug但如果在答辩现场遇到会比代码bug更尴尬——提前在答辩用的电脑上完整跑一遍能过滤掉80%的环境坑。6. 答辩前验证清单与两个加分技巧让演示流程不出岔子临近答辩代码功能齐全只是第一步演示流程不出岔子才是最后一道坎。我建议按下面的清单在答辩前完整走一遍验证流程。首要一条是找一台干净电脑把数据库SQL脚本、后端源码、前端源码拉下来重新部署一遍。数据库要导出完整的.sql文件包含建库建表语句和演示数据至少准备50条员工记录、近一个月的考勤、半年以上的薪资数据页面有数据才显得系统真实。部署完再完整走一遍“登录→查员工→新增→编辑→删除→看考勤→看薪资”每一步都截个图或者录个屏。真机现场万一翻车录屏是最后的后悔药老师问起来就说“现场网络环境受限请看录屏演示”。验证之外还有两个技巧能让答辩印象分明显提升。第一个是密码存储用BCrypt加密并主动在答辩时讲一句“密码没有明文保存用的是BCrypt加盐哈希”。就这一句话能让老师觉得你考虑过安全问题。第二个技巧是加一个操作日志切面用AOP记录关键操作的后台日志代码量很小但能展示工程意识。Aspect Component public class LogAspect { Around(annotation(com.hrms.annotation.Log)) public Object record(ProceedingJoinPoint point) throws Throwable { long start System.currentTimeMillis(); Object result point.proceed(); long cost System.currentTimeMillis() - start; String method point.getSignature().getName(); System.out.println([操作日志] method 耗时 cost ms); return result; } }这段代码在核心接口上打上Log注解就能统一输出方法名和耗时配合控制台日志就能画出系统的“操作黑匣子”。答辩时演示一个新增员工的操作然后切到控制台展示对应日志效果比单纯念PPT好很多。做毕设这些年我的体会是人事管理系统这种题目的难点从来不在技术本身而在于你能不能把每个模块讲成一个“闭环”登录怎么鉴权、数据怎么流转、异常怎么兜底。把这套前后端分离的骨架跑通再按上面的清单和技巧打磨一遍你在答辩台上讲出“我为什么选这个方案、这个坑怎么解决的”比背十篇论文都有用。希望帮到你。本文还有配套的精品资源点击获取 SpringBoot+Vue人事管理系统毕设：前后端分离完整实战指南
简介这是一套基于SpringBootVue实现的前后端分离人事管理系统适合正在准备毕业设计、课程项目的计算机专业学生以及希望快速搭建人事管理平台的开发者。项目围绕用户认证、员工信息、组织架构、考勤休假、薪资福利、系统管理等核心模块展开涵盖从后端RESTful API到前端交互界面的完整实现思路。压缩包共185个文件大小仅2MB主要包括81个Java后端源码、29个JavaScript与24个Vue前端页面、14个XML配置、10个Mapper映射文件以及1个SQL数据库脚本等便于直接导入数据库并运行调试。目前已有71人学习下载适合作为课题参考与二次开发基础。通过该项目可掌握Spring Security权限控制、MyBatis数据持久化、VueElement UI页面构建等关键技术并学习到前后端联调、项目结构划分及工程化配置的实用经验。1. 人事管理系统毕设选题为什么SpringBootVue是风险最低的全栈方案SpringBootVue实现人事管理系统是Java方向毕业设计里性价比最高的一张牌。它不像商城系统那么卷也不像纯增删改查那样显得没工作量模块上正好覆盖登录鉴权、员工档案、部门组织、考勤记录、薪资台账这几条主线前端有列表、表单、弹窗和路由守卫后端有拦截器、分页和统一返回结构一套做下来就是一个完整的前后端分离闭环。这篇笔记直接拆这套方案从数据库设计讲到接口实现再到Vue页面与打包部署最后把跨域、日期串台、打包路径这几个高频翻车点一次说清。按这个路径走两周内跑通主体用来应付开题、中期检查和答辩完全够用。2. 人事管理系统的模块拆解与技术选型先定边界再写代码做毕设最容易犯的错不是代码写不出来而是一上来就建库建表写了三天发现角色和部门的关系理不清又回头改表。所以这一章先把系统的边界和表结构定下来这是答辩必问也是后面写代码的地基。2.1 系统角色与核心模块管理员、员工、部门、考勤、薪资怎么划分人事管理系统最常见的角色划分是两类管理员和普通员工。管理员负责维护员工档案、管理部门结构、录入考勤数据、核算薪资普通员工登录后只能查看自己的信息修改自己的手机号和邮箱。有的题目会额外要求一个HR角色本质上是管理员的权限子集毕业设计阶段没有必要把权限模型做得很复杂一张用户表里加一个role字段配合前端菜单按角色渲染就足够应付提问了。模块划分推荐按业务主线切成六块登录与个人中心、员工档案管理、部门管理、考勤管理、薪资管理、可视化统计。其中可视化统计是加分项用ECharts画部门人数分布和近半年入职趋势答辩演示时一眼就能让老师看到工作量的厚度。如果时间紧张只想保底员工档案、部门、考勤这三块已经能撑起一篇合格毕设的主体。这里有一个边界要提前想清楚不要顺手把请假审批也做进来。请假是流程审批需要状态流转、审批人和审批记录而考勤只是打卡记录一张表加几行数据就是全部。题目叫“人事管理系统”时把考勤做成记录查询就足够了一旦卷进流程设计工作量会翻倍答辩还容易被追问“你的审批状态机怎么设计的”到时候很难收场。选型上SpringBootVue是毕业设计风险最低的组合SpringBoot的自动配置让项目结构清晰微服务时代它依然是面试里绕不开的框架Vue的组件化让页面复用简单。这组合在国内教程多、案例多遇到报错一搜就能找到答案答辩被问“springboot项目结构怎么组织”“vue路由守卫怎么写”也都是经典题准备起来不费劲。2.2 数据库表设计五张核心表与字段约定表设计是答辩必问的所以字段命名和类型要能讲出理由。下面这套结构建议直接抄主键统一用bigint自增id所有表都带create_time字段配合MyBatis-Plus的自动填充省得每个新增接口手写时间。用户表、员工表、部门表、考勤表、薪资表是五张核心表关系也不复杂部门表是树形的有parent_id员工表挂在部门下dept_id外键考勤表和薪资表都以员工表的id作为emp_id关联。下面是每张表的关键字段和说明。表名关键字段类型约定说明userid, username, password, real_name, role, dept_id, statuspassword用varchar(100)用户表存登录账号密码存BCrypt加密串deptid, name, parent_id, leaderparent_id默认0为根部门部门表自关联树形结构employeeid, emp_no, name, gender, phone, email, dept_id, position, hire_date, statusemp_no唯一gender用tinyint员工档案表工号是业务主键attendanceid, emp_id, work_date, check_in_time, check_out_time, status时间都用datetime考勤记录表一个员工一天一行salaryid, emp_id, month, base_salary, bonus, deduction, actual_salary金额用decimal(10,2)薪资表month格式统一2025-01几个字段约定值得单独强调。密码字段必须用varchar(100)因为BCrypt加密后的密文固定60个字符用varchar(50)会导致插入时直接报错或截断这个我帮人改错过。性别和状态这类字段统一用tinyint前端用字典映射成“男/女”“启用/禁用”比直接存中文干净得多。金额字段一律decimal(10,2)绝对不要用double答辩时被问到“为什么金额不用浮点型”这是一个标准答案浮点在计算金钱时会有精度损失。2.3 Restful接口规范与统一返回结构前后端分离项目里接口约定是两个人的事在毕设里就是“上一秒的你”和“下一秒的你”不统一后面联调就是灾难。我一般会先写一个Result类作为所有接口的返回包装字段固定三个code、message、data。code200代表成功500代表业务异常401代表未登录或token失效。这样前端axios的响应拦截器看到code不等于200就可以统一弹提示不用每个页面各写一遍错误处理。接口路径按资源来命名/api/employee/list是分页查询/api/employee/{id}是查详情/api/employee是新增和修改/api/employee/delete/{id}是删除考勤和薪资同理。分页参数前后端约定为pageNum和pageSize虽然MyBatis-Plus原生用的是current和size但Controller里做一层转换成本很低却能保证前端代码的可读性。一个常见的疑问是为什么删除不用Restful风格的DELETE我的做法是删除用POST因为毕设里很多过滤器和拦截器默认只处理POST出现问题时的排查成本低很多。答辩时能讲清楚“规范是死的实现要配合业务选型”比死记一条标准要好。3. SpringBoot后端落地依赖配置、JWT鉴权与员工接口后端是整套系统的承重墙我建议按“工程初始化→登录鉴权→业务接口”的顺序写先跑起来再填肉。这一章用的组合是SpringBoot 2.7 MyBatis-Plus JWT覆盖了毕设答辩最常被问到的后端考点。3.1 项目结构与pom依赖一份能直接跑的配置创建项目时常见做法是在IDEA里用Spring Initializr生成或者直接去start.spring.io下载压缩包再导入。SpringBoot版本请选2.7.x不要一上来追3.x——3.x对JDK17有硬性要求很多实验室电脑还是JDK8版本不匹配连启动都过不去这种“springboot版本太高”的翻车最不值得。pom.xml里的核心依赖如下parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version /parent dependencies !-- Web启动器自带Tomcat和Jackson -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis-Plus 3.5.x封装CRUD和分页 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- MySQL驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency !-- JWT三件套注意版本要一致 -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.11.5/version /dependency !-- Lombok减少getter/setter样板代码 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies说明一下选型逻辑MyBatis-Plus是毕业设计场景下的最优解它的BaseMapper直接提供selectById、selectPage等方法单表CRUD基本不用写SQLJWT用来做登录态管理比会话Cookie更适合前后端分离。三个jjwt依赖必须一起引入缺一个启动时就会报类找不到不少同学栽在这上面。接着是application.yml的核心配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/hrms?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0参数要点url里的serverTimezoneAsia/Shanghai必须加否则MySQL 8驱动默认用UTC查出来的时间会差8小时jackson配置同时指定了日期格式和时区解决后端返回给前端的时间格式问题map-underscore-to-camel-case让数据库的dept_id自动映射成实体类的deptId这是MyBatis-Plus的默认行为这里显式写出来只是提醒你检查。log-impl用StdOutImpl可以在控制台看到SQL语句联调时排查问题非常有用。3.2 JWT登录与拦截器token怎么生成、怎么校验登录流程是前端把username和password传到/auth/login后端比对BCrypt加密密码成功后生成token返回前端后续请求在Header里带Authorization字段。拦截器在每次请求进来时检查token校验通过才放行。先看JwtUtil一个工具类搞定生成和解析Component public class JwtUtil { // 密钥生产环境不要硬编码这里方便演示 private final String secret your-secret-key-please-change-in-production; // 过期时间24小时单位毫秒 private final long expire 86400000; public String createToken(Long userId, String username) { return Jwts.builder() .setSubject(String.valueOf(userId)) .claim(username, username) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() expire)) .signWith(Keys.hmacShaKeyFor(secret.getBytes()), SignatureAlgorithm.HS256) .compact(); } public Claims parseToken(String token) { return Jwts.parserBuilder() .setSigningKey(Keys.hmacShaKeyFor(secret.getBytes())) .build() .parseClaimsJws(token) .getBody(); } }这里要特别说明signWith的写法0.11.5版本的JJWT要求同时传入Key对象和签名算法老教程里的signWith(SignatureAlgorithm.HS256, secret)在新版本会报Deprecated甚至直接抛异常。parseToken解析失败时会抛出JwtException拦截器里要捕获并返回401。登录接口和拦截器配合起来是这个样子RestController RequestMapping(/auth) public class AuthController { Autowired private UserService userService; Autowired private JwtUtil jwtUtil; PostMapping(/login) public Result login(RequestBody LoginRequest req) { User user userService.lambdaQuery().eq(User::getUsername, req.getUsername()).one(); if (user null || !BCrypt.checkpw(req.getPassword(), user.getPassword())) { return Result.error(500, 用户名或密码错误); } if (user.getStatus() 0) { return Result.error(500, 账号已被禁用); } String token jwtUtil.createToken(user.getId(), user.getUsername()); return Result.success(token); } }登录接口有几个容易被问到的细节。密码比对用BCrypt.checkpw不要把数据库里的密文解密再比较BCrypt是不可逆哈希状态判断放在密码校验之后避免通过错误提示区分“账号不存在”和“密码错误”被当成安全问题。拦截器代码如下Component public class JwtInterceptor implements HandlerInterceptor { Autowired private JwtUtil jwtUtil; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (request.getMethod().equals(OPTIONS)) { return true; // 放行跨域预检请求 } String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { token token.substring(7); } try { Claims claims jwtUtil.parseToken(token); request.setAttribute(userId, claims.getSubject()); return true; } catch (Exception e) { response.setStatus(401); response.setContentType(application/json;charsetUTF-8); response.getWriter().write({\code\:401,\message\:\未登录或token已过期\}); return false; } } }这里的token前缀Bearer是行业惯例前端axios里会统一拼接。OPTIONS预检请求必须放行否则前端跨域调用时会被拦截在预检阶段。返回401时直接用response写出JSON保证前端拦截器能拿到统一的code。拦截器注册到WebMvcConfigurer并放行登录接口和静态资源路径注册代码就不展开了只要记得excludePathPatterns(/auth/login, /doc.html, /webjars/**)就行。3.3 员工管理接口与MyBatis-Plus分页参数员工管理是整个系统最核心的CRUD接口做了分页查询、条件搜索、新增修改删除。分页参数用pageNum和pageSizeController里转换成MyBatis-Plus的Page对象。RestController RequestMapping(/api/employee) public class EmployeeController { Autowired private EmployeeService employeeService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword, RequestParam(required false) Long deptId) { PageEmployee page new Page(pageNum, pageSize); LambdaQueryWrapperEmployee wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(keyword), Employee::getName, keyword) .or().like(StringUtils.hasText(keyword), Employee::getEmpNo, keyword) .eq(deptId ! null, Employee::getDeptId, deptId) .orderByDesc(Employee::getCreateTime); PageEmployee result employeeService.page(page, wrapper); return Result.success(result); } PostMapping(/save) public Result save(RequestBody Employee employee) { if (employee.getId() null) { employee.setEmpNo(generateEmpNo()); employeeService.save(employee); } else { employeeService.updateById(employee); } return Result.success(); } PostMapping(/delete/{id}) public Result delete(PathVariable Long id) { employeeService.removeById(id); return Result.success(); } }有几个参数值得展开。pageNum默认1、pageSize默认10前端没传时不会报错keyword用like匹配姓名和工号注意这里的or()会让条件变成(keyword匹配姓名)或(工号匹配)需要加括号时用and(nested)包裹否则语义会跑偏这是LambdaQueryWrapper最容易写错的地方。新增和修改共用/save接口判断依据是id是否为空前端表单只需要传同一套JSON结构。generateEmpNo()常见做法是取当前日期加序列号比如EMP20250101001实现上用日期格式化再拼上随机或自增数字。这里不贴具体代码因为每个系统的工号规则不一样答辩时老师反而会问“你的工号规则怎么设计的”能讲清楚就行。4. Vue前端落地路由守卫、axios封装与员工管理页面后端接口有了前端就是把这些接口变成能点的页面。这一章用Vite Vue 3 Element Plus这是目前最主流的组合vue安装及环境配置的教程也最好找。如果你学校要求Vue 2核心逻辑是一样的只是API写法略有差异。4.1 工程初始化与目录规划springboot vue 项目的标准骨架创建前端工程用Vite最快npm create vitelatest hrms-web -- --template vue cd hrms-web npm install npm install element-plus axios vue-routerVite创建的项目结构干净src目录下我一般再建这几个子目录api放axios请求函数router放路由配置views放页面组件utils放公共工具。有点规模的springboot vue项目都会用这套分层页面多的时候不会乱。配套还需要在main.js里全局注册Element Plusimport { createApp } from vue import App from ./App.vue import ElementPlus from element-plus import element-plus/dist/index.css import router from ./router/index.js const app createApp(App) app.use(ElementPlus) app.use(router) app.mount(#app)Element Plus按需引入更省包体积但毕业设计项目组件数量有限全量引入能少配一个按需插件省下的时间用来写业务更划算。全局注册之后el-table、el-dialog这些组件可以直接在任意页面使用不用每个文件import一次。4.2 axios封装与登录态持久化token往哪放、401怎么办axios封装是前端必写的一层所有请求统一走这一个实例才能在响应里统一处理token失效。下面是utils/request.js的完整写法import axios from axios import { ElMessage } from element-plus import router from ../router/index.js 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 }) // 响应拦截器统一处理业务码和401 let isRedirecting false request.interceptors.response.use( response { const res response.data if (res.code 200) { return res } ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) if (!isRedirecting) { isRedirecting true ElMessage.error(登录已过期请重新登录) router.push(/login) } } return Promise.reject(error) } ) export default request几个关键点baseURL写/api配合Vite的代理配置开发环境下请求全部转发到后端8080避开了跨域问题token存localStorage刷新页面不丢失isRedirecting这个标志变量是防止多个接口同时返回401时路由被重复跳转导致页面闪烁。这些细节在springboot面试题里也常被拿出来问属于“你说你做过前后端分离”的实证。路由守卫在router/index.js里让未登录的用户只能访问登录页import { createRouter, createWebHashHistory } from vue-router const routes [ { path: /login, component: () import(../views/Login.vue), meta: { title: 登录 } }, { path: /, component: () import(../layout/Index.vue), redirect: /employee, children: [ { path: employee, component: () import(../views/Employee.vue) }, { path: dept, component: () import(../views/Dept.vue) }, { path: attendance, component: () import(../views/Attendance.vue) }, { path: salary, component: () import(../views/Salary.vue) } ] } ] const router createRouter({ history: createWebHashHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else if (!token) { next(/login) } else { next() } }) export default router这里我特意用了createWebHashHistory而不是createWebHistory后面章节会解释在打包部署阶段这个选择能省掉一个大坑。路由守卫逻辑很简单目标路由是登录页就放行没有token就跳登录页。毕业设计阶段不需要做细粒度的角色路由拦截页面级控制就够用了。4.3 员工管理页面表格、搜索、分页和弹窗表单员工管理页面是工作量最大的一个页面它集中了列表查询、搜索、分页、弹窗表单、编辑回显这五件事。页面结构用Element Plus拼装关键部分拆开看。模板部分template div classemployee-page el-card el-form inline el-form-item label关键字 el-input v-modelquery.keyword placeholder姓名或工号 clearable keyup.enterhandleSearch / /el-form-item el-form-item label部门 el-select v-modelquery.deptId clearable placeholder全部部门 el-option v-ford in deptList :keyd.id :labeld.name :valued.id / /el-select /el-form-item el-form-item el-button typeprimary clickhandleSearch查询/el-button el-button typesuccess clickopenDialog()新增员工/el-button /el-form-item /el-form el-table :datatableData border stripe el-table-column propempNo label工号 width120 / el-table-column propname label姓名 width100 / el-table-column propdeptName label部门 width120 / el-table-column propphone label手机号 width130 / el-table-column prophireDate label入职日期 width120 / el-table-column label操作 fixedright width150 template #default{ row } el-button link typeprimary clickopenDialog(row)编辑/el-button el-button link typedanger clickhandleDelete(row.id)删除/el-button /template /el-table-column /el-table el-pagination v-model:current-pagequery.pageNum v-model:page-sizequery.pageSize :totaltotal layouttotal, prev, pager, next current-changefetchData / /el-card /div /template对应的脚本逻辑import { reactive, ref, onMounted } from vue import request from ../utils/request.js const query reactive({ pageNum: 1, pageSize: 10, keyword: , deptId: null }) const tableData ref([]) const total ref(0) const fetchData async () { const res await request.get(/employee/list, { params: query }) tableData.value res.data.records total.value res.data.total } const handleSearch () { query.pageNum 1 // 搜索时必须回到第一页否则可能停在空页 fetchData() } const handleDelete async (id) { await request.post(/employee/delete/ id) ElMessage.success(删除成功) fetchData() } onMounted(fetchData)这里的核心细节是handleSearch里先把pageNum重置为1。很多新手翻车就在这在第5页搜索一个关键词结果返回0条因为第5页确实没有匹配数据但用户会感觉“搜索坏了”。分页组件用v-model绑定pageNum和pageSize页码变化时自动触发fetchData这是一个双向绑定的典型用法。新增和编辑共用一个弹窗打开时根据是否有row来区分。编辑时用row直接把表单数据灌进去用reactive对象承接。提交时调用/save接口成功后关闭弹窗并刷新列表。表单校验可以用el-form的rules属性必填项配好就行这块代码量大但逻辑简单照着Element Plus官方示例改就能过。5. 前后端联调避坑跨域、日期串台与打包路径的翻车现场联调阶段是毕设心态最容易崩的阶段。前面单跑后端、单跑前端都没问题一连起来全是问题而且错误信息五花八门。这里把我见过的、自己踩过的5个高频坑按“现象→原因→解决”写清楚都是血泪经验。5.1 跨域浏览器直接拦了你的请求现象前端启动在5173端口后端在8080端口登录接口调用后F12控制台报错“blocked by CORS policy”接口在Postman里完全正常。原因前后端分离后端口不同浏览器认为这是跨域请求。后端如果不返回CORS响应头浏览器就把响应拦截掉。这跟后端代码没关系是浏览器安全策略干的。解决开发环境下最省事的方案是用Vite代理前端看到的是同源请求。在vite.config.js里配置export default defineConfig({ server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })配置后axios的baseURL直接写/api浏览器请求的是http://localhost:5173/api/xxxVite把请求转发给后端8080。changeOrigin设为true后后端看到的请求Host是8080不会因为Host不一致拒绝。生产环境前后端同源部署时这个代理不用管但如果前端单独部署在nginx上就要在nginx里写类似的proxy_pass。如果坚持要后端开CORS记住用allowedOriginPatterns而不是allowedOrigins前者才能在携带Cookie或凭证时正常工作。5.2 日期时区早上8点凭空消失现象数据库里存的时间是2025-01-01 08:00:00后端查询返回给前端变成了2025-01-01 00:00:00或者前端选了1月1日传到后端变成12月31日。原因两个叠加。MySQL驱动连接串没指定serverTimezone时默认UTC和东八区差8小时Jackson序列化LocalDateTime时没配格式输出的字符串前端没法正确解析。日期时间字段在数据库、后端、前端三个环节各理解一遍任何一环偏差都会串台。解决连接串加serverTimezoneAsia/Shanghaiapplication.yml里配jackson的date-format和时间区。后端实体类里日期字段用LocalDate和LocalDateTime别用java.util.Date前者是类型安全的序列化行为也更可预测。前端传参时如果格式是“yyyy-MM-dd”后端Controller用DateTimeFormat(pattern yyyy-MM-dd)接收或者全局统一成yyyy-MM-dd HH:mm:ss。这套组合搞定后时间相关的灵异现象基本绝迹。5.3 前端打包放进SpringBoot刷新404和静态资源路径现象前端执行npm run build后把dist目录里的文件复制到SpringBoot的src/main/resources/static下启动后端访问首页正常但点击菜单跳转后再按F5刷新页面变成404或者页面能开但JS和CSS文件加载不出来。原因前端路由用了history模式刷新时浏览器请求后端服务器的具体路径SpringBoot没有对应的Controller返回404静态资源404是因为Vite默认的base是绝对路径/打包产物里的js/css引用的是根路径部署在非根路径时全挂。解决毕设最稳的方案是前端路由改用createWebHashHistoryURL变成http://localhost:8080/#/employee刷新时请求的始终是index.html天然无痛。打包时再在vite.config.js里设置base: ./让静态资源用相对路径加载能兼容各种部署路径。这两个改动加起来不超过10行能省掉一晚上的排查时间。如果你为了好看非要history模式那需要在SpringBoot写一个转发Controller把非接口路径转发到/index.html属于能做但没必要。5.4 Token失效明明刚登录请求却报401现象前端登录成功后调员工列表接口直接返回401或者在页面上停了一会儿再操作又是401。原因拦截器把不需要鉴权的请求也拦了。登录接口本身没放行登录请求进来时还没有token自然被拦截另一种是token过期时间设得太短比如30分钟页面看久了再去操作就失效。解决拦截器排除路径要列全至少包括/auth/login和静态资源。我的习惯是先在拦截器里打印出request.getRequestURI()看到底是哪个请求被拦再对照白名单逐条排除。token过期时间直接设24小时毕业设计没人会考核这点安全细节别给自己找麻烦。前端响应拦截器里对401统一处理清token跳登录页这个前面已经写了。另外注意多个请求同时401会导致重复跳转用标志变量控制一下。5.5 端口占用和MySQL时区报警现象后端启动直接崩控制台报“Port 8080 was already in use”或连接MySQL时报“The server time zone value Öйú±ê׼ʱ¼ä is unrecognized”。原因端口被其他进程占了多见于演示电脑上之前起过别的服务没关干净MySQL的时区配置是中文系统默认值驱动不认这种非标准时区写法。解决端口占用时用netstat -ano | findstr 8080查到PID然后taskkill /pid 进程号 /f或者干脆改server.port换一个不冲突的端口。时区问题还是那句连接串写死serverTimezoneAsia/Shanghai。这两个都是环境问题不属于代码bug但如果在答辩现场遇到会比代码bug更尴尬——提前在答辩用的电脑上完整跑一遍能过滤掉80%的环境坑。6. 答辩前验证清单与两个加分技巧让演示流程不出岔子临近答辩代码功能齐全只是第一步演示流程不出岔子才是最后一道坎。我建议按下面的清单在答辩前完整走一遍验证流程。首要一条是找一台干净电脑把数据库SQL脚本、后端源码、前端源码拉下来重新部署一遍。数据库要导出完整的.sql文件包含建库建表语句和演示数据至少准备50条员工记录、近一个月的考勤、半年以上的薪资数据页面有数据才显得系统真实。部署完再完整走一遍“登录→查员工→新增→编辑→删除→看考勤→看薪资”每一步都截个图或者录个屏。真机现场万一翻车录屏是最后的后悔药老师问起来就说“现场网络环境受限请看录屏演示”。验证之外还有两个技巧能让答辩印象分明显提升。第一个是密码存储用BCrypt加密并主动在答辩时讲一句“密码没有明文保存用的是BCrypt加盐哈希”。就这一句话能让老师觉得你考虑过安全问题。第二个技巧是加一个操作日志切面用AOP记录关键操作的后台日志代码量很小但能展示工程意识。Aspect Component public class LogAspect { Around(annotation(com.hrms.annotation.Log)) public Object record(ProceedingJoinPoint point) throws Throwable { long start System.currentTimeMillis(); Object result point.proceed(); long cost System.currentTimeMillis() - start; String method point.getSignature().getName(); System.out.println([操作日志] method 耗时 cost ms); return result; } }这段代码在核心接口上打上Log注解就能统一输出方法名和耗时配合控制台日志就能画出系统的“操作黑匣子”。答辩时演示一个新增员工的操作然后切到控制台展示对应日志效果比单纯念PPT好很多。做毕设这些年我的体会是人事管理系统这种题目的难点从来不在技术本身而在于你能不能把每个模块讲成一个“闭环”登录怎么鉴权、数据怎么流转、异常怎么兜底。把这套前后端分离的骨架跑通再按上面的清单和技巧打磨一遍你在答辩台上讲出“我为什么选这个方案、这个坑怎么解决的”比背十篇论文都有用。希望帮到你。本文还有配套的精品资源点击获取