从0到一实现一个动态表单之定义 JSON schema篇

首先介绍一下动态表单的概念:

动态表单是指----前后端约定一套表单定义规范。根据此规范,后端提供表单描述配置json schema;前端将此配置传入到动态表单框架后即可动态渲染出整个表单。整个过程,前端不需要写任何代码,均由框架完成(表单相关的交互、校验、数据等细节都在体现在表单描述配置json了,无需手动写入到业务代码中)

可能有人会质疑什么场景下会需要配置化表单。其实当你的业务量达到一定的量级,做很多流程审批任务协同之类的中后台产品的时候就会发现表单的需求真的是源源不断,大同小异,既浪费时间也浪费精力。 我们通过json schema规范每个UI组件。这个规范其实包括了中后台系统的UI规范,约束设计师的随意发挥,从而降低开发维护成本。ex:Ant Design 就是从UI规范约束设计师的随意发挥,从而打造出一整套的UI规范,然后衍生出一套后台组件体系。


动态表单的基石就是统一的UI体系。如果你的UI体系越随意,越个性,那么你的jsonSchema必然会越复杂越臃肿。所以我们需要和设计师&产品约定好合适的UI,从而实现一个合适的JSON-schema。 **

一个简单的动态表单架构图如下: 


从0到一实现一个动态表单之定义 JSON schema篇 第1张


下面我会详细介绍一下如何从零到一打造一套完整的动态表单解决方案。

如何定义一个合适的json-schema

json-schema文档见这里 在项目开发初期我们需要定义一个合适的json-schema,所谓合适的json-schema,就是指能满足现有的业务模型,尽量减少冗余的字段,又能支持一定的扩展。方便后续的维护更新扩展。 我们参考了集团的xform(外网可能无法访问。。。)


一个form表单由jsonSchema、uiSchema、formData、bizData四个json来描述 

下面分别说一下各个字段的描述含义

未完待续

本文标题:从0到一实现一个动态表单之定义 JSON schema篇
本文链接:https://www.56way.com/p/110.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文使用「署名-非商业性使用 4.0 国际」创作共享协议,转载或使用请遵守署名协议。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。