项目介绍:
EpicDesigner是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发,兼容多套 UI 组件库,除了基础的页面设计功能,EDesigner 还提供了强大的扩展功能,可以让开发者根据自己的需求自由扩展和定制组件。此外,EDesigner 使用 JSON 配置来生成页面,可帮助开发者快速生成页面,提高开发效率。它提供了两个重要组件:EDesigner 设计器和 EBuilder 生成器。
原项目的界面:
修改以后的界面
背景说明
需求:
最近公司要进行快速平台的开发,以拖拽的方式在前端进行数据操作,实现快速搭建一个数字化平台。其中一个模块是表单设计器,目前市面上有很多,找了很久选中了EpicDesigner这个设计器,但是这个设计器还是美中不足,可以拖拽,可以扩展,但是还是不能与数据库挂钩,为了实现:
通过拖拽和设置数据库字段,直接生成数据库表
分析:
针对这个需求,这个EpicDesigner设计器可以实现拖拽生成表单,但是没有对应的字段来让后端生成数据库表,所以前端该考虑的就是怎么来获取这个字段的属性,在哪里进行输入这些属性,所以就需要在设计器上扩展一个新的模块 数据库,该模块的作用就是针对每一个表单设计器的组件(比如:输入框等)进行字段设置。如上面图所示。
实现
在经历分析源码以后对表单设计器进行了扩展,也封装了函数利于设计器的存取数据。
具体代码,请留言