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


前情回顾

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

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

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

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

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

数据的真实流向

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

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

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

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

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

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

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

我理解的表单生成器，低代码平台的核心_拖拽_02

应该先根据组件中的数据去生成 ​​能够展示右侧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. 都看到这里了，不妨 微信搜索​​《javascript高级程序设计》​​​​「加个关注」​​
  3. 不妨 ​​「转发一下」​​，好东西要记得分享