json字符串转成formdata_JSON生成Form表单

JSON表单

描述

JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。

JSON表单的优点是：

可以快速构建出一个表单

表单的数据、逻辑、视图分离，方便抽离和进一步抽象

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

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

原始表单的缺点

1：代码量庞大，开发效率低

每次开发一个表单页的时候，都需要重复编写表单组件及其交互事件的代码，这块代码重复编写且与主线业务逻辑无关，除此之外，表单的校验、缓存等额外功能，也需要不少的代码量，这样就造成了一个表单页的代码量庞大。

2：不便于抽离和进一步的抽象

在一个表单页内，往往会将表单数据、表单组件、控制逻辑杂糅在一起，当发现某一个子功能在很多场景下都需要用到的时候，想把该子功能拆分出来发现并不容易，因为逻辑、数据、视图的杂糅，导致想把子功能不受影响的剔除出来需要很仔细的检查，这样就导致功能的抽离和抽象的不便

3：维护成本高

这个和第二个问题是同样的原因，这也是我的亲身经历，当我在项目中想优化一个小功能的时候，发现不仅把之前的逻辑改没了，还引出了不少的bug，这导致在一个逻辑很复杂的表单里，维护变成了一件高危工作。

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

如何使用

依赖环境

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',

placeholder: '请输入param',

validate: ['required', /^[a-zA-Z_{}0-9]+$/g],

style: {

display: 'inline-block',

width: 270,

},

},

{

type: 'select',

dataKey: 'typeName',

options: ['string', 'integer', 'float'],

style: {

display: 'inline-block',

width: 100,

margin: '0 15px'

},

validate: [{type: 'required', message: 'param类型不能为空'}]

},

{

type: 'textarea',

dataKey: 'descr',

placeholder: '请输入param含义',

label: 'param含义',

validate: ['required'],

style: {

width: 385,

}

},

]

}

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

上面是用JSON描述的三个常用的表单组件组合成的表单，其效果图如下：

JSON表单的格式

{

formKey: 'paramAddForm',

data: {},

config: []