CN114527979A - 一种生成多端表单交互页面的方法及系统 - Google Patents

一种生成多端表单交互页面的方法及系统 Download PDF

Info

Publication number
CN114527979A
CN114527979A CN202210151553.1A CN202210151553A CN114527979A CN 114527979 A CN114527979 A CN 114527979A CN 202210151553 A CN202210151553 A CN 202210151553A CN 114527979 A CN114527979 A CN 114527979A
Authority
CN
China
Prior art keywords
configuration
design area
page
components
component
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210151553.1A
Other languages
English (en)
Inventor
李志鹏
李晓峰
戚勇
王继志
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Jinan Supercomputing Technology Research Institute
Original Assignee
Jinan Supercomputing Technology Research Institute
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Jinan Supercomputing Technology Research Institute filed Critical Jinan Supercomputing Technology Research Institute
Priority to CN202210151553.1A priority Critical patent/CN114527979A/zh
Publication of CN114527979A publication Critical patent/CN114527979A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

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

Description

一种生成多端表单交互页面的方法及系统
技术领域
本发明属于计算机应用技术领域，尤其涉及一种生成多端表单交互页面的方法及系统。
背景技术
本部分的陈述仅仅是提供了与本发明相关的背景技术信息，不必然构成在先技术。
表单交互页面广泛存在于Web、Android、iOS、小程序等多端应用中，现有技术下，相同的表单项要素，也要分别使用不同的语言进行开发生成对应的交互页面，其开发效率低且不同步，开发时间也相对比较长。
现有技术和开发流程是：每种端要先学习对应的语言，然后再选择对应的语言的代码框架，上述学习和应用的成本极高。
另外，现有技术中存在用于生成整个web页面，而不是生成仅用于表单交互的代码，无法直接面向程序员使用。
发明内容
为克服上述现有技术的不足，本发明提供了一种生成多端表单交互页面的方法，将用户与表单源代码隔离开，可高效地实现表单交互页面的生成，开发效率高。
为实现上述目的，本发明的一个或多个实施例提供了如下技术方案：
第一方面，公开了一种生成多端表单交互页面的方法，包括：
构建表单配置页面，并将表单配置信息存入浏览器中；
构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；
设置所需源代码的语言类型；
对界面设计区的表单内容进行表单项数量和类型的配置；
设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；
导出对应的表单源代码，从浏览器中获取整个表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。
进一步的技术方案，构建表单配置页面时根据用户自身需求选择所需的表单项的组合与配置，并将用户的选择存入到浏览器的localStorage中。
进一步的技术方案，构建标准化表单组件并提供表单组件效果图，表单组件包括输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历及开关；
基于浏览器的表单设计区中，设计区上方排列标准化表单组件，下方为表单设计区；
通过拖拽，插入组件效果动作将所选表单组件布置到设计区中。
进一步的技术方案，设置所需源代码的语言类型时，包括不同端对应的开发语言。
进一步的技术方案，对界面设计区的表单内容进行表单项数量和类型的配置，具体包括：
根据不同的需求设置表单组件的数量，为每个表单组件配置组件类型，包括输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历及开关。
进一步的技术方案，设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置，具体包括：
根据不同表单组件的特性，为每个表单组件提供参数配置，包括配置字段名、标签名、标签宽度、组件宽度及默认值。
进一步的技术方案，得到多端表单交互页面的源代码时，判断用户设置的语言类型和表单设计区配置信息，再在前端针对不用的语言类型使用对应的字符串模板生成源代码。
第二方面，公开了一种生成多端表单交互页面的系统，包括：
表单配置页面构建模块，被配置为：构建表单配置页面，并将表单配置信息存入浏览器中；
标准化表单组件构建模块，被配置为：构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；
参数配置模块，被配置为：设置所需源代码的语言类型；
对界面设计区的表单内容进行表单项数量和类型的配置；
设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；
多端表单交互页面生成模块，被配置为：导出对应的表单源代码，从浏览器中获取整个表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。
以上一个或多个技术方案存在以下有益效果：
本发明的多端的代码语言与现有技术并不一致；另外，本发明每种端的表单实现又可以使用不同的代码框架。
本发明将用户与表单源代码隔离开，可高效地实现表单交互页面的生成，开发效率高，出错率低，且缩短开发时间；通过表单设计区实现所见即所得的设计效果；根据对表单项的参数配置，可实现表单项的个性化需求。
本发明采用多端同步：是在程序内预置了多端对应的代码模板进行组装拼接。具体的应用例子都存在于源代码中，面向程序员使用。
本发明附加方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
附图说明
构成本发明的一部分的说明书附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。
图1为本发明实施例方法的流程图。
具体实施方式
应该指出，以下详细说明都是示例性的，旨在对本发明提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本发明所属技术领域的普通技术人员通常理解的相同含义。
需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本发明的示例性实施方式。
在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
实施例一
参见附图1所示，本实施例公开了一种生成多端表单交互页面的方法，主要包括：
步骤1，采用现代Web前端(JavaScript、HTML、CSS等技术)构建表单配置页面，并将表单配置信息存入浏览器localStorage属性中；
将表单配置信息存入浏览器localStorage属性中是考虑几乎现代的浏览器都支持，没有过期时间限制，永久存储，永不失效，即只要浏览器不卸载，数据就会一直存在，除非手动删除。
具体地，表单配置页面是用现代前端技术开发的一套页面系统，采用JavaScript、HTML、CSS及丰富的第三方开源库等技术进行开发。用户可以根据自身需求选择合适的表单项的组合与配置、并将用户的选择存入到localStorage中。
步骤2，构建一套标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；实现统一规范了表单组件样式，保证多端代码UI的一致性。
具体包括：使用HTML、CSS和JavaScript等技术构建一套标准化表单组件并提供表单组件效果图，表单组件包括输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历、开关等等；在使用上，为用户提供一个基于浏览器的表单设计区，设计区上方排列标准化表单组件，下方为表单设计区，用户可以通过拖拽，插入组件效果等动作将所选表单组件布置到设计区中，由此实现所见即所得的设计效果，将用户与表单源代码隔离开，提高效率且避免出错。
步骤3，设置所需源代码的语言类型，选择一种或多种语言类型；
包括但不限于以下：Web、Android、iOS、小程序等不同端对应的开发语言。
语言类型以Android端为例：可以生成Java或Kotlin或XML类型的源代码。
步骤4，对界面设计区的表单内容进行表单项数量和类型的配置，能够总览，方便统一管理表单的具体内容。
具体地，根据不同的需求设置表单组件的数量，为每个表单组件配置组件类型，如输入框、搜索、选择器、单选框、复选框、级联选择、时间选择、日历、开关等等。
步骤5，设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；根据表单的全部配置，得到对应的源代码；
具体地，根据不同表单组件的特性，为每个表单组件提供参数配置，如字段名、标签名、标签宽度、组件宽度、默认值等配置，从而实现表单组件的个性化需求。
步骤6，导出对应的表单源代码，从浏览器localStorage属性中获取整个表单项的配置及源代码类型，根据步骤3的语言类型分别并采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码，上述源代码程序员可直接拷贝粘贴到自己的程序中使用。后续将表单项配置所涉及的代码插入到多端对应的代码模板中。
具体地，使用JavaScript判断用户设置的语言类型和表单设计区配置信息，再在前端针对不用的语言类型使用对应的字符串模板生成这些源代码。最终确定使用哪一种代码模板。
实施例二
本实施例的目的是提供一种计算装置,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法的步骤。
实施例三
本实施例的目的是提供一种计算机可读存储介质。
一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时执行上述方法的步骤。
实施例四
本实施例的目的是提供了一种生成多端表单交互页面的系统，包括：
表单配置页面构建模块，被配置为：构建表单配置页面，并将表单配置信息存入浏览器中；
标准化表单组件构建模块，被配置为：构建标准化表单组件，将其排列在浏览器的表单设计区上方，并从标准化表单组件中选择对应组件布置到表单设计区；
参数配置模块，被配置为：设置所需源代码的语言类型；
对界面设计区的表单内容进行表单项数量和类型的配置；
设置每一个表单组件的参数配置，得到需要的表单交互页面的全部配置；
多端表单交互页面生成模块，被配置为：导出对应的表单源代码，从浏览器中获取整个表单项的配置及源代码类型，根据语言类型分别采用对应的字符串拼接技术从表单设计区得到多端表单交互页面的源代码。
以上实施例二、三和四的装置中涉及的各步骤与方法实施例一相对应，具体实施方式可参见实施例一的相关说明部分。术语“计算机可读存储介质”应该理解为包括一个或多个指令集的单个介质或多个介质；还应当被理解为包括任何介质，所述任何介质能够存储、编码或承载用于由处理器执行的指令集并使处理器执行本发明中的任一方法。
本领域技术人员应该明白，上述本发明的各模块或各步骤可以用通用的计算机装置来实现，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。本发明不限制于任何特定的硬件和软件的结合。
上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。

Claims (10)

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

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210151553.1A CN114527979A (zh) 2022-02-18 2022-02-18 一种生成多端表单交互页面的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210151553.1A CN114527979A (zh) 2022-02-18 2022-02-18 一种生成多端表单交互页面的方法及系统

Publications (1)

Publication Number Publication Date
CN114527979A true CN114527979A (zh) 2022-05-24

Family

ID=81622518

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210151553.1A Pending CN114527979A (zh) 2022-02-18 2022-02-18 一种生成多端表单交互页面的方法及系统

Country Status (1)

Country Link
CN (1) CN114527979A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115828855A (zh) * 2022-11-01 2023-03-21 江苏领悟信息技术有限公司 一种自定义表单系统和方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115828855A (zh) * 2022-11-01 2023-03-21 江苏领悟信息技术有限公司 一种自定义表单系统和方法
CN115828855B (zh) * 2022-11-01 2023-09-15 江苏领悟信息技术有限公司 一种自定义表单系统和方法

Similar Documents

Publication Publication Date Title
US10534830B2 (en) Dynamically updating a running page
Subramanian Pro Mern Stack: Full Stack Web App Development with Mongo, Express, React and Node
WO2018095261A1 (zh) 页面渲染的方法、装置和存储介质
US7610545B2 (en) Annotations for tracking provenance
US7774435B2 (en) System and method for batch tuning intelligent devices
CN110806863A (zh) 接口文档生成方法及装置、电子设备、存储介质
WO2019233293A1 (zh) 一种应用程序的开发方法和装置
US7836119B2 (en) Distributed execution model for cross-organizational declarative web applications
US20040015832A1 (en) Method and apparatus for generating source code
US8839192B2 (en) System and method for presentation of cross organizational applications
RU2459238C2 (ru) Управляемая среда выполнения для организации взаимодействия между программными приложениями
Feldt Programming Firefox: Building rich internet applications with XUL
CN107066618A (zh) 一种网页页面转换后显示方法和装置
CN111158687B (zh) Java插件的界面生成方法、装置、计算机设备和存储介质
CN104407863A (zh) 抽象控件模型编程装置和方法
CN110727429B (zh) 一种前端页面的生成方法、装置及设备
CN116974620A (zh) 应用程序的生成方法、运行方法以及相应的装置
CN105302558A (zh) 一种用于多客户端的内容展现系统及方法
CN114527979A (zh) 一种生成多端表单交互页面的方法及系统
US20090049423A1 (en) Javascripttm programming extension
CN115202652A (zh) 一种云上业务申请表的平台搭建方法、系统、设备和介质
CN110941429B (zh) 一种网页的业务脚本处理方法、装置及设备
CN107077484B (zh) 生成应用的网络浏览器视图
Soininen Jetpack Compose vs React Native–Differences in UI Development
Onion Essential ASP. NET with Examples in Visual Basic. NET

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination