前端schema表单配置生成方案

一、背景

表单Form开发，尤其在中台项目中，是FE的家常便饭，一般需要大量的重复性工作：

• 编写模板
• 编写校验规则
• 表单提交（偶尔联动）

同时，Server也需要编写校验规则。然而，伴随业务变更和前后端开发同步不及时的情况，前后端校验规则可能会存在不一致的问题。所以「前后端共用校验规则」也可在范畴之内。

二、目标

减少重复性工作：通过配置自动生成表单模板，同时这个配置最好还能描述表单校验相关。

三、方案选型

1. form-render

2019年10月阿里开源，基于React框架的跨组件表单生成引擎。通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成。

官方文档

playground演示

优点：

• schema基于JSON schema 协议进行拓展，可以无缝接入；
• 天然支持 antd 和 fusion两套，其他的组件库可通过 widgets 的方式传入；
• 对于具体表单组件属性的互动，使用ui:options存放的特定配置（例如textarea的rows，基本上所有的antd文档中的props都可以使用ui:options的方式来直接使用）；
• 对于具体表单组件样式的互动，使用的是ui:className，可通过该属性值的变动驱动该组件的样式；
• 支持弹窗展示，list+list无限嵌套，list+modal等复杂数据结构；
• 当使用 js 对象作为 schema 时，属性的值可以传函数，实现组件之间的联动；
• 支持自定义组件功能，自定义主题，如定制化按钮、异步搜索输入框或者含xxx UI的组件；

缺点：

• 开源时间不长，参考内容有限（在接受范围之内）；
• 关于表单校验，只满足简单的长度校验和正则表达式校验，复杂的校验场景（如接口校验）不能通过JSON schema驱动；
• 暂时没有Vue框架的版本；

2. react-jsonschema-form

基于React的组件，支持常用UI库，使用JSON Schema 生成Form表单。

官方文档

Playground

优点：

• 遵循 JSON Schema 规范，只需要给定 JSON Schema，即可生成对应的form表单；
• 支持自定义组件、自定义模板、自定义主题
• 支持Ant Design、Bootstrap 3、Bootstrap 4、Fluent UI、Material UI、Semantic UI；
• 社区比较活跃，star✨较多；

缺点：

• 目前的版本默认视图依赖elementUi，后续版本可能会解耦开；
• 表单schema校验使用 ajv，有一定的使用成本；
• 官方示例较少，英文文档，上手体验一般；

3. vue-json-schema-form

react-jsonschema-form的vue版本，基于 Vue、ElementUi、JSON Schema 动态生成一个带完整校验的Form表单。

官方文档

Playground

优点：

• 遵循 JSON Schema 规范，只需要给定 JSON Schema，即可生成对应的form表单；
• 有活动编辑器和Schema生成器，开发体验友好；
• 表单schema校验使用 ajv，相对来讲校验比较丰富；

缺点：

• 目前的版本默认视图依赖elementUi，后续版本会解耦开来，可通过配置适配ElementUi，iView 或者你自己开发的组件库等；
• 基于vue的框架，且暂不支持vue3；
• 表单schema校验使用 ajv，有一定的使用成本；
• 社区不是特别活跃，star✨较少；

4. form-generator

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

Playground

优点：

• 20+个组件基本能满足业务场景使用；
• 可以导出vue文件，小特色；

缺点：

• 只有生成器教程，竟然没有开发文档；
• 不支持组件联动，硬伤；
• 组件嵌套时，似乎不是很流畅，issue里有人提到；
• 除了必填和正则表达式校验，不支持别的；

5. amis

2019年7月百度开源，前端低代码框架（包含了表单生成），通过 JSON 配置就能生成各种页面。

amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component 然后，然后把其他属性作为 props 传递过去完成渲染。

官方文档

amis编辑器demo

优点：

• 内置100+种UI组件，同时支持自定义组件、模板开发；
• 支持JS SDK 和 React两种使用方法；
• 对于组件样式的互动比较丰富，如表单label提示；
• 表单校验内置邮箱、URL各种格式，支持自定义校验，和自定义验证提示；
• 容器支持无限级嵌套，可以通过组合来满足各种布局需求；
• 支持基本组件联动、接口联动和组件间的联动；
• 框架成熟，文档示例齐全；

缺点：

• 比较庞大，适合mis系统页面配置生成，可能不太适合本次表单生成方案；
• 开发复杂度较高，不易上手；
• 与JSON schema 协议融合度不高；
• 内置UI比较素，或者通过自定义组件来使用第三方UI；
  等等，还有很多框架，不再赘述…

结论

总体言之，表单生成方案比较丰富，基本都能满足常见业务场景。本次调研草率的体验了几个常用的表单生成框架，如有错误之处，还请告之及时更正。

最后，从功能支持、技术生态、开发体验、协议标准、可扩展性等多方面来考量，个人认为，form-render比较适合本人本次的项目选型。