candys-tool low code的一种尝试

#1

candys-tool low code的一种尝试

刚开始接触Low code/0 code这种概念的时候,是源于我们项目组的一个简单的需求。这个需求就是怎样动态化去做一个表单,以及表单查询页面。

思考阶段

于是开始了简单的思考,对于通常中后端的管理平台,前端要处理的业务逻辑大概分为查询数据进行列表展示,详情页面展示,内容字段编辑等方面。

就拿列表展示页面来说,我们可以把查询条件抽象出来,通过一个数组去配置,表单的元素也通过选择类型配置出来(如Input,select,dataPicker等),然后定义其特有的属性值。查询所调用的接口也暴露出配置项,然后查询返回的结果,通过一个arr去存储字段的key值。

由此类推,详情展示页面和内容编辑页也暴露出api层和字段层去配置。

准备及开发阶段

接下来我们需要结合一个UI组件库,或者有时间的话,手写一个组件库也可以,自己手写的话,可改性会更高一些。目前我们项目里采用的UI组件都是自己手写的。

然后是几种模板的开发,目前模板包括 :查询列表页模板 、新增页模板、编辑页模板、详情页模板 四种模板。

开发完模板,接下来就是交互方式了,比如我要在一个查询结果,点击配置编辑按钮,优雅的在当前页面去加载配置的编辑页面,而不是跳转到另外一个页面去做(这样比较low),其实我们的做法是做一层路由模板,路由模板控制着数据的流动。在列表页模板里设置按钮的交互方式,路由模板根据这个交互方式,去打开一个modal,里边引入跳转目标页模板。

进阶阶段

有了这个初步的模板工具后,我们还是觉得不太满足。因而我们要求有一个diy布局模板,

每个diy里的模块,可以引入其他的模板,有时候会感觉这样有点太乱,模板之间的通讯还没想好,我们也在不断的尝试,希望有小伙伴可以一起加入

接下来要做的事:

  1. 扩大模板库

  2. 配置文件的本地化,目前配置文件是在数据库存的,在本地化会更快一些。

  3. 模板间的通讯

  4. 未完思考中。。。

我们做出来的成果

![](data:image/svg+xml;utf8,<?xml version="1.0"?>)

联系方式

#2

外链的图片被墙了.