一种生成多端表单交互页面的方法及系统与流程

1.本发明属于计算机应用技术领域，尤其涉及一种生成多端表单交互页面的方法及系统。


背景技术：

2.本部分的陈述仅仅是提供了与本发明相关的背景技术信息，不必然构成在先技术。
3.表单交互页面广泛存在于web、android、ios、小程序等多端应用中，现有技术下，相同的表单项要素，也要分别使用不同的语言进行开发生成对应的交互页面，其开发效率低且不同步，开发时间也相对比较长。
4.现有技术和开发流程是：每种端要先学习对应的语言，然后再选择对应的语言的代码框架，上述学习和应用的成本极高。
5.另外，现有技术中存在用于生成整个web页面，而不是生成仅用于表单交互的代码，无法直接面向程序员使用。


技术实现要素：

6.为克服上述现有技术的不足，本发明提供了一种生成多端表单交互页面的方法，将用户与表单源代码隔离开，可高效地实现表单交互页面的生成，开发效率高。
7.为实现上述目的，本发明的一个或多个实施例提供了如下技术方案：
8.第一方面，公开了一种生成多端表单交互页面的方法，包括：
9.构建表单配置页面，并将表单配置信息存入浏览器中；
10.构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；
11.设置所需源代码的语言类型；
12.对界面设计区的表单内容进行表单项数量和类型的配置；
13.设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；
14.导出对应的表单源代码，从浏览器中获取整个表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。
15.进一步的技术方案，构建表单配置页面时根据用户自身需求选择所需的表单项的组合与配置，并将用户的选择存入到浏览器的localstorage中。
16.进一步的技术方案，构建标准化表单组件并提供表单组件效果图，表单组件包括输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历及开关；
17.基于浏览器的表单设计区中，设计区上方排列标准化表单组件，下方为表单设计区；
18.通过拖拽，插入组件效果动作将所选表单组件布置到设计区中。
19.进一步的技术方案，设置所需源代码的语言类型时，包括不同端对应的开发语言。
20.进一步的技术方案，对界面设计区的表单内容进行表单项数量和类型的配置，具体包括：
21.根据不同的需求设置表单组件的数量，为每个表单组件配置组件类型，包括输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历及开关。
22.进一步的技术方案，设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置，具体包括：
23.根据不同表单组件的特性，为每个表单组件提供参数配置，包括配置字段名、标签名、标签宽度、组件宽度及默认值。
24.进一步的技术方案，得到多端表单交互页面的源代码时，判断用户设置的语言类型和表单设计区配置信息，再在前端针对不用的语言类型使用对应的字符串模板生成源代码。
25.第二方面，公开了一种生成多端表单交互页面的系统，包括：
26.表单配置页面构建模块，被配置为：构建表单配置页面，并将表单配置信息存入浏览器中；
27.标准化表单组件构建模块，被配置为：构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；
28.参数配置模块，被配置为：设置所需源代码的语言类型；
29.对界面设计区的表单内容进行表单项数量和类型的配置；
30.设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；
31.多端表单交互页面生成模块，被配置为：导出对应的表单源代码，从浏览器中获取整个表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。
32.以上一个或多个技术方案存在以下有益效果：
33.本发明的多端的代码语言与现有技术并不一致；另外，本发明每种端的表单实现又可以使用不同的代码框架。
34.本发明将用户与表单源代码隔离开，可高效地实现表单交互页面的生成，开发效率高，出错率低，且缩短开发时间；通过表单设计区实现所见即所得的设计效果；根据对表单项的参数配置，可实现表单项的个性化需求。
35.本发明采用多端同步：是在程序内预置了多端对应的代码模板进行组装拼接。具体的应用例子都存在于源代码中，面向程序员使用。
36.本发明附加方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
附图说明
37.构成本发明的一部分的说明书附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。
38.图1为本发明实施例方法的流程图。
具体实施方式
39.应该指出，以下详细说明都是示例性的，旨在对本发明提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本发明所属技术领域的普通技术人员通常理解的相同含义。
40.需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本发明的示例性实施方式。
41.在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
42.实施例一
43.参见附图1所示，本实施例公开了一种生成多端表单交互页面的方法，主要包括：
44.步骤1，采用现代web前端(javascript、html、css等技术)构建表单配置页面，并将表单配置信息存入浏览器localstorage属性中；
45.将表单配置信息存入浏览器localstorage属性中是考虑几乎现代的浏览器都支持，没有过期时间限制，永久存储，永不失效，即只要浏览器不卸载，数据就会一直存在，除非手动删除。
46.具体地，表单配置页面是用现代前端技术开发的一套页面系统，采用javascript、html、css及丰富的第三方开源库等技术进行开发。用户可以根据自身需求选择合适的表单项的组合与配置、并将用户的选择存入到localstorage中。
47.步骤2，构建一套标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；实现统一规范了表单组件样式，保证多端代码ui的一致性。
48.具体包括：使用html、css和javascript等技术构建一套标准化表单组件并提供表单组件效果图，表单组件包括输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历、开关等等；在使用上，为用户提供一个基于浏览器的表单设计区，设计区上方排列标准化表单组件，下方为表单设计区，用户可以通过拖拽，插入组件效果等动作将所选表单组件布置到设计区中，由此实现所见即所得的设计效果，将用户与表单源代码隔离开，提高效率且避免出错。
49.步骤3，设置所需源代码的语言类型，选择一种或多种语言类型；
50.包括但不限于以下：web、android、ios、小程序等不同端对应的开发语言。
51.语言类型以android端为例：可以生成java或kotlin或xml类型的源代码。
52.步骤4，对界面设计区的表单内容进行表单项数量和类型的配置，能够总览，方便统一管理表单的具体内容。
53.具体地，根据不同的需求设置表单组件的数量，为每个表单组件配置组件类型，如输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历、开关等等。
54.步骤5，设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；根据表单的全部配置，得到对应的源代码；
55.具体地，根据不同表单组件的特性，为每个表单组件提供参数配置，如字段名、标签名、标签宽度、组件宽度、默认值等配置，从而实现表单组件的个性化需求。
56.步骤6，导出对应的表单源代码，从浏览器localstorage属性中获取整个表单项的配置及源代码类型，根据步骤3的语言类型分别并采用对应的字符串拼接技术从表单设计
区得到多端表单交互页面的源代码，上述源代码程序员可直接拷贝粘贴到自己的程序中使用。后续将表单项配置所涉及的代码插入到多端对应的代码模板中。
57.具体地，使用javascript判断用户设置的语言类型和表单设计区配置信息，再在前端针对不用的语言类型使用对应的字符串模板生成这些源代码。最终确定使用哪一种代码模板。
58.实施例二
59.本实施例的目的是提供一种计算装置,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法的步骤。
60.实施例三
61.本实施例的目的是提供一种计算机可读存储介质。
62.一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时执行上述方法的步骤。
63.实施例四
64.本实施例的目的是提供了一种生成多端表单交互页面的系统，包括：
65.表单配置页面构建模块，被配置为：构建表单配置页面，并将表单配置信息存入浏览器中；
66.标准化表单组件构建模块，被配置为：构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；
67.参数配置模块，被配置为：设置所需源代码的语言类型；
68.对界面设计区的表单内容进行表单项数量和类型的配置；
69.设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；
70.多端表单交互页面生成模块，被配置为：导出对应的表单源代码，从浏览器中获取整个表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。
71.以上实施例二、三和四的装置中涉及的各步骤与方法实施例一相对应，具体实施方式可参见实施例一的相关说明部分。术语“计算机可读存储介质”应该理解为包括一个或多个指令集的单个介质或多个介质；还应当被理解为包括任何介质，所述任何介质能够存储、编码或承载用于由处理器执行的指令集并使处理器执行本发明中的任一方法。
72.本领域技术人员应该明白，上述本发明的各模块或各步骤可以用通用的计算机装置来实现，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。本发明不限制于任何特定的硬件和软件的结合。
73.上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。

技术特征：
1.一种生成多端表单交互页面的方法，其特征是，包括：构建表单配置页面，并将表单配置信息存入浏览器中；构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；设置所需源代码的语言类型；对界面设计区的表单内容进行表单项数量和类型的配置；设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；导出对应的表单源代码，从浏览器中获取整个表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。2.如权利要求1所述的一种生成多端表单交互页面的方法，其特征是，构建表单配置页面时根据用户自身需求选择所需的表单项的组合与配置，并将用户的选择存入到浏览器的localstorage中。3.如权利要求1所述的一种生成多端表单交互页面的方法，其特征是，构建标准化表单组件并提供表单组件效果图，表单组件包括输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历及开关；基于浏览器的表单设计区中，设计区上方排列标准化表单组件，下方为表单设计区；通过拖拽，插入组件效果动作将所选表单组件布置到设计区中。4.如权利要求1所述的一种生成多端表单交互页面的方法，其特征是，设置所需源代码的语言类型时，包括不同端对应的开发语言。5.如权利要求1所述的一种生成多端表单交互页面的方法，其特征是，对界面设计区的表单内容进行表单项数量和类型的配置，具体包括：根据不同的需求设置表单组件的数量，为每个表单组件配置组件类型，包括输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历及开关。6.如权利要求1所述的一种生成多端表单交互页面的方法，其特征是，设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置，具体包括：根据不同表单组件的特性，为每个表单组件提供参数配置，包括配置字段名、标签名、标签宽度、组件宽度及默认值。7.如权利要求1所述的一种生成多端表单交互页面的方法，其特征是，得到多端表单交互页面的源代码时，判断用户设置的语言类型和表单设计区配置信息，再在前端针对不用的语言类型使用对应的字符串模板生成源代码。8.一种生成多端表单交互页面的系统，其特征是，包括：表单配置页面构建模块，被配置为：构建表单配置页面，并将表单配置信息存入浏览器中；标准化表单组件构建模块，被配置为：构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；参数配置模块，被配置为：设置所需源代码的语言类型；对界面设计区的表单内容进行表单项数量和类型的配置；设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；多端表单交互页面生成模块，被配置为：导出对应的表单源代码，从浏览器中获取整个
表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。9.一种计算装置,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征是，所述处理器执行所述程序时实现上述权利要求1-7任一所述的方法的步骤。10.一种计算机可读存储介质，其上存储有计算机程序，其特征是，该程序被处理器执行时执行上述权利要求1-7任一所述的方法的步骤。

技术总结
本发明提出了一种生成多端表单交互页面的方法及系统，属于计算机应用技术领域，包括：构建表单配置页面，并将表单配置信息存入浏览器中；构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；设置所需源代码的语言类型；对界面设计区的表单内容进行表单项数量和类型的配置；设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；导出对应的表单源代码，从浏览器中获取整个表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。本发明根据对表单项的参数配置，可实现表单项的个性化需求。可实现表单项的个性化需求。可实现表单项的个性化需求。


技术研发人员：李志鹏 李晓峰 戚勇 王继志
受保护的技术使用者：济南超级计算技术研究院
技术研发日：2022.02.18
技术公布日：2022/5/25