一键生成前端UI,公司90%项目UI都靠它搞定!

因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享

点击关注#互联网架构师公众号,领取架构师全套资料 都在这里a34672d259d2cda4be15abfba863c2b2.png

0、2T架构师学习资料干货分

上一篇:2T架构师学习资料干货分享

大家好,我是互联网架构师!

话不多说,作为后端开发人员,不爱写前端代码,但又不得不需要一个系统的管理端来配置些数据等等操作的时候,前端又木的人,那么怎么办。

别怕,可以自动生成啦!我来提供个免费快捷的一键生成前端功能的工具啦。前后分离开型,无侵入。可在线使用,可本地部署,高效快捷。

开始

相信很多小伙伴开发后端的时候会经常碰到很多需要动态配置的功能,或者需要些增删改查的页面,自己又不会(爱)写前端。就会有个尴尬的处境,经常去直接手动改数据库这种危险操作。

所以我做了个可以一键生成这些功能的网站来生成前端项目,三五分钟就可以出来个这些功能的管理系统,又不需要理解,直接用就完事了,你还在等什么呢,快来给你的接口生成一个后台页面管理吧。

方式一:根据数据库结构一键生成

导出我们的表结构,上传到工具中,配置一下接口地址,再配置一下接口路径,就可以一键生成系统,然后再手动配置下登录接口的入参数即可完成。

访问网址:https://light2f.com

需要登录,输入邮件获取验证码即可登录,再无其它验证。

点击 我的项目-AI智能创建项目 选择 数据库结构导入 上传我们导出的库结构(即创建表的sql,一个文件,支持多个创建语句)

66fe0ae55cb2a0ad8895297ebf66853a.png

配置下接口的基地址(如:http://localhost:8080/test,注意:线上直接访问本地存在跨域问题,所以在本地调试的时候可以设置下允许任意域访问,如何设置此处不多介绍)

303b6ba1cd28ae92878eccea24f384da.png

选择或自动创建页面母版,自动创建的话现在只提供了一套 增删改查 模版已经够用的了,自定义较复杂暂不过问。母版即是一个没有元素(参数)的空功能,自动调用 增删改查 接口以及数据处理

c422531e4445533f7e2c3f92b68b3da3.png

配置一下接口的路径以及参数变量, 比如我们查询接口都是 /${变量}/search, 添加或更新接口都是 /${变量}/saveOrUpdate

变量是什么呢?因为我们会生成多张页面,所以每个页面 的接口应该是不一样的(每个页面的前置变量是一样的),所以 ${fileName} 就是变量,也对应下一步的生成的页面名称。

而参数变量则是接口入参与返回的数据结构,为了支持不一样的后端数据结构。比如我们查询的时候的分页参数名,以及如果判定接口是成功的等等。

d35d17088bf8cd9ec7630d5e5d4ea7c2.png

选择生成的页面信息,注意 文件名 列是对应上一步的 ${fileName},如有不同自行修改。然后点击生成即可

9ef5a824642386c464c32da22c18d9c4.png

完成!点击预览,系统已经完成。

bf1e20a180a000fa608158b10c877739.png

当然,有可能你还需要个登录进行验权。我们进入设计页面,配置一下登录信息,以及登录成功跳转到哪过页面即完成系统,我们就可以在预览中直接使用,也可以下载到本地部署啦,一个系统就完成了。

645737b844ddf628a0a54f099f66a91b.png 2b5613ff3f7d0d5aa2712f5e8a3e33ea.png 0fe2d1c2a3fc8de2a62c4206bc70b4e2.png 2e2377283491de4fd80cc7c4dc1ed919.png 54339c4b64fcf122f579bda7ef37e475.png

方式二:根据(.sql, .java, .txt)描述文件单页面生成

有可能我们并不想根据数据库生成,而想每个页面自己控制,那么我们可以先创建一个项目(先在项目母版与页面母版中复制系统个缺省的),然后进入设计工作台

新建页面,输入页面名称,与文件名称(同理对应上面的:{fileName}),然后选择你的 java 对应的表实体,或者单表创建语句,或者文本描述文件。如先准备表实体类,然后创建页面输入基本信息,再然后上传此类点击确定即可:

@TableName(value = "component")
@Data
public class ComponentPO {
    @TableId
    private Integer componentId;
    //项目id
    private Integer projectId;
    //组件描述
    private String componentDes; 
    //组件名
    private String componentName; 
    //创建时间
    private Date createAt; 
    @TableLogic
    private Integer isDeleted;
}
c60746b220a91eaa41b09f13e1c4349a.png cee110e093f733f27022b0d7eab68bb8.png

当然,需要登录页面同上亦可。

总结

简单系统三五分钟即可,复杂的需要些前端 react 基础。可视化编辑,助力后端小伙伴人手一个管理后台。再也不用手动修改数据库!

来源:juejin.cn/post/7275943802938343464

1、2T架构师学习资料干货分享

2、10000+TB 资源,阿里云盘,牛逼!!

3、基本涵盖了Spring所有核心知识点总结

  · END ·

最后,关注公众号互联网架构师,在后台回复:2T,可以获取我整理的 Java 系列面试题和答案,非常齐全。

如果这篇文章对您有所帮助,或者有所启发的话,帮忙扫描上方二维码关注一下,您的支持是我坚持写作最大的动力。

求一键三连点赞、转发、在看

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值