一种动态表单的配置方法、装置、设备及介质与流程

1.本发明涉及计算机数据处理技术领域，具体涉及一种动态表单的配置方法、装置、设备及介质。


背景技术：

2.表单场景是前端中后台领域最复杂的场景，其字段数量多，字段关联逻辑复杂。在工作流系统中，表单格式通常较为统一且固定，当系统需要满足不同用户的业务需求时，通常需要为每个业务定制化开发业务表单，如此一来，将导致系统开发周期长、开发成本高、前后端字段不统一、后期维护困难以及无法适应用户不断变化的业务需求等问题。随着技术的发展，目前也已经出现了一些可单独配置与复用的表单配置方法，但是存在过于定制化、无法实现页面动态渲染、没有管理表单模板数据与ui(user interface，用户界面)组件的映射关系等问题。因此能否提供一种效率更高，应用场景更广的表单配置的方法已经成为亟需解决的技术问题。


技术实现要素：

3.鉴于以上现有技术的缺点，本发明的目的在于提供一种动态表单的配置方法、装置、设备及介质，可实现表单的动态化配置，以适应用户不断变化的业务需求。
4.为实现上述目的及其它相关目的，本发明提供一种动态表单的配置方法，包括：
5.获取表单配置项数据，并根据所述表单配置项数据，新建多个问题字段数据；
6.将多个所述问题字段数据拼接成一个表单模板数据，并生成所述表单模板数据的模板编码数据；
7.根据所述模板编码数据，获取对应的配置通信数据；
8.获取全部表单问题数据，根据所述表单问题数据，开发对应的用户界面组件数据；
9.将所述用户界面组件数据发送到物料市场；
10.将所述配置通信数据发送到所述物料市场，提取所述配置通信数据对应的所述用户界面组件数据；
11.将所述用户界面组件数据渲染到终端页面，生成动态表单文件。
12.在本发明一实施例中，所述将多个所述问题字段数据拼接成一个表单模板数据，生成所述表单模板数据的模板编码数据的步骤，包括：
13.根据所述问题字段数据的类型，将多个所述问题字段数据拼接成所述表单模板数据；
14.保存所述表单模板数据为备份模板数据，生成所述表单模板数据的模板编码数据。
15.在本发明一实施例中，所述根据所述模板编码数据获取对应的配置通信数据的步骤，包括：
16.根据所述模板编码数据，查询对应的所述表单模板数据的配置通信数据；
17.通过模板接口，输出所述配置通信数据至当前用户。
18.在本发明一实施例中，所述问题字段数据包括：
19.基础字段数据，包括标识信息、元素类型以及字段名数据；以及
20.表单控件数据，包括文本输入数据、单项选择数据、多项选择数据、文件上传按钮以及输入重置按钮。
21.在本发明一实施例中，所述表单用户界面组件数据为多种框架组件数据。
22.在本发明一实施例中，所述终端页面为应用程序端页面、电脑端页面或移动端页面
23.在本发明一实施例中，所述配置通信数据允许与多种语言服务器进行数据交互。
24.本发明还提供一种动态表单的配置装置，其特征在于，包括：
25.字段模块，用于获取表单配置项数据，并根据所述表单配置项数据，新建多个问题字段数据；
26.模板模块，用于将多个所述问题字段数据拼接成一个表单模板数据，并生成所述表单模板数据的模板编码数据；
27.接口模块，用于根据所述模板编码数据，获取对应的配置通信数据；
28.开发模块，用于获取全部表单问题数据，根据所述表单问题数据，开发对应的用户界面组件数据；
29.物料模块，将所述用户界面组件数据发送到物料市场；
30.映射模块，用于将所述配置通信数据发送到所述物料市场，提取所述配置通信数据对应的所述用户界面组件数据；
31.渲染模块，用于将所述用户界面组件数据渲染到终端页面，生成动态表单文件。
32.本发明还提供一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述动态表单的配置方法的步骤。
33.本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述动态表单的配置方法的步骤。
34.综上所述，本发明提供一种动态表单的配置方法、装置、设备和介质，可实现表单的动态化配置，且系统开发周期短、可维护性高，可应用于多端场景与多种技术组件框架，提高了表单模板数据的利用率。
附图说明
35.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
36.图1是本发明一实施例中动态表单的配置方法的一应用环境示意图；
37.图2是本发明一实施例中动态表单的配置方法的一流程示意图；
38.图3是图2中步骤s20的一具体实施方式流程示意图；
39.图4是图3中步骤s30的又一具体实施方式流程示意图；
40.图5是本发明一实施例中动态表单的配置装置的一结构示意图；
41.图6是本发明一实施例中计算机设备的一结构示意图。
具体实施方式
42.以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其它优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。还应当理解，本发明实施例中使用的术语是为了描述特定的具体实施方案，而不是为了限制本发明的保护范围。下列实施例中未注明具体条件的试验方法，通常按照常规条件，或者按照各制造商所建议的条件。
43.请参阅图1至图6。须知，本说明书附图所绘示的结构、比例、大小等，均仅用以配合说明书所揭示的内容，以供熟悉此技术的人士了解与阅读，并非用以限定本发明可实施的限定条件，故不具技术上的实质意义，任何结构的修饰、比例关系的改变或大小的调整，在不影响本发明所能产生的功效及所能达成的目的下，均应仍落在本发明所揭示的技术内容所能涵盖的范围内。同时，本说明书中所引用的如“上”、“下”、“左”、“右”、“中间”及“一”等的用语，亦仅为便于叙述的明了，而非用以限定本发明可实施的范围，其相对关系的改变或调整，在无实质变更技术内容下，当亦视为本发明可实施的范畴。
44.当实施例给出数值范围时，应理解，除非本发明另有说明，每个数值范围的两个端点以及两个端点之间任何一个数值均可选用。除非另外定义，本发明中使用的所有技术和科学术语与本技术领域的技术人员对现有技术的掌握及本发明的记载，还可以使用与本发明实施例中所述的方法、设备、材料相似或等同的现有技术的任何方法、设备和材料来实现本发明。
45.本发明提出一种动态表单的配置方法，可应用在如图1的应用环境中，其中，客户端可通过网络与服务器进行通信。服务端可以获取表单配置项数据，并根据表单配置项数据生成表单模板数据，从而实现客户端对动态表单的渲染显示。下面通过具体的实施例对本发明进行详细的描述。
46.在一些实施例中，表单通常应用于web网页中，用来采集客户端信息，以使网页具有交互的功能。通常将表单设计在一个html文档中，当用户填写完信息后做submit(提交)操作，可将表单的内容从客户端的浏览器传送至服务器上，经过服务器上的asp或者php等处理程序处理后，再讲用户所需信息传送回客户端的页面上。
47.请参阅图2所示，图2是本发明一实施例中动态表单的配置方法的一流程示意图，可包括有如下的步骤：
48.步骤s10、获取表单配置项数据，并根据表单配置项数据，新建多个问题字段数据。
49.在一些实施例中，表单配置项数据即为表单所需采集的信息，根据表单配置项数据，可在系统中新建多个问题字段数据。问题字段数据的数量可由所需采集的信息确定，且问题字段数据可进行配置type，即配置属性。例如其中一部分问题字段数据可为基础字段数据，可包括标识信息、元素类型以及字段名数据，如name、code、required、options等。表单的name是提交到后台的索引，name属性可用于对提交到服务器后的表单数据进行标识，
只有设置了name属性的表单元素才能在提交表单时传递它们的值；code属性用于表示系统代码或者其他及其可以阅读的文本内容；required属性表示表单必填项；option用于定义下拉列表中的一个选项。其中另一部分问题字段数据可为表单控件数据，包括文本输入数据、单项选择数据、多项选择数据、文件上传按钮以及输入重置按钮等。
50.步骤s20、将多个问题字段数据拼接成一个表单模板数据，并生成表单模板数据的模板编码数据。
51.在一些实施例中，将多个问题字段数据拼接成一个表单模板数据，可根据问题字段数据的属性进行拼接，例如，当问题字段数据的属性为单行文本时，可记作type＝"text"。可对拼接完成后的表单模板数据进行保存，并生成一个唯一值，此唯一值即为该表单模板数据的的模板编码数据。
52.步骤s30、根据模板编码数据，获取对应的配置通信数据。
53.在一些实施例中，服务端可提供一个模板接口，客户端根据模板编码数据查询对应的表单模板数据的配置通信数据，服务端通过模板接口输出配置通信数据至客户端。配置通信数据中可包含表单模板数据的全部问题字段数据信息以及问题字段数据信息的拼接规则。
54.在一些实施例中，配置通信数据允许与多种语言服务器进行数据交互，配置通信数据可使用json数据。json(javascript object notation,js对象简谱)是一种轻量级的数据交换格式。它基于ecmascript(european computer manufacturers association,欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得json成为理想的数据交换语言,易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
55.步骤s40、获取全部表单问题数据，根据表单问题数据，开发对应的用户界面组件数据。
56.在一些实施例中，用户界面组件数据均为标准化构建，并且可以在不同项目，不同团队，不同成员之间复用。首先工作人员可根据表单所需采集的信息，对表单问题数据进行穷举，归纳表单的属性。再根据表单问题数据的属性构建其对应的用户界面组件数据，例如，单行文本对应的用户界面组件数据为文本框，密码输入对应的用户界面组件数据为隐藏文本框，文件上传对应的用户界面组件数据为文件选择框等。
57.步骤s50、将用户界面组件数据发送到物料市场。
58.在一些实施例中，首先可搭建一个可存储组件的物料市场。物料市场中的组件即为用户界面组件数据，然后将标准化的组件上传并保存至物料市场。物料市场中的每一个用户界面组件数据均对应一个映射值，系统可根据映射值提取对应的用户界面组件数据。用户界面组件数据可为多种框架组件数据，例如vue组件和react组件。物料市场为跨平台ui框架，是可在不同的平台(os)上运行的独立的ui框架，物料市场的代码只需一次编写，经过少量修改甚至不修改，可以部署到不同的操作系统平台上。
59.步骤s60、将配置通信数据发送到物料市场，提取配置通信数据对应的用户界面组件数据。
60.在一些实施例中，可通过用户界面组件数据与问题字段数据的映射关系，按照配置通信数据从物料市场中提取对应的用户界面组件数据。首先将配置通信数据发送到物料
市场，接着循环遍历所有的配置通信数据，以实现用户界面组件数据的提取。
61.步骤s70、将用户界面组件数据渲染到终端页面，生成动态表单文件。
62.在一些实施例中，将用户界面组件数据渲染到终端页面可根据客户端语言类型，生成对应框架语言的代码文件，并插入对应前端框架的模版中，生成动态表单文件。对渲染文件打包编译，并进行语言转换，生成原生html文档；比如vue语言的渲染文件可使用nuxt.js来转换为原生html文档，react语言的渲染文件可使用reactdomserver api来转换为原生html文档等等。终端页面为应用程序端页面、电脑端页面或移动端页面。
63.请参阅图3，图3是图2中步骤s20的一具体实施方式流程示意图。步骤s20可包括如下的步骤流程：
64.步骤s21、根据问题字段数据的类型，将多个问题字段数据拼接成表单模板数据。
65.在一些实施例中，可根据问题字段数据的属性将多个问题字段数据拼接成一个表单模板数据，例如，当问题字段数据的属性为单行文本时，用户可在其中输入文本，该问题字段数据具有默认宽度，当输入换行符时将自动从输入值中删除，可记作type＝"text"；当问题字段数据的属性为复选时，即为允许选择/取消选择单个值的复选框，可记作type＝"checkbox"；当问题字段数据的属性为单项选择时，允许从多个选项中选择一个值，可记作type＝"radio"；当问题字段数据的属性为文件上传时，允许用户选择文件并上传，可记作type＝"file"。
66.步骤s22、保存表单模板数据为备份模板数据，生成表单模板数据的模板编码数据。
67.在一些实施例中，系统可保存多个表单模板数据。首先可对拼接完成后的表单模板数据进行保存，然后生成一个唯一值，此唯一值即为该表单模板数据的的模板编码数据。客户端通过模板编码数据可获取该表单模板数据的配置信息，可保存表单模板数据为备份模板数据，配置好的备份模板数据可供后续提取使用，即一处配置，多处生效。
68.请参阅图4，图4是图2中步骤s30的一具体实施方式流程示意图。步骤s30可包括如下的步骤流程：
69.步骤s31、根据模板编码数据，查询对应的表单模板数据的配置通信数据。
70.在一些实施例中，服务端可提供一个模板接口，客户端根据模板编码数据查询对应的表单模板数据的配置通信数据，配置通信数据中可包含表单模板数据的全部问题字段数据信息以及问题字段数据信息的拼接方式。
71.步骤s32、通过模板接口，输出配置通信数据至当前用户。
72.在一些实施例中，服务端通过模板接口输出配置通信数据至客户端。配置通信数据允许与多种语言服务器进行数据交互，配置通信数据使用json数据进行传递。json使用javascript语法，能够把任何javascript对象转换为json,然后将json发送到服务器；也可以将从服务器接收到的任何json转换为javascript对象。json的格式是文本格式，使用json数据传递配置通信数据无需复杂的解析和转译，json可任何编程语言作为数据来读取和使用，从而是本发明提供的动态表单的配置方法可应用于多端场景，例如，app端、pc端，h5、react框架、vue框架。
73.请参阅图5图5本发明一实施例中动态表单的配置装置的一结构示意图，在一些实施例中，动态表单的配置装置包括字段模块10、模板模块20、接口模块30、开发模块40、物料
模块50、映射模块60、渲染模块70，各功能模块详细说明如下。
74.字段模块10，用于获取表单配置项数据，并根据表单配置项数据，新建多个问题字段数据。
75.在一些实施例中，表单配置项数据即为表单所需采集的信息，根据表单配置项数据，字段模块10可在系统中新建多个问题字段数据。问题字段数据的数量可由所需采集的信息确定，且问题字段数据可进行配置type，即配置属性。例如其中一部分问题字段数据可为基础字段数据，可包括标识信息、元素类型以及字段名数据，如name、code、required、options等。表单的name是提交到后台的索引，name属性可用于对提交到服务器后的表单数据进行标识，只有设置了name属性的表单元素才能在提交表单时传递它们的值；code属性用于表示系统代码或者其他及其可以阅读的文本内容；required属性表示表单必填项；option用于定义下拉列表中的一个选项。其中另一部分问题字段数据可为表单控件数据，包括文本输入数据、单项选择数据、多项选择数据、文件上传按钮以及输入重置按钮等。
76.模板模块20,用于将多个问题字段数据拼接成一个表单模板数据，并生成表单模板数据的模板编码数据。
77.在一些实施例中，将多个问题字段数据拼接成一个表单模板数据，模板模块20可根据问题字段数据的属性将多个问题字段数据拼接成一个表单模板数据，例如，当问题字段数据的属性为单行文本时，用户可在其中输入文本，该问题字段数据具有默认宽度，当输入换行符时将自动从输入值中删除，可记作type＝"text"；当问题字段数据的属性为复选时，即为允许选择/取消选择单个值的复选框，可记作type＝"checkbox"；当问题字段数据的属性为单项选择时，允许从多个选项中选择一个值，可记作type＝"radio"；当问题字段数据的属性为文件上传时，允许用户选择文件并上传，可记作type＝"file"。
78.在一些实施例中，模板模块20可保存多个表单模板数据。首先可对拼接完成后的表单模板数据进行保存，然后生成一个唯一值，此唯一值即为该表单模板数据的的模板编码数据。客户端通过模板编码数据可获取该表单模板数据的配置信息，可保存表单模板数据为备份模板数据，配置好的备份模板数据可供后续提取使用，即一处配置，多处生效。
79.在一具体实施例中，模板模块20还可具体用于：
80.根据问题字段数据的类型，将多个问题字段数据拼接成表单模板数据；
81.保存表单模板数据为备份模板数据，生成表单模板数据的模板编码数据。
82.接口模块30，用于根据模板编码数据，获取对应的配置通信数据。
83.在一些实施例中，接口模块30可提供一个模板接口，客户端根据模板编码数据查询对应的表单模板数据的配置通信数据，服务端通过模板接口输出配置通信数据至客户端。配置通信数据中可包含表单模板数据的全部问题字段数据信息以及问题字段数据信息的拼接规则。配置通信数据可使用json数据。json使用javascript语法，能够把任何javascript对象转换为json,然后将json发送到服务器；也可以将从服务器接收到的任何json转换为javascript对象。json的格式是文本格式，使用json数据传递配置通信数据无需复杂的解析和转译，json可任何编程语言作为数据来读取和使用，从而是本发明提供的动态表单的配置方法可应用于多端场景，例如，app端、pc端，h5、react框架、vue框架。
84.在一具体实施例中，接口模块30还可具体用于：
85.根据模板编码数据，查询对应的表单模板数据的配置通信数据；
86.通过模板接口，输出配置通信数据至当前用户。
87.开发模块40，用于获取全部表单问题数据，根据表单问题数据，开发对应的用户界面组件数据。
88.在一些实施例中，用户界面组件数据均为标准化构建，并且可以在不同项目，不同团队，不同成员之间复用。首先工作人员可根据表单所需采集的信息，对表单问题数据进行穷举，归纳表单的属性。开发模块40根据表单问题数据的属性构建其对应的用户界面组件数据，例如，单行文本对应的用户界面组件数据为文本框，密码输入对应的用户界面组件数据为隐藏文本框，文件上传对应的用户界面组件数据为文件选择框等。
89.物料模块50，用于获取全部表单问题数据，根据表单问题数据，开发对应的用户界面组件数据，将用户界面组件数据发送到物料市场。
90.在一些实施例中，首先可搭建一个可存储组件的物料市场，物料市场中的组件即为用户界面组件数据。然后将标准化的组件上传并保存至物料市场。物料市场中的每一个用户界面组件数据均对应一个映射值，系统可根据映射值提取对应的用户界面组件数据。用户界面组件数据可为多种框架组件数据，例如vue组件和react组件。物料市场为跨平台ui框架，是可在不同的平台(os)上运行的独立的ui框架，物料市场的代码只需一次编写，经过少量修改甚至不修改，可以部署到不同的操作系统平台上。
91.映射模块60，用于将配置通信数据发送到物料市场，提取配置通信数据对应的用户界面组件数据。
92.在一些实施例中，映射模块60可通过用户界面组件数据与问题字段数据的映射关系，按照配置通信数据从物料市场中提取对应的用户界面组件数据。首先将配置通信数据发送到物料市场，接着循环遍历所有的配置通信数据，以实现用户界面组件数据的提取。
93.渲染模块70，用于将用户界面组件数据渲染到终端页面，生成动态表单文件。
94.在一些实施例中，渲染模块70可将用户界面组件数据渲染到终端页面可根据客户端语言类型，生成对应框架语言的代码文件，并插入对应前端框架的模版中，生成动态表单文件。对渲染文件打包编译，并进行语言转换，生成原生html文档；比如vue语言的渲染文件可使用nuxt.js来转换为原生html文档，react语言的渲染文件可使用reactdomserver api来转换为原生html文档等等。终端页面为应用程序端页面、电脑端页面或移动端页面。
95.请参阅图6，图6提供了一种计算机设备，该计算机设备600可以是服务端。该计算机设备600包括通过系统总线连接的处理器601、存储器602、网络接口和数据库。其中，该计算机设备600的处理器601用于提供计算和控制能力。该计算机设备600的存储器602包括非易失性和/或易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备600的网络接口用于与外部的客户端通过网络连接通信。该计算机程序被处理器执行时以实现一种动态表单的配置方法服务端侧的功能或步骤。
96.在一个实施例中，提供了一种计算机设备600，包括存储器602、处理器601及存储在存储器上并可在处理器上运行的计算机程序，处理器601执行计算机程序时实现以下步骤：
97.获取表单配置项数据，并根据表单配置项数据，新建多个问题字段数据；
98.将多个问题字段数据拼接成一个表单模板数据，并生成表单模板数据的模板编码
数据；
99.根据模板编码数据，获取对应的配置通信数据；
100.获取全部表单问题数据，根据表单问题数据，开发对应的用户界面组件数据；
101.将用户界面组件数据发送到物料市场；
102.将配置通信数据发送到物料市场，提取配置通信数据对应的用户界面组件数据；
103.将用户界面组件数据渲染到终端页面，生成动态表单文件。
104.在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
105.获取表单配置项数据，并根据表单配置项数据，新建多个问题字段数据；
106.将多个问题字段数据拼接成一个表单模板数据，并生成表单模板数据的模板编码数据；
107.根据模板编码数据，获取对应的配置通信数据；
108.获取全部表单问题数据，根据表单问题数据，开发对应的用户界面组件数据；
109.将用户界面组件数据发送到物料市场；
110.将配置通信数据发送到物料市场，提取配置通信数据对应的用户界面组件数据；
111.将用户界面组件数据渲染到终端页面，生成动态表单文件。
112.需要说明的是，上述关于计算机可读存储介质或计算机设备所能实现的功能或步骤，可对应参阅前述方法实施例中，服务端侧以及客户端侧的相关描述，为避免重复，这里不再一一描述。
113.综上，本发明提出一种动态表单的配置方法、装置、设备及介质，计算机数据处理技术领域。本发明通过对问题字段数据和表单模板数据的管理，实现表单的动态化配置，通过模板接口调取表单配置通信数据，可实现应用于多端场景与多种技术组件框架，系统开发周期短、可维护性高，提高了表单模板数据的利用率。
114.上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。