简介基于 Spring Boot 与 Vue 构建的银行 OA 系统是一套已获导师指导、面向计算机相关专业毕业设计、课程设计及 Java 实战学习者的完整项目。系统采用前后端分离架构Spring Boot 提供 RESTful 接口Vue 构建管理页面涵盖登录认证、部门管理、公告发布、流程审批等典型办公自动化模块并配有数据库脚本与初始化数据既可直接用于毕设也可作为期末大作业参考。资源压缩包约 11.25MB主要文件包括 Java 源码、数据库脚本、开发说明文档、部署视频与代码讲解视频能帮助读者按步骤搭建运行环境理解前后端交互逻辑和核心实现。已有 72 人浏览学习项目经过严格调试确保可运行配套视频可减少环境配置障碍便于从整体结构到具体代码逐层掌握适合需要快速完成可演示成果并准备答辩的学生。1 SpringbootVue银行OA系统源码包一套能直接跑通的“课设级”办公自动化项目如果你正在为Java课程设计或毕业设计选题发愁这套基于SpringbootVue的银行OA系统源码包含数据库脚本、部署视频、代码讲解视频和全套软件是值得先看再动手的样本。它解决的是银行内网场景下的办公流程审批问题员工请假、车辆申请、公文收发、会议纪要在线上走完审批而不是纸质签字。它适合三种人正在做课设但不知道前后端怎么连的Java学生、想快速搭一套带权限和流程的OA来改造成自己项目的从业者、以及准备在面试时讲清楚Springboot与Vue如何协作的求职者。拆穿说这个项目的价值不在“银行业务代码有多难”而在“整套流程从数据库到前端页面都能闭环”这是很多自写项目最容易翻车的缺口。2 拆解架构为什么是SpringbootVue以及源码包里的关键模块2.1 前后端分离的选型理由银行OA不是纯粹的CRUD系统它的核心难点是审批流、角色权限和数据归属。常见的课设做法是JSPServlet一把梭但那种写法把页面渲染、请求路由、业务逻辑全搅在一起改一个字段跳转就要翻三层代码。SpringbootVue的优势在于把“管数据”和“出界面”分开Springboot只负责提供RESTful接口比如查询待办、提交审批、更新公文状态Vue端通过axios请求这些接口再把页面渲染逻辑放到前端路由里。这样在做课程设计答辩时你可以很清晰地给出“请求从这里进来业务逻辑在哪里处理数据库表怎么落地”的完整链路。从工程角度看这套方案的选型也足够稳重。Springboot自带Tomcat内嵌容器打出一个jar包就能跑不需要单独配置Servlet容器Vue的单页应用结构天然适合做工作台左侧菜单切换、右侧表单提交交互成本比传统模板引擎低很多。对课设来说这两点直接决定了你在最后一周是通宵调bug还是能准时交文档。2.2 源码包的目录结构先看懂再动手不知道你有没有过这种体验下载一个项目打开后src下几十个包完全不知道该从哪下手。我一般拿到源码的第一步不是急着启动而是先按分层结构把代码对齐资源包里的需求文档。这个项目的后端沿用了Springboot最标准的Controller-Service-Mapper三层结构src/main/java ├── com/xxx/config # 配置类跨域、拦截器、静态资源映射 ├── com/xxx/controller # 控制层接收Vue请求返回Json数据 ├── com/xxx/service # 业务层审批流程、公文流转、考勤统计 ├── com/xxx/mapper # 数据访问层MyBatis接口 └── com/xxx/entity # 实体类用户、部门、审批记录、公文 src/main/resources ├── application.yml # 端口、数据库连接、日志配置 └── mapper # MyBatis XML文件写SQL与结果映射前端是Vue项目在web端目录下src/views里是按模块拆好的页面文件登录、工作台、待办事项、员工管理、部门管理、考勤管理、公文收发。src/router里配置了菜单路由与权限跳转src/api里封装了所有请求地址。看这段结构时要注意一个关键点这个项目的Controller返回值大多统一包装成了Result对象里面放code、message、data三个字段。Vue端axios拦截器会统一判断code是否等于200不等于就弹后端返回的message。你在改代码时千万不要只改后端返回逻辑而忘了前端拦截器的判断方式否则会看到接口返回了正确数据、页面弹窗却提示失败的情况。2.3 数据库脚本里的核心表设计与流程闭环银行OA最核心的数据关系不是用户表而是流程和单据的关系。这套资源里的数据库脚本一般包含用户表、部门表、角色表、权限菜单表、请假单表、用车申请表、公文表、审批记录表。审批记录表是关键中的关键它需要记录“哪个用户提交了这张单据、当前流转到哪个角色、下一步是谁、审批意见是什么、最终状态是通过还是驳回”。CREATE TABLE approval_record ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT 审批记录ID, order_id BIGINT NOT NULL COMMENT 关联的业务单据ID, approver_id BIGINT NOT NULL COMMENT 当前审批人ID, next_approver_id BIGINT COMMENT 下一审批人ID, status TINYINT DEFAULT 0 COMMENT 0待处理 1通过 2驳回, opinion VARCHAR(500) COMMENT 审批意见, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME ON UPDATE CURRENT_TIMESTAMP );这张表的comment字段已经把用途写清楚了。之所以把审批人和下一审批人分开存是为了让前端“工作台→待办”页面能直接通过当前用户的ID去查询所有状态为0的记录而不用再join一堆流程定义表。这个设计对课设来说够用也足够在答辩时解释清楚。我建议你在跑通项目后把整套表的ER关系画出来因为导师答辩最常问的一句就是“如果增加一个报销模块你需要在现有基础上改哪些表和接口”。3 落地部署把源码跑起来的完整步骤从环境配置到前后端联调3.1 后端启动数据库导入与application.yml参数调整先别急着用IDE打开项目把数据库和环境准备好项目基本就能一次跑通。第一步是建库导入脚本。以MySQL为例打开命令行客户端mysql -u root -p -e CREATE DATABASE bank_oa DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; mysql -u root -p bank_oa bank_oa.sql第一行创建数据库时指定utf8mb4字符集是为了防止中文与特殊符号乱码第二行把资源包里的bank_oa.sql导入进来。注意如果数据库脚本文件里有使用视图、触发器或存储过程可能需要在导入前检查sql_mode否则容易报this is incompatible with sql_modeonly_full_group_by。导入完成后打开application.yml你会看到类似下面的配置server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/bank_oa?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你自己数据库的密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.xxx.entity这里的server.port是后端接口端口spring.datasource.url里serverTimezoneAsia/Shanghai很关键MySQL 8.x 与 JDBC驱动之间的时区差异如果没有指定会在查询时间字段时直接抛异常。mapper-locations指向resources目录下的XML文件文件夹路径一旦不对启动就会报Invalid bound statement。3.2 前端环境配置Vue项目启动与代理设置前端部分最容易卡住的就是依赖安装和跨域代理这两个问题我在第4章还会专门展开。这里先按正常的启动流程走。用Visual Studio Code打开前端目录先在根目录创建或确认vue.config.js里存在devServer代理配置module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } };这段配置的意思是把前端8081端口收到的所有以/api开头的请求转发到后端8080端口。pathRewrite把/api前缀去掉是为了让后端接口保持一致。接着在终端执行依赖安装与启动npm install npm run servenpm install可能耗时较长取决于网络与Node版本。如果卡在某个包上先看是不是registry没有切到国内镜像这个是老生长谈但依然很常见的问题。启动成功后浏览器打开http://localhost:8081前端工作台页面应该能正常显示登录框登录后能拉到待办数据。如果页面白屏或控制台报404优先检查代理配置里target的端口是不是和后端application.yml里的server.port一致。3.3 MyBatis分页与列表接口搞清楚编码套路再改业务这个项目的员工列表、待办列表、公文列表大概率都用了MyBatis的分页插件也就是PageHelper。在Springboot中引入PageHelper的方式很简单配置类里声明一个beanBean public PageInterceptor pageInterceptor() { PageInterceptor interceptor new PageInterceptor(); Properties props new Properties(); props.setProperty(helperDialect, mysql); props.setProperty(reasonable, true); interceptor.setProperties(props); return interceptor; }然后在Service层调用分页时只需要在查询前设置页码和每页数量插件会自动给SQL追加limitpublic PageResultLeaveOrder queryMyLeave(Integer pageNum, Integer pageSize, Long userId) { PageHelper.startPage(pageNum, pageSize); ListLeaveOrder list leaveMapper.selectByUserId(userId); return new PageResult(list, new PageInfo(list).getTotal()); }注意看这个方法的逻辑PageHelper.startPage必须在mapper查询方法之前调用跟待办状态筛选条件一起传。如果中间有if判断导致没有执行查询分页参数会跑到下一个查询上这是PageHelper最常见的使用错误。资源包里的业务代码基本都封装好了你不需要重写但看懂了这段逻辑之后改成“按审批状态筛选分页”时才不会改崩。4 避坑指南运行JavaVue项目时最容易翻车的四个地方4.1 数据库导入报错全是编码惹的祸现象执行mysql -u root -p bank_oa bank_oa.sql后中文文字全部变成问号或者部分表建不出来。你以为是脚本有问题反复导了三遍还是一样。原因数据库连接没有指定字符集终端默认的character_set_client与脚本里的utf8mb4不一致或者是MySQL版本太低不支持utf8mb4的索引长度。解决创建库时显式指定字符集给脚本导入前先执行set names utf8mb4;。如果是5.7版本遇到Specified key was too long把涉及varchar(255)的字段索引改成前缀索引或直接换用MySQL 8.x后者对utf8mb4支持更好。4.2 启动后端时报端口占用换个端口就前后端连不上现象Port 8080 was already in use你随手把application.yml里的端口改成了8082重启后发现前端页面能打开但所有列表都拉不到数据控制台报404。原因前后端联调的通路不是“端口越改越顺”而是你改了后端端口却忘了同步改vue.config.js里的target地址。解决改后端端口时必须同时把前端的代理target或src/api里的baseURL改到同一个地址。我现在的习惯是vscode里同时开两个终端一个跑后端一个跑前端谁报错直接在对应终端看日志端口改动前后都会查一遍两个文件。4.3 Maven依赖下载缓慢卡在BUILD FAILURE里出不来现象编译代码时maven一直在刷Downloading日志半个小时后报Could not resolve dependencies。原因默认maven中央仓库在国内访问极不稳定部分依赖下载超时另外Java版本太高时Springboot旧版本引用的某些依赖可能不再兼容。解决在maven的settings.xml里配置阿里云镜像仓库并用JDK8或JDK11启动项目。我一般会检查resources包里有没有附带maven配置说明如果没有就自己改settings.xml里加入以下镜像mirror idaliyunmaven/id mirrorOfcentral/mirrorOf nameAliyun Maven Repository/name urlhttps://maven.aliyun.com/repository/public/url /mirror4.4 Node版本太高npm install疯狂报错现象执行npm install时出现一串node-pre-gyp错误或者某个依赖模块git clone失败。原因Vue2项目对Node版本要求较高不兼容而环境默认装的往往是Node18或更高某些老依赖如node-sass在Node17以上直接编译失败。解决优先检查项目package.json里有node-sass还是dart-sass如果是node-sass用nvm切换到Node14版本再重新安装依赖。判断Node版本是否挂在命令node -v即可不要把时间浪费在换镜像源上。5 二次改造把银行OA变成你课设答辩的加分项5.1 把审批模块抽象成通用流程引擎源码包里的审批逻辑目前是写死在业务层里的进入新假期申请时调leaveService.submitOrder进入车辆申请又调carService.submitOrder两个方法里的审批人判断、状态流转几乎一样却维护了两份代码。你可以把它们抽象成一个通用审批服务通行的做法是接收“业务类型单据ID当前节点”然后统一查approval_record表判断下一步。改造后你的新增报销模块时只需要建一张报销单表和对应的CRUD接口审批部分直接复用通用服务答辩时这个点非常加分。public void submitOrder(String orderType, Long orderId, Long applicantId) { ApprovalRecord record new ApprovalRecord(); record.setOrderType(orderType); record.setOrderId(orderId); record.setApproverId(getNextApprover(orderType, applicantId)); record.setStatus(0); approvalMapper.insert(record); }这里的getNextApprover从配置表中读取该业务类型的第一步审批角色把原本散落的方法收拢到一处。改造范围停留在Service层不需要动前端菜单几分钟就能做完效果立竿见影。5.2 自测清单逐条过一遍再提交课设我给每个模块都列了一个自测清单对照着点一遍比自己闷头改效率高。下面是摘出来的核心条目模块测试操作预期结果登录输入错误密码提示账号或密码错误停留在登录页待办列表部门负责人账号登录只看到状态为待处理的本部门单据审批动作点击通过单据状态更新为已通过下一审批人等待列表中可见员工管理新增一个员工并分配角色新员工能用该角色登录菜单权限与角色匹配公文管理上传附件并发起流转附件可下载流转记录写入审批表对照这个清单跑通一遍基本就把主要功能都验证到位了。特别留意权限相关的两条银行OA里权限边界是导师最看重的地方。5.3 看代码讲解视频时的重点记录习惯资源包里附带的代码讲解视频我建议不要从头看到尾而是带着问题跳着看。我自己的习惯是先看“数据库设计”章节把表结构和审批流对应上再看“登录与权限”章节理解为什么Vue端会根据不同角色渲染不同菜单最后看“审批模块”章节因为那是整个项目的复杂度集中的地方。看的时候每遇到一个不理解的函数就回到源码里搜一遍把注释写在工程里不要只写在自己的笔记里。从那以后我每次拿到一份课设源码都强制自己先跑通再改代码而且一定把环境变量、依赖版本、改动的配置文件单独记一个文本防止重装系统后后悔药都没处买。这个习惯让我做Java课程设计案例时省了至少两个通宵。希望帮到你。本文还有配套的精品资源点击获取