Dooring可视化之从零实现动态表单设计器

徐小夕 等级 305 2 1

前言

之前笔者有写过一篇如何设计动态表单配置平台的文章,但是由于笔者电脑问题代码丢失,所以后期重新实现了一套表单设计器,并优化了之前的设计方式,特地做一下总结和复盘。

你将收获

  • 动态表单开发的一般思路
  • 可视化领域中的表单引擎
  • 从零实现一款动态表单设计器
  • 利用H5-Dooring开发一款表单设计平台

正文

按照习惯,我们先看看表单设计器实现的效果展示: Dooring可视化之从零实现动态表单设计器 Dooring可视化之从零实现动态表单设计器 上图中我们将表单设计器集成到了H5-Dooring中,使其可以实现拖拽生成表单。

其次我们可以根据右边的配置项,动态的添加某个表单组件或或者修改组件字段和数据源。在配置好表单之后我们还可以定制表单提交的api接口地址,以便实现用户数据的可溯源性。

在开发之前,我们先分析一下动态表单设计的一般实现思路。

动态表单开发的一般思路

1. 静态化配置列表 静态化配置列表是最传统的表单配置方式之一,基本思路就是利用母表来生成配置项,进而实现表单配置。类似于以下方式: Dooring可视化之从零实现动态表单设计器 早期的网站配置就是类似于这种呢方案实现的,比如说我们要定制网站的主色,网站某些组件是否可见,是一种比较简单的方式。但是缺点是每增加一个配置属性,都要开发人员重新编写一个字段配置代码,这种方式在表单开发中非常不灵活,而且对代码层有强依赖性,所以只适合做小型配置系统。比如个人网站,简单的自定义表单。

2. 基于json schema的动态表单配置

基于json schema的动态表单配置有两种实现方案, 一种就是支持在线修改json文件从而实现定制化,另一种就是完全无代码操作,但是前提都需要提供一套通用的表单模版。类似于如下案例: Dooring可视化之从零实现动态表单设计器 此种方案可以实现基本的表单自治。也是本文主要实现的方案。至于在线编写json文件的方案。笔者之前也也过成熟的方案,具体可以参考:基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)

3. 支持在线coding的混合式表单设计 支持在线编程的混合式表单设计方案是终极方案,也是目前流行的无代码化平台的思想之一。一方面它提供了基于json schema的动态表单配置, 对于一些强定制的,需要在线设计组件方案的模式,采用在线编程,实时打包成动态组件的方式,最后根据平台的组件约定来实现组件库的方式。如下图所示: Dooring可视化之从零实现动态表单设计器 在线代码编辑可以使用react-codemirror2或者 react-monaco-editor插件来实现。至于在线打包,我们用nodejs完全可以实现,笔者在做Dooring项目的在线下载代码时就用到了该方案,感兴趣的可以了解一下。

可视化领域中的表单引擎

可视化领域一方面强调的是图形(可视化)的设计,一方面是动态表单。比如说我们想傻瓜式的改变一张图的数据,属性,交互等,我们需要通过表单这一桥梁来实现: Dooring可视化之从零实现动态表单设计器 所以我们需要设计一款适合公司产品的“表单引擎”,来动态根据图形组件的类型渲染不同表单配置。这块思想也是表单设计器要解决的问题之一。在下面的文章中我们会详细介绍实现过程。

从零实现一款动态表单设计器

在实现表单设计器之前,我们先来整理一下思路和需求。在笔者的最初草图中,它长这样: Dooring可视化之从零实现动态表单设计器 从草图中我们可以提取到如下任务信息:

  • 定义一套表单组件库
  • 确定表单全局属性配置
  • 实现表单操作curd(增删查改)

我们这里总结了几个常用的表单组件如下:

  • 单选框
  • 复选框
  • 单行文本
  • 多行文本
  • 下拉框
  • 文件上传
  • 日期框
  • 数值输入框

以上这些基本满足我们的日常开发需求,其次我们还可以开发数据源表单组件,列表组件,比如dooring实现的那样: Dooring可视化之从零实现动态表单设计器 类似的还有颜色面板这些,我们可以更具业务需求自行定制。

在完成表单组件库之后,我们就需要根据配置项动态渲染了。也有两种实现思路,一种就是类似于多条件判断,如下:

{
  item.type === 'Number' &&
  <Form.Item label={item.name} name={item.key}>
    <InputNumber min={1} max={item.range && item.range[1]} step={item.step} />
  </Form.Item>
}
{
  item.type === 'Text' &&
  <Form.Item label={item.name} name={item.key}>
    <Input />
  </Form.Item>
}
{
  item.type === 'TextArea' &&
  <Form.Item label={item.name} name={item.key}>
    <TextArea rows={4} />
  </Form.Item>
}

这样做虽然可行,也有很多成熟系统采用该方案,但是一旦表单变多,比如一个页面有几十个甚至上百个表单项,那么我们将渲染m * n次(m为表单组件类型数,n为配置项个数)。另一种方式笔者看来是比较优雅的,可以将复杂度降低到O(n),也就是笔者常用的对象法。思路大至如下:将表单组件的类型作为对象的属性,属性值为对应的表单组件,这样遍历的时候只需要对应上对象的具体类型即可。 代码如下:

// 维护表单控件, 提高form渲染性能
const BaseForm = {
    "Text": (props) => {
        const { label, placeholder, onChange } = props
        return <Cell title={label}>
                    <Input type="text" placeholder={placeholder} onChange={onChange} /> 
               </Cell>
    },
    "Number": (props) => {
        const { label, placeholder, onChange } = props
        return <Cell title={label}>
                    <Input type="number" placeholder={placeholder} onChange={onChange} /> 
               </Cell>
    }
}

//  动态渲染表单
{
    formData.map((item, i) => {
        let FormItem = BaseForm[item.type]
        return <div className={styles.formItem} key={i}>
                  <FormItem {...item} />
              </div>
    })
}

是不是很优雅呢?后期我们只需要在BaseForm里维护表单组件即可,而且还可以基于BaseForm对表单进行包装,实现动态删除,编辑等功能。如下: Dooring可视化之从零实现动态表单设计器 包装后的代码如下:

<div>
  <div className={styles.disClick}><FormItem {...item} /></div>
  <div className={styles.operationWrap}>
      <span onClick={handleEditItem}><EditOutlined /></span>
      <span onClick={handleDelItem}><MinusCircleOutlined /></span>
  </div>
</div>

接下来我们看看表单的全局属性,通过实际分析我们可以知道表单有如下外观:

  • 表单标题
  • 表单背景图片
  • 表单背景颜色
  • 提交按钮样式

所以他们因该成为表单设计的通用属性,如下图所示: Dooring可视化之从零实现动态表单设计器 配置出来之后的表单可能长这样: Dooring可视化之从零实现动态表单设计器 以上的表单通过H5-Dooring设计而来。当然我们可以利用它设计更加自定的表单页面。

最后一个比较使用的需求就是api定制,一般公司可能需要将用户的录入数据收集到自己的平台,那么这个时候我们提供一个api表单提交接口积极很有必要了,上面笔者也展示过,实现很简单,就是配置里多一个api的文本框即可。

最后一步就是实现表单的curd操作,展示如下:

编辑表单项: Dooring可视化之从零实现动态表单设计器 删除表单项: Dooring可视化之从零实现动态表单设计器 添加表单项: Dooring可视化之从零实现动态表单设计器 具体实现也比较简单,只需要基于BaseForm进行包装,添加删除/编辑/添加按钮即可。具体可以参考我的开源项目H5-Dooring,地址:H5-Dooring传送门

利用H5-Dooring开发一款表单设计平台

在H5编辑器Dooring的实现中,我们可以做抽象,每一个页面组件可以看成特定的表单组件,如下图: Dooring可视化之从零实现动态表单设计器 我们可以利用dooring的能力对表单平台进行拖拽,样式设计,数据录入等等操作,感兴趣的朋友可以基于Dooring设计思路改造成自己的表单设计平台。在文末笔者会附上dooring的github地址供大家研究参考。

H5可视化编辑器Dooring功能迭代说明

目前笔者实现的H5可视化编辑器H5-Dooring功能新增如下:

  • 实时保存功能
  • 添加进度条组件
  • 添加websocket通信
  • 实现在线下载代码功能
  • 添加Button组件
  • 添加动态表单设计器

预览地址:基于React+Koa实现一个h5页面可视化编辑器-Dooring

github地址:基于React+Koa实现一个h5页面可视化编辑器-Dooring

最后

如果想学习更多H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战,欢迎在《趣谈前端》一起学习讨论,共同探索前端的边界。

收藏
评论区

相关推荐

从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统(https://juejin.im
前端进阶之从零到一实现单向 & 双向链表
前言 前端工程师对于算法和数据结构这块的知识的掌握程度,是进阶高级工程师的非常重要的标志之一,为了总结一下数据结构和算法方面的知识,笔者今天继续把链表这一块的知识补上,也作为自己知识体系的一个梳理,笔者早在去年就写过一篇关于使用javascript实现二叉树和二叉搜索树的文章,如果感兴趣或者想进阶高级的朋友们可以参考学习一下: JavaScript 中的二
从零开始刷力扣(一)——485:最大连续1的个数
分类:数组的遍历 题目描述: 给定一个二进制数组, 计算其中最大连续1的个数。 示例1: 输入: 1,1,0,1,1,1 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 思路 初始化count和maxCount,然后遍历数组,遇见1则count,并且更新与maxCount比较,若比maxCount更大,则更新m
从零开始刷力扣(二)——495:提莫攻击
分类:数组的遍历 题目描述: 在《英雄联盟》的世界中,有一个叫 “提莫” 的英雄,他的攻击可以让敌方英雄艾希(编者注:寒冰射手)进入中毒状态。现在,给出提莫对艾希的攻击时间序列和提莫攻击的中毒持续时间,你需要输出艾希的中毒状态总时长。 你可以认为提莫在给定的时间点进行攻击,并立即使艾希处于中毒状态 示例1: 输入: 1,4, 2 输出: 4 原因:
从零开发一款可视化大屏制作平台
几个月前开源的H5页面制作平台H5Dooring(http://h5.dooring.cn/) 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring(https://github.com/MrXujiang/v6.dooring.public). 接下来笔者就来带大家一起看看我们的方案设计和技术实现
在浏览器输入 URL到页面展示中间发生了什么?
这个问题是前端的经典问题,从这个问题出发我们可以从根本上了解如何解决性能优化问题 首先我们可以在开头大概了解下在浏览器输入 URL到页面展示,中间有哪些步骤: 用户从浏览器进程里输入请求信息 网络发起 URL 请求 服务器响应 URL 请求之后,浏览器进程就要开始准备渲染进程了 渲染进程准备好之后,需要先向渲染进程提交页面数据,我
从零搭建一款PC页面编辑器PC-Dooring
之前一直忙着调研lowcode平台和开发以下两个项目: H5编辑器 , 可视化大屏编辑器没有太多时间做PC端搭建化项目, 好在搭建平台很多原理都是通用的, 所以早在去年我就开发好了面向PC端的编辑器, 虽然在设计上还有些不足(在后面的内容中会提到), 但是基本模型已经实现, 接下来就和大家一起分享一下具体的实现.为了保证文章整体的逻辑性和条理性, 我将可
redis的三种集群方式
redis有三种集群方式:主从复制,哨兵模式和集群。1.主从复制主从复制原理: 从服务器连接主服务器,发送SYNC命令; 主服务器接收到SYNC命名后,开始执行BGSAVE命令生成RDB文件并使用缓冲区记录此后执行的所有写命令; 主服务器BGSAVE执行完后,向所有从服务器发送快照文件,并在发送期间继续记录被执行的写命令; 从服务器收到
go语言定义“零值可用”的类型
1. Go 类型的零值作为 C 程序员出身的我,我总是喜欢用在使用 C 语言的”受过的苦“与 Go 语言中得到的”甜头“做比较,从而来证明 Go 语言设计者在当初设计 Go 语言时是做了充分考量的。在 C99 规范中,有一段是否对栈上局部变量进行自动清零初始化的描述: 如果未显式初始化且具有自动存储持续时间的对象,则其值是不确定的。规范的用语总是晦涩难懂的。
Dooring可视化之从零实现动态表单设计器
前言之前笔者有写过一篇如何设计动态表单配置平台的文章,但是由于笔者电脑问题代码丢失,所以后期重新实现了一套表单设计器,并优化了之前的设计方式,特地做一下总结和复盘。 你将收获 动态表单开发的一般思路 可视化领域中的表单引擎 从零实现一款动态表单设计器 利用H5Dooring开发一款表单设计平台 正文按照习惯,我们先看看表单设计器实现的效果展示:上图中我们将表
ECharts团队出品的可视化神器,值得一试
大家好,我是小五🚀如果你对可视化感兴趣的话,一定了解过ECharts或者pyecharts。不过使用它们还是需要有一定编程基础,今天给大家安利一个:同为ECharts团队出品,但是0编程的可视化神器。简介百度图说是一款在线可视化工具软件,可以实现零编程玩转图表。它的图表样式一共8类22种,对比之前介绍的还是少了一些。官网地址:https://tushuo.b
python——零基础照样学
零基础,可以学编程嘛?这是很多初学者的心里都会存在的一个问题,当然,计算机方面的基础对任何一门编程语言的学习都是会有所帮助的,但是如果你在编程语言的学习上是零基础的话,也不用担心,因为不论哪门语言的学习,总是会有一个开始的。谁不是从零基础开始呢。 我个人观点是python,是最适合作为学习编程路上的入门语言。原因大家都懂,python语言相对于其他语言来说
基于Docker搭建WordPress动态博客教程
从零开始搭建WordPress动态博客站点 声明:本帖子适用于新手,我也是个新手,只是用于技术分享和记录生活 准备工作: 域名 Linux服务器(1核2G的就够用) dockercompose.yml文件(下载地址我会贴在帖子最下方)Ps:如果要搭建本地的上面的都不需要准备 可以去看b站up主的视频 1. 第一步 + 因为是
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
从零使用electron搭建桌面端可视化编辑器
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随