Erupt Framework：開源神器，助你無需前端代碼搞定企業級後臺管理系統

---

Gitee：https://gitee.com/erupt/erupt

GitHub：https://github.com/erupts/erupt

前言：後臺重要嗎？

剛開始工作時，我對後臺管理系統並不那麼上心，畢竟給自己人內部用的，湊合湊合也就得了。但是隨着經驗的增長，我發現越是成功的企業，在後臺上投入的力量越大。

後臺管理系統，反映的是研發團隊對邏輯、業務的良好把握與深入分析的能力，一個設計優秀的後臺甚至會反過來影響組織架構，促進整個組織的發展與變革。

而且，當今互聯網流量被巨頭瓜分，冰川表面的部分已經沒有太大空間，而尚未完全被信息技術賦能的各行各業纔是未來市場的爆發點。而對於這些行業來說，後臺的需求才是核心。

如何提高後臺開發的效率？

儘管對企業來說業務流程的細微差異影響巨大，但後臺管理系統的設計與實現卻可以遵循一定的規律。

因此，針對後臺系統開發，市面上有不少成熟的前端 UI 模板，比如螞蟻的 Ant Design，老派的 Ext.js 等，這些框架簡化了前端人員的開發流程，但對整個系統來說，開發的成本依然很高，仍然是兩套體系。有的公司可能沒有條件養活兩個團隊，後端經常要被迫寫前端代碼。

那有沒有可能更進一步，僅使用後端技術即可完成開發呢？

我相信看到這裏，很多小夥伴想到了代碼生成器，但是它真的是最好的解決方案嗎？

它的本質還是通過類似全篇翻譯的方式生成繁瑣的代碼，缺少足夠的靈活性。後期需要修改時，生成的代碼將很難完成合並，想想 Mybatis-Generator，基本上就是一次性的東西。

今天我們要介紹的神器，就是一個可以全程無需寫任何前端代碼，不需要寫多層的 CURD 邏輯，也不需要手動建表，僅需一個類文件就可快速構建發企業級 Admin 管理後臺的框架 —— Erupt Framework。

它不但能夠提高效率，將後端小夥伴從被迫寫前端的困境中解脫出來，還順便解決了美觀問題，上幾張圖你們感受一下：

下面是項目演示地址，可以自行訪問：

https://www.erupt.xyz/demo （自適應佈局，支持手機端訪問）

也可以動手試一下：

簡單4步，搭建 0 前端代碼的後臺管理系統

I.創建 Spring Boot 項目 → Spring Initializr

II.在 pom.xml 中添加 erupt 依賴包

<!--用戶權限管理-->
<dependency>
  <groupId>xyz.erupt</groupId>
  <artifactId>erupt-upms</artifactId>
  <version>1.5.2</version>
</dependency>
<!--接口數據安全-->
<dependency>
  <groupId>xyz.erupt</groupId>
  <artifactId>erupt-security</artifactId>
  <version>1.5.2</version>
</dependency>
<!--後臺WEB界面-->
<dependency>
  <groupId>xyz.erupt</groupId>
  <artifactId>erupt-web</artifactId>
  <version>1.5.2</version>
</dependency>

III.在 application.yml / application.properties 中添加數據庫配置與 JPA 配置

# 配置以mysql爲例，當然erupt也支持其他管理型數據庫，如Oracle、PostgreSQL、SQL Server等
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/erupt
    username: root
    password: 1234567
  jpa:
    show-sql: true
    generate-ddl: true
    database-platform: org.hibernate.dialect.MySQL5InnoDBDialect
    database: mysql

IV.修改 Spring Boot 入口類

package com.example.demo;

@SpringBootApplication                  // ↓ xyz.erupt必須有
@ComponentScan({
   
    "xyz.erupt","com.xxx"}) // ↓ com.xxx要替換成實際需要掃描的代碼包
@EntityScan({
   
    "xyz.erupt","com.xxx"})    // ↓ 例如DemoApplication所在的包爲 com.example.demo
@EruptScan({
   
    "xyz.erupt","com.xxx"})     // → 則：com.xxx → com.example.demo
public class DemoApplication {
   
    
    public static void main(String[] args) {
   
    
        SpringApplication.run(DemoApplication.class, args);
    }
}

大功告成😄

瞅瞅啓動後的效果

無需手動執行初始化 sql 腳本，啓動成功後，自帶菜單維護、組織維護、角色維護、用戶維護、字典維護、登錄日誌與操作日誌功能！

再加點功能熱熱身

Hello World

@Erupt(name = "入門示例")         //erupt核心類註解
@Table(name = "t_hello_world")  //數據庫表名
@Entity                        //JPA實體類標識
public class HelloWorld extends BaseModel {
   
     //BaseModel中僅定義了主鍵信息

    @EruptField(
            views = @View(title = "文本"),
            edit = @Edit(title = "文本")
    )
    private String input;

    @EruptField(
            views = @View(title = "數值"),
            edit = @Edit(title = "數值")
    )
    private Float number1;

    @EruptField(
            views = @View(title = "布爾"),
            edit = @Edit(title = "布爾")
    )
    private Boolean bool;


    @EruptField(
            views = @View(title = "時間"),
            edit = @Edit(title = "時間")
    )
    private Date dateField;

}

將類名 HelloWorld 添加至菜單、配置如下：

添加成功後刷新頁面即可看到入門示例菜單，效果如下：

生成的數據庫表

create table demo_simple
(
    id         bigint auto_increment primary key,
    bool       bit          null,
    date_field datetime     null,
    input      varchar(255) null,
    number1    float        null
);

增、刪、改、查、列控制等功能全部都可以直接用，無需任何額外代碼！

學生管理

@Erupt(name = "學生管理")
@Table(name = "demo_student")
@Entity
public class Student extends BaseModel {
   
    

    @EruptField(
            views = @View(title = "姓名"),
            edit = @Edit(title = "姓名")
    )
    private String name;

    @EruptField(
            views = @View(title = "性別"),
            edit = @Edit(title = "性別",
                    boolType = @BoolType(trueText = "男", falseText = "女"))
    )
    private Boolean sex;

    @EruptField(
            views = @View(title = "出生日期"),
            edit = @Edit(title = "出生日期",
                    dateType = @DateType(pickerMode = DateType.PickerMode.HISTORY) //出生日期必須爲過去時間
            ))
    private Date birthday;

    @EruptField(
            views = @View(title = "年級（高中）"),
            edit = @Edit(title = "年級（高中）", type = EditType.CHOICE,
                    choiceType = @ChoiceType(vl = {
   
    
                            @VL(value = "1", label = "一年級"),
                            @VL(value = "2", label = "二年級"),
                            @VL(value = "3", label = "三年級")
                    })  //下拉列表支持動態渲染，爲了方便演示固定寫了幾個
            ))
    private Integer grade;
}

效果演示：

自動生成的數據庫表結構

create table demo_student
(
    id       bigint auto_increment primary key,
    birthday datetime     null,
    name     varchar(255) null,
    sex      bit          null,
    grade    int          null
);

商品管理（左樹右表）

@Erupt(name = "商品管理", 
       linkTree = @LinkTree(field = "category") //左樹右表配置
)
@Table(name = "mall_goods")
@Entity
public class Goods extends BaseModel {
   
    

    @EruptField(
            views = @View(title = "商品圖片"),
            edit = @Edit(title = "商品圖片", notNull = true, type = EditType.ATTACHMENT,
                    attachmentType = @AttachmentType(type = AttachmentType.Type.IMAGE, maxLimit = 6)) //最多可上傳六張
    )
    private String image;

    @EruptField(
            views = @View(title = "商品名稱"),
            edit = @Edit(title = "商品名稱", notNull = true, inputType = @InputType(fullSpan = true), search = @Search(vague = true)) //模糊查詢配置
    )
    private String name;

    @ManyToOne
    @EruptField(
            views = @View(title = "所屬分類", column = "name"),
            edit = @Edit(title = "所屬分類", type = EditType.REFERENCE_TREE, search = @Search, notNull = true, referenceTreeType = @ReferenceTreeType(pid = "parent.id"))
    )
    private GoodsCategory category; //GoodsCategory類定義請往下看
    
    @EruptField(
            views = @View(title = "價格"),
            edit = @Edit(title = "價格", notNull = true , numberType = @NumberType(min = 0))
    )
    private Double price;

    @EruptField(
            views = @View(title = "運費"),
            edit = @Edit(title = "運費", notNull = true, search = @Search(vague = true))
    )
    private Double freight = 0D;

    @EruptField(
            views = @View(title = "商品狀態"),
            edit = @Edit(title = "商品狀態", notNull = true, boolType = @BoolType(trueText = "上架", falseText = "下架"), search = @Search)
    )
    private boolean status;

    @Lob //定義數據庫類爲大文本類型，支持存入更多的數據
    @EruptField(
            views = @View(title = "商品描述", type = ViewType.HTML),
            edit = @Edit(title = "商品描述", type = EditType.HTML_EDITOR) //定義爲富文本編輯器
    )
    private String description;

}

//商品類別
@Erupt(name = "商品類別", tree = @Tree(pid = "parent.id"), orderBy = "GoodsCategory.sort")
@Table(name = "mall_goods_category")
@Entity
public class GoodsCategory extends BaseModel {
   
    

    @EruptField(
            edit = @Edit(title = "分類圖片", type = EditType.ATTACHMENT,
                    attachmentType = @AttachmentType(type = AttachmentType.Type.IMAGE))
    )
    private String image;

    @EruptField(
            edit = @Edit(title = "類別名稱", notNull = true)
    )
    private String name;

    @EruptField(
            edit = @Edit(title = "顯示順序")
    )
    private Integer sort;

    @ManyToOne
    @EruptField(
            edit = @Edit(title = "上級分類", type = EditType.REFERENCE_TREE, referenceTreeType = @ReferenceTreeType(pid = "parent.id"))
    )
    private GoodsCategory parent;


}

當然實際業務中商品表需要維護更多的字段，我們僅需在已有的商品功能中新增或修改即可！

erupt 所支持的數據錄入組件如下（23類）

組件名	描述
AUTO	默認爲此類型，可通過字段類型等特徵進行推斷
INPUT	文本輸入框
NUMBER	數值輸入框
SLIDER	滑動輸入條
DATE	時間選擇器
CHOICE	單選框
TAGS	標籤選擇器
AUTO_COMPLETE	自動完成
TEXTAREA	多行文本輸入框
HTML_EDITOR	富文本編輯器
CODE_EDITOR	代碼編輯器
ATTACHMENT	附件，圖片
MAP	地圖
DIVIDE	分割線
TPL	自定義HTML模板
HIDDEN	隱藏
REFERENCE_TREE	樹引用
REFERENCE_TABLE	表格引用
CHECKBOX	複選框
TAB_TREE	多選樹
TAB_TABLE_REFER	多選表格
TAB_TABLE_ADD	一對多新增

附錄：作者寄語

Erupt Framework 🚀 通用後臺管理框架

Erupt 提供企業級中後臺管理系統的全棧解決方案，提供超多業務組件，頁面簡潔美觀，支持多種數據源，嚴密的安全策略，完善的用戶權限管理, 高擴展性，支持操作行爲代理，註解式API簡潔明瞭，大幅壓縮研發週期，降低研發成本。

Erupt 的初衷是爲了讓後臺開發更簡單，希望大家可以專注核心業務，省下的時間做自己喜歡做的事，從此不再因爲繁瑣的後臺開發而心煩意亂！

如果喜歡給作者個 star 鼓勵，後期會增加更多有趣且實用的功能 ！

Github地址：https://github.com/erupts/erupt

Gitee地址：https://gitee.com/erupt/erupt

官網地址：https://erupt.xyz