返回文章列表
约 1 分钟

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

从零搭建企业级OA系统的架构选型、模块划分与前后端分离实践分享。

Spring BootVue 3架构设计

项目背景

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 安全

关键设计

  1. 01统一响应格式：所有 API 返回统一的 Result 对象
  2. 02全局异常处理：@RestControllerAdvice 统一异常拦截
  3. 03动态菜单：根据用户角色从后端动态加载路由