1. 项目概述：SpringBoot+Vue前后端分离架构的OA系统
这套企业级OA管理系统采用当前主流的前后端分离架构，后端基于SpringBoot 2.7.x构建，前端使用Vue 3.x+Element Plus实现，数据持久层采用MyBatis-Plus 3.5.x与MySQL 8.0组合。系统包含组织架构管理、流程审批、文档中心等12个核心模块，支持千人级并发访问，已在国内多家制造型企业落地实施。
提示：本系统适合需要快速构建标准化办公流程的中大型企业，开发团队在实施时需特别注意RBAC权限模型与工作流引擎的定制化配置
2. 技术架构深度解析
2.1 后端技术栈设计
SpringBoot框架选用2.7.18稳定版，配套组件包括：
- 安全认证：Spring Security 5.8 + JWT
- 流程引擎：Activiti 7.2.0（已做二次开发）
- 文件存储：MinIO 8.5.7分布式存储
- 消息队列：RabbitMQ 3.11.13处理异步任务
- 缓存层：Redis 6.2.12集群部署
数据库设计采用分库分表策略：
sql复制-- 主业务库
CREATE TABLE `oa_process` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '流程实例ID',
`business_key` varchar(64) COLLATE utf8mb4_bin NOT NULL COMMENT '业务标识',
`start_user_id` bigint NOT NULL COMMENT '发起人',
`current_node` varchar(32) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '当前节点',
`status` tinyint NOT NULL DEFAULT '0' COMMENT '状态(0:进行中,1:已完成)',
PRIMARY KEY (`id`),
KEY `idx_business` (`business_key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
2.2 前端工程化实践
Vue3项目通过Vite 4.3构建，主要技术特征：
- 状态管理：Pinia 2.1.x替代Vuex
- UI组件：Element Plus 2.3.x + 自定义主题
- 路由控制：Vue Router 4.2.x动态路由方案
- 图表库：ECharts 5.4.x实现数据可视化
前端性能优化措施：
- 按需加载组件（unplugin-vue-components）
- 路由懒加载（component: () => import(...)）
- 接口请求节流（lodash.throttle）
- 本地缓存策略（sessionStorage+IndexedDB）
3. 核心功能实现细节
3.1 动态权限控制系统
RBAC模型扩展实现：
java复制// 权限注解实现
@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface PreAuth {
String value() default "";
Logical logical() default Logical.AND;
}
// 权限拦截器
public class PermissionInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response,
Object handler) {
String permission = ((HandlerMethod) handler)
.getMethodAnnotation(PreAuth.class).value();
if(!authService.hasPermission(permission)){
throw new AccessDeniedException();
}
return true;
}
}
权限数据结构设计：
- sys_menu（菜单表）：包含组件路径、权限标识
- sys_role（角色表）：与部门绑定
- sys_role_menu（角色菜单关联表）
- sys_user_role（用户角色关联表）
3.2 工作流引擎集成方案
Activiti定制化改造点：
- 增加会签节点多人并行审批
- 实现审批链动态跳转（可回退任意节点）
- 集成电子签章服务（契约锁API）
- 添加紧急催办功能（短信+邮件提醒）
流程定义示例XML：
xml复制<process id="leaveApproval" name="请假审批流程">
<startEvent id="start"/>
<userTask id="deptLeaderAudit" name="部门领导审批">
<extensionElements>
<activiti:taskListener event="complete"
class="com.oa.listener.AuditCompleteListener"/>
</extensionElements>
</userTask>
<sequenceFlow id="flow1" sourceRef="start" targetRef="deptLeaderAudit"/>
</process>
4. 部署与性能优化
4.1 生产环境部署方案
推荐服务器配置：
- 应用服务器：4C8G × 2（Nginx负载均衡）
- 数据库服务器：8C16G + SSD（主从架构）
- Redis集群：6节点（3主3从）
- 文件存储：MinIO集群（4节点）
Docker Compose部署示例：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: oa@1234
volumes:
- ./mysql/data:/var/lib/mysql
redis:
image: redis:6.2-alpine
command: redis-server --requirepass oaredis
4.2 性能调优实战
JVM参数配置（JDK17）：
code复制-XX:+UseG1GC
-XX:MaxGCPauseMillis=200
-XX:InitiatingHeapOccupancyPercent=45
-XX:MetaspaceSize=256m
-XX:MaxMetaspaceSize=512m
SQL优化案例：
sql复制-- 优化前
SELECT * FROM oa_leave WHERE status = 1 ORDER BY create_time DESC;
-- 优化后
SELECT id,leave_type,start_date,end_date
FROM oa_leave
WHERE status = 1
AND create_time > DATE_SUB(NOW(), INTERVAL 3 MONTH)
ORDER BY create_time DESC LIMIT 100;
5. 二次开发指南
5.1 自定义模块开发步骤
- 新建数据库表（包含标准字段）
- 使用MyBatis Generator生成Mapper
- 创建Controller-Service分层结构
- 编写Vue页面组件
- 配置路由和权限标识
代码生成器配置示例：
xml复制<!-- generatorConfig.xml -->
<table tableName="oa_custom_module"
domainObjectName="CustomModule"
enableCountByExample="false"
enableUpdateByExample="false">
<generatedKey column="id" sqlStatement="MySQL" identity="true"/>
</table>
5.2 常见问题解决方案
- 流程实例卡死处理：
java复制// 强制结束流程
runtimeService.deleteProcessInstance(
processInstanceId,
"admin手动终止",
true);
- 跨域问题处理方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
- 大文件上传断点续传实现：
javascript复制// 前端分片上传逻辑
const chunkSize = 5 * 1024 * 1024; // 5MB
const uploadChunk = (file, chunkIndex) => {
const formData = new FormData();
formData.append('chunk', file.slice(chunkIndex*chunkSize, (chunkIndex+1)*chunkSize));
return axios.post('/upload', formData);
};
6. 项目演进方向
- 移动端适配：开发uni-app跨端版本
- 智能审批：集成NLP引擎实现自动审批
- 数字员工：接入RPA机器人流程自动化
- 数据分析：升级为BI可视化平台
系统扩展架构建议：
code复制 +---------------+
| API Gateway|
+-------┬-------+
|
+-------------+ +-------▼-------+ +-----------------+
| Web前端(PC) | | Microservices| | Mobile Clients |
+-------------+ +-------┬-------+ +-----------------+
|
+-------▼-------+
| Common Layer |
+-------┬-------+
|
+-------▼-------+
| Infra |
|(DB/MQ/Cache) |
+---------------+