接手这个项目之前我先说下背景。某高校内部需要一个办公室行政事务管理系统原本所有审批和通知全靠纸质流转办公室老师每天光跑签就累得够呛。找来找去最后定了一套基于SpringBootVueMySQL的MVC结构源码号称可以直接运行。我实际部署、调试并二次修改了一周整体感受是这个项目很典型后端分层干净前端组件化程度够用数据库表设计不算复杂但覆盖了行政办公的主流场景。对需要做毕业设计、课程设计或者想系统学习前后端分离全栈开发的人来说是个性价比很高的参考项目。这篇文章我就以实际使用者的身份把这套系统的功能拆解、架构思路、关键代码逻辑、部署步骤、还有踩过的坑全部翻出来讲一遍。内容里我会把项目里真实的表名、接口名做一些脱敏处理但结构思路和操作方法完全还原。你要是正在选型或者准备二次开发可以直接照着做。1. 项目整体设计思路与功能拆解1.1 为什么用MVC结构配合前后端分离这套项目名字里挂着MVC实际上是一个很清晰的分层结构。传统JSP时代的MVC是把视图层写在服务器内部而现在这个项目用了Vue来承担View层SpringBoot的Controller承担C层Service和Mapper共同承担M层。前端负责页面渲染和用户交互后端只提供JSON数据接口职责边界非常明显。MVC的核心价值在于“变化隔离”。接口变了前端只调接口不碰业务逻辑权限逻辑改了后端只改Service层不用动页面。实际维护的时候深有体会办公室需求经常调整比如会议纪要格式变了、用品申请单增加字段这种情况下你只需要改前端表单和后端对应的字段映射不会因为某个页面改动牵连到数据库结构。这种设计的另一个好处是并行开发。前端同学不用等后端接口写完可以先用Mock数据把页面搭出来后端同学也不用关心页面长什么样只把接口出参定义好。对于一个高校内部的行政系统来说开发周期被压缩得很明显。1.2 行政事务系统的核心业务模块办公室日常事情又杂又多这个系统的模块划分基本把高频事务全覆盖了。主要模块包括通知公告管理发布校内通知、查看已读回执、置顶管理。办公用品管理用品申购、入库登记、领用记录、库存统计。收发文管理公文登记、分发、签收、归档查询。会议管理会议室预约、会议通知、参会人员回执。车辆管理用车申请、审批、派车记录。用印申请公章、合同章使用申请与审批闭环。内部考勤常规上下班打卡请假销假流程。系统管理用户管理、角色管理、菜单权限分配。这些模块放在一起基本覆盖了高校行政办公室“人、财、物、事”四大类。每个模块不是孤立的比如用车申请会关联到审批流程而审批流程又会关联到系统管理里的角色权限。所以这个系统不是一个简单的CRUD堆积而是有业务闭环的。我在实际体验中觉得最有参考价值的是审批流转的设计。它没有引入重型的流程引擎而是用一个通用的“审批状态字段”配合角色判断来实现。状态有待审核、审核中、已通过、已驳回。每个模块的表都预留了这个字段前端通过Vue的动态标签来展示不同状态下的操作按钮。这种轻量化设计对小团队来说最实用真上Activity工作流反而会增加学习成本和部署复杂度。2. 后端SpringBoot核心设计与实操要点2.1 后端分层结构与典型代码组织方式后端的包结构非常规整基本是标准的SpringBoot工程。拿到源码后建议先看整体目录src/main/java ├── config // 配置类跨域、拦截器、MyBatis配置等 ├── controller // 对外接口层接收请求、返回R对象 ├── service // 业务逻辑层事务、权限判断 ├── mapper // 数据访问层MyBatis接口 ├── entity // 数据库实体类 ├── controller // 统一返回结果封装 └── util // 工具类JWT工具、日期处理等这里的核心设计是统一返回结果。项目里定义了一个R对象所有接口返回格式都是{code, msg, data}。前端axios响应拦截器里会对code做判断code为200时走正常逻辑否则弹出错误提示。这个约定非常关键我建议你二次开发时不要破坏这个格式否则前端所有地方的判断都要改。Controller层很瘦只做接收参数和调用Service的操作。Service层是真正的业务核心比如提交用车申请时要先判断车辆是否可用、再判断申请人权限是否达到审批级别然后写入车辆记录表并更新状态。这种业务逻辑必须放在Service层并且加上Transactional事务注解保证多个表同步更新时不出现数据不一致。2.2 JWT认证与权限拦截的实现逻辑系统采用JWT做无状态认证。用户登录成功后后端会用用户ID和角色生成一个token返回前端存在localStorage里每次请求在请求头带上Authorization字段。后端有个拦截器统一校验token并解析出用户信息然后放到ThreadLocal里方便后续获取操作人。权限控制用的是典型的RBAC模型。用户表关联角色表角色表关联菜单表菜单表里有权限标识符。后端写了一个自定义注解RequirePermission在需要权限的接口上标注比如只有“办公室主任”角色才能执行车辆审批通过操作。拦截器里会检查当前用户是否拥有该权限标识没有就返回403。实操中的关键点是拦截器的排除路径配置。像登录接口、前端静态资源路径、验证码接口都要放行。这个项目的路径匹配写的是Ant风格表达式如果你在二次开发时改了接口前缀比如改成/admin/api一定要同步修改排除规则否则会出现明明登录成功了但下拉刷新后token失效的情况。JWT的过期时间也要根据办公场景调整。行政系统的用户一般白天长时间在线如果token有效期设置太短比如30分钟老师操作到一半就会被踢下线。该项目默认设置为12小时我在实际部署时改成了24小时并且在前端axios响应中加了一个401全局处理token过期后自动跳到登录页并清除本地缓存体验会好很多。2.3 数据库表设计思路与核心表关系数据库一共20多张表命名规范采用的是tb_前缀加模块名。这里挑几个核心表讲讲设计思路。用户表tb_user包含user_id、username、password、real_name、phone、dept_id、create_time等字段。特别注意password字段用的是MD5加盐存储不是明文。我在代码里看到盐值是固定写在配置里的这种如果面临高安全需求建议改成BCrypt加随机盐但这套系统的定位是校内办公固定盐足够用了。角色表tb_role和用户表是多对多关系中间表是tb_user_role。菜单表tb_menu和角色表也通过tb_role_menu中间表关联。这种经典RBAC设计的优点是灵活新增一个角色只需要配置菜单树不用改代码。业务表比如tb_vehicle_apply字段包括apply_id、user_id、vehicle_id、start_time、end_time、reason、status、audit_user_id、audit_time。其中status是核心字段用int数值表示不同状态0待审1通过2驳回。这种设计在业务模块里是统一的所以查询待办事务时一条SQL就可以拉出所有模块里待审核的记录。数据库索引也是要重点看的。办公用品表的库存查询经常按名称模糊查所以在goods_name上加了普通索引申请单表经常按状态和申请时间查询所以在status和apply_date上建了联合索引。实际跑下来几万条数据量下查询都是毫秒级。3. 前端Vue核心模块与联调心得3.1 前端项目结构与路由权限控制前端基于Vue2和Element-UI开发整体结构也相当标准src ├── api // 接口请求模块按业务功能拆分 ├── assets // 静态资源 ├── components // 公共组件 ├── router // 路由配置文件 ├── store // Vuex状态管理 ├── views // 页面组件 └── utils // 工具类request封装、auth工具路由权限这块是重点。项目采用的是动态路由模式用户登录后后端根据角色返回菜单列表前端用Vue Router的addRoutes方法动态添加路由。这样做的好处是低权限用户根本访问不到他没有权限的页面地址就算手动改URL也会被路由守卫拦截。前端路由守卫逻辑在permission.js里核心流程是检查本地是否有token没有则跳转到登录页有token则检查Vuex里是否已经有菜单权限如果没有就请求后端获取当前用户权限并动态生成路由。这里要提醒你一个常见问题Vuex刷新后数据会丢失所以项目里用了localStorage持久化菜单数据或者在刷新的时候重新拉取权限二选一否则刷新后页面会白屏。axios封装在utils/request.js里主要做了三件事请求头自动加token响应拦截器处理code不为200的错误提示401时清除登录状态并跳转登录页。文件上传接口的Content-Type也在这个文件里特殊处理用FormData提交。二次开发时如果你想在请求里加Loading状态可以在这个封装的拦截器里统一做不用每个页面单独写。3.2 表单、列表与审批流的实现方式页面组件大量使用了Element-UI的el-table和el-form。列表页的核心操作逻辑非常简单页面初始化时调用fetchList()方法携带分页参数pageNum、pageSize和筛选条件后端接口返回分页对象{total, rows}前端用el-pagination绑定total展示总条数。审批页面是这套系统的点睛之处。比如“我的待办”页面它不是单独给每个模块写一套页面而是在同一个组件里通过类型字段区分不同业务。当type是vehicle时表格列会显示车辆信息type是goods时显示物品信息。操作列也只显示当前状态下的可用操作。这样实现很聪明页面复用度高维护成本低。前端联调时最常遇到的是字段名不一致问题。后端实体类字段驼峰命名如applyType数据库字段下划线命名apply_type如果MyBatis没有开启驼峰映射返回的JSON里字段就会变成null。这个项目在application.yml里配置了map-underscore-to-camel-case: true所以正常。如果你自己新建了实体类一定要确认这个配置生效否则列表数据全是空值。4. 本地部署与快速运行指南4.1 环境准备与项目初始化先讲环境要求。项目是基于JDK 1.8开发的前后端分离所以必备环境是组件版本建议备注JDK1.8高版本如11/17要改pom里编译版本Maven3.6用于后端依赖管理Node.js12建议14/16Vue CLI兼容性好MySQL5.7 / 8.08.0需要改数据库驱动时区配置IDEIDEA后端开发VSCode / HBuilderX任意前端开发拿到源码后第一步先在MySQL里创建数据库名字比如office_admin字符集选utf8mb4排序规则utf8mb4_general_ci。然后用可视化工具或命令行导入项目里提供的sql文件。注意导入时不要有报错尤其要注意SQL文件里是否有创建数据库语句有的话直接执行没有则建库后导入。接下来改后端配置。在application.yml里把数据库连接改成本地地址重点检查这几个点url: jdbc:mysql://localhost:3306/office_admin?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai。MySQL8.0版本必须加serverTimezone否则连接会报时区错误。用户名、密码替换为你自己的。另外确认Redis是否被用到如果项目里用了Redis本地没装的话要先把依赖注释掉或装一个Redis服务。我这个版本没有强制依赖Redis还算省事。前端配置在vue.config.js里开发环境的代理转发是关键。通常配置devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }意思是前端页面上的/api开头的请求都会转发到后端8080端口。如果你后端改了端口只改这里的target就行。4.2 启动顺序与验证启动顺序有讲究。先启动后端再启动前端因为前端登录时要立即请求后端接口。后端启动方式很简单在IDEA里右击启动类run即可。看到Spring Boot的启动日志中端口号默认8080出现没有报红就算启动成功。有些环境的8080端口被占用可以在配置里改成8081同时记得改前端代理target。前端启动需要在项目根目录执行npm install npm run servenpm install时如果有网络问题建议先配置淘宝镜像源然后重新安装。启动成功后会显示本地访问地址一般是http://localhost:80或http://localhost:8081。在浏览器打开使用项目提供初始账号登录。这类系统的通用初始账号通常是admin/admin123具体要看SQL文件里的初始数据一般在tb_user表里可以看到密码的加密值但如果是内置明文在SQL里一目了然。实际验证时登录成功后左侧菜单应当根据角色动态显示。然后依次测试一项申请类流程提交一条用车申请切换审批账号到待办列表通过申请再回到申请列表查看状态变为“已通过”。这条链路跑通说明前后端接口、数据库读写、权限控制都正常。5. 常见问题排查与避坑实录5.1 数据库连接相关报错最常见的报错是Access denied for user rootlocalhost这是账号密码填错。解决办法是检查application.yml里的username和password注意有没有多余空格。第二个常见报错是Unknown database office_admin说明数据库没创建出来或者名称和配置里不一致。直接进MySQL执行show databases;看库列表。第三个是时区报错。MySQL8.0下如果你没设置serverTimezone会提示The server time zone value йʱ is unrecognized。解决方法就是像我之前写的那样在URL后拼接serverTimezoneAsia/Shanghai。有些中文系统下乱码提示看着吓人实际上就是时区问题。5.2 前端接口跨域与代理失效前端页面能打开但登录时请求报502大概率是代理配置没生效。先确认vue.config.js里devServer配置已经写好然后重启npm run serve。注意代理只在开发环境下生效如果你把前端打包成dist文件放到Nginx里需要通过Nginx配置反向代理或者后端开启CORS。后端开启CORS也很简单SpringBoot里加一个WebMvcConfigurer重写addCorsMappings方法允许来源加allowedOrigins(*)。但这套项目本身就已经配置了跨域所以开发环境反而是通过代理转发避免直接跨域两条路都可以别同时用容易出双预请求问题。5.3 前端页面白屏或路由跳转异常登录成功后页面白屏常见原因包括路由模式用的是history但开发服务器没有做history回退Vuex菜单权限数据初始化失败动态路由添加时调用了this.$router.addRoutes但菜单还没生成就跳转。排查方法很简单打开浏览器控制台看具体报错信息。若是Cannot read property routes of undefined就是动态路由时序问题需要等权限数据拉完再跳转。若是刷新404说明项目没用hash模式建议把vue-router的mode改成hash或者后端配置history回退。校内系统用hash模式省心得多。5.4 文件上传与静态资源路径问题使用系统时如果需要上传头像或附件文件可能传到后端的某个本地目录但前端访问图片时地址写的是相对路径导致图片打不开。解决办法是把上传目录配置到Nginx映射或者在后端配置一个虚拟路径映射到本地目录。SpringBoot中可以用WebMvcConfigurer添加resource handlerregistry.addResourceHandler(/files/**) .addResourceLocations(file:D:/upload/);这样/files/avatar.jpg就能映射到本地的D:/upload/avatar.jpg。在Windows开发机上路径分隔符是反斜杠Linux下要写正斜杠打包部署时特别容易踩。5.5 权限配置引起的接口403新增了用户或角色后登录进去发现菜单少了一项或者接口点按钮提示无权限大概率是中间表数据没同步。RBAC模型的更新不是只改用户表或角色表还需要维护tb_user_role和tb_role_menu。很多做二次开发的人只往tb_user里插数据结果角色关联为空所有接口全被拦截。排查时直接查三张表的关联记录。另外注意该项目的权限判断是先用用户的角色集合再到菜单表里去匹配对应的权限标识。如果一个角色关联了菜单但菜单里的权限标识没有和后端RequirePermission注解里的值对应依然会报403。所以扩展新功能时要么建新菜单并设置好权限标识要么新接口不加权限注解两者只能明确选一个。结尾二次开发与扩展的一些个人建议这套系统跑通以后如果你想真正落地使用我建议优先做两个扩展一是把通知公告的查看回执做细很多办公室需要统计多少人已读、哪些人未读这在当前源码里只是简单字段可以加一张阅读记录表二是把办公用品模块关联到库存流水每次申领自动扣库存库存低于阈值时给管理员发提醒这块也就多两张表加两个接口的事。还有一个小技巧启动项目时如果发现IDEA内存占用太多建议在Maven设置里加-Xmx512m避免多模块编译时卡死。前端npm安装依赖如果速度慢建议把.npmrc文件里的registry设成国内镜像地址。整体来看这套代码风格统一、注释量中等没有过度设计适合二开也适合用来理解SpringBootVue项目从0到1的搭建思路。我自己在部署过程中最大的体会就是先把业务模块跑通一遍再去研究底层代码效率最高。你按文章的步骤来基本半天就能看到系统完整跑起来。 
长河君 · 2026/10/21 3:15:36 · 阅读 1.2k SpringBoot+Vue+MySQL前后端分离行政管理系统部署与二次开发实战
接手这个项目之前我先说下背景。某高校内部需要一个办公室行政事务管理系统原本所有审批和通知全靠纸质流转办公室老师每天光跑签就累得够呛。找来找去最后定了一套基于SpringBootVueMySQL的MVC结构源码号称可以直接运行。我实际部署、调试并二次修改了一周整体感受是这个项目很典型后端分层干净前端组件化程度够用数据库表设计不算复杂但覆盖了行政办公的主流场景。对需要做毕业设计、课程设计或者想系统学习前后端分离全栈开发的人来说是个性价比很高的参考项目。这篇文章我就以实际使用者的身份把这套系统的功能拆解、架构思路、关键代码逻辑、部署步骤、还有踩过的坑全部翻出来讲一遍。内容里我会把项目里真实的表名、接口名做一些脱敏处理但结构思路和操作方法完全还原。你要是正在选型或者准备二次开发可以直接照着做。1. 项目整体设计思路与功能拆解1.1 为什么用MVC结构配合前后端分离这套项目名字里挂着MVC实际上是一个很清晰的分层结构。传统JSP时代的MVC是把视图层写在服务器内部而现在这个项目用了Vue来承担View层SpringBoot的Controller承担C层Service和Mapper共同承担M层。前端负责页面渲染和用户交互后端只提供JSON数据接口职责边界非常明显。MVC的核心价值在于“变化隔离”。接口变了前端只调接口不碰业务逻辑权限逻辑改了后端只改Service层不用动页面。实际维护的时候深有体会办公室需求经常调整比如会议纪要格式变了、用品申请单增加字段这种情况下你只需要改前端表单和后端对应的字段映射不会因为某个页面改动牵连到数据库结构。这种设计的另一个好处是并行开发。前端同学不用等后端接口写完可以先用Mock数据把页面搭出来后端同学也不用关心页面长什么样只把接口出参定义好。对于一个高校内部的行政系统来说开发周期被压缩得很明显。1.2 行政事务系统的核心业务模块办公室日常事情又杂又多这个系统的模块划分基本把高频事务全覆盖了。主要模块包括通知公告管理发布校内通知、查看已读回执、置顶管理。办公用品管理用品申购、入库登记、领用记录、库存统计。收发文管理公文登记、分发、签收、归档查询。会议管理会议室预约、会议通知、参会人员回执。车辆管理用车申请、审批、派车记录。用印申请公章、合同章使用申请与审批闭环。内部考勤常规上下班打卡请假销假流程。系统管理用户管理、角色管理、菜单权限分配。这些模块放在一起基本覆盖了高校行政办公室“人、财、物、事”四大类。每个模块不是孤立的比如用车申请会关联到审批流程而审批流程又会关联到系统管理里的角色权限。所以这个系统不是一个简单的CRUD堆积而是有业务闭环的。我在实际体验中觉得最有参考价值的是审批流转的设计。它没有引入重型的流程引擎而是用一个通用的“审批状态字段”配合角色判断来实现。状态有待审核、审核中、已通过、已驳回。每个模块的表都预留了这个字段前端通过Vue的动态标签来展示不同状态下的操作按钮。这种轻量化设计对小团队来说最实用真上Activity工作流反而会增加学习成本和部署复杂度。2. 后端SpringBoot核心设计与实操要点2.1 后端分层结构与典型代码组织方式后端的包结构非常规整基本是标准的SpringBoot工程。拿到源码后建议先看整体目录src/main/java ├── config // 配置类跨域、拦截器、MyBatis配置等 ├── controller // 对外接口层接收请求、返回R对象 ├── service // 业务逻辑层事务、权限判断 ├── mapper // 数据访问层MyBatis接口 ├── entity // 数据库实体类 ├── controller // 统一返回结果封装 └── util // 工具类JWT工具、日期处理等这里的核心设计是统一返回结果。项目里定义了一个R对象所有接口返回格式都是{code, msg, data}。前端axios响应拦截器里会对code做判断code为200时走正常逻辑否则弹出错误提示。这个约定非常关键我建议你二次开发时不要破坏这个格式否则前端所有地方的判断都要改。Controller层很瘦只做接收参数和调用Service的操作。Service层是真正的业务核心比如提交用车申请时要先判断车辆是否可用、再判断申请人权限是否达到审批级别然后写入车辆记录表并更新状态。这种业务逻辑必须放在Service层并且加上Transactional事务注解保证多个表同步更新时不出现数据不一致。2.2 JWT认证与权限拦截的实现逻辑系统采用JWT做无状态认证。用户登录成功后后端会用用户ID和角色生成一个token返回前端存在localStorage里每次请求在请求头带上Authorization字段。后端有个拦截器统一校验token并解析出用户信息然后放到ThreadLocal里方便后续获取操作人。权限控制用的是典型的RBAC模型。用户表关联角色表角色表关联菜单表菜单表里有权限标识符。后端写了一个自定义注解RequirePermission在需要权限的接口上标注比如只有“办公室主任”角色才能执行车辆审批通过操作。拦截器里会检查当前用户是否拥有该权限标识没有就返回403。实操中的关键点是拦截器的排除路径配置。像登录接口、前端静态资源路径、验证码接口都要放行。这个项目的路径匹配写的是Ant风格表达式如果你在二次开发时改了接口前缀比如改成/admin/api一定要同步修改排除规则否则会出现明明登录成功了但下拉刷新后token失效的情况。JWT的过期时间也要根据办公场景调整。行政系统的用户一般白天长时间在线如果token有效期设置太短比如30分钟老师操作到一半就会被踢下线。该项目默认设置为12小时我在实际部署时改成了24小时并且在前端axios响应中加了一个401全局处理token过期后自动跳到登录页并清除本地缓存体验会好很多。2.3 数据库表设计思路与核心表关系数据库一共20多张表命名规范采用的是tb_前缀加模块名。这里挑几个核心表讲讲设计思路。用户表tb_user包含user_id、username、password、real_name、phone、dept_id、create_time等字段。特别注意password字段用的是MD5加盐存储不是明文。我在代码里看到盐值是固定写在配置里的这种如果面临高安全需求建议改成BCrypt加随机盐但这套系统的定位是校内办公固定盐足够用了。角色表tb_role和用户表是多对多关系中间表是tb_user_role。菜单表tb_menu和角色表也通过tb_role_menu中间表关联。这种经典RBAC设计的优点是灵活新增一个角色只需要配置菜单树不用改代码。业务表比如tb_vehicle_apply字段包括apply_id、user_id、vehicle_id、start_time、end_time、reason、status、audit_user_id、audit_time。其中status是核心字段用int数值表示不同状态0待审1通过2驳回。这种设计在业务模块里是统一的所以查询待办事务时一条SQL就可以拉出所有模块里待审核的记录。数据库索引也是要重点看的。办公用品表的库存查询经常按名称模糊查所以在goods_name上加了普通索引申请单表经常按状态和申请时间查询所以在status和apply_date上建了联合索引。实际跑下来几万条数据量下查询都是毫秒级。3. 前端Vue核心模块与联调心得3.1 前端项目结构与路由权限控制前端基于Vue2和Element-UI开发整体结构也相当标准src ├── api // 接口请求模块按业务功能拆分 ├── assets // 静态资源 ├── components // 公共组件 ├── router // 路由配置文件 ├── store // Vuex状态管理 ├── views // 页面组件 └── utils // 工具类request封装、auth工具路由权限这块是重点。项目采用的是动态路由模式用户登录后后端根据角色返回菜单列表前端用Vue Router的addRoutes方法动态添加路由。这样做的好处是低权限用户根本访问不到他没有权限的页面地址就算手动改URL也会被路由守卫拦截。前端路由守卫逻辑在permission.js里核心流程是检查本地是否有token没有则跳转到登录页有token则检查Vuex里是否已经有菜单权限如果没有就请求后端获取当前用户权限并动态生成路由。这里要提醒你一个常见问题Vuex刷新后数据会丢失所以项目里用了localStorage持久化菜单数据或者在刷新的时候重新拉取权限二选一否则刷新后页面会白屏。axios封装在utils/request.js里主要做了三件事请求头自动加token响应拦截器处理code不为200的错误提示401时清除登录状态并跳转登录页。文件上传接口的Content-Type也在这个文件里特殊处理用FormData提交。二次开发时如果你想在请求里加Loading状态可以在这个封装的拦截器里统一做不用每个页面单独写。3.2 表单、列表与审批流的实现方式页面组件大量使用了Element-UI的el-table和el-form。列表页的核心操作逻辑非常简单页面初始化时调用fetchList()方法携带分页参数pageNum、pageSize和筛选条件后端接口返回分页对象{total, rows}前端用el-pagination绑定total展示总条数。审批页面是这套系统的点睛之处。比如“我的待办”页面它不是单独给每个模块写一套页面而是在同一个组件里通过类型字段区分不同业务。当type是vehicle时表格列会显示车辆信息type是goods时显示物品信息。操作列也只显示当前状态下的可用操作。这样实现很聪明页面复用度高维护成本低。前端联调时最常遇到的是字段名不一致问题。后端实体类字段驼峰命名如applyType数据库字段下划线命名apply_type如果MyBatis没有开启驼峰映射返回的JSON里字段就会变成null。这个项目在application.yml里配置了map-underscore-to-camel-case: true所以正常。如果你自己新建了实体类一定要确认这个配置生效否则列表数据全是空值。4. 本地部署与快速运行指南4.1 环境准备与项目初始化先讲环境要求。项目是基于JDK 1.8开发的前后端分离所以必备环境是组件版本建议备注JDK1.8高版本如11/17要改pom里编译版本Maven3.6用于后端依赖管理Node.js12建议14/16Vue CLI兼容性好MySQL5.7 / 8.08.0需要改数据库驱动时区配置IDEIDEA后端开发VSCode / HBuilderX任意前端开发拿到源码后第一步先在MySQL里创建数据库名字比如office_admin字符集选utf8mb4排序规则utf8mb4_general_ci。然后用可视化工具或命令行导入项目里提供的sql文件。注意导入时不要有报错尤其要注意SQL文件里是否有创建数据库语句有的话直接执行没有则建库后导入。接下来改后端配置。在application.yml里把数据库连接改成本地地址重点检查这几个点url: jdbc:mysql://localhost:3306/office_admin?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai。MySQL8.0版本必须加serverTimezone否则连接会报时区错误。用户名、密码替换为你自己的。另外确认Redis是否被用到如果项目里用了Redis本地没装的话要先把依赖注释掉或装一个Redis服务。我这个版本没有强制依赖Redis还算省事。前端配置在vue.config.js里开发环境的代理转发是关键。通常配置devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }意思是前端页面上的/api开头的请求都会转发到后端8080端口。如果你后端改了端口只改这里的target就行。4.2 启动顺序与验证启动顺序有讲究。先启动后端再启动前端因为前端登录时要立即请求后端接口。后端启动方式很简单在IDEA里右击启动类run即可。看到Spring Boot的启动日志中端口号默认8080出现没有报红就算启动成功。有些环境的8080端口被占用可以在配置里改成8081同时记得改前端代理target。前端启动需要在项目根目录执行npm install npm run servenpm install时如果有网络问题建议先配置淘宝镜像源然后重新安装。启动成功后会显示本地访问地址一般是http://localhost:80或http://localhost:8081。在浏览器打开使用项目提供初始账号登录。这类系统的通用初始账号通常是admin/admin123具体要看SQL文件里的初始数据一般在tb_user表里可以看到密码的加密值但如果是内置明文在SQL里一目了然。实际验证时登录成功后左侧菜单应当根据角色动态显示。然后依次测试一项申请类流程提交一条用车申请切换审批账号到待办列表通过申请再回到申请列表查看状态变为“已通过”。这条链路跑通说明前后端接口、数据库读写、权限控制都正常。5. 常见问题排查与避坑实录5.1 数据库连接相关报错最常见的报错是Access denied for user rootlocalhost这是账号密码填错。解决办法是检查application.yml里的username和password注意有没有多余空格。第二个常见报错是Unknown database office_admin说明数据库没创建出来或者名称和配置里不一致。直接进MySQL执行show databases;看库列表。第三个是时区报错。MySQL8.0下如果你没设置serverTimezone会提示The server time zone value йʱ is unrecognized。解决方法就是像我之前写的那样在URL后拼接serverTimezoneAsia/Shanghai。有些中文系统下乱码提示看着吓人实际上就是时区问题。5.2 前端接口跨域与代理失效前端页面能打开但登录时请求报502大概率是代理配置没生效。先确认vue.config.js里devServer配置已经写好然后重启npm run serve。注意代理只在开发环境下生效如果你把前端打包成dist文件放到Nginx里需要通过Nginx配置反向代理或者后端开启CORS。后端开启CORS也很简单SpringBoot里加一个WebMvcConfigurer重写addCorsMappings方法允许来源加allowedOrigins(*)。但这套项目本身就已经配置了跨域所以开发环境反而是通过代理转发避免直接跨域两条路都可以别同时用容易出双预请求问题。5.3 前端页面白屏或路由跳转异常登录成功后页面白屏常见原因包括路由模式用的是history但开发服务器没有做history回退Vuex菜单权限数据初始化失败动态路由添加时调用了this.$router.addRoutes但菜单还没生成就跳转。排查方法很简单打开浏览器控制台看具体报错信息。若是Cannot read property routes of undefined就是动态路由时序问题需要等权限数据拉完再跳转。若是刷新404说明项目没用hash模式建议把vue-router的mode改成hash或者后端配置history回退。校内系统用hash模式省心得多。5.4 文件上传与静态资源路径问题使用系统时如果需要上传头像或附件文件可能传到后端的某个本地目录但前端访问图片时地址写的是相对路径导致图片打不开。解决办法是把上传目录配置到Nginx映射或者在后端配置一个虚拟路径映射到本地目录。SpringBoot中可以用WebMvcConfigurer添加resource handlerregistry.addResourceHandler(/files/**) .addResourceLocations(file:D:/upload/);这样/files/avatar.jpg就能映射到本地的D:/upload/avatar.jpg。在Windows开发机上路径分隔符是反斜杠Linux下要写正斜杠打包部署时特别容易踩。5.5 权限配置引起的接口403新增了用户或角色后登录进去发现菜单少了一项或者接口点按钮提示无权限大概率是中间表数据没同步。RBAC模型的更新不是只改用户表或角色表还需要维护tb_user_role和tb_role_menu。很多做二次开发的人只往tb_user里插数据结果角色关联为空所有接口全被拦截。排查时直接查三张表的关联记录。另外注意该项目的权限判断是先用用户的角色集合再到菜单表里去匹配对应的权限标识。如果一个角色关联了菜单但菜单里的权限标识没有和后端RequirePermission注解里的值对应依然会报403。所以扩展新功能时要么建新菜单并设置好权限标识要么新接口不加权限注解两者只能明确选一个。结尾二次开发与扩展的一些个人建议这套系统跑通以后如果你想真正落地使用我建议优先做两个扩展一是把通知公告的查看回执做细很多办公室需要统计多少人已读、哪些人未读这在当前源码里只是简单字段可以加一张阅读记录表二是把办公用品模块关联到库存流水每次申领自动扣库存库存低于阈值时给管理员发提醒这块也就多两张表加两个接口的事。还有一个小技巧启动项目时如果发现IDEA内存占用太多建议在Maven设置里加-Xmx512m避免多模块编译时卡死。前端npm安装依赖如果速度慢建议把.npmrc文件里的registry设成国内镜像地址。整体来看这套代码风格统一、注释量中等没有过度设计适合二开也适合用来理解SpringBootVue项目从0到1的搭建思路。我自己在部署过程中最大的体会就是先把业务模块跑通一遍再去研究底层代码效率最高。你按文章的步骤来基本半天就能看到系统完整跑起来。