一种在移动终端中渲染Web表单的方法和系统与流程

一种在移动终端中渲染web表单的方法和系统
技术领域
1.本发明涉及信息技术领域，具体涉及一种在移动终端中渲染web表单的方法和系统。


背景技术：

2.在生态环境行政执法过程中，需要通过移动终端设备填写现场检查表单，现场检查表单有多种，有常用的现场检查记录表、按行业类型划分的现场检查表、存在违法行为需要填写的检查表等，并且每个表单通常包含大量字段，字段需要做合法性校验，且字段间存在逻辑关联等，开发人员采用常规开发方式，需要逐个创建表单，逐个绘制表单字段，编写表单字段校验、关联逻辑，存在大量重复劳动，需要耗费较大的时间、人力成本。


技术实现要素：

3.本发明主要解决的技术问题是现有开发技术在创建不同表单时需要逐个创建表单，存在大量重复劳动，需要耗费较大的时间、人力成本。
4.根据第一方面，一种实施例中提供一种在移动终端中渲染web表单的方法，包括：
5.pc端响应于用户操作编辑表单元素以形成表单，根据所形成的表单生成表单配置文件；
6.pc端将所述表单配置文件存储至服务器；
7.移动终端从所述服务器中获取所述表单配置文件，使用预先通过前端框架开发的表单ui解析器对所述表单配置文件进行解析和渲染，以将表单元素渲染成相应的前端元素组件，还原出在pc端上编辑的表单；其中每种表单元素都有对应的前端元素组件。
8.一种实施例中，pc端编辑的每个表单元素代表一个dom节点，所述表单配置文件为一json文件，所述根据所形成的表单生成表单配置文件包括：根据表单的dom节点树生成一json文件作为表单配置文件，json文件的各个节点与表单的dom节点树相匹配，其中json文件的根节点代表整个表单对象。
9.一种实施例中，所述json文件中的每个节点包括以下属性：元素类型、标题、字段名、校验类型、可选项和默认值。
10.一种实施例中，所述元素类型包括：元素组、动态元素组、文本元素、单选框元素、多选框元素、时间选择元素、下拉框元素、标签元素、人员选择元素、附件上传元素和签名元素，所述校验类型包括：文本、整数、浮点数、日期、手机号、邮箱和身份证号码。
11.一种实施例中，所述前端框架为vue框架，所述前端元素组件为元素vue组件。
12.一种实施例中，元素vue组件具有渲染标题、输入域、校验方法和绑定默认值功能。
13.一种实施例中，通过以下方式对所述表单配置文件进行解析和渲染，以将表单元素渲染成相应的前端元素组件，还原出在pc端上编辑的表单：从所述表单配置文件的根节点开始，依据json节点顺序对所述表单配置文件的各个节点进行遍历和/或递归，读取各节点的数据，进行解析并渲染成相应的元素vue组件以形成表单，从而还原出在pc端上编辑的
表单。
14.一种实施例中，表单被配置有表单配置id，移动终端根据所需使用的表单的表单配置id从所述服务器中获取相应的表单配置文件。
15.根据第二方面，一种实施例中提供一种在移动终端中渲染web表单的系统，包括：
16.服务器，用于存储数据；
17.pc端，用于提供可视化页面供用户对表单元素进行编辑以形成表单，根据所形成的表单生成表单配置文件，将所述表单配置文件发送至所述服务器进行存储；
18.移动终端，用于从所述服务器中获取所述表单配置文件，使用预先通过前端框架开发的表单ui解析器对所述表单配置文件进行解析和渲染，以将表单元素渲染成相应的前端元素组件，还原出在pc端上编辑的表单；其中每种表单元素都有对应的前端元素组件。
19.依据上述实施例的在移动终端中渲染web表单的方法和系统，开发人员可以在pc端上设计、编辑表单，以及使用前端框架开发移动终端上使用的ui解析器和前端元素组件，编辑完成的表单被生成表单配置文件保存至服务器，当用户需要在移动终端上使用表单时，移动终端从服务器上获取表单配置文件，使用ui解析器对表单配置文件进行解析和渲染，将表单元素渲染成相应的前端元素组件，还原出在pc端上编辑的表单，在移动终端上显示该表单供用户填写，省去了逐个表单进行代码开发的步骤，实现业务表单的快速设计和开发，节省了时间和人力成本。
附图说明
20.图1为一种实施例中的在移动终端中渲染web表单的系统的结构示意图；
21.图2为本发明从表单设计到用户使用表单进行业务处理的总体过程的流程图；
22.图3为表单制作过程的流程图；
23.图4为解析和渲染过程的流程图；
24.图5为一种实施例中的在移动终端中渲染web表单的系统的结构示意图；
25.图6为一种实施例中的在移动终端中渲染web表单的方法的流程图。
具体实施方式
26.下面通过具体实施方式结合附图对本发明作进一步详细说明。其中不同实施方式中类似元件采用了相关联的类似的元件标号。在以下的实施方式中，很多细节描述是为了使得本技术能被更好的理解。然而，本领域技术人员可以毫不费力的认识到，其中部分特征在不同情况下是可以省略的，或者可以由其他元件、材料、方法所替代。在某些情况下，本技术相关的一些操作并没有在说明书中显示或者描述，这是为了避免本技术的核心部分被过多的描述所淹没，而对于本领域技术人员而言，详细描述这些相关操作并不是必要的，他们根据说明书中的描述以及本领域的一般技术知识即可完整了解相关操作。
27.另外，说明书中所描述的特点、操作或者特征可以以任意适当的方式结合形成各种实施方式。同时，方法描述中的各步骤或者动作也可以按照本领域技术人员所能显而易见的方式进行顺序调换或调整。因此，说明书和附图中的各种顺序只是为了清楚描述某一个实施例，并不意味着是必须的顺序，除非另有说明其中某个顺序是必须遵循的。
28.本文中为部件所编序号本身，例如“第一”、“第二”等，仅用于区分所描述的对象，
不具有任何顺序或技术含义。而本技术所说“连接”、“联接”，如无特别说明，均包括直接和间接连接(联接)。
29.本发明中部分术语的解释：
30.pc：personal computer，个人电脑；
31.ui：user interface，用户界面；
32.vue、angularjs：计算机术语，均为前端开发框架，用于创建用户界面；
33.json：javascript object notation，javascript对象表示法，一种轻量级的文本数据交换格式；
34.dom：document object model，文档对象模型，是html和xml文档的编程接口；
35.app：application，通常指在移动终端上的应用程序。
36.请参考图1，为本技术一种实施例中的在移动终端中渲染web表单的系统的结构示意图，如图1所示，该系统包括服务器1、pc端2和移动终端3。本发明实施例中，从表单设计到用户使用表单进行业务处理的总体过程可以参考图2，在表单开发阶段，开发人员收集用户工作中需要使用的业务表单(纸质或电子档)，然后通过pc端2提供的可视化页面编辑表单，生成对应的表单配置文件，存储在服务器1；并且开发在移动终端3使用的表单ui解析器和前端元素组件，当用户在移动终端3中需要使用表单时，移动终端3通过web访问服务器1，从服务器1获取相应的表单配置文件，使用表单ui解析器对表单配置文件进行解析和渲染，还原开发人员设计的表单，在移动终端3上显示表单界面，用户在表单界面上填写数据，前端元素组件输出用户填写的数据，用于进行业务逻辑处理。下面对该系统中的各部分进行介绍。
37.服务器1用于存储数据，pc端2和移动终端3能够通过web访问服务器1。
38.pc端2可以是台式电脑、笔记本电脑等，用于提供可视化页面供用户对表单元素进行编辑以形成表单，根据所形成的表单生成表单配置文件，将表单配置文件发送至服务器1进行存储。开发人员可通过相关网站进行表单设计、编辑，pc端2显示网站的表单可视化设计页面，用户在页面上绘制表单元素放置区域，通过拖、拉、拽等方式逐个将表单元素放置在表单元素放置区域中，编辑表单元素的标题、字段名、校验类型、可选项和默认值等属性，完成表单设计。表单元素有元素组、动态元素组、文本元素、单选框元素、多选框元素、时间选择元素、下拉框元素、标签元素、人员选择元素、附件上传元素和签名元素等，使用元素组可将表单分组，使用动态元素组，则元素组内元素可整组复制。校验类型有文本、整数、浮点数、日期、手机号、邮箱和身份证号码等。每个表单元素代表一个dom节点，表单中的表单元素形成dom节点树。表单制作的具体过程可以参考图3，首先创建一个表单对象，之后在其中添加表单元素，对于元素组，需要一一添加其中的子元素，添加元素后设置元素属性，保存配置。添加完所有表单元素后，则可根据表单生成表单配置文件。
39.生成的表单配置文件在服务器1中存储。一种实施例中，表单配置文件可以为一json文件，根据表单生成表单配置文件具体可以是根据表单的dom节点树生成一json文件作为表单配置文件，json文件的各个节点与表单的dom节点树相匹配，其中json文件的根节点代表整个表单对象，表单对象下属节点或者说子节点可以是单个表单元素或元素组，元素组节点的下属节点可以是单个表单元素或元素组。与表单元素对应，json文件中的每个节点可以包括以下属性：元素类型、标题、字段名、校验类型、可选项和默认值等，其中元素
类型即为上述的元素组、动态元素组、文本元素、单选框元素、多选框元素、时间选择元素、下拉框元素、标签元素、人员选择元素、附件上传元素和签名元素等。
40.移动终端3可以是智能手机、平板电脑、笔记本电脑等，用于从服务器1中获取表单配置文件，使用预先通过前端框架开发的表单ui解析器对表单配置文件进行解析和渲染，以将表单元素渲染成相应的前端元素组件，还原出在pc端上编辑的表单，其中每种表单元素都有对应的前端元素组件。开发人员预先通过前端框架开发在移动终端3上使用的表单ui解析器和前端元素组件，每种元素类型都封装对应的前端元素组件。表单可以在移动终端3的app上呈现，开发人员可以在app程序中引入该前端元素组件。所使用的前端框架可以是vue、angularjs等，本文中主要以vue为例进行说明，使用vue开发的前端元素组件为元素vue组件，整个表单对应的元素vue组件称为表单vue组件，元素组对应的元素vue组件可以称为元素组vue组件。元素vue组件具有渲染标题、输入域、校验方法和绑定默认值等功能，元素组的元素vue组件具有遍历并添加子元素vue组件的功能。
41.当用户在移动终端3上使用表单时，移动终端3通过预设的接口从服务器1上获取表单配置文件。一种实施例中，可以通过表单配置id来获取相对应的表单配置文件。具体的，在开发阶段，开发人员会为每个表单配置表单配置id，当用户使用某种表单时，移动终端3根据所使用的表单的表单配置id从服务器1中获取相应的表单配置文件。获取表单配置文件后，使用ui解析器对表单配置文件进行解析和渲染，以将表单元素渲染成相应的前端元素组件，还原出在pc端2上编辑的表单，一种实施例中，解析和渲染的过程具体可以是：从表单配置文件的根节点开始，依据json节点顺序对表单配置文件的各个节点进行遍历和/或递归，读取各节点的数据，进行解析并渲染成相应的元素vue组件以形成表单，从而还原出在pc端上编辑的表单。元素vue组件内部自行设置元素标题，根据元素类型将json节点渲染成不同的值输入dom，并且根据校验类型自动进行元素值合法性校验。解析和渲染的具体过程可以参考图4，首先读取json文件的根节点数据，将其渲染成表单vue组件，表单vue组件自动遍历子节点数据对象，渲染成相应的元素vue组件或元素组vue组件，对于元素组，还需一一遍历其中的子节点，元素组vue组件自动遍历元素组子节点数据对象，渲染成相应的元素vue组件，直至元素组中不再有子节点。渲染完成后，移动终端3即可显示该表单，用户可在表单上填写数据。
42.请参考图5，图5为本发明的在移动终端中渲染web表单的系统一个具体实例。如图5所示，pc端2上可以显示可视化设计界面、表单管理界面、元素管理界面等，开发人员可以在可视化设计界面设计、编辑表单，例如通过拖、拉、拽等方式将表单元素放置到表单中，分别通过表单管理界面和元素管理界面对表单和表单元素进行管理，例如增删查改等。服务器1可以包括表单服务引擎和数据存储器，服务器1通过表单服务引擎向pc端2和移动终端3提供服务，数据存储器存储pc端2上传的表单配置文件。移动终端3上安装app向用户提供表单填写功能，表单可以有多个，不同的表单提供不同的功能。当用户需要使用表单时，移动终端3根据表单配置id从服务器1中的数据存储器中获取相应的表单配置文件，app中基于vue开发的表单解析器对表单配置文件进行解析和渲染，将表单元素渲染成相应的元素vue组件，还原出在pc端2上编辑的表单。
43.在上述的在移动终端中渲染web表单的系统的基础上，本发明还提供一种在移动终端中渲染web表单的方法，请参考图6，一种实施例中该方法包括步骤110～130，下面具体
说明。
44.步骤110：pc端响应于用户操作编辑表单元素以形成表单，根据所形成的表单生成表单配置文件。
45.关于表单的编辑和表单配置文件的生成可以参考上文。一种实施例中，每个表单元素代表一个dom节点，表单中的表单元素形成dom节点树。表单制作的具体过程可以参考图3，首先创建一个表单对象，之后在其中添加表单元素，对于元素组，需要一一添加其中的子元素，添加元素后设置元素属性，保存配置。添加完所有表单元素后，则可根据表单生成表单配置文件。表单配置文件可以为一json文件，根据表单生成表单配置文件具体可以是：根据表单的dom节点树生成一json文件作为表单配置文件，json文件的各个节点与表单的dom节点树相匹配，其中json文件的根节点代表整个表单对象，表单对象下属节点或者说子节点可以是单个表单元素或元素组，元素组节点的下属节点可以是单个表单元素或元素组。与表单元素对应，json文件中的每个节点可以包括以下属性：元素类型、标题、字段名、校验类型、可选项和默认值等，其中元素类型可以为元素组、动态元素组、文本元素、单选框元素、多选框元素、时间选择元素、下拉框元素、标签元素、人员选择元素、附件上传元素和签名元素等；校验类型可以为文本、整数、浮点数、日期、手机号、邮箱和身份证号码等。
46.步骤120：pc端将表单配置文件存储至服务器。
47.步骤130：移动终端从服务器中获取表单配置文件，使用预先通过前端框架开发的表单ui解析器对表单配置文件进行解析和渲染，以将表单元素渲染成相应的前端元素组件，还原出在pc端上编辑的表单，其中每种表单元素都有对应的前端元素组件。
48.关于表单ui解析器和前端元素组件的开发可以参考上文。开发人员预先通过前端框架开发在移动终端上使用的表单ui解析器和前端元素组件，每种元素类型都封装对应的前端元素组件。所使用的前端框架可以是vue、angularjs等，以vue为例，使用vue开发的前端元素组件为元素vue组件，整个表单对应的元素vue组件称为表单vue组件，元素组对应的元素vue组件可以称为元素组vue组件。元素vue组件具有渲染标题、输入域、校验方法和绑定默认值等功能，元素组的元素vue组件具有遍历并添加子元素vue组件的功能。
49.当用户在移动终端上使用表单时，移动终端通过预设的接口从服务器上获取表单配置文件。一种实施例中，可以通过表单配置id来获取相对应的表单配置文件。具体的，在开发阶段，开发人员会为每个表单配置表单配置id，当用户使用某种表单时，移动终端根据所使用的表单的表单配置id从服务器中获取相应的表单配置文件。获取表单配置文件后，使用ui解析器对表单配置文件进行解析和渲染，以将表单元素渲染成相应的前端元素组件，还原出在pc端上编辑的表单，一种实施例中，解析和渲染的过程具体可以是：从表单配置文件的根节点开始，依据json节点顺序对表单配置文件的各个节点进行遍历和/或递归，读取各节点的数据，进行解析并渲染成相应的元素vue组件以形成表单，从而还原出在pc端上编辑的表单。元素vue组件内部自行设置元素标题，根据元素类型将json节点渲染成不同的值输入dom，并且根据校验类型自动进行元素值合法性校验。解析和渲染的具体过程可以参考图4，首先读取json文件的根节点数据，将其渲染成表单vue组件，表单vue组件自动遍历子节点数据对象，渲染成相应的元素vue组件或元素组vue组件，对于元素组，还需一一遍历其中的子节点，元素组vue组件自动遍历元素组子节点数据对象，渲染成相应的元素vue组件，直至元素组中不再有子节点。渲染完成后，移动终端即可显示该表单，用户可在表单
上填写数据。
50.依据上述实施例的在移动终端中渲染web表单的方法和系统，开发人员可以在pc端上设计、编辑表单，以及使用前端框架开发移动终端上使用的ui解析器和前端元素组件，编辑完成的表单被生成表单配置文件保存至服务器，当用户需要在移动终端上使用表单时，移动终端从服务器上获取表单配置文件，使用ui解析器对表单配置文件进行解析和渲染，将表单元素渲染成相应的前端元素组件，还原出在pc端上编辑的表单，供用户填写，因此本发明与现有技术相比有以下优点：
51.(1)省去了逐个表单进行代码开发的步骤，实现业务表单的快速设计和开发，减少了重复劳动，提高了开发效率，节省了时间和人力成本；
52.(2)有助于在表单多工作量大时，快速完成表单定制，提升交付能力；
53.(3)非技术人员也可以完成表单定制，降低了系统维护成本；
54.(4)避免了手动绘制表单时，页面样式不容易统一的问题；
55.(5)有助于实现表单校验、关联逻辑的统一。
56.本领域技术人员可以理解，上述实施方式中各种方法的全部或部分功能可以通过硬件的方式实现，也可以通过计算机程序的方式实现。当上述实施方式中全部或部分功能通过计算机程序的方式实现时，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器、随机存储器、磁盘、光盘、硬盘等，通过计算机执行该程序以实现上述功能。例如，将程序存储在设备的存储器中，当通过处理器执行存储器中程序，即可实现上述全部或部分功能。另外，当上述实施方式中全部或部分功能通过计算机程序的方式实现时，该程序也可以存储在服务器、另一计算机、磁盘、光盘、闪存盘或移动硬盘等存储介质中，通过下载或复制保存到本地设备的存储器中，或对本地设备的系统进行版本更新，当通过处理器执行存储器中的程序时，即可实现上述实施方式中全部或部分功能。
57.以上应用了具体个例对本发明进行阐述，只是用于帮助理解本发明，并不用以限制本发明。对于本发明所属技术领域的技术人员，依据本发明的思想，还可以做出若干简单推演、变形或替换。