一种前端表单配置化显示系统及其方法与流程

1.本发明涉及web前端开发技术领域，尤其是涉及一种前端表单配置化显示系统及其方法。


背景技术：

2.目前，web应用系统大多采用前后端分离的开发方式，传统模式上，前端需要定义每个表单所有需显示的字段，后端应用表结构也需要定义所有字段，开发人员需要针对每个表单单独开发，即一个表单对应有单独的显示及后台数据处理程序，当表单的需求较为固定时，采用这种方法没有问题；当表单需求变化或者定制化需求较高，由于每一个表单都基于一个程序来实现，不仅在开发过程中费时费力，一旦出现业务需求变化，就必须频繁地进行前端和后台程序的调整，在后期维护过程中以及技术移交过程中都会存在极大的困难。


技术实现要素：

3.本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种前端表单配置化显示系统及其方法，以能够快速响应表单需求变化或定制化需求，提高开发效率、方便后期维护和移交。
4.本发明的目的可以通过以下技术方案来实现：一种前端表单配置化显示系统，包括前端页面和后台处理中心，所述后台处理中心包括配置化解析模块和数据库，所述前端页面与配置化解析模块相互连接，所述配置化解析模块与数据库相互连接，所述数据库内更新存储有字段参数配置表和数据信息存储表；
5.所述配置化解析模块用于将表单字段配置信息处理加工为存储信息，以及读取存储信息、并处理加工为前端显示表单；
6.所述前端页面用于进行选择表单标志操作、数据查询操作以及用于显示表单。
7.进一步地，所述字段参数配置表用于配置不同表单需要显示的字段，所述字段参数配置表内存储有不同字段对应的配置信息。
8.进一步地，所述数据信息存储表用于配置表单信息、字段信息以及存储不同字段对应的数据信息，从而建立表单、字段、数据信息之间的映射关系。
9.进一步地，所述字段参数配置表中存储的字段对应的配置信息包括字段所属表单标志、中文名称、英文名称、字段类型、是否展示、是否可为空、显示顺序。
10.进一步地，所述数据信息存储表中存储的字段对应的数据信息包括表单标志、数据主键、字段取值。
11.进一步地，所述配置化解析模块包括java处理单元和vue处理单元，所述java处理单元用于从字段参数配置表读取表单字段的配置信息，包括表单信息及字段信息，以动态生成表单需要的展示字段；
12.所述vue处理单元用于解析表单传入的数据信息，完成表单展示或者数据存储。
13.一种前端表单配置化显示方法，包括以下步骤：
14.s1、根据用户操作，前端页面将表单加工成包含每个字段实体的数组，并提交至配置化解析模块；
15.配置化解析模块获取数组后，根据字段在数据信息存储表中的存储顺序，通过反射机制，将对应的字段取值映射到数据信息存储实体，完成数据的保存工作；
16.s2、根据用户操作，配置化解析模块从前端页面获取待查询数据，根据表单标志以及数据的存储顺序，通过反射机制，将数据映射到每个字段取值；
17.再将所有字段组装成数组后返回给前端页面，前端页面根据返回的字段对象数组动态加载出表单用于显示。
18.进一步地，所述步骤s1的用户操作具体为选择表单标志，所述步骤s2的用户操作具体为选择需要查询的数据。
19.进一步地，所述步骤s1具体包括以下步骤：
20.s11、配置化解析模块根据前端页面选择的表单标志，从数据库查询字段参数配置表，并返回前端页面所需要展示的表单字段；
21.s12、前端页面根据返回的字段动态展示出表单，之后提交表单内容，配置化解析模块根据获取的表单的字段数组，读取出表单标志信息；
22.s13、配置化解析模块根据字段在数据信息存储表中的存储顺序，通过反射机制，将对应的字段取值映射到数据信息存储实体；
23.s14、配置化解析模块处理得到数据的主键、表单标志、各字段的取值，完成数据的保存工作。
24.进一步地，所述步骤s2具体包括以下步骤：
25.s21、配置化解析模块根据前端页面选择的需要查询的数据，从数据库查询数据信息存储表和字段参数配置表；
26.s22、配置化解析模块根据字段在数据信息存储表中的存储顺序，通过反射机制，将对应的字段取值映射到表单字段实体，组装成数组返回给前端页面；
27.s23、前端页面根据返回的字段数组，动态加载出表单用于显示。
28.与现有技术相比，本发明通过在后台处理中心设置数据库以及配置化解析模块，利用数据库更新存储字段参数配置表以及数据信息存储表，利用配置化解析模块根据配置的字段参数信息动态读写表单数据内容，以存储前端页面传入的数据信息或者展示表单信息。由此实现一种前端表单可配置化显示方案，形成参数化配置规则、统一加工的新模式，相比于传统的一个表单一支程序的开发设计模式，能够使得产品更加灵活、更快捷地应对产品需求的变化，当字段发生变化时，只需要简单地修改字段参数配置表，而不用改动任何前端后台程序，从而能够快速地响应业务定制化的需求，有效提高开发效率和系统的可维护性、扩展性，便于后期维护和移交。
附图说明
29.图1为本发明的系统结构示意图；
30.图2为实施例中系统的数据交互示意图；
31.图3为本发明的方法流程示意图；
32.图4为实施例中前端表单配置化显示的具体过程示意图；
33.图5为实施例中配置化解析模块写数据的过程示意图；
34.图中标记说明：1、前端页面，2、后台处理中心，21、配置化解析模块，22、数据库，210、java处理单元，211、vue处理单元。
具体实施方式
35.下面结合附图和具体实施例对本发明进行详细说明。
36.实施例
37.如图1～图2所示，一种前端表单配置化显示系统，包括前端页面1和后台处理中心2，后台处理中心2包括配置化解析模块21和数据库22，前端页面1与配置化解析模块21相互连接，配置化解析模块21与数据库22相互连接。
38.其中，数据库22内更新存储有字段参数配置表和数据信息存储表；
39.配置化解析模块21用于将表单字段配置信息处理加工为存储信息，以及读取存储信息、并处理加工为前端显示表单，具体的，配置化解析模块21包括java处理单元210和vue处理单元211，java处理单元210用于从字段参数配置表读取表单字段的配置信息，包括表单信息及字段信息，以动态生成表单需要的展示字段；
40.vue处理单元211用于解析表单传入的数据信息，完成表单展示或者数据存储；
41.前端页面1用于进行选择表单标志操作、数据查询操作以及用于显示表单。
42.本技术方案中，字段参数配置表用于配置不同表单需要显示的字段，字段参数配置表内存储有不同字段对应的配置信息，包括字段所属表单标志、中文名称、英文名称、字段类型、是否展示、是否可为空、显示顺序；
43.数据信息存储表则用于配置表单信息、字段信息以及存储不同字段对应的数据信息，包括表单标志、数据主键、字段取值，从而建立表单、字段、数据信息之间的映射关系。
44.将上述系统应用于实际，以实现一种前端表单配置化显示方法，如图3所示，包括以下步骤：
45.s1、根据用户操作(选择表单标志)，前端页面将表单加工成包含每个字段实体的数组，并提交至配置化解析模块；
46.配置化解析模块获取数组后，根据字段在数据信息存储表中的存储顺序，通过反射机制，将对应的字段取值映射到数据信息存储实体，完成数据的保存工作；
47.s2、根据用户操作(选择需要查询的数据)，配置化解析模块从前端页面获取待查询数据，根据表单标志以及数据的存储顺序，通过反射机制，将数据映射到每个字段取值；
48.再将所有字段组装成数组后返回给前端页面，前端页面根据返回的字段对象数组动态加载出表单用于显示。
49.在步骤s1中，具体包括以下步骤：
50.s11、配置化解析模块根据前端页面选择的表单标志，从数据库查询字段参数配置表，并返回前端页面所需要展示的表单字段；
51.s12、前端页面根据返回的字段动态展示出表单，之后提交表单内容，配置化解析模块根据获取的表单的字段数组，读取出表单标志信息；
52.s13、配置化解析模块根据字段在数据信息存储表中的存储顺序，通过反射机制，
将对应的字段取值映射到数据信息存储实体；
53.s14、配置化解析模块处理得到数据的主键、表单标志、各字段的取值，完成数据的保存工作。
54.在步骤s2中，则具体包括以下步骤：
55.s21、配置化解析模块根据前端页面选择的需要查询的数据，从数据库查询数据信息存储表和字段参数配置表；
56.s22、配置化解析模块根据字段在数据信息存储表中的存储顺序，通过反射机制，将对应的字段取值映射到表单字段实体，组装成数组返回给前端页面；
57.s23、前端页面根据返回的字段数组，动态加载出表单用于显示。
58.本技术方案在具体实施时，首先，定义表单字段参数配置表，配置不同表单需要显示的字段；
59.其次，定义字段数据信息表，配置表单信息，字段信息以及存储具体的数据信息，建立表单，字段，数据之间的映射关系；
60.最后配置化解析模块会读取字段数据信息表，根据配置的字段参数信息动态读写表单数据内容，用于存储前端传入的数据信息或者展示表单信息。
61.其中，字段参数配置表及存储表具体是在数据库中建立两张表，一张用来存储字段的配置信息(用于配置化解析模块识别需要加工的具体表单)，另一张用来存储字段对应的数据信息。
62.配置化解析模块是通过字段参数配置表读取表单字段的配置信息，包括表单信息及字段信息，动态生成表单需要的展示字段，或者解析表单传入的数据信息，完成表单展示或者数据存储。
63.在定义表单字段参数表时，主要包含字段所属表单标志、中文名称、英文名称、字段类型、是否展示、是否可为空、显示顺序等；
64.在定义表单数据信息存储表时，主要包含表单标志、数据主键、字段取值等。
65.对于配置化解析模块，其主要包括以下工作过程：
66.(1)定义表单字段实体，包含表单标志、数据主键、中文名称、英文名称、字段类型、是否展示、是否可为空、显示顺序、字段取值等。
67.(2)定义表单数据信息存储实体，包含表单标志、数据主键、字段取值等。
68.(3)解析程序
69.写数据时，前端将表单加工成包含了每个字段实体的数组提交到后台，后台获取数组后，根据字段在表中的存储顺序，通过反射机制，将对应的字段取值映射到数据信息存储实体，完成数据的保存工作。读数据时，后台获取存储的数据后，根据表单标志以及数据的存储顺序，通过反射机制，将数据映射到每个字段取值，所有字段组装成数组后返回给前端，前端根据返回的字段对象数组动态加载出表单。
70.实际应用时，前端显示的页面图中，状态字段为表单标志，当选择的状态不同时，所展示的具体表单字段也各不相同，每个表单字段对应一个对象，根据返回的对象数组，获取到每个字段的中文名、字段类型、字段取值等信息。
71.如图4所示，整个应用过程包括：
72.a)配置化解析模块根据前端页面选择的表单标志，查询字段参数配置表，返回前
端所需要展示的字段。
73.b)前端根据返回的字段动态展示出表单，提交表单内容，配置化解析模块根据获取的表单的字段数组，读取表单标志信息。
74.c)配置化解析模块根据字段在表中的存储顺序，通过反射机制，将对应的字段取值映射到数据信息存储实体。
75.d)配置化解析模块得到数据的主键，表单标志，各字段的取值，完成数据的保存工作。
76.以上a)～d)的写数据过程如图5所示。
77.之后在读数据时：
78.e)配置化解析模块根据前端页面选择的需要查询的数据，查询数据信息存储表和字段参数配置表。
79.f)配置化解析模块根据字段在表中的存储顺序，通过反射机制，将对应的字段取值映射到表单字段实体，组装成数组返回给前端页面。
80.g)前端根据返回的字段数组，动态加载出表单用于显示。
81.综上所述，本技术方案能够有效提高开发效率，针对新的表单需求，只需要进行表单字段参数配置即可完成；由于使用了公共的配置化解析模块，能够大大提升系统的可维护性、扩展性，便于后期维护和移交。

技术特征：
1.一种前端表单配置化显示系统，其特征在于，包括前端页面(1)和后台处理中心(2)，所述后台处理中心(2)包括配置化解析模块(21)和数据库(22)，所述前端页面(1)与配置化解析模块(21)相互连接，所述配置化解析模块(21)与数据库(22)相互连接，所述数据库(22)内更新存储有字段参数配置表和数据信息存储表；所述配置化解析模块(21)用于将表单字段配置信息处理加工为存储信息，以及读取存储信息、并处理加工为前端显示表单；所述前端页面(1)用于进行选择表单标志操作、数据查询操作以及用于显示表单。2.根据权利要求1所述的一种前端表单配置化显示系统，其特征在于，所述字段参数配置表用于配置不同表单需要显示的字段，所述字段参数配置表内存储有不同字段对应的配置信息。3.根据权利要求2所述的一种前端表单配置化显示系统，其特征在于，所述数据信息存储表用于配置表单信息、字段信息以及存储不同字段对应的数据信息，从而建立表单、字段、数据信息之间的映射关系。4.根据权利要求2所述的一种前端表单配置化显示系统，其特征在于，所述字段参数配置表中存储的字段对应的配置信息包括字段所属表单标志、中文名称、英文名称、字段类型、是否展示、是否可为空、显示顺序。5.根据权利要求3所述的一种前端表单配置化显示系统，其特征在于，所述数据信息存储表中存储的字段对应的数据信息包括表单标志、数据主键、字段取值。6.根据权利要求1所述的一种前端表单配置化显示系统，其特征在于，所述配置化解析模块(21)包括java处理单元(210)和vue处理单元(211)，所述java处理单元(210)用于从字段参数配置表读取表单字段的配置信息，包括表单信息及字段信息，以动态生成表单需要的展示字段；所述vue处理单元(211)用于解析表单传入的数据信息，完成表单展示或者数据存储。7.一种应用权利要求1所述前端表单配置化显示系统的前端表单配置化显示方法，其特征在于，包括以下步骤：s1、根据用户操作，前端页面将表单加工成包含每个字段实体的数组，并提交至配置化解析模块；配置化解析模块获取数组后，根据字段在数据信息存储表中的存储顺序，通过反射机制，将对应的字段取值映射到数据信息存储实体，完成数据的保存工作；s2、根据用户操作，配置化解析模块从前端页面获取待查询数据，根据表单标志以及数据的存储顺序，通过反射机制，将数据映射到每个字段取值；再将所有字段组装成数组后返回给前端页面，前端页面根据返回的字段对象数组动态加载出表单用于显示。8.根据权利要求7所述的一种前端表单配置化显示方法，其特征在于，所述步骤s1的用户操作具体为选择表单标志，所述步骤s2的用户操作具体为选择需要查询的数据。9.根据权利要求8所述的一种前端表单配置化显示方法，其特征在于，所述步骤s1具体包括以下步骤：s11、配置化解析模块根据前端页面选择的表单标志，从数据库查询字段参数配置表，并返回前端页面所需要展示的表单字段；
s12、前端页面根据返回的字段动态展示出表单，之后提交表单内容，配置化解析模块根据获取的表单的字段数组，读取出表单标志信息；s13、配置化解析模块根据字段在数据信息存储表中的存储顺序，通过反射机制，将对应的字段取值映射到数据信息存储实体；s14、配置化解析模块处理得到数据的主键、表单标志、各字段的取值，完成数据的保存工作。10.根据权利要求8所述的一种前端表单配置化显示方法，其特征在于，所述步骤s2具体包括以下步骤：s21、配置化解析模块根据前端页面选择的需要查询的数据，从数据库查询数据信息存储表和字段参数配置表；s22、配置化解析模块根据字段在数据信息存储表中的存储顺序，通过反射机制，将对应的字段取值映射到表单字段实体，组装成数组返回给前端页面；s23、前端页面根据返回的字段数组，动态加载出表单用于显示。

技术总结
本发明涉及一种前端表单配置化显示系统及其方法，该系统包括前端页面和后台处理中心，后台处理中心包括配置化解析模块和数据库，前端页面与配置化解析模块相互连接，配置化解析模块与数据库相互连接，数据库内更新存储有字段参数配置表和数据信息存储表；配置化解析模块用于将表单字段配置信息处理加工为存储信息，以及读取存储信息、并处理加工为前端显示表单；前端页面用于进行选择表单标志操作、数据查询操作以及用于显示表单。与现有技术相比，本发明在字段发生变化的场景下，只需简单修改字段参数配置表即可，不需要改动任何前端后台程序，能够快速响应表单需求变化或定制化需求，提高开发效率、方便后期维护和移交。方便后期维护和移交。方便后期维护和移交。


技术研发人员：赵陈红 欧阳小兵 司倍敏 熊柄铸 陈泽艇 范园 马倩昱 谢裕 朱煜
受保护的技术使用者：中银金融科技有限公司
技术研发日：2022.01.29
技术公布日：2022/5/25