前端schema表单配置生成方案

您所在的位置：网站首页 › schema协议 › 前端schema表单配置生成方案

前端schema表单配置生成方案

2024-01-03 23:35| 来源: 网络整理| 查看: 265

一、背景

表单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比较适合本人本次的项目选型。

【本文地址】

前端schema表单配置生成方案

前端schema表单配置生成方案

今日新闻

推荐新闻