Spring Boot + Vue 3 企业OA系统架构实践

项目背景

2026 年初，我决定从零搭建一个企业级 OA 系统，作为技术能力的一次综合实践。

技术选型

**后端：** Spring Boot 3.4 + MyBatis-Plus + MySQL

- Spring Security + JWT 实现认证授权

- 统一的 RESTful API 设计

- AOP 切面实现操作日志

**前端：** Vue 3 + Element Plus + Pinia

- Vite 构建工具，开发体验极佳

- Vue Router 动态路由，根据权限生成菜单

- Pinia 状态管理，替代 Vuex

模块划分

系统采用前后端完全分离架构：

oa-web/        # Vue 3 前端
├── views/
│   ├── system/      # 系统管理
│   ├── attendance/  # 考勤管理
│   ├── process/     # 审批流程
│   ├── task/        # 任务管理
│   └── notice/      # 通知公告
oa-admin/      # Spring Boot 后端
├── controller/     # REST 控制器
├── service/        # 业务逻辑
├── mapper/         # 数据访问
└── security/       # JWT 安全

oa-web/ # Vue 3 前端

├── views/

│ ├── system/ # 系统管理

│ ├── attendance/ # 考勤管理

│ ├── process/ # 审批流程

│ ├── task/ # 任务管理

│ └── notice/ # 通知公告

oa-admin/ # Spring Boot 后端

├── controller/ # REST 控制器

├── service/ # 业务逻辑

├── mapper/ # 数据访问

└── security/ # JWT 安全

oa-web/        # Vue 3 前端
├── views/
│   ├── system/      # 系统管理
│   ├── attendance/  # 考勤管理
│   ├── process/     # 审批流程
│   ├── task/        # 任务管理
│   └── notice/      # 通知公告
oa-admin/      # Spring Boot 后端
├── controller/     # REST 控制器
├── service/        # 业务逻辑
├── mapper/         # 数据访问
└── security/       # JWT 安全

关键设计

1. **统一响应格式**：所有 API 返回统一的 Result 对象

2. **全局异常处理**：@RestControllerAdvice 统一异常拦截

3. **动态菜单**：根据用户角色从后端动态加载路由