刚开始接触 Low code/0 code 这种概念的时候,是源于我们项目组的一个简单的需求。这个需求就是怎样动态化去做一个表单,以及表单查询页面。
思考阶段
于是开始了简单的思考,对于通常中后端的管理平台,前端要处理的业务逻辑大概分为查询数据进行列表展示,详情页面展示,内容字段编辑等方面。
就拿列表展示页面来说,我们可以把查询条件抽象出来,通过一个数组去配置,表单的元素也通过选择类型配置出来(如 Input,select,dataPicker 等),然后定义其特有的属性值。查询所调用的接口也暴露出配置项,然后查询返回的结果,通过一个 arr 去存储字段的 key 值。
由此类推,详情展示页面和内容编辑页也暴露出 api 层和字段层去配置。
准备及开发阶段
接下来我们需要结合一个 UI 组件库,或者有时间的话,手写一个组件库也可以,自己手写的话,可改性会更高一些。目前我们项目里采用的 UI 组件都是自己手写的。
然后是几种模板的开发,目前模板包括:查询列表页模板、新增页模板、编辑页模板、详情页模板 四种模板。
开发完模板,接下来就是交互方式了,比如我要在一个查询结果,点击配置编辑按钮,优雅的在当前页面去加载配置的编辑页面,而不是跳转到另外一个页面去做(这样比较 low),其实我们的做法是做一层路由模板,路由模板控制着数据的流动。在列表页模板里设置按钮的交互方式,路由模板根据这个交互方式,去打开一个 modal,里边引入跳转目标页模板。
进阶阶段
有了这个初步的模板工具后,我们还是觉得不太满足。因而我们要求有一个 diy 布局模板,
每个 diy 里的模块,可以引入其他的模板,有时候会感觉这样有点太乱,模板之间的通讯还没想好,我们也在不断的尝试,希望有小伙伴可以一起加入
接下来要做的事:
- 扩大模板库
- 配置文件的本地化,目前配置文件是在数据库存的,在本地化会更快一些。
- 模板间的通讯
- 未完思考中。。。
我们做出来的成果