JSON生成Form表单（一）

qpal 发布于2019-08-23 13:39 / 1346人阅读

摘要：介绍表单是一个基于的抽象组件，它能将格式的配置渲染为一个表单，在实际项目中，通过它可以快速的搭建出一个表单页，这在端项目中，有着很广泛的用途。如何使用表单的地址为。

介绍

JSON表单是一个基于React的抽象组件，它能将JSON格式的配置渲染为一个Form表单，在实际项目中，通过它可以快速的搭建出一个表单页，这在B端项目中，有着很广泛的用途。

JSON表单的优点有以下几点：

可以快速的构建出一个表单

将表单的数据、逻辑、视图分离，结构简单，进一步抽象和维护也就比较容易

提供校验、自动缓存等额外功能，提升录入体验

可以跨项目共用复杂的表单组件

在一个前端团队中，组件共用显然是一件很有必要的事，但是对于表单组件来说，由于灵活度很高，如果没有约定俗成的一套规则，抽象出来的表单组件其实用价值不是很高，那么，JSON表单提供的也就是一套规则，能够使用JSON的数据格式去渲染抽象出来的表单组件。

原始表单

在这里，我暂且将不是通过JSON表单渲染出来的表单称为原始表单，以此来作为JSON表单的对比，在我开发过的大量的表单页里，我经常为以下的缺点所苦恼：

代码量庞大，开发效率低

数据、逻辑、视图杂糅，不便功能拆分和抽象

维护成本高

需要额外处理校验和缓存等功能

不同项目中很难共用表单组件

表单页的代码量是很庞大的，这是由于表单组件的重复编写和处理表单校验等非主线功能，导致开发表单页的效率很低下，并且由于表单页的数据、逻辑、视图杂糅在一起，后期需要拆分、抽象子功能模块或者维护表单页时，这将是一件很头疼的事，

在B端项目中，表单是一个很常用的功能，对于复杂且多个项目中都用到的表单组件，往往都想将该表单组件抽象出来，但是原始表单组件的抽象成本很高，需要考虑在不同项目中的灵活度的问题，且没有一套约定的规则，导致该组件的适用范围很小。

如何使用

JSON表单的github地址为：json_transform_form。

依赖环境

React，基于React的抽象组件

async-validator，基于它做表单校验

安装

npm i json_transform_form --save

一个栗子

import Form from "json_transform_form"

const config = {
    formKey: "example-form",
    data: {
        name: "",
        descr: "",
        typeName: ""
    },
    config: [
        {
            type: "input",
            dataKey: "name",
            label: "param",
            style: {
                wrap: {
                    display: "inline-block",
                    width: 270,
                }
            },
        },
        {
            type: "select",
            dataKey: "typeName",
            options: ["string", "integer", "float"],
            style: {
                wrap: {
                    display: "inline-block",
                    width: 100,
                    margin: "0 15px"
                }
                
            },
        },
        {
            type: "textarea",
            dataKey: "descr",
            placeholder: "请输入param含义",
            label: "param含义",
            style: {
                wrap: {
                    width: 385,
                }
            }
        },
    ]
}

 this.FormWrap = ref} config={config}>

上面的代码描述了三个常用表单组件组成的简单表单，其效果如下图所示：

JSON表单的详细配置请看下节的JSON生成Form表单（二）。

云服务器 GPU云服务器 form表单提交json form表单校验 form表单插件 form表单判断

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99314.html

JSON生成Form表单（三）

摘要：嵌套组件配置如果表单组件里还含有其他表单组件，这时直接通过组件配置去渲染无疑能节约不少的工作量。请输入方法传入组件配置的列表就能渲染出表单组件来，需要注意的是，子表单组件的一定是基于父表单组件的。表单的实例方法请看下节的生成表单四 container表单组件在实际的项目中，JSON表单提供的表单组件是远远不够的，而且提供表单组件是一件低效的事，目前Ant Design组件库提供的表单...

Half 2019-08-23 13:39 评论0 收藏0
JSON生成Form表单

摘要：是校验表单组件数据正确性的字段，其值为数组，里面的数组元素可以为。所以数组元素如果为的话，其内容就是的。到目前为止，表单适合大部分的表单应用场景。 JSON表单描述 JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。JSON表单的优点是：可以快速构建出一个表单表单的数据、逻辑、视图分...

bingchen 2019-08-26 13:22 评论0 收藏0
JSON生成Form表单（二）

摘要：配置表单的配置分为两种，暂且称描述表单信息的为表单配置，描述表单组件信息的为组件配置。组件组件主要是用来描述组件数据为数组格式的表单组件，其示例如下组件配置是基于父表单组件其效果图如下表单的表单组件请看下节生成表单三 JSON配置 JSON表单的配置分为两种，暂且称描述表单信息的为表单配置，描述表单组件信息的为组件配置。JSON表单的配置一定是两种配置的组合。在开始讲解配置之前先介绍...

bang590 2019-08-23 13:38 评论0 收藏0
JSON生成Form表单（四）

摘要：表单实例方法静态方法表单有一个静态方法方法时表单的静态方法，用来引入抽象出来的表单组件。首先需要开启实时表单提交，在表单配置中设置为。到目前为止，表单适合大部分的表单应用场景。 JSON表单实例方法静态方法 json表单有一个静态方法：createCustomComp import Form from json_transform_form import components fro...

Richard_Gao 2019-08-23 13:39 评论0 收藏0
自定义表单生成器form-create v2介绍

摘要：介绍是一个可以通过生成具有动态渲染数据收集验证和提交功能的表单生成器。并且支持生成任何组件。结合内置种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。文档 | git...

lufficc 2019-08-23 18:16 评论0 收藏0