小言_互联网的博客

Erupt Framework:开源神器,助你无需前端代码搞定企业级后台管理系统

508人阅读  评论(0)


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


转载:https://blog.csdn.net/Neuf_Soleil/article/details/111493802
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场