前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用json配置文件自动生成网页表单控件页面,让面向业务的开发开归本质。

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

作者头像
Excel催化剂
发布2021-08-18 14:40:11
2.3K0
发布2021-08-18 14:40:11
举报
文章被收录于专栏:Excel催化剂

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

一、很早之前其实在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开发。

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-04-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Excel催化剂 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、很早之前其实在Excel就有提供类似技术
  • 二、网络时代Json已经取代了Xml的历史地位
  • 三、使用Json Schema自动生成网页表单页面原理
  • 四、使用Json配置生成网页表单窗体的开发优势所在
    • 1、字段约束根据配置文件定义自动生效
      • 2、窗体表单用户填写好的数据,可轻松采集到位
        • 3、表单初始化可一次性赋值初始值
          • 4、将返回的json对象和源对象合并处理
          • 五、Json Schema的自动化生成
          • 六、和xpath对应的JsonPath的读写库
          • 七、结语
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档