Form Editor(动态表单设计器) · MrXujiang/h5 |
您所在的位置:网站首页 › H5可视化平台 › Form Editor(动态表单设计器) · MrXujiang/h5 |
按照习惯,我们先看看表单设计器实现的效果展示:
其次我们可以根据右边的配置项,动态的添加某个表单组件或或者修改组件字段和数据源。在配置好表单之后我们还可以定制表单提交的api接口地址,以便实现用户数据的可溯源性。 在开发之前,我们先分析一下动态表单设计的一般实现思路。 动态表单开发的一般思路1. 静态化配置列表
静态化配置列表是最传统的表单配置方式之一,基本思路就是利用母表来生成配置项,进而实现表单配置。类似于以下方式:
2. 基于json schema的动态表单配置 基于json schema的动态表单配置有两种实现方案, 一种就是支持在线修改json文件从而实现定制化,另一种就是完全无代码操作,但是前提都需要提供一套通用的表单模版。类似于如下案例:
3. 支持在线coding的混合式表单设计
支持在线编程的混合式表单设计方案是终极方案,也是目前流行的无代码化平台的思想之一。一方面它提供了基于json schema的动态表单配置, 对于一些强定制的,需要在线设计组件方案的模式,采用在线编程,实时打包成动态组件的方式,最后根据平台的组件约定来实现组件库的方式。如下图所示:
可视化领域一方面强调的是图形(可视化)的设计,一方面是动态表单。比如说我们想傻瓜式的改变一张图的数据,属性,交互等,我们需要通过表单这一桥梁来实现:
在实现表单设计器之前,我们先来整理一下思路和需求。在笔者的最初草图中,它长这样:
我们这里总结了几个常用的表单组件如下: 单选框 复选框 单行文本 多行文本 下拉框 文件上传 日期框 数值输入框以上这些基本满足我们的日常开发需求,其次我们还可以开发数据源表单组件,列表组件,比如dooring实现的那样:
在完成表单组件库之后,我们就需要根据配置项动态渲染了。也有两种实现思路,一种就是类似于多条件判断,如下: { item.type === 'Number' && } { item.type === 'Text' && } { item.type === 'TextArea' && }这样做虽然可行,也有很多成熟系统采用该方案,但是一旦表单变多,比如一个页面有几十个甚至上百个表单项,那么我们将渲染m *** n**次(m为表单组件类型数,n为配置项个数)。另一种方式笔者看来是比较优雅的,可以将复杂度降低到O(n),也就是笔者常用的对象法。思路大至如下:将表单组件的类型作为对象的属性,属性值为对应的表单组件,这样遍历的时候只需要对应上对象的具体类型即可。 代码如下: // 维护表单控件, 提高form渲染性能 const BaseForm = { "Text": (props) => { const { label, placeholder, onChange } = props return }, "Number": (props) => { const { label, placeholder, onChange } = props return } } // 动态渲染表单 { formData.map((item, i) => { let FormItem = BaseForm[item.type] return }) }是不是很优雅呢?后期我们只需要在BaseForm里维护表单组件即可,而且还可以基于BaseForm对表单进行包装,实现动态删除,编辑等功能。如下:
接下来我们看看表单的全局属性,通过实际分析我们可以知道表单有如下外观: 表单标题 表单背景图片 表单背景颜色 提交按钮样式所以他们因该成为表单设计的通用属性,如下图所示:
最后一个比较使用的需求就是api定制,一般公司可能需要将用户的录入数据收集到自己的平台,那么这个时候我们提供一个api表单提交接口积极很有必要了,上面笔者也展示过,实现很简单,就是配置里多一个api的文本框即可。 最后一步就是实现表单的curd操作,展示如下: 编辑表单项:
在H5编辑器Dooring的实现中,我们可以做抽象,每一个页面组件可以看成特定的表单组件,如下图:
目前笔者实现的H5可视化编辑器H5-Dooring功能新增如下: 实时保存功能 添加进度条组件 添加websocket通信 实现在线下载代码功能 添加Button组件 添加动态表单设计器预览地址:基于React+Koa实现一个h5页面可视化编辑器-Dooring github地址:基于React+Koa实现一个h5页面可视化编辑器-Dooring 最后如果想学习更多H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战,欢迎在《趣谈前端》一起学习讨论,共同探索前端的边界。 更多推荐 基于React+Koa实现一个h5页面可视化编辑器-Dooring 深度剖析github star数15.1k的开源项目redux-thunk TS核心知识点总结及项目实战案例分析 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |