A method and system for generating multi-terminal form interaction pages

Abstract

The present invention proposes a method and system for generating a multi-terminal form interaction page, which belongs to the field of computer application technology, and includes: constructing a form configuration page, and storing the form configuration information in a browser; constructing a standardized form component, arranging it above the form design area of ​​the browser, and selecting a corresponding component from the standardized form component and arranging it in the form design area; setting the language type of the required source code; configuring the number and type of form items for the form content in the interface design area; setting the parameter configuration of each form component to obtain the entire configuration of the required form interaction page; exporting the corresponding form source code, obtaining the configuration and source code type of the entire form item from the browser, and using the corresponding string concatenation technology according to the language type to obtain the source code of the multi-terminal form interaction page from the form design area. The present invention can realize the personalized needs of the form item according to the parameter configuration of the form item.

Description

Technical Field

[0001] The present invention belongs to the field of computer application technology, and in particular, relates to a method and system for generating a multi-terminal form interaction page. Background Art

[0002] The statements in this section merely provide background information related to the present invention and do not necessarily constitute prior art.

[0003] Form interaction pages are widely used in multiple terminal applications such as Web, Android, iOS, and mini-programs. Under the existing technology, the same form item elements must be developed using different languages ​​to generate corresponding interactive pages. The development efficiency is low and asynchronous, and the development time is relatively long.

[0004] The existing technology and development process is: each end must first learn the corresponding language, and then select the code framework of the corresponding language. The cost of the above learning and application is extremely high.

[0005] In addition, the prior art is used to generate the entire web page instead of generating codes only for form interaction, and cannot be directly used by programmers. Summary of the invention

[0006] In order to overcome the deficiencies of the above-mentioned prior art, the present invention provides a method for generating a multi-terminal form interaction page, which isolates users from the form source code, can efficiently realize the generation of the form interaction page, and has high development efficiency.

[0007] To achieve the above objectives, one or more embodiments of the present invention provide the following technical solutions:

[0008] In a first aspect, a method for generating a multi-terminal form interaction page is disclosed, comprising:

[0009] Build a form configuration page and save the form configuration information in the browser;

[0010] Build a standardized form component, arrange it above the form design area of ​​the browser, and select corresponding components from the standardized form components and arrange them in the form design area;

[0011] Set the language type of the required source code;

[0012] Configure the number and type of form items in the form content of the interface design area;

[0013] Set the parameter configuration of each form component to obtain the complete configuration of the required form interaction page;

[0014] Export the corresponding form source code, obtain the configuration and source code type of the entire form item from the browser, and use the corresponding string concatenation technology according to the language type to obtain the source code of the multi-terminal form interaction page from the form design area.

[0015] A further technical solution is to select the required combination and configuration of form items according to the user's own needs when constructing the form configuration page, and store the user's selection in the browser's localStorage.

[0016] A further technical solution is to build standardized form components and provide form component renderings. Form components include input boxes, searches, selectors, radio buttons, check boxes, cascading selections, time selections, calendars, and switches.

[0017] In the browser-based form design area, the standardized form components are arranged above the design area, and the form design area is below;

[0018] Use the drag and drop action to insert component effects to place the selected form components into the design area.

[0019] A further technical solution includes the development languages ​​corresponding to different terminals when setting the language type of the required source code.

[0020] A further technical solution is to configure the number and type of form items in the form content of the interface design area, specifically including:

[0021] Set the number of form components according to different requirements, and configure the component type for each form component, including input box, search, selector, radio button, check box, cascade selection, time selection, calendar and switch.

[0022] A further technical solution is to set the parameter configuration of each form component to obtain the complete configuration of the required form interaction page, including:

[0023] According to the characteristics of different form components, parameter configuration is provided for each form component, including configuration of field name, label name, label width, component width and default value.

[0024] A further technical solution is to determine the language type and form design area configuration information set by the user when obtaining the source code of the multi-terminal form interaction page, and then use the corresponding string template to generate source code for different language types on the front end.

[0025] In a second aspect, a system for generating a multi-terminal form interaction page is disclosed, comprising:

[0026] The form configuration page building module is configured to: build a form configuration page and store the form configuration information in the browser;

[0027] The standardized form component construction module is configured to: construct a standardized form component, arrange it above the form design area of ​​the browser, and select corresponding components from the standardized form component and arrange them in the form design area;

[0028] The parameter configuration module is configured to: set the language type of the required source code;

[0029] Configure the number and type of form items in the form content of the interface design area;

[0030] Set the parameter configuration of each form component to obtain the complete configuration of the required form interaction page;

[0031] The multi-terminal form interaction page generation module is configured to: export the corresponding form source code, obtain the configuration and source code type of the entire form item from the browser, and use the corresponding string splicing technology according to the language type to obtain the source code of the multi-terminal form interaction page from the form design area.

[0032] One or more of the above technical solutions have the following beneficial effects:

[0033] The code language of the multiple terminals of the present invention is not consistent with the prior art; in addition, the form implementation of each terminal of the present invention can use a different code framework.

[0034] The present invention isolates users from form source code, can efficiently realize the generation of form interaction pages, has high development efficiency, low error rate, and shortens development time; realizes a what-you-see-is-what-you-get design effect through a form design area; and can realize personalized needs of form items according to parameter configuration of form items.

[0035] The present invention adopts multi-terminal synchronization: code templates corresponding to multiple terminals are preset in the program for assembly and splicing. Specific application examples are all in the source code and are used by programmers.

[0036] Advantages of additional aspects of the present invention will be given in part in the following description, and in part will become obvious from the following description, or will be learned through practice of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] The accompanying drawings in the specification, which constitute a part of the present invention, are used to provide a further understanding of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute improper limitations on the present invention.

[0038] Figure 1 The figure is a flow chart of a method according to an embodiment of the present invention. DETAILED DESCRIPTION

[0039] It should be noted that the following detailed descriptions are exemplary and are intended to provide further explanation of the present invention. Unless otherwise specified, all technical and scientific terms used herein have the same meanings as those commonly understood by those skilled in the art to which the present invention belongs.

[0040] It should be noted that the terms used herein are for describing specific embodiments only and are not intended to be limiting of exemplary embodiments according to the present invention.

[0041] In the absence of conflict, the embodiments of the present invention and the features of the embodiments may be combined with each other.

[0042] Embodiment 1

[0043] See attached Figure 1 As shown, this embodiment discloses a method for generating a multi-terminal form interaction page, which mainly includes:

[0044] Step 1: Use modern Web front-end (JavaScript, HTML, CSS and other technologies) to build a form configuration page and store the form configuration information in the browser localStorage attribute;

[0045] The form configuration information is stored in the browser's localStorage attribute because almost all modern browsers support it, there is no expiration time limit, it is stored permanently, and it never expires. That is, as long as the browser is not uninstalled, the data will always exist unless it is manually deleted.

[0046] Specifically, the form configuration page is a page system developed using modern front-end technology, using JavaScript, HTML, CSS, and a wealth of third-party open source libraries. Users can choose the appropriate combination and configuration of form items according to their needs, and store the user's selection in localStorage.

[0047] Step 2: Build a set of standardized form components, arrange them above the form design area of ​​the browser, and select corresponding components from the standardized form components and arrange them in the form design area; unify and standardize the form component styles to ensure the consistency of multi-terminal code UI.

[0048] Specifically, it includes: using technologies such as HTML, CSS and JavaScript to build a set of standardized form components and provide form component renderings. Form components include input boxes, searches, selectors, radio buttons, check boxes, cascading selections, time selections, calendars, switches, etc. In terms of usage, it provides users with a browser-based form design area, with standardized form components arranged above the design area and a form design area below. Users can arrange the selected form components into the design area by dragging, inserting component effects, and other actions, thereby achieving a what-you-see-is-what-you-get design effect, isolating users from the form source code, improving efficiency and avoiding errors.

[0049] Step 3, set the language type of the required source code, and select one or more language types;

[0050] Including but not limited to the following: development languages ​​corresponding to different terminals such as Web, Android, iOS, and mini programs.

[0051] Taking Android as an example, the language type can generate source code in Java, Kotlin, or XML.

[0052] Step 4: Configure the number and type of form items in the form content in the interface design area, so that you can have an overview and manage the specific content of the form in a unified manner.

[0053] Specifically, set the number of form components according to different requirements, and configure the component type for each form component, such as input box, search, selector, radio button, check box, cascading selection, time selection, calendar, switch, etc.

[0054] Step 5: Set the parameter configuration of each form component to obtain the complete configuration of the required form interaction page; obtain the corresponding source code based on the complete configuration of the form;

[0055] Specifically, according to the characteristics of different form components, parameter configurations are provided for each form component, such as field name, label name, label width, component width, default value and other configurations, so as to realize the personalized needs of form components.

[0056] Step 6, export the corresponding form source code, obtain the configuration and source code type of the entire form item from the browser localStorage attribute, and use the corresponding string concatenation technology to obtain the source code of the multi-terminal form interaction page from the form design area according to the language type in step 3. The above source code programmer can directly copy and paste it into his own program for use. Subsequently, insert the code involved in the form item configuration into the corresponding code template of the multi-terminal.

[0057] Specifically, JavaScript is used to determine the language type set by the user and the form design area configuration information, and then the corresponding string template is used on the front end to generate these source codes for different language types. Finally, it is determined which code template to use.

[0058] Embodiment 2

[0059] The purpose of this embodiment is to provide a computing device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the steps of the above method are implemented when the processor executes the program.

[0060] Embodiment 3

[0061] The purpose of this embodiment is to provide a computer-readable storage medium.

[0062] A computer-readable storage medium stores a computer program, which executes the steps of the above method when executed by a processor.

[0063] Embodiment 4

[0064] The purpose of this embodiment is to provide a system for generating a multi-terminal form interaction page, including:

[0065] The form configuration page building module is configured to: build a form configuration page and store the form configuration information in the browser;

[0066] The standardized form component construction module is configured to: construct a standardized form component, arrange it above the form design area of ​​the browser, and select corresponding components from the standardized form component and arrange them in the form design area;

[0067] The parameter configuration module is configured to: set the language type of the required source code;

[0068] Configure the number and type of form items in the form content of the interface design area;

[0069] Set the parameter configuration of each form component to obtain the complete configuration of the required form interaction page;

[0070] The multi-terminal form interaction page generation module is configured to: export the corresponding form source code, obtain the configuration and source code type of the entire form item from the browser, and use the corresponding string splicing technology according to the language type to obtain the source code of the multi-terminal form interaction page from the form design area.

[0071] The steps involved in the apparatuses of the above embodiments 2, 3 and 4 correspond to the method embodiment 1, and the specific implementation methods can refer to the relevant description part of embodiment 1. The term "computer-readable storage medium" should be understood as a single medium or multiple media including one or more instruction sets; it should also be understood to include any medium that can store, encode or carry an instruction set for execution by a processor and enable the processor to execute any method in the present invention.

[0072] Those skilled in the art should understand that the modules or steps of the present invention described above can be implemented by a general-purpose computer device, or alternatively, they can be implemented by a program code executable by a computing device, so that they can be stored in a storage device and executed by the computing device, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. The present invention is not limited to any specific combination of hardware and software.

[0073] Although the above describes the specific implementation mode of the present invention in conjunction with the accompanying drawings, it is not intended to limit the scope of protection of the present invention. Those skilled in the art should understand that various modifications or variations that can be made by those skilled in the art on the basis of the technical solution of the present invention without creative work are still within the scope of protection of the present invention.

Claims

1. A method for generating a multi-terminal form interaction page, characterized in that: include: Build a form configuration page and save the form configuration information in the browser; When building the form configuration page, select the required combination and configuration of form items according to the user's own needs, and store the user's selection in the browser's localStorage; Build a standardized form component, arrange it above the form design area of ​​the browser, and select corresponding components from the standardized form components and arrange them in the form design area; Build standardized form components and provide form component renderings. Form components include input boxes, search boxes, selectors, radio buttons, check boxes, cascading selections, time selections, calendars, and switches. In the browser-based form design area, the standardized form components are arranged above the design area, and the form design area is below; Arrange the selected form components into the design area by dragging and dropping, and inserting component effects; Set the language type of the required source code; Configure the number and type of form items in the form content of the interface design area; Set the parameter configuration of each form component to obtain the complete configuration of the required form interaction page; Export the corresponding form source code, obtain the configuration and source code type of the entire form item from the browser, and use the corresponding string concatenation technology according to the language type to obtain the source code of the multi-terminal form interaction page from the form design area; When the source code of the multi-terminal form interaction page is obtained, the language type set by the user and the form design area configuration information are determined, and then the corresponding string template is used to generate the source code for different language types on the front end.

2. A method for generating a multi-terminal form interaction page as claimed in claim 1, characterized in that: When setting the language type of the required source code, include the development language corresponding to different terminals.

3. A method for generating a multi-terminal form interaction page as claimed in claim 1, characterized in that: Configure the number and type of form items in the form content of the interface design area, including: Set the number of form components according to different requirements, and configure the component type for each form component, including input box, search, selector, radio button, check box, cascade selection, time selection, calendar and switch.

4. A method for generating a multi-terminal form interaction page as claimed in claim 1, characterized in that: Set the parameter configuration of each form component to obtain the complete configuration of the required form interaction page, including: According to the characteristics of different form components, parameter configuration is provided for each form component, including configuration of field name, label name, label width, component width and default value.

5. A system for generating a multi-terminal form interaction page, characterized in that: include: The form configuration page building module is configured to: build a form configuration page and store the form configuration information in the browser; When building the form configuration page, select the required combination and configuration of form items according to the user's own needs, and store the user's selection in the browser's localStorage; The standardized form component construction module is configured to: construct a standardized form component, arrange it above the form design area of ​​the browser, and select corresponding components from the standardized form component and arrange them in the form design area; Build standardized form components and provide form component renderings. Form components include input boxes, search boxes, selectors, radio buttons, check boxes, cascading selections, time selections, calendars, and switches. In the browser-based form design area, the standardized form components are arranged above the design area, and the form design area is below; Arrange the selected form components into the design area by dragging and dropping, and inserting component effects; The parameter configuration module is configured to: set the language type of the required source code; Configure the number and type of form items in the form content of the interface design area; Set the parameter configuration of each form component to obtain the complete configuration of the required form interaction page; The multi-terminal form interaction page generation module is configured to: export the corresponding form source code, obtain the configuration and source code type of the entire form item from the browser, and obtain the source code of the multi-terminal form interaction page from the form design area using the corresponding string concatenation technology according to the language type; When the source code of the multi-terminal form interaction page is obtained, the language type set by the user and the form design area configuration information are determined, and then the corresponding string template is used to generate the source code for different language types on the front end.

6. A computing device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the method described in any one of claims 1 to 4 are implemented.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method described in any one of claims 1 to 4 are performed.

Images