开源分享:如何优雅地管理 113 个 React 业务页面?我把整套全栈系统开源了

0 阅读3分钟

一、 序言:一个“量大管饱”系统的自白

作为一个整天在各种中后台系统里“搬砖”、极致追求开发效率的程序员,我深知搭建一个框架不难,但当业务需求堆积到 113 个页面,涉及复杂的费率计算、多层嵌套的用能单元时,如何能“不加班”地把这些繁琐的 CRUD 干完,才是真正的挑战。

今天,我决定将这套在真实业务场景中打磨出来的 Terra EMS(能源管理系统)  彻底开源。它没有什么炫酷的“黑科技”,它的价值在于对管理场景极致的标准化实现

Dashboard V3 PRO

二、 核心竞争力:不是写出来的,是“逼”出来的

面对百余个高度同质化的管理界面,如果每个页面都重复书写增删改查逻辑,系统会瞬间坍塌。为此,我们提炼出一套深度的架构方案。

1. 前端“业务引擎”:高度集成的 useCrud Hook

我们基于 React 18 和 Ant Design Pro,抽象出了一套标准化 CRUD 模式实现:

  • 状态模型驱动:利用 Umi Model 重新建模,将原本分散在组件内的弹窗控制、Loading 状态、排序逻辑全部解耦到全局状态机。
  • 自动化生命周期:它内置了对 Ant Design 的高度适配,自动处理分页索引转换(前端 1 索引 vs 后端 JPA 的 0 索引)、表单校验闭环以及复杂的删除二次确认逻辑。

113+ 页面极速点击演示

2. 后端“金字塔”架构:SpringBoot 3 的极致复用

后端严格遵循 RESTful 规范,并采用三层继承体系:

  • ReadableController -> WritableController -> BaseController
  • 绝大多数通用接口在基类中已实现完毕,业务开发者只需关注 Specification 动态查询的构建,极大地降低了人为引入 Bug 的概率。

三、 真实的工业领域建模

这不是一个 Demo,这是一个实战场。你可以在里面看到:

  • 层级用能单位:处理复杂的企业组织架构与设备关联。
  • 能源成本策略:如何建模“尖峰平谷”阶梯电价。
  • 碳排放计量:标准的核算模型与可视化对标。

四、 仓库里都有什么?

为了让开发者能够“开箱即用”,我们准备了完整的环境闭环:

  • 后端仓库:Spring Boot 3.4 + JDK 21 + JPA (支持 PostgreSQL 17)
  • 前端仓库:React 18 + Umijs 4 + Ant Design 5 (标准的 ProComponents 最佳实践)
  • 一键启动:内置了 Docker Compose,一行命令即可拉起整套系统(含 DB、Redis、前后端)。

五、 这套系统适合谁?

  1. 接私活/快速交付:如果你手头有能源、监控、碳中和相关的项目,这 113 个页面至少有 80% 你可以直接拿去“白嫖”,省去几个月的建模时间。
  2. 架构进阶者:如果你正在寻找一套处理“大规模、高复杂性”后台系统的脚手架,这里的 useCrud 封装和 Controller 继承体系会带给你全新的视角。
  3. 技术栈升级:正在从 Java 8 迁移到 Java 21,或想学习最新全栈架构的同学。

六、 写在最后

管理系统的本质是数据流转。Terra EMS 记录了我这一年来的每一个技术注脚。它或许不够完美,但它足够真实。

项目地址:

如果这个“工业级脚手架”能帮你早点下班,或者在你的项目中提供了一点微小的灵感,欢迎点个 Star 支持一下!