Erupt即开即用的后台管理系统【告别前端代码】

2024-01-06 16:20

本文主要是介绍Erupt即开即用的后台管理系统【告别前端代码】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、引子

【零前端代码,几行Java注解,搞定后台管理系统】

如果只是自己内部公司使用的话,大多数功能都可以满足,剩下的就是自己添砖加瓦了。

我用这个主要是简单快捷,10分钟搭建一个简易的后台管理系统。

二、基本使用

当然,官网提供了一个简单的例子,也有一个完整的搭建流程,这里就不在赘述了。

就是说,我们写了一个实体类,然后自己生成之后,就自己产生了crud的接口以及和前端绑定的按钮。

举一个简单的例子吧:

这是一个Java类:

@EqualsAndHashCode(callSuper = true)
@Erupt(name = "问题反馈", dataProxy = QuestionInfoProxy.class)
@Table(name = "question_list")
@Entity
@Getter
@Setter
@DynamicUpdate
@DynamicInsert
public class QuestionInfo extends MetaModelVo {@EruptField(views = @View(title = "登记日期"),edit = @Edit(title = "登记日期", dateType = @DateType(type = DateType.Type.DATE)))private Date startTime;@EruptField(views = @View(title = "问题编号", sortable = true),edit = @Edit(title = "问题编号", search = @Search, show = false))private String number;@EruptField(views = @View(title = "问题来源"),edit = @Edit(title = "问题来源", type = EditType.CHOICE,choiceType = @ChoiceType(vl = {@VL(label = "内部", value = "内部"),@VL(label = "外部", value = "外部")}), notNull = true, search = @Search))private String source;@EruptField(views = @View(title = "问题分类"),edit = @Edit(title = "问题分类", type = EditType.CHOICE,choiceType = @ChoiceType(vl = {@VL(label = "交付", value = "交付"),@VL(label = "品质", value = "品质")}), notNull = true, search = @Search))private String sort;@EruptField(views = @View(title = "缺陷类型"),edit = @Edit(title = "缺陷类型", type = EditType.CHOICE,choiceType = @ChoiceType(vl = {@VL(label = "功能失效", value = "功能失效"),@VL(label = "零件漏装混装", value = "零件漏装混装"),@VL(label = "外观问题", value = "外观问题"),@VL(label = "尺寸问题", value = "尺寸问题"),@VL(label = "包装问题", value = "包装问题"),@VL(label = "交付问题", value = "交付问题"),@VL(label = "标签问题", value = "标签问题"),@VL(label = "喷码问题", value = "喷码问题")}), notNull = true, search = @Search))private String defectType;@EruptField(views = @View(title = "零件号"),edit = @Edit(title = "零件号", notNull = true, search = @Search))private String partNumber;@EruptField(views = @View(title = "客户"),edit = @Edit(title = "客户", type = EditType.CHOICE,choiceType = @ChoiceType(fetchHandler = DictChoiceFetchHandler.class,fetchHandlerParams = {"1000"}), notNull = true, search = @Search))private String client;@EruptField(views = @View(title = "责任人"),edit = @Edit(title = "责任人", type = EditType.CHOICE,choiceType = @ChoiceType(fetchHandler = DictChoiceFetchHandler.class,fetchHandlerParams = {"1001"}), notNull = true, search = @Search))private String workPerson;@EruptField(views = @View(title = "汇报日期", sortable = true),edit = @Edit(title = "汇报日期", dateType = @DateType(type = DateType.Type.DATE), search = @Search))private Date reportTime;@EruptField(views = @View(title = "问题描述"),edit = @Edit(title = "问题描述", type = EditType.TEXTAREA))private String description;@EruptField(views = @View(title = "问题描述图片"),edit = @Edit(title = "问题描述图片", type = EditType.ATTACHMENT,attachmentType = @AttachmentType(type = AttachmentType.Type.IMAGE, maxLimit = 5)))private String descriptionPic;@EruptField(views = @View(title = "问题描述附件"),edit = @Edit(title = "问题描述附件[文件大小100M以内,视频文件50M以内]", type = EditType.ATTACHMENT,attachmentType = @AttachmentType(maxLimit = 5)))private String descriptionAcc;/*** 原因分析*/private String causeAnalysis;/*** 遏制措施*/private String containWay;
}

然后我们什么也不操作,只配置数据库,然后直接启动EruptApplication。

直接访问界面。

在这里插入图片描述

将这两个地方填完之后,直接页面刷新,此时,界面就会出现这个类的管理页面。

在这里插入图片描述

这里面说一下细节问题。

2.1 字段设置

view:显然就是界面上的显示。具体可以参考官方文档。

这里我要说的就是如果想要界面有排序的功能直接加上这个代码就行了。

@EruptField(views = @View(title = "问题编号", sortable = true),edit = @Edit(title = "问题编号", search = @Search, show = false))private String number;

然后联动的页面就是可以自己排序了。
在这里插入图片描述
只有加了这个代码的字段才会有排序的功能。

2.2 屏蔽某些字段

在这里插入图片描述
设置字段只显示,不允许编辑:

@EruptField(views = @View(title = "登记日期"),edit = @Edit(title = "登记日期",readonly = @Readonly))private Date startTime;

readonly = @Readonly此时,这个字段只能看,不能够编辑了。

当然还可以写拦截器,直接在字段上面进行注解拦截。
这里是官方提供demo。
在这里插入图片描述
当然最重要的就是CRUD的动作操作,这里面也提供了很重要的接口《dataproxy》

在这里插入图片描述
只需要实现此接口就行了,就可以进行任意的数据操作了。

2.3 文件上传

官方提供了七牛云OSS上传的样例,上传的代码也有样例,直接搬过来就可以了。

<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>[7.2.0, 7.2.99]</version>
</dependency>
/*** 七牛对象存储demo** @author yuepeng* @date 2020-05-17*/
@Service
public class QiniuOosProxy implements AttachmentProxy {@Value("${qiniu.access_key}")private String accessKey; //你在七牛云申请的ACCESS_KEY@Value("${qiniu.secret_key}")private String secretKey; //你在七牛云申请的SECRET_KEY@Value("${qiniu.bucket}")private String bucket; //bucket名称@Overridepublic String upLoad(InputStream inputStream, String path) {//根据存储地区创建上传对象UploadManager uploadManager = new UploadManager(new Configuration(Region.huanan()));String uploadToken = Auth.create(accessKey, secretKey).uploadToken(bucket);/**	如果上传地址为 /2020-10-10/erupt.png*	在七牛云需通过 http://oos.erupt.xyz//2020-10-10/erupt.png才能访问*	访问地址带双斜杠,影响美观,所以做一下处理*/path = path.startsWith("/") ? path.substring(1) : path;try {Response response = uploadManager.put(inputStream, path, uploadToken, null, MimeUtil.getMimeType(path));if (!response.isOK()) {throw new EruptWebApiRuntimeException("上传七牛云存储空间失败");}return "/" + path;} catch (QiniuException ex) {throw new EruptWebApiRuntimeException(ex.response.toString());}}@Overridepublic boolean isLocalSave() {return false;}@Overridepublic String fileDomain() {return "http://oos.erupt.xyz";}
}

在启动类中添加自定义的上传注解。

@SpringBootApplication
@EruptAttachmentUpload(QiniuOosProxy.class)
public class EruptDemoApplication {public static void main(String[] args) {SpringApplication.run(EruptDemoApplication.class, args);}}

由于图片根地址发证变化,所以需要修改app.js配置

window.eruptSiteConfig.fileDomain: "http://xxxx.com"; // 具体oss的域名路径

三、感受

虽然erupt方便简洁了开发,但是很多功能定制化仍不满足我们的需求。

所以在刚开始的时候,这个erupt只适合做一个内部很简单的一个平台搭建。所以学习前端还是很有必要的。

自己写接口自己写页面,想怎么写就怎么写。

我觉得这是很重要的。


ok,那就先这样。

这篇关于Erupt即开即用的后台管理系统【告别前端代码】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/576896

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

工厂ERP管理系统实现源码(JAVA)

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本,并实时掌握各环节的运营状况。 在采购管理方面,系统能够处理采购订单、供应商管理和采购入库等流程,确保采购过程的透明和高效。仓库管理方面,实现库存的精准管理,包括入库、出库、盘点等操作,确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d