ZnAdmin Pro 后台项目实践记录

发布时间:2026/6/30 1:31:15
ZnAdmin Pro 后台项目实践记录 下面不展开空泛概念直接看ZnAdmin Pro当前已经完成的功能模块、页面效果和适用场景。一、先说结论这不是一个只做 RBAC 的后台模板ZnAdmin Pro是一个基于Spring Boot 3 Vue 3 TypeScript的现代化后台平台项目。如果只看“用户、角色、菜单、部门”这些基础能力它当然能覆盖但这个项目真正值得看的不是把传统后台四件套再做一遍而是已经开始把一套能继续承载业务的平台骨架搭出来了。当前仓库里已经成型的能力主要包括RBAC 权限体系组织管理字典、公告、文件、日志、系统设置工作流任务调度代码生成系统监控首页工作台换句话说如果只是做基础 RBAC 和常规后台管理项目也可以按 core 思路快速二开如果后续需要审批流、工作流、调度治理、代码生成等增强能力再按项目需要逐步启用对应模块即可。二、为什么这个项目值得看如果只是做一个最基础的后台模板市面上的选择其实很多。ZnAdmin Pro更值得看的地方不是“技术栈更新一点”而是做取舍时没有把项目带回到“再做一套 CRUD 后台”的老路上而是优先把几条真正决定平台上限的链路先做通基础权限和组织体系不是孤立页面而是后续业务模块的底座首页不是展示页而是围绕待办和常用动作组织起来的工作台工作流不是只做一个列表而是把发起、处理、设计、委托、通知、实例串起来了调度模块不是一个单页配置而是带了日志、治理和告警视角代码生成不是停留在 CRUD 导出而是已经具备项目、表设计、预览和下载链路后台模板的价值从来不在“今天能不能跑起来”而在“半年之后还敢不敢继续往上加业务”。如果你关心的是后者这个项目会更有参考价值。三、这篇文章能看到什么这篇文章主要解决三个问题ZnAdmin Pro现在到底有哪些已经落到页面和功能层的能力。这些能力在项目里是怎么组织的适不适合继续二开。如果把它当成一个实际项目来看它目前更适合用在哪些场景。所以这篇文章不会去长篇解释技术概念而是直接看首页工作台做成了什么样权限与组织模块完整到什么程度工作流、调度、代码生成到底是不是“真模块”系统基础能力是否够支撑日常项目四、技术栈1. 后端Spring Boot 3.5.5JDK 21Spring SecurityMyBatis-Plus 3.5.5MySQL 8Redis 7FlywayQuartzWebSocketEasyExcelSpringdoc OpenAPIMicrometer Prometheus2. 前端Vue 3.5Vite 6TypeScriptElement PlusPiniaVue Router 4ECharts 6bpmn-jsMonaco EditorVitestPlaywright3. 部署方式Docker ComposeKubernetesJar Nginx这套技术栈没有刻意追求“堆料”但把后台平台常用的核心组件都配齐了尤其是工作流、调度、代码生成、监控这些能力所依赖的基础设施已经就位。图 01 系统总体架构图展示前端应用、后端服务、平台业务模块和基础设施之间的整体关系。五、项目结构1. 根目录zn-admin-pro/ ├── backend/ ├── frontend/ ├── docs/ ├── k8s/ ├── scripts/ └── docker-compose.yml2. 后端结构backend/src/main/java/com/znroot/admin/ ├── common ├── config ├── security ├── infra └── module当前后端业务模块已经覆盖authdictfilelognoticesysconfigsysorgsyspermsysuserworkflowcodegen3. 前端结构frontend/src/ ├── api ├── pages ├── components ├── composables ├── store ├── router └── shared前端页面主要集中在frontend/src/pages/Home.vuefrontend/src/pages/sys/从目录拆分来看这个项目当前已经不是把所有页面都堆在同一个system目录里的模板结构而是明显朝“平台模块化”在走。图 02 后端模块结构图将基础支撑、认证与权限、组织与用户、平台基础模块和扩展能力模块分层展开。图 03 前端模块结构图展示 pages、api、components、composables、store、router 和 shared 的职责关系。六、首页工作台首页不是装饰页也不是单纯的大屏数据页而是一个有实际使用价值的工作台。当前首页主要由四块内容组成顶部统计卡审批工作台常用功能重要通知这套布局的价值比较直接顶部卡片给出今天最值得处理的信息中间区域把审批待办放在最核心的位置右侧常用功能承担高频入口底部通知承接平台公告和重要提醒这说明首页的定位不是“展示系统很炫”而是把用户登录后的高频动作集中到一个页面里。图 04 首页工作台集中展示统计卡、审批工作台、常用功能和重要通知是整个平台的默认工作入口。1. 界面体验细节除了模块本身首页还能看出这个项目在产品化细节上已经做了不少工作。当前已经明确落到界面层的细节包括顶部提供中英切换入口基础文案和 Element Plus 组件语言已经接入国际化顶部和移动侧边栏都提供明暗主题切换入口主题变量已经统一工作台式首页默认承接待办、常用功能和重要通知而不是只做数据展示这几项能力单独看都不算“重功能”但放在一起会明显提升整个项目的完成度和日常使用体验。图 05 首页浅色主题同一套工作台结构在浅色主题下保持了清晰层级和完整交互。图 06 首页英文界面中英切换已经覆盖顶层导航、首页模块标题和常用入口文案。七、权限与组织模块这部分决定了一个后台项目能不能稳住基础盘。如果权限、组织、用户关系做得太浅后面所有业务模块都会越来越难接反过来如果这层打得够扎实工作流、通知、文件、调度这些能力接上去会顺很多。1. 用户管理当前支持用户列表状态控制角色分配部门归属导入导出个人中心联动这块已经不是简单“增删改查用户”而是把用户和角色、部门、个人中心打通了。图 07 用户管理页包含用户列表、状态维护、角色分配、部门归属以及导入导出等常用能力。2. 角色管理当前支持角色维护权限分配数据权限范围控制数据权限范围包括全部本部门本部门及以下仅本人对实际项目来说角色页是否提供数据权限控制决定了它是不是一个能继续承接业务的 RBAC 系统而不是只有菜单勾选的演示页。图 08 角色管理页支持角色维护、权限分配和数据权限范围配置。3. 菜单权限当前支持菜单树维护按钮级权限接口权限绑定动态路由支撑这意味着前端菜单、按钮权限、后端接口权限不是割裂的而是一套联动关系。图 09 菜单权限页支持菜单树维护、按钮权限配置和接口级权限绑定。图 09-A 权限校验代码展示前端路由守卫中的登录态校验、白名单控制与页面访问拦截逻辑说明权限控制并不只停留在菜单显示层。4. 组织管理组织相关模块当前包括公司管理部门管理岗位管理职级管理对应路由分别是/company/dept/post/job-grade这里不是只做了一个“部门树”而是把公司、部门、岗位、职级都拆开了更接近实际组织体系。图 10 公司管理页用于维护公司主体信息和组织顶层结构。图 11 部门管理页负责维护部门层级和归属关系。图 12 岗位管理页用于维护岗位信息及岗位在组织中的位置。图 13 职级管理页补齐组织体系里常见的职级维度。八、系统基础模块一个后台平台要不要继续往下用看的是基础模块有没有做到“够全、够稳、够顺手”。ZnAdmin Pro这一层当前已经比较完整。基础模块做得越扎实后面的业务模块越不容易重复造轮子这也是平台项目和演示项目最容易拉开差距的地方。1. 字典管理支持系统字典和字典项维护可用于统一前后端枚举口径。图 14 字典管理页负责维护系统字典和字典项统一前后端枚举口径。2. 公告管理支持富文本公告发布控制横幅 / 弹窗展示弹窗确认阅读生效时间 / 失效时间已读统计这块已经不是单纯的“文章发布”而是把公告作为平台触达能力来做了。图 15 公告管理页支持富文本内容、展示方式、生效时间和阅读统计配置。3. 文件管理支持本地 / OSS 存储抽象文件上传文件分类过期治理下载控制分片上传文件模块如果只停留在“上传一个附件”后续很难支撑复杂业务。现在这块已经具备平台化治理的基础。图 16 文件管理页支持文件上传、分类、过期治理、下载控制和分片上传。4. 操作日志与登录日志支持操作日志记录与查询登录日志记录与查询IP 归属地登录时间 / 登出时间追踪这两类日志对后台项目来说不是锦上添花而是出了问题之后能不能定位现场的关键。图 17 操作日志页记录关键业务操作便于审计和问题追踪。图 18 登录日志页记录登录行为、时间和访问来源方便安全排查。5. 系统设置当前支持动态系统配置例如密码策略会话超时上传策略这一层做出来之后很多系统参数不需要再写死在代码里。图 19 系统设置页可维护密码策略、会话超时、上传策略等平台配置。6. 系统监控当前支持运行摘要资源趋势JVM/线程信息外部依赖健康检查系统监控不是简单看 CPU 和内存而是要把服务运行、线程状态和外部依赖一起看。图 20 系统监控页汇总服务运行状态、资源趋势、JVM 信息和外部依赖健康情况。九、工作流工作流是这个项目当前最有分量的模块之一也是它和普通后台模板拉开距离的重要部分。很多项目会在工作流这里只做到一个待办列表或者只接一个演示型审批流但真正难的从来不是“接入一个流程引擎”而是把发起、处理、设计、委托、通知、实例这些链路组织成一套长期可维护的运行闭环。ZnAdmin Pro现在已经把这条主链路搭起来了。图 21 工作流运行链路图从流程发起、待办处理到审批动作、流程通知、实例与监控形成了相对完整的运行闭环。1. 当前已经有的页面流程发起/workflow/apply待我处理/workflow/pending我的已办/workflow/done抄送我的/workflow/cc我发起的/workflow/mine流程表单/workflow/form表单设计器/workflow/form/designer/:id?模型设计器/workflow/model/designer/:id?流程委托/workflow/delegation流程通知/workflow/notice流程实例/workflow/instance流程实例详情/workflow/instance/overview/:id任务处理详情/workflow/task/process/:taskId2. 当前已经有的能力审批待办 / 已办 / 抄送 / 我发起流程发起流程表单管理表单设计器BPMN 模型设计器流程委托流程通知实例监控退回、转办、加签等运行态动作这组能力说明它现在不是“工作流概念接入”而是一个已经可以继续接业务、继续压复杂度、继续往真实审批场景沉淀的流程子系统。图 22 待我处理页集中承接当前用户需要立即处理的审批任务。图 23 流程发起页用于选择流程并发起业务审批。图 24 流程表单页负责维护流程使用的表单资产。图 25 表单设计器用于配置流程表单结构和字段布局。图 26 模型设计器基于 BPMN 设计流程节点和流转关系。图 27 流程委托页用于配置离岗或代办场景下的审批委托规则。图 28 流程通知页用于集中查看审批通知、已读状态和通知详情。图 29 流程实例页用于查看流程运行实例及其当前状态。图 30 任务处理详情页集中展示业务表单、审批意见、附件上传和同意 / 驳回 / 加签等运行态动作。图 30-A 工作流处理代码展示任务处理页中审批组件装配、任务动作区绑定以及审批意见和附件区的组织方式。十、任务调度任务调度当前已经不是简单的单页配置而是在往“任务执行 运行记录 治理处理”这条链路走。图 31 调度治理链路图把任务执行、执行日志、触发治理、告警处理和统计视角串成一条治理链路。当前支持调度任务列表启用 / 暂停立即执行执行日志触发治理告警处理到期待处理统计页面入口路由/scheduler/job页面文件frontend/src/pages/sys/SysSchedulerJob.vue这块做出来之后很多依赖定时执行的业务逻辑就不需要各自再造一套任务管理页治理口径也更容易统一。图 32 任务调度页支持任务管理、执行日志、触发治理和告警处理。十一、代码生成代码生成是这个项目另一个比较有辨识度的模块。很多后台的代码生成器只做到“选表然后导出一份 CRUD 代码”演示价值有但持续价值有限。真正有价值的不是导出过一次代码而是把“导入、配置、预览、校验、下载”做成一条可复用的生成链路。ZnAdmin Pro当前这块已经明显往这个方向走了。图 33 代码生成链路图从库表或 DDL 导入到生成配置、表设计、运行时页面预览、代码预览与 ZIP 导出形成了一条完整生成链路。1. 当前页面生成项目/codegen/project生成配置/codegen/table表设计/codegen/table/design/:id?代码预览/codegen/table/preview/:id代码生成页/codegen/table/code-preview/:id2. 当前能力库表导入DDL 导入项目维度组织表和字段配置运行时页面预览代码预览ZIP 导出如果后续继续往生成链路和配置能力上深化这块会很适合作为中后台项目里的研发提效工具而不只是一个用于演示的附属模块。图 34 生成项目页用于维护生成目标、包路径和输出组织方式。图 35 生成配置页用于维护表级生成配置和导入入口。图 36 表设计页用于维护字段配置、页面属性和生成细节。图 37 运行时页面预览用于直接查看生成后的页面表现。图 38 代码预览页用于查看生成结果并完成下载导出。图 38-A 代码预览代码展示代码生成页中的文件分组、差异状态和预览逻辑说明生成结果并不是黑盒导出。十二、个人中心个人中心当前支持个人资料维护头像上传偏好设置多设备会话管理入口右上角头像 个人中心路由/profile页面文件frontend/src/pages/sys/Profile.vue这块虽然不是最重的模块但它把用户侧的常用维护动作单独沉淀出来了而不是全塞回用户管理页。图 39 个人中心页支持个人资料、头像、偏好设置和多设备会话管理。十三、启动方式1. Docker Composegitclone https://github.com/znadmin/zn-admin.gitcdzn-admindockercompose up--build图 39-B Docker Compose 命令行运行状态通过命令行可以直接确认前端、后端、MySQL 和 Redis 容器已经启动并且端口映射状态清晰可见。启动后默认地址前端http://localhost后端http://localhost:8080Swaggerhttp://localhost:8080/swagger-ui.html图 39-A Swagger 接口文档后端接口已经接入 OpenAPI 文档能力便于本地联调、接口校验和对外说明。2. 传统本地启动后端cdbackend mvn clean package-DskipTestsjava-jartarget/zn-admin-backend-*.jar前端cdfrontendnpminstallnpmrun dev十四、这个项目适合什么场景比较适合下面几类使用场景1. 想要一个现代化后台底座如果不满足于传统的基础模板希望一开始就把组织、权限、文件、通知、日志这些平台能力带上这个项目比较合适。2. 需要审批流或平台能力的项目如果项目后续会涉及审批流调度任务系统监控文件治理代码生成那这个项目会比只带基础 CRUD 的后台更省时间。3. 中小企业项目中小企业项目常见的组织、审批、通知、日志、配置、调度诉求这个项目当前已经覆盖得比较多。十五、总结ZnAdmin Pro当前已经不是一个只做基础 RBAC 的后台项目。从现有仓库能力看它已经形成了一套相对完整的平台骨架基础权限和组织体系完整系统基础模块覆盖面比较全工作流、调度、代码生成已经形成明显辨识度首页工作台和整体页面成品感比较稳定如果只是做基础后台它可以按 core 思路快速落地如果目标是沉淀平台底座、支撑企业项目或者继续往产品化方向扩展它现在也已经有比较扎实的出发点。对于读者来说这个项目最值得看的不是某一个单点页面而是它已经把后台平台最难做散、也最值得沉淀的几条核心链路慢慢串起来了权限与组织工作流与待办调度与运行治理代码生成与二开提效通知、文件、日志、配置这些基础平台能力这也是我认为它和普通后台模板真正拉开距离的地方。如果后面继续往下打磨我最看好的不是某一个单点模块而是这几条链路继续做深之后形成的平台协同能力用户、角色、组织、数据权限继续收紧和复用工作流继续往真实业务审批场景沉淀调度继续和业务运行治理结合代码生成继续往研发提效工具演进所以这篇文章如果只用一句话收尾我会这样概括ZnAdmin Pro 现在最有价值的不是“做了很多页”而是它已经开始把后台平台里最难沉淀的那几条链路做成可以继续演进的底座。