Spring Boot 3 + Vue 3 前后端分离完整实战项目
核心功能：权限（RBAC + JWT） + 工作流（Flowable 7） + 报表（EasyExcel + ECharts）
（2026 年最新技术栈 + 可直接落地代码结构）
这套方案已在多家中大型企业落地，适合企业级后台管理系统、OA、ERP、审批系统等场景。
整个项目从零搭建到上线，大约 1–2 周即可完成 MVP（最小可用版本）。
一、项目整体架构（推荐结构）
project-root/
├── ruoyi-backend/ # Spring Boot 后端（单体或微服务均可）
│ ├── src/main/java/com/ruoyi/
│ │ ├── modules/ # 业务模块
│ │ │ ├── system/ # 权限系统
│ │ │ ├── flowable/ # 工作流
│ │ │ └── report/ # 报表
│ │ └── common/ # 通用工具
│ └── pom.xml
├── ruoyi-frontend/ # Vue 3 前端
│ ├── src/
│ │ ├── views/ # 页面
│ │ ├── router/ # 动态路由 + 权限守卫
│ │ ├── store/ # Pinia（用户、权限、token）
│ │ └── components/ # 工作流组件、报表组件
│ └── vite.config.ts
├── sql/ # 数据库脚本（sys + flowable）
└── docker-compose.yml # 一键部署（可选）二、技术栈（2026 年推荐最新版本）
后端：
- Spring Boot 3.3+
- Java 21（或 17）
- Spring Security + JWT（无状态）
- MyBatis-Plus + Druid
- Flowable 7.x（Spring Boot Starter 原生集成）
- EasyExcel 4.x（Excel 报表）
- Knife4j（接口文档）
- Redis（缓存 + 分布式锁）
前端：
- Vue 3.4 + Vite 5 + TypeScript
- Element Plus（或 Ant Design Vue）
- Pinia + Vue Router 4
- Axios + 请求拦截器
- ECharts 5（报表可视化）
- bpmn-js 或 @flowable/bpmn（流程设计器，可选）
数据库：MySQL 8 + Redis 7
三、快速启动项目（5 分钟跑通骨架）
后端（推荐使用 RuoYi-Vue-Plus 或 JeecgBoot 作为脚手架改造）
- 去 Gitee/GitHub 搜索 “RuoYi-Vue-Plus” 或 “JeecgBoot” 下载最新 Spring Boot 3 版本（两者都已原生支持 Flowable）。
- 或从零新建（Spring Initializr）：
- 依赖勾选：Web、Security、MySQL、Lombok、MyBatis-Framework
- 手动加入：
xml ¨K21K <dependency> <groupId>org.flowable</groupId> <artifactId>flowable-spring-boot-starter</artifactId> <version>7.0.0</version> </dependency> ¨K22K <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>4.0.2</version> </dependency>
前端
npm create vue@latest ruoyi-frontend
cd ruoyi-frontend
npm install element-plus pinia vue-router axios echarts bpmn-js四、核心功能实现详解
1. 权限系统（RBAC + JWT + 动态菜单）
后端关键代码：
// JWT 工具类 + Security 配置（核心过滤器）
@Component
public class JwtAuthenticationTokenFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(...) {
String token = getToken(request);
if (StringUtils.isNotEmpty(token) && jwtService.validateToken(token)) {
String username = jwtService.getUsername(token);
// 加载用户权限放入 SecurityContext
UserDetails userDetails = userDetailsService.loadUserByUsername(username);
UsernamePasswordAuthenticationToken auth = new UsernamePasswordAuthenticationToken(...);
SecurityContextHolder.getContext().setAuthentication(auth);
}
}
}菜单表 + 角色表 + 用户-角色-菜单关联（MyBatis-Plus 自动生成）
前端动态路由（核心）：
// router/index.ts
const router = createRouter({ ... })
router.beforeEach(async (to, from, next) => {
const userStore = useUserStore()
if (userStore.token) {
if (userStore.roles.length === 0) {
await userStore.getInfo() // 获取后端返回的权限菜单
const accessedRoutes = filterAsyncRoutes(userStore.menus)
accessedRoutes.forEach(route => router.addRoute(route))
}
next()
} else {
to.path === '/login' ? next() : next('/login')
}
})2. 工作流（Flowable 7 实战——请假审批示例）
后端集成（只需加 starter 即可自动配置）：
# application.yml
flowable:
database-schema-update: true
async-executor-activate: true
history-level: full启动流程：
// 部署流程定义
@PostMapping("/deploy")
public void deploy() {
repositoryService.createDeployment()
.addClasspathResource("processes/leave.bpmn20.xml")
.deploy();
}
// 启动实例
runtimeService.startProcessInstanceByKey("leave", variables);前端：
- 使用
bpmn-js实现流程设计器（拖拽画流程） - 任务待办列表 + 审批按钮（completeTask）
完整请假流程示例（推荐直接用 RuoYi 官方 Flowable 扩展）。
3. 报表系统（双模式：Excel导出 + 大屏可视化）
后端 EasyExcel 导出（最常用）：
@GetMapping("/export")
public void export(HttpServletResponse response) {
List<ReportVO> list = reportService.list();
EasyExcel.write(response.getOutputStream(), ReportVO.class)
.sheet("销售报表")
.doWrite(list);
}前端 ECharts 大屏（Pinia 管理数据）：
<template>
<div ref="chartRef" style="width:100%; height:500px"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
const chartRef = ref()
onMounted(() => {
const chart = echarts.init(chartRef.value)
chart.setOption({ /* 你的 option */ })
})
</script>高级报表：集成 JasperReports 或 Jeecg 的 Online 报表（零代码拖拽）。
五、联调与安全
- Axios 请求拦截器自动带
Authorization: Bearer xxx - 后端
@PreAuthorize("hasAuthority('sys:user:list')")注解权限 - CORS 配置（生产用 Nginx 代理）
- 全局异常 + 统一返回 Result
六、推荐直接基于开源项目改造（最快上岸方式）
- RuoYi-Vue-Plus（强烈推荐）—— 已集成 Flowable + Vue3 + Spring Boot 3
- JeecgBoot（低代码神器）—— 自带在线流程设计器 + 在线报表配置器
- Renren-Fast-Vue3 —— 简洁版，适合学习
直接在这些项目上二次开发，权限 + 工作流 + 报表 基本开箱即用，改业务即可。
七、一键部署建议
- Docker + docker-compose（Nginx + Spring Boot + MySQL + Redis + Flowable UI）
- 推荐前端打包后放入 Nginx 静态目录，后端打 jar 包
需要我立刻给你：
- 完整 GitHub 项目结构 + SQL 脚本
- 请假工作流完整 BPMN + 前后端代码
- 销售报表（Excel + ECharts 大屏）全套代码
- 权限动态路由 + 按钮级权限完整实现
直接回复：“给我请假工作流完整代码” 或 “给我整个项目压缩包结构” 或 “给我部署脚本”，我马上发给你！
这个实战项目做完，你完全可以把它写进简历，作为金三银四的杀手锏项目。
冲！上岸就在 2026！🚀
