使用json配置文件自动生成网页表单控件页面，让面向业务的开发开归本质。

在现代语言的开发中，大量要做的其实仅仅是一些配置信息，然后由各种框架、类库帮我们解决大部分有逻辑可行的部分。 对网页开发来说，笔者也一路想实现一种效果，只需配置就可以完成网页表单的自动创建。攻夫不付有心人，终于找齐了这一愿景所需的轮子库，现在基本实现自己所要的效果。

一、很早之前其实在Excel就有提供类似技术

在1999年的远古时代里，Excel已经支持数据绑定的方式，用外部的xml文件来控制Excel单元格的内容规范或ListObject的列表数据列规范。其中用到的是Xpath属性和Xml Schema Description(XSD)。

如下图中的Xpath文档描述

更多Excel的Xml数据操作和绑定的知识介绍可以参看ExcelHome很久之前翻译的著作【Excel2007 VBA参考大全】，有专门一个章节介绍。

在XSD文件中，可以定义许多约束关系，如字段类型属于文本还是数字，字段的文本长度，数字大小范围，是否必需项，默认值是什么等等，微软OFFICE中，曾经有一个组件infoPath，就是干这件事，通过界面的方式来配置出相应的XSD规范文件。让表单的填写最终可以对产生的数据质量可控。

二、网络时代Json已经取代了Xml的历史地位

作为数据交换技术，现有xml和json两大阵营，而多数现代Web Api已经转到Json的阵营，所以当下有大量的Json使用场景，其中数据映射也出现了专门的Json Schema Description对标以前的XSD。

而本篇所提及的使用Json配置来完成窗体表单的设计，准确来说，是使用Json Schema文件来完成。

同样地关于Json Schema的更多了解，可访问此网址，有介绍到对其实现的许多语言和工具：

https://json-schema.org/implementations.html

而对于WebUI创建环节，有好几个相应的JavaScript类库，笔者有限的能力下，对其中JSON Form这一个类库有了更深入的了解和学习，本篇下面也是着重讲此类库的实现，有兴趣的朋友也可以对其他几项进行了解和学习，可能可以得到更好的解决方案。

三、使用Json Schema自动生成网页表单页面原理

先上效果图，下方红圈部分，为笔者打算在网页图表中，所开放出来的部分属性修改，使用上述提到的JSON Form库，直接通过写Json Schema后，直接渲染出来的，没有作相应的html和css代码编写（需要对后期效果美化，会用到css再精细化布局一下，例如下图中，默认单行一列显示，现处理成单行多列显示）。

学习此库是有些成本，需要自行对细节进行更多学习，本篇非详细教学文章，只是牵头给大家看到其中的可能性。如下图中，其官方的详细的示例演示和文档说明，认真看下来是可以掌握到够用的程度的。

详细文档地址：https://github.com/jsonform/jsonform/wiki

四、使用Json配置生成网页表单窗体的开发优势所在

除了上述展示的，使用纯配置的方式，仅需使用Json Schema文件，即可完成了整个网页表单的自动生成外，还有其他几点的优势，这里简单罗列下。

1、字段约束根据配置文件定义自动生效

如上图中说到，每个网页表单控件中，根据我们定义的字段类型和其他规范要求，相应地在网页控件渲染出来后，这些约束已经在生效了，例如是枚举字段时，会渲染出一个下拉选择框，用户不能输入选择项以外的内容。

类似还有哪个字段是必填、数字字段类型它的范围是多少，限定其输入范围在最大最小值内等等。这些都不需要我们再进行其他的脚本编写。

2、窗体表单用户填写好的数据，可轻松采集到位

以下图中，点击提交后，整个表单将以一个json对象数据的方式返回，不用再一个个表单控件去查找用户输入的值。

3、表单初始化可一次性赋值初始值

因其使用json作为数据交互的媒介，所以初始值和返回值都是一个json数组。只需在其配置中对初始值进行配置即可。

其初始值甚至可以是数组，用户界面相应地出现多条记录。

4、将返回的json对象和源对象合并处理

我们首先手头上有一个初始化时的json对象，而用户界面交互操作后得到了一个新的json对象（注意非必填项为空时，新对象会没有这个节点数据），如何快速将新的json对象合并到原来的初始化对象呢？

例如笔者在开发Vega图表时，本身就有一个初始化的json属性供Vega库来调用配置相关的属性，用户交互更新了这些属性，如何快速将其映射到原来的json对象中，让代码读取原结构即可实现更新效果。

当有规律的东西，请多多想想轮子，或许世界某个角落已经有人专门为我们实现了相应的功能，我们只需拿来主义就可以用上避免自己烧脑再想解决方案。

此轮子就是lodash，只需一个方法merge，即可完成我们需要效果。

具体可查阅文档：http://lodash.think2011.net/merge

五、Json Schema的自动化生成

作为一名合格的开发者，总需要找寻一些现成的工具来完成一些规律化的重复操作，例如生成这个json Schema文件，如果可以直接给一个json对象，就可以生成此json schema，岂不是美事么？

方向对了，就差寻找的过程，最终笔者为大家找到了一款VSCode插件 JSON Utils，可以一键生成json schema雏形。一条命令即可完成。

因JSON Form库使用的不是完全标准规范的Json Schema，特别是对数组结构的json Schema节点，所以上述生成的json Schema文件，可能还需要作一些小幅修改，具体细节自行去翻阅官方文档。

六、和xpath对应的JsonPath的读写库

有做过网页采集的相关工作的，对xpath应该不会陌生，快速定位网页节点内容一大神器，而同样地，在处理json文件时，也有和它类似的jsonPath的选择定位语法。

而在javascript环境下，笔者为大家找到了一个库JSONPath-Plus，非常不错，值得学习掌握。此库在手，大大增强我们访问json对象的能力，特别是一些复杂有很深层级结构的json对象。具体使用方法可自行参考官方文档：https://github.com/JSONPath-Plus/JSONPath

七、结语

本文给大家分享了近期一路探索的关于json、json schema、自动化渲染网页表单等主题，文中大家看到的几个库，是笔者经比较试错后，从同类主题中，亲身试用并发现其可行性及价值点的。

知识的学习中，需要有指引，希望笔者这些的分享，能够给大家一些不错的思路启发，让大家可以更方便更快速地进行WPSJS开发。

也盼望更多的人，加入到分享的行列，让社区更繁荣，技术的一大魅力是：越分享，越有回报，越学习，越有进步。

本文提及的几个库，请务必使用官方文档的方式来学习，任何其他零碎的文章分享方式学习，只会让自己更沮丧，这也是笔者自己亲身经历的感受，没有谁比作者更懂他自己所造的轮子的使用，更多细节只能在官方文档里找寻得到。