Spring Boot 3 Vue 3 前后端分离完整实战项目核心功能权限RBAC JWT 工作流Flowable 7 报表EasyExcel ECharts2026 年最新技术栈 可直接落地代码结构这套方案已在多家中大型企业落地适合企业级后台管理系统、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.3Java 21或 17Spring Security JWT无状态MyBatis-Plus DruidFlowable 7.xSpring Boot Starter 原生集成EasyExcel 4.xExcel 报表Knife4j接口文档Redis缓存 分布式锁前端Vue 3.4 Vite 5 TypeScriptElement Plus或 Ant Design VuePinia Vue Router 4Axios 请求拦截器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手动加入!-- Flowable --dependencygroupIdorg.flowable/groupIdartifactIdflowable-spring-boot-starter/artifactIdversion7.0.0/version/dependency!-- EasyExcel --dependencygroupIdcom.alibaba/groupIdartifactIdeasyexcel/artifactIdversion4.0.2/version/dependency前端npmcreate vuelatest ruoyi-frontendcdruoyi-frontendnpminstallelement-plus pinia vue-router axios echarts bpmn-js四、核心功能实现详解1. 权限系统RBAC JWT 动态菜单后端关键代码// JWT 工具类 Security 配置核心过滤器ComponentpublicclassJwtAuthenticationTokenFilterextendsOncePerRequestFilter{OverrideprotectedvoiddoFilterInternal(...){StringtokengetToken(request);if(StringUtils.isNotEmpty(token)jwtService.validateToken(token)){StringusernamejwtService.getUsername(token);// 加载用户权限放入 SecurityContextUserDetailsuserDetailsuserDetailsService.loadUserByUsername(username);UsernamePasswordAuthenticationTokenauthnewUsernamePasswordAuthenticationToken(...);SecurityContextHolder.getContext().setAuthentication(auth);}}}菜单表 角色表 用户-角色-菜单关联MyBatis-Plus 自动生成前端动态路由核心// router/index.tsconstroutercreateRouter({...})router.beforeEach(async(to,from,next){constuserStoreuseUserStore()if(userStore.token){if(userStore.roles.length0){awaituserStore.getInfo()// 获取后端返回的权限菜单constaccessedRoutesfilterAsyncRoutes(userStore.menus)accessedRoutes.forEach(routerouter.addRoute(route))}next()}else{to.path/login?next():next(/login)}})2. 工作流Flowable 7 实战——请假审批示例后端集成只需加 starter 即可自动配置# application.ymlflowable:database-schema-update:trueasync-executor-activate:truehistory-level:full启动流程// 部署流程定义PostMapping(/deploy)publicvoiddeploy(){repositoryService.createDeployment().addClasspathResource(processes/leave.bpmn20.xml).deploy();}// 启动实例runtimeService.startProcessInstanceByKey(leave,variables);前端使用bpmn-js实现流程设计器拖拽画流程任务待办列表 审批按钮completeTask完整请假流程示例推荐直接用 RuoYi 官方 Flowable 扩展。3. 报表系统双模式Excel导出 大屏可视化后端 EasyExcel 导出最常用GetMapping(/export)publicvoidexport(HttpServletResponseresponse){ListReportVOlistreportService.list();EasyExcel.write(response.getOutputStream(),ReportVO.class).sheet(销售报表).doWrite(list);}前端 ECharts 大屏Pinia 管理数据template div refchartRef stylewidth: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 3JeecgBoot低代码神器—— 自带在线流程设计器 在线报表配置器Renren-Fast-Vue3—— 简洁版适合学习直接在这些项目上二次开发权限 工作流 报表基本开箱即用改业务即可。七、一键部署建议Docker docker-composeNginx Spring Boot MySQL Redis Flowable UI推荐前端打包后放入 Nginx 静态目录后端打 jar 包需要我立刻给你完整 GitHub 项目结构 SQL 脚本请假工作流完整 BPMN 前后端代码销售报表Excel ECharts 大屏全套代码权限动态路由 按钮级权限完整实现直接回复“给我请假工作流完整代码” 或 “给我整个项目压缩包结构” 或 “给我部署脚本”我马上发给你这个实战项目做完你完全可以把它写进简历作为金三银四的杀手锏项目。冲上岸就在 2026