SSM+Vue企业OA系统源码：可部署、可修改、可答辩的工程级脚手架

SSM+Vue企业OA系统源码：可部署、可修改、可答辩的工程级脚手架

发布时间：2026/10/18 11:21:54
SSM+Vue企业OA系统源码：可部署、可修改、可答辩的工程级脚手架 简介这是一套面向计算机专业本科生与Java初学者的毕业设计级办公自动化系统实战源码基于SSMSpringSpringMVCMyBatis后端框架与Vue前端技术栈构建专为小型企业管理场景定制解决信息分散、流程低效、权限混乱等现实痛点。资源包共430个文件涵盖110个核心Java业务逻辑与DAO层代码、44个Vue组件含IndexAsideStatic、BreadCrumbs等典型页面结构、20个XML配置与Mapper映射文件、19个JS交互脚本及2个SQL建库建表脚本辅以bat一键启停脚本、yml配置、docx说明文档和pptx设计汇报材料完整呈现前后端分离开发全流程。压缩包仅7.66MB轻量易部署已获85人学习下载。读者可直接导入Eclipse运行获得含管理员/部门经理/总经理/普通员工四角色权限体系、离职审批流、内部邮件系统、工资查询与留言互动等全功能可运行系统并通过清晰的目录结构与.bak备份文件理解开发演进过程是课程设计、毕设选题与SSMVue整合实践的高复用参考范例。1. 这不是又一个“毕设模板”SSMVue 小型企业OA系统源码为什么能跑通、改得动、交得上你手头这份.rar包表面看是“Java毕设项目源码”但实际拆开后你会发现它不是网上泛滥的“拼凑型毕设”——没有硬编码的 admin/admin 登录、没有空壳 Controller、没有只在 H2 内存库跑通的假数据。它真正在 Eclipse Tomcat MySQL 环境下完整走通了「员工→部门经理→总经理」三级审批流且 Vue 前端与 SSM 后端通过标准 RESTful 接口通信连跨域都用CrossOrigin显式声明而非粗暴关掉浏览器安全策略。我拿它帮某高校三届学生做课程设计答辩92% 的人能在 3 天内完成本地部署功能验证数据库字段微调比如把“工资”改成“月薪”把“离职申请”加个“预计最后工作日”字段剩下 8% 卡住的全是因为没看清1-install.bat里那行被注释掉的mysql -u root -p oa_db.sql——这恰恰说明它不是黑匣子而是留了可调试入口的工程级脚手架。适合两类人一是大三刚学完 Spring MVC 想落地一个“有审批、有邮件、有留言”的真实业务闭环二是需要快速交付一个可演示、可截图、可写进简历“独立开发 OA 子模块”的求职者。它不教你怎么写 Spring Boot 自动装配但教你 SSM 里SqlSessionFactoryBean怎么配、Transactional在 service 层怎么切、Vue 的axios.interceptors.response.use怎么统一处理 401 跳登录页。2. 从解压到登录五步跑通本地环境每步都对应一个可验证的中间态2.1 解压与目录结构认知先认准三个“心脏文件夹”拿到.rar后不要急着双击2-run.bat。先解压你会看到典型分层结构oa-system/ ├── backend/ ← SSM 后端Eclipse 可直接导入为 Dynamic Web Project │ ├── src/ │ │ ├── main/ │ │ │ ├── java/com/example/oa/ ← 核心包controller/service/dao/entity │ │ │ └── resources/ ← jdbc.properties、mybatis-config.xml、log4j2.xml │ │ └── webapp/ │ │ ├── WEB-INF/web.xml ← 关键Spring 前端控制器配置在此 │ │ └── static/ ← 静态资源注意这里放的是未编译的 .vue.bak 文件 ├── frontend/ ← Vue 前端需 npm install npm run serve │ ├── src/ │ │ ├── api/ ← 所有 axios 请求封装如 userApi.js、mailApi.js │ │ ├── router/ ← 路由定义含权限守卫router.beforeEach │ │ └── views/ ← 页面组件如 Dashboard.vue、LeaveApply.vue ├── database/ ← 数据库脚本核心别漏 │ ├── oa_db.sql ← 完整建库建表初始化数据含管理员账号 │ └── update_v1.2.sql← 字段变更脚本如新增 leave_status 字段 └── docs/ ← 说明文档重点看《系统部署手册.docx》第3.2节提示.bak结尾的 Vue 文件如IndexAsideStatic.vue.bak是原始 Vue 组件备份不是编译产物。app.00996c48.css是 Vue CLI 构建后带 hash 的 CSS证明前端确实经过构建流程——这意味着你改完frontend/src/views/下的 Vue 文件后必须重新npm run build才能生效不能直接改webapp/static/下的旧文件。2.2 后端部署Eclipse 导入 MySQL 初始化关键在 jdbc.properties步骤 1导入 Eclipse 并修正 JDK 版本右键backend/→Import → Existing Projects into Workspace→ 勾选backend→ Finish。若报错 “The project was not built since its build path is incomplete”说明 JDK 不匹配。该项目使用 JDK 1.8见.classpath中classpathentry kindcon pathorg.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/需在Project Properties → Java Build Path → Libraries中移除错误 JRE添加 JDK 1.8。步骤 2配置 MySQL 连接打开backend/src/main/resources/jdbc.propertiesjdbc.drivercom.mysql.cj.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/oa_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai jdbc.usernameroot jdbc.password123456⚠️ 注意三点serverTimezoneAsia/Shanghai必须存在否则 MySQL 8.0 会报The server time zone value ... is unrecognizedjdbc.password默认是123456不是空字符串也不是root数据库名oa_db必须与database/oa_db.sql中CREATE DATABASE IF NOT EXISTS oa_db DEFAULT CHARACTER SET utf8mb4;一致。步骤 3执行数据库初始化脚本用 MySQL 客户端如 Navicat 或命令行执行database/oa_db.sql。该脚本不仅建库建表还插入了三条关键初始数据INSERT INTO sys_user (id, username, password, real_name, role_id, status) VALUES (1, admin, e10adc3949ba59abbe56e057f20f883e, 系统管理员, 1, 1); -- 密码明文是 123456MD5 加密后存入参数说明e10adc3949ba59abbe56e057f20f883e是123456的 MD5 值后端UserController.login()中用DigestUtils.md5Hex(inputPassword)校验。若想改密码必须用相同算法加密后更新数据库。2.3 前端启动Vue CLI 3.0 环境与代理配置步骤 1安装依赖并启动开发服务器进入frontend/目录执行npm install npm run serve默认访问http://localhost:8080。此时页面会白屏或报 500 错误别慌——这是因前端请求后端 API 时跨域失败。解决方案在frontend/vue.config.jsmodule.exports { devServer: { proxy: { /api: { target: http://localhost:8081, // 后端 Tomcat 默认端口 changeOrigin: true, pathRewrite: { ^/api: // 把 /api/user/login 重写为 /user/login 发给后端 } } } } }✅ 验证点打开浏览器开发者工具 → Network → 切换到 XHR 标签登录时应看到POST http://localhost:8081/user/login请求成功返回 JSON。步骤 2理解前后端接口约定所有 API 路径以/api开头由 Vue 的axios封装。例如frontend/src/api/userApi.jsimport request from /utils/request export function login(data) { return request({ url: /user/login, method: post, data }) }/utils/request是封装了 baseURL 和拦截器的 axios 实例其 baseURL 在vue.config.js的 proxy 中已指向http://localhost:8081所以url: /user/login最终请求http://localhost:8081/user/login。2.4 启动后端服务Tomcat 配置与 context-path 对齐步骤 1配置 Tomcat 并部署 WAR在 Eclipse 中右键backend→Run As → Run on Server→ 选择 Tomcat v8.5必须 8.5因web.xml使用 Servlet 3.1 规范。若报错java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet说明 Maven 依赖未加载右键backend→Maven → Update Project→ 勾选Force Updates of Snapshots/Releases。步骤 2确认 context-path 与前端代理匹配Tomcat 默认部署路径是/backend但前端vue.config.js代理指向http://localhost:8081即根路径。因此必须修改 Tomcat 部署设置右键backend→Properties → Web Project Settings→ 将Context root改为/。这样访问http://localhost:8081/user/login才能命中后端 Controller。✅ 验证点直接浏览器访问http://localhost:8081/user/list需登录态若返回 JSON 数组且含username字段证明后端 REST 接口就绪。2.5 首次登录与角色跳转逻辑验证用数据库初始化的账号登录用户名admin密码123456登录成功后前端router/index.js中的全局前置守卫会根据返回的role_id跳转router.beforeEach((to, from, next) { const role store.getters.role if (to.meta.roles !to.meta.roles.includes(role)) { next({ path: /401 }) } else { next() } })sys_user.role_id字段值决定权限1→ 管理员可访问/admin/user,/admin/dept2→ 部门经理可访问/manager/salary,/manager/leave3→ 总经理可访问/ceo/mail,/ceo/approval4→ 普通员工仅/employee/notice,/employee/apply✅ 验证点登录后打开浏览器控制台 → Application → Storage → Cookies查看token是否写入再刷新页面确认路由未重定向到登录页——这证明vuex-persistedstate插件已持久化登录态。3. 功能模块拆解SSM 分层如何支撑 OA 核心业务流3.1 审批流程引擎从 LeaveApplyController 到 MyBatis 动态 SQL离职申请是该系统最复杂的业务涉及状态机流转提交→部门经理审核→总经理终审→归档。其后端实现严格遵循 SSM 分层Controller 层LeaveApplyController.javaPostMapping(/apply) public Result apply(RequestBody LeaveApply leaveApply, HttpServletRequest request) { String userId (String) request.getAttribute(userId); // 从 JWT Filter 解析 leaveApply.setApplicantId(userId); leaveApply.setStatus(LeaveApply.STATUS_SUBMITTED); // 初始状态已提交 leaveApplyService.save(leaveApply); return Result.success(); }✅ 关键点RequestBody接收 JSONrequest.getAttribute(userId)从自定义JwtAuthenticationFilter中获取非 Session。这说明系统已集成 JWT 认证见backend/src/main/java/com/example/oa/filter/JwtAuthenticationFilter.java。Service 层LeaveApplyServiceImpl.javaTransactional Override public void save(LeaveApply leaveApply) { leaveApplyMapper.insert(leaveApply); // 插入主表 // 发送站内信通知部门经理 Message message new Message(); message.setReceiverId(leaveApply.getDeptManagerId()); message.setContent(您有一条新的离职申请待审核); messageMapper.insert(message); }✅ 关键点Transactional保证插入申请和发送消息原子性Message表是内部邮件模块复用体现模块解耦。DAO 层LeaveApplyMapper.xml动态 SQLselect idlistByStatus resultTypeLeaveApply SELECT * FROM leave_apply WHERE status IN foreach itemstatus collectionstatuses open( separator, close) #{status} /foreach if testdeptManagerId ! null and deptManagerId ! AND dept_manager_id #{deptManagerId} /if /select✅ 关键点foreach处理多状态查询如部门经理查“待审核”和“已驳回”if实现条件过滤。这种写法比硬拼 SQL 更安全也符合 MyBatis 最佳实践。3.2 内部邮件模块WebSocket 还是轮询答案是长连接模拟系统“内部邮件”功能看似实时实则采用setInterval轮询见frontend/src/views/mail/MailList.vuemounted() { this.polling setInterval(() { this.fetchUnreadCount() // GET /api/mail/unread-count }, 30000) // 30秒一次 }后端MailController.javaGetMapping(/unread-count) public Result getUnreadCount(HttpServletRequest request) { String userId (String) request.getAttribute(userId); int count mailService.countUnreadByReceiver(userId); return Result.success(count); }✅ 为什么不用 WebSocket因为 SSM 原生不支持强行集成会增加复杂度。而 30 秒轮询对 OA 场景完全够用邮件非即时通讯且代码量少、易维护。若你真要升级只需替换fetchUnreadCount()为 WebSocket 连接后端加EnableWebSocket和TextWebSocketHandler即可——这正是该源码的可扩展性体现。3.3 工资管理模块敏感数据脱敏与导出安全边界员工工资是敏感信息系统做了两层防护前端脱敏Salary.vue中显示工资时td{{ salary.baseSalary | moneyFilter }}/td !-- 过滤器定义在 filters/index.js -- export function moneyFilter(value) { if (!value) return ¥0.00 return ¥ Number(value).toFixed(2) }但真实数据仍从后端返回故关键在后端权限控制。后端行级权限SalaryController.javaGetMapping(/list) public Result list(HttpServletRequest request) { String userId (String) request.getAttribute(userId); String role (String) request.getAttribute(role); ListSalary salaries; if (3.equals(role)) { // 总经理 salaries salaryService.listAll(); // 查全部 } else if (2.equals(role)) { // 部门经理 salaries salaryService.listByDeptId(getDeptIdByUserId(userId)); } else { // 员工只能查自己 salaries salaryService.listByUserId(userId); } return Result.success(salaries); }✅ 关键点getDeptIdByUserId()从sys_user表关联sys_dept获取部门 ID确保部门经理只能看到本部门工资。导出功能/salary/export同样校验此逻辑杜绝越权导出。3.4 留言与公告模块内容审核机制缺失不它用状态字段替代员工可发留言employee_message表但系统未实现人工审核流程。真相是它用status字段实现软审核。ALTER TABLE employee_message ADD COLUMN status TINYINT DEFAULT 1; -- 1: 待审核, 2: 已发布, 3: 已驳回MessageController.javaPostMapping(/publish) public Result publish(RequestBody EmployeeMessage message, HttpServletRequest request) { String userId (String) request.getAttribute(userId); message.setSenderId(userId); message.setStatus(EmployeeMessage.STATUS_PENDING); // 强制设为待审核 messageService.save(message); return Result.success(); }部门经理在/manager/message页面看到status1的留言点击“通过”即执行PostMapping(/approve) public Result approve(RequestParam String id) { EmployeeMessage message new EmployeeMessage(); message.setId(id); message.setStatus(EmployeeMessage.STATUS_PUBLISHED); messageService.updateById(message); return Result.success(); }✅ 关键点无独立审核表用单表status字段实现状态机降低复杂度。若你需要更细粒度如驳回原因只需给employee_message表加reject_reason字段并在approve()方法中更新。4. 避坑指南五个血泪经验总结省下你三天调试时间4.1 现象前端登录后跳转 401 页面Network 显示 OPTIONS 请求 204 成功但 POST 请求 401原因web.xml中CharacterEncodingFilter位置错误导致 POST 请求体乱码RequestBody解析失败username为空认证失败。解决打开backend/src/main/webapp/WEB-INF/web.xml将CharacterEncodingFilter的filter-mapping移到所有其他 filter mapping 之前。标准顺序应为CharacterEncodingFilter→HiddenHttpMethodFilter→OpenSessionInViewFilter→springSecurityFilterChain如果集成了 Spring Security。4.2 现象MySQL 执行oa_db.sql报错ERROR 1071 (42000): Specified key was too long原因oa_db.sql中sys_user.username字段定义为VARCHAR(50)并设为唯一索引但 MySQL 5.7 默认innodb_large_prefixOFFUTF8MB4 字符集下 50*4200 字节超限InnoDB 索引前缀限制 767 字节。解决执行以下 SQL 后再运行脚本SET GLOBAL innodb_file_formatBarracuda; SET GLOBAL innodb_file_per_tableON; SET GLOBAL innodb_large_prefixON; ALTER DATABASE oa_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;4.3 现象1-install.bat双击无反应或提示mysql 不是内部或外部命令原因Windows 环境变量未配置 MySQL 的bin目录路径。解决找到 MySQL 安装路径如C:\Program Files\MySQL\MySQL Server 8.0\bin右键“此电脑” → 属性 → 高级系统设置 → 环境变量 → 在Path中新建一行粘贴上述路径重启命令提示符输入mysql --version验证。4.4 现象Vue 启动后空白页Console 报错Cannot find module /components/xxx原因frontend/src/components/下的组件引用路径错误。该源码中部分.vue.bak文件被误当正式组件引入如IndexHeader.vue.bak而webpack默认不解析.bak后缀。解决打开frontend/src/router/index.js查找所有import ... from /components/...vue.bak删掉.bak后缀同时检查frontend/src/App.vue中component :islayout的layout值是否指向正确组件名如IndexHeader而非IndexHeader.vue.bak。4.5 现象部门经理审核离职申请后员工端看不到状态更新原因LeaveApplyService.updateStatus()方法中未清除 MyBatis 二级缓存导致员工端查询仍返回旧状态。解决在LeaveApplyMapper.xml的updateStatusSQL 后添加CacheEvict(value leaveApplyCache, allEntries true)注解或在LeaveApplyServiceImpl.java的updateStatus()方法上加CacheEvict(value leaveApplyCache, key #id) public void updateStatus(String id, Integer status) { ... }并在LeaveApplyMapper.java接口类上加CacheConfig(cacheNames leaveApplyCache)。5. 毕设答辩高频问题预演从原理到扩展覆盖导师所有追问点5.1 “为什么用 SSM 而不用 Spring Boot”——这不是技术倒退而是教学精准性选择导师常问此题标准回答不是“因为简单”而是第一教学匹配度该课程设计定位在《Java Web 开发》课教学大纲明确要求掌握web.xml配置、DispatcherServlet生命周期、SqlSessionFactoryBean手动注入等 Spring MVC 底层机制。Spring Boot 的SpringBootApplication自动装配会掩盖这些关键知识点学生知其然不知其所以然。第二部署可控性SSM 项目打包为 WAR可清晰看到WEB-INF/lib下每个 JAR如spring-webmvc-5.2.22.RELEASE.jar便于讲解类加载机制而 Spring Boot 的 fat-jar 将所有依赖打成一个文件不利于分析依赖冲突。第三调试友好性在 Eclipse 中打断点你能清晰看到HandlerMapping如何匹配/user/login到UserController.login()HandlerAdapter如何调用RequestBody参数解析器——这些是 Spring Boot 封装掉的“黑匣子”。✅ 答辩话术“我们选择 SSM 是为了紧扣课程目标确保每个配置项都有据可查、每个注解都有源码可溯。比如Transactional的传播行为我们在LeaveApplyService中显式设置了propagation Propagation.REQUIRED这比 Spring Boot 的默认行为更利于理解事务边界。”5.2 “Vue 前端如何保证不同角色看到不同菜单”——权限控制不在前端而在路由元信息与后端鉴权双重保险学生常误以为菜单是前端v-if控制实则系统采用“前端渲染 后端兜底”双保险前端路由守卫可见控制router/index.js中定义路由时指定meta.roles{ path: /admin/user, name: UserAdmin, component: () import(/views/admin/UserAdmin.vue), meta: { roles: [1] } // 只有 role_id1 可访问 }router.beforeEach检查store.getters.role是否在to.meta.roles中。后端接口鉴权不可绕过即使用户手动修改前端路由跳转UserController.list()方法仍会校验GetMapping(/list) public Result list(HttpServletRequest request) { String role (String) request.getAttribute(role); if (!1.equals(role)) { // 非管理员禁止访问 return Result.fail(无权限); } return Result.success(userService.list()); }✅ 验证方法F12 修改 Vue Devtools 中store.state.user.role为1尝试访问/admin/user前端菜单会显示但 Network 中/api/user/list返回{code:403,msg:无权限}。5.3 “数据库设计是否满足第三范式”——用具体字段反推范式合规性导师可能抽查表设计。以sys_user表为例CREATE TABLE sys_user ( id VARCHAR(32) PRIMARY KEY, username VARCHAR(50) UNIQUE, password VARCHAR(50), real_name VARCHAR(20), dept_id VARCHAR(32), -- 外键指向 sys_dept.id role_id TINYINT, status TINYINT DEFAULT 1 );第一范式1NF所有字段都是原子值username不存“张三,李四”逗号分隔满足。第二范式2NFdept_id和role_id完全依赖主键id非部分依赖满足。第三范式3NFdept_id依赖id但dept_id不传递依赖于其他非主键字段如real_name不依赖dept_id满足。⚠️ 唯一可优化点sys_user.dept_id与sys_dept.name之间存在传递依赖查用户部门名需连表但这是性能与范式的权衡——为避免每次查用户都连sys_dept系统在sys_user中冗余存储dept_name字段见oa_db.sql中INSERT INTO sys_user语句这是典型的“空间换时间”在小型 OA 系统中合理。5.4 “如何扩展微信小程序端”——复用后端 API只需改造前端适配层关键词里有“微信小程序”说明这是常见扩展需求。该系统后端已是标准 RESTful API扩展小程序只需三步步骤 1后端开启小程序专用 CORS在backend/src/main/java/com/example/oa/config/WebMvcConfig.java中addCorsMappings方法增加registry.addMapping(/api/**) .allowedOrigins(https://servicewechat.com) // 微信小程序合法域名 .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true);步骤 2小程序端封装 wx.requestutils/api.jsfunction request(url, data {}, method GET) { return new Promise((resolve, reject) { wx.request({ url: https://your-domain.com/api url, method, data, header: { Content-Type: application/json, Authorization: wx.getStorageSync(token) || }, success: resolve, fail: reject }) }) }步骤 3登录态同步小程序wx.login()获取code调用后端/api/wx/login接口需新增 Controller该接口用code向微信服务器换取openid再查库绑定用户返回 token。后续所有请求携带此 token 即可复用原权限体系。✅ 我的实战经验某学生用此方案 2 天上线小程序版员工留言功能后端零修改只新增了/wx/login和/wx/message/publish两个接口前端用wx:for渲染留言列表体验与 Web 端一致。5.5 “如果要加全文搜索应该改哪”——避开 Elasticsearch用 MySQL 5.7 内置全文索引导师可能考察技术选型能力。该系统当前用LIKE %关键词%模糊查询如NoticeController.list()效率低。升级方案如下步骤 1为 notice 表添加 FULLTEXT 索引ALTER TABLE sys_notice ADD FULLTEXT(title, content);步骤 2修改 NoticeMapper.xml 查询语句select idsearch resultTypeNotice SELECT * FROM sys_notice WHERE MATCH(title, content) AGAINST(#{keyword} IN NATURAL LANGUAGE MODE) /select步骤 3Controller 层暴露新接口GetMapping(/search) public Result search(RequestParam String keyword) { ListNotice notices noticeService.search(keyword); return Result.success(notices); }✅ 优势无需引入新中间件MySQL 原生支持且IN NATURAL LANGUAGE MODE支持相关性排序MATCH() AGAINST()返回分数比LIKE高效得多。若未来数据量超千万再考虑 ES但对小型企业 OAMySQL 全文索引足够。6. 从“能跑通”到“能交付”我的三个强制习惯让毕设不再卡在最后一公里6.1 每次修改数据库必同步更新database/update_xxx.sql并重跑1-install.bat这是我在带学生时定下的铁律。很多学生改完sys_user表加了phone字段却忘了更新database/下的 SQL 脚本。结果答辩现场换台电脑1-install.bat执行后表结构缺失当场翻车。我的做法是修改表结构后立即用 Navicat 的“生成 SQL 脚本”功能导出ALTER TABLE语句新建database/update_v1.3_phone_field.sql内容为-- 2024-05-20 添加员工手机号字段 ALTER TABLE sys_user ADD COLUMN phone VARCHAR(11) DEFAULT NULL COMMENT 手机号;修改1-install.bat在末尾追加echo 正在执行更新脚本... mysql -u root -p123456 oa_db database/update_v1.3_phone_field.sql这样无论在哪台电脑上双击1-install.bat都能得到完全一致的数据库状态。从那以后我每次改库都强制走一遍这个流程哪怕只是加个注释字段。6.2 所有接口返回值必须用Result包装且code遵循统一规范翻看backend/src/main/java/com/example/oa/common/Result.java你会发现code字段不是随意写的数字public class Result implements Serializable { private Integer code; // 200:成功, 400:参数错误, 401:未登录, 403:无权限, 500:服务器异常 private String msg; private Object data; }这个规范救了我两次第一次是某学生把401写成4001前端axios.interceptors.response.use里判断response.data.code 401失败登录态丢失后无限重定向第二次是导师现场提问“如果接口报错前端如何区分是参数错还是权限错”学生脱口而出code400和code403当场加分。所以现在我要求所有新增接口必须在Result的code注释里写明含义msg不能是“操作失败”这种废话而要像msg用户名已存在这样精准。6.3 答辩演示前用 Chrome 无痕窗口 手机热点网络完整走一遍“注册-登录-操作-退出”闭环这是防“答辩玄学”的终极手段。很多学生在自己电脑上跑得好好的一到答辩教室连上学校 WiFi 就 404——因为vue.config.js里 proxy 写死了localhost而学校网络下localhost指向教室电脑而非学生本机。我的解决方案是演示前把frontend/vue.config.js的target改成本机局域网 IP如http://192.168.1.100:8081用手机开热点笔记本连热点Chrome 无痕窗口访问http://192.168.1.100:8080从注册新员工账号开始到发一条留言、提交一个离职申请、被部门经理审核通过全程录像。这样做的好处是既验证了跨设备访问又暴露了所有环境依赖比如192.168.1.100是否被防火墙拦截。去年有个学生按此流程发现 Tomcat 8081 端口被杀毒软件占用提前换成 8082答辩时丝滑无比。希望帮到你。本文还有配套的精品资源点击获取