我理解的表单生成器,低代码平台的核心

4,369 阅读4分钟

斜阳草树,寻常项陌,人道寄奴曾住。想当年,金戈铁马,气吞万里如虎。

前情回顾

上次的代码处理掉了拖拽的问题,当然这个拖拽问题是个非常简单的问题。这次要讨论的问题应该是低代码或者表单生成器的一个核心问题。

组件数据如何转化成右侧的配置表单

表单生成器 和 低代码平台的异同

如果是简单的表单生成器,数据流就非常简单,右侧配置-->表单组件-->全局状态控制表单数据,提交表单时从全局获取表单数据即可。因为它的表单组件非常简单,通常都是单个的数字,文本或者选项列表,字段比较好控制。

但是如果作为一个低代码平台的话,数据流就相对复杂。因为组件不仅仅是单个的文本输入框,有可能是个页面,图表等等,而且组件所需的数据也可能很多,并且类型多变。Object,Array,String,Number都有可能。

数据的真实流向

之前的数据的流程预计如下图:

参数==>Setter==>业务组件==>更新展示内容

当然也有可能不需要Setters,直接:

参数==>业务组件==>更新展示内容

这个其实是不准确的。如果只是简单的开发一个表单生成工具,这种数据流勉强能支撑起这么个小业务。考虑到如果我们是在开发一个界面配置平台,那么这种数据流就显得有些力不从心了。

那么,对于一个拖拽式的界面配置平台,核心是什么呢?毫无疑问,核心是业务组件。而业务组件的核心又在于组件需要的数据。 所以,根据以上的分析,对于一个界面配置平台来说,真实的数据流应该如下图:

应该先根据组件中的数据去生成 能够展示右侧setter的数据格式 然后根据这个格式去渲染右侧的配置项。然后配置项的数据更新后,依次将数据回传到组件中。这样,才是一个完整的过程。

难点在于如何将组件中的数据表示为一个可以展示右侧setter的数据格式。比如一个组件中的数据如下:

// test.vue
...
data(){
  return {
    msg:{
      value:'test'
    }
  }
}

这个时候就有可能需要先判断这个msg的类型,然后判断其value的类型,最后得出一个结论,它需要一个TextSetter。然后生成一个对应的数据格式,比如:

  configParams:[
    {
      fieldName:'msg',
      setterType:null,
      fieldValue:[
        {
          fieldName:'value',
          setterType:'TextSetter',
          fieldValue:'test'
        }
      ]
    }
  ]

虽然组件中的data数据是个对象,但是渲染配置项的时候,转换成数组似乎更加合理一些。 这样一来,基本上可以满足组件配置化的需求,进而可以实现页面配置化。

但与此同时,右侧参数配置区的展示也需要单独进行处理。因为参数的配置不在是单一的配置,一个复杂的业务组件中可能包含多个setter,并且这些setter有可能存在嵌套的关系。

这些其实已经无关紧要了,只要弄清楚了核心部分,剩下的就是一个搬砖的过程了。

最后

个人感觉用Vue开发一个这样的东西,比用react显得稍微复杂一些。因为react的函数式组件props可以直接接受children组件进渲染。在转换组件数据的时候更加容易一些。

而Vue的props又不能直接修改,以及一些其他的限制,所以还是感觉react在开发复杂应用的时候略胜一筹。

总结

有些东西我们平时都遇到过,并且也在用,但是有时候没有去深入的思考一些问题。只有当我们去深入的思考过一些问题后,才能对这些个问题有更加深入认识。

代码仓库:https://gitee.com/mynoe/low-code-platform.git

最后说两句

  1. 动一动您发财的小手,「点个赞吧」
  2. 动一动您发财的小手,「点个在看」
  3. 都看到这里了,不妨 微信搜索《javascript高级程序设计》「加个关注」
  4. 不妨 「转发一下」,好东西要记得分享