Configuration form generation method and device, equipment, storage medium and program product

Abstract

The invention discloses a configuration form generation method and device, equipment, a storage medium and a program product, and the method comprises the steps: setting a JSON configuration file; analyzing the JSON configuration file to obtain a matched component; generating a Vue component tree according to the component; using a Vue framework to render the Vue component tree, and generating a form; and carrying out data binding on the form according to the Vue framework, and carrying out data verification on the form according to a rule in the JSON configuration file. Therefore, the configurable form is generated based on the Vue framework, the flexibility and configurability of the form are enhanced, and the development efficiency and the system stability are further improved through data binding and data verification.

Description

Technical Field

[0001] This invention relates to the field of programming technology and can also be used in the financial field, particularly to a configurable form generation method, apparatus, device, storage medium, and program product. Background Technology

[0002] With the rapid development of information technology, forms, as an important interface element for user interaction with the system, play a crucial role in various application systems. Traditional form development methods typically require developers to manually write large amounts of Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript code. This approach is not only inefficient but also difficult to adapt to rapidly changing business needs. To solve this problem, form configuration technology has emerged. It abstracts the structure, style, and behavior of forms into configuration information, enabling rapid form generation and flexible adjustment.

[0003] In existing technologies, there are various form configuration solutions. For example, visual technologies can be used to provide users with a form configuration interface, build dynamic form models, and implement form creation and management based on Formily. Alternatively, multiple user interface (UI) frameworks can be configured in the target application to enable the reuse of the same set of JSON formatted form data across different UI frameworks.

[0004] It should be noted that the above introduction to the technical background is only for the purpose of providing a clear and complete explanation of the technical solutions of this application and facilitating understanding by those skilled in the art. It should not be assumed that these technical solutions are known to those skilled in the art simply because they have been described in the background section of this application. Summary of the Invention

[0005] The inventors discovered that existing form configuration technologies still have some shortcomings. First, most form generators lack sufficient flexibility, supporting only specific types of components and layouts, thus limiting the freedom of form design. Second, existing form generators face difficulties in integrating custom components; when specific business components are needed, they may encounter issues with incompatibility or complex integration. Third, their ability to handle complex business logic is limited, often failing to meet actual business needs and requiring additional programming work. Fourth, when business requirements change, existing form generators may require modifications to the underlying code, increasing maintenance costs. Finally, existing form generators have poor scalability, making it difficult to adapt to changing requirements across different projects.

[0006] To address at least one of the aforementioned problems or other similar issues, embodiments of this application provide a configurable form generation method, apparatus, device, storage medium, and program product. This configurable form generation method generates configurable forms based on the Vue framework, enhancing the flexibility and configurability of the forms. Furthermore, through data binding and data validation, it further improves development efficiency and system stability.

[0007] According to a first aspect of the embodiments of this application, a method for generating a configurable form is provided, the method comprising:

[0008] Configure the JSON configuration file;

[0009] Parse the JSON configuration file to obtain the matching components;

[0010] Generate a Vue component tree based on the components described;

[0011] Use the Vue framework to render the Vue component tree and generate a form; and

[0012] The form is bound to data using the Vue framework, and the form is validated according to the rules in the JSON configuration file.

[0013] In at least one embodiment, setting a JSON configuration file includes: defining the fields and structure of the JSON configuration file according to the type and functional requirements of the target form, and configuring the creation, editing and loading functions of the JSON configuration file.

[0014] In at least one embodiment, the form items in the JSON configuration file have the following attributes: type, tag, data binding attribute, and data validation rule.

[0015] In at least one embodiment, parsing the JSON configuration file to obtain a matching component includes: traversing the form items in the JSON configuration file using a recursive parsing algorithm to parse the JSON configuration file, and obtaining the corresponding component from a preset component library according to the type of the form items in the JSON configuration file.

[0016] In at least one embodiment, the preset component library is any one of the Kingdot UI component library, Ant Design component library, Vuetify component library, or Element UI component library.

[0017] In at least one embodiment, rendering the Vue component tree using the Vue framework to generate a form includes: converting the Vue component tree into HTML elements according to the rendering mechanism of the Vue framework to generate the form.

[0018] In at least one embodiment, data binding of the form is performed according to the Vue framework, and data validation of the form is performed according to the rules in the JSON configuration file, including: establishing an association between HTML elements and form data based on the two-way data binding feature of the Vue framework, and performing real-time validation of the form data according to the data validation rules in the JSON configuration file.

[0019] In at least one embodiment, the generation method further includes: setting a graphical configuration interface for the form after data binding and data validation; and

[0020] The configuration interface was tested, and the system was optimized based on the test results.

[0021] According to a second aspect of the embodiments of this application, a configurable form generation apparatus is provided, the generation apparatus comprising:

[0022] The configuration unit, which is configured using a JSON configuration file;

[0023] A parsing unit parses the JSON configuration file to obtain matching components;

[0024] The generation unit generates a Vue component tree based on the components;

[0025] The rendering unit uses the Vue framework to render the Vue component tree and generate the form; and

[0026] The data binding and validation unit binds data to the form according to the Vue framework and validates the form according to the rules in the JSON configuration file.

[0027] According to a third aspect of the present application, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the method described in the first aspect.

[0028] According to a fourth aspect of the embodiments of this application, a computer-readable storage medium is provided, the computer-readable storage medium storing a computer program / instructions, which, when executed by a processor, implement the steps of the method described in the first aspect.

[0029] According to a fifth aspect of the embodiments of this application, a computer program product is provided, the computer program product including a computer program / instructions, which, when executed by a processor, implement the steps of the method described in the first aspect.

[0030] One of the beneficial effects of this application's embodiments is that the method for generating configurable forms is based on the Vue framework, which enhances the flexibility and configurability of the forms. Furthermore, through data binding and data validation, it further improves development efficiency and system stability.

[0031] Specific embodiments of this application are disclosed in detail with reference to the following description and accompanying drawings, indicating how the principles of this application can be adopted. It should be understood that the embodiments of this application are not limited in scope. Within the spirit and scope of the appended claims, embodiments of this application include many changes, modifications, and equivalents.

[0032] Features described and / or illustrated for one embodiment may be used in the same or similar manner in one or more other embodiments, combined with features in other embodiments, or substituted for features in other embodiments.

[0033] It should be emphasized that the term "including / comprises" as used herein refers to the presence of a feature, whole, step, or component, but does not exclude the presence or addition of one or more other features, wholes, steps, or components. Attached Figure Description

[0034] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. In the drawings:

[0035] Figure 1 A flowchart illustrating a method for generating a configurable form according to an embodiment of this application;

[0036] Figure 2 Another flowchart illustrating the method for generating a configurable form according to an embodiment of this application;

[0037] Figure 3 This is a schematic diagram of a configuration form generation apparatus according to an embodiment of this application;

[0038] Figure 4 This is a schematic diagram of the computer device described in this application. Detailed Implementation

[0039] Referring to the accompanying drawings, the foregoing and other features of this application will become apparent from the following description. Specific embodiments of this application are specifically disclosed in the description and drawings, illustrating partial implementations in which the principles of this application can be adopted. It should be understood that this application is not limited to the described embodiments; rather, it includes all modifications, variations, and equivalents falling within the scope of the appended claims. Various embodiments of this application are described below with reference to the accompanying drawings. These embodiments are merely exemplary and not intended to limit the scope of this application.

[0040] In the embodiments of this application, the terms "first," "second," etc., are used to distinguish different elements by their names, but do not indicate the spatial arrangement or temporal order of these elements, and these elements should not be limited by these terms. The terms "comprising," "including," "having," etc., refer to the presence of the stated features, elements, components, or assemblies, but do not exclude the presence or addition of one or more other features, elements, components, or assemblies.

[0041] In the embodiments of this application, the singular forms "a," "the," etc., including the plural forms, should be broadly understood as "a kind" or "a class" rather than limited to the meaning of "an." Furthermore, the term "the" should be understood to include both the singular and plural forms, unless the context explicitly indicates otherwise. Additionally, the term "according to" should be understood as "at least partially based on…," and the term "based on" should be understood as "at least partially based on…," unless the context explicitly indicates otherwise.

[0042] The embodiments of this application will now be described with reference to the accompanying drawings.

[0043] Example 1

[0044] Example 1 provides a method for generating configurable forms. Figure 1 This is a flowchart of a method for generating a configurable form according to an embodiment of this application.

[0045] like Figure 1 As shown, this application provides a method for generating a configurable form, which includes the following steps:

[0046] S101. Configure the JSON configuration file.

[0047] In one or more embodiments, a JSON (JavaScript Object Notation) configuration file is set, including: defining the fields and structure of the JSON configuration according to the type and functional requirements of the target form, and configuring the creation, editing and loading functions of the JSON configuration file.

[0048] For example, Table 1 is an example of a JSON configuration file in an embodiment of this application.

[0049] Table 1

[0050]

[0051] As shown in Table 1, the target form needs to set a name input box and a gender selection box on the display interface. Based on the type and requirements of the target form, two types of form items are defined in the form: the first type of form item is an input box ("type": "input"), and the second type of form item is a drop-down selection box ("type": "select"). The first type of form item, i.e., the input box type form item "type": "input", defines the component type of the first form item as "input box component"; the second type of form item, i.e., the drop-down selection box type form item "type": "select", defines the component type of the second form item as "drop-down selection box component".

[0052] The `label` attribute for the first type of form item is "Name". The `prop` attribute for "Name" binds this first type of form item to the "Name" data. The `rules` attribute for this first type of form item is: `[{ "required": true, "message": "Please enter your name", "trigger": "blur"}]`. This defines the validation rule for this first type of form item: the "Name" field is required; otherwise, the error message "Please enter your name" will be triggered. Validation is automatically performed when the input field is out of focus (or clicked elsewhere). The `label` attribute for the second type of form item is "Gender". The `prop` attribute for "Name" binds this second type of form item to the "Gender" data. The `options` attribute defines the second type of form item as a dropdown list of optional options, each containing the display text (label): "Male" or "Female", and the corresponding actual data value (value): "male" or "female".

[0053] In one or more embodiments, form items in the JSON configuration file have the following attributes: type, label, data binding attributes, and data validation rules. For example, as shown in Table 1, the form items in the JSON configuration file have two types: input box type (first type form item) and dropdown selection box type (second type form item). The display label of the input box of the first type form item is "Name", and the display label of the dropdown selection box of the second type form item is "Gender". The first type form item is bound to the name data, and the second type form item is bound to the gender data. Furthermore, the first type form item also defines the data validation required for the current form item and its validation rules.

[0054] S102. Parse the JSON configuration file to obtain the matching components.

[0055] In one or more embodiments, parsing a JSON configuration file to obtain matching components includes: traversing the form items in the JSON configuration file using a recursive parsing algorithm to parse the JSON configuration file, and retrieving and obtaining the corresponding components from a preset component library based on the component types, attributes, and relationships defined in the JSON configuration file. The recursive parsing algorithm can handle nested form structures and retrieves the corresponding components from the component library based on the types of form items in the recursively parsed JSON configuration file, such as input boxes, selection boxes, date pickers, etc.

[0056] In one or more embodiments, the preset component library can be a component library commonly used in application development, such as any one of Kingdot UI, Ant Design, Vuetify, and Element UI.

[0057] S103. Generate a Vue component tree based on the components.

[0058] For example, components obtained from the Kingdot UI component library can be organized according to the hierarchical relationships and nested structures defined in the JSON configuration file to build a complete Vue component tree. This Vue component tree reflects the hierarchical structure of the form and the relationships between the components, providing a foundation for subsequent rendering. In this application, the Vue component tree is an example of a component tree, but this application is not limited to this; the component tree can also be other types of component trees.

[0059] S104. Use the Vue framework to render the Vue component tree and generate a form.

[0060] In one or more embodiments, rendering a Vue component tree using the Vue framework to generate a form includes: converting the Vue component tree into HTML (Hypertext Markup Language) elements according to the Vue framework's rendering mechanism to generate the form. For example, the Vue framework's rendering mechanism includes the creation, comparison, and updating of the virtual DOM (Document Object Model), which can efficiently convert the component tree into a user-visible form interface. In this application, the Vue framework is an example of a framework used for rendering; this application is not limited to this, and the framework used for rendering can also be other types of frameworks, such as the React framework, the Angular framework, or the SvelteSolid.js framework.

[0061] S105. Bind data to the form according to the Vue framework and validate the form data according to the rules in the JSON configuration file.

[0062] In one or more embodiments, data binding to the form is performed according to the Vue framework, and data validation of the form is performed according to the rules in the JSON configuration file, including: establishing an association between HTML elements and form data based on the two-way data binding feature of the Vue framework, and performing real-time validation of the form data according to the data validation rules in the JSON configuration file.

[0063] In one or more embodiments, the Vue framework's two-way data binding associates form data with form item components (or HTML elements). The interface automatically updates when the data changes, and data is automatically synchronized during interface operations (such as user input or selection), eliminating the need to manually write synchronization code from data to the interface or vice versa. Simultaneously, based on validation rules defined in the JSON configuration file, user input data is validated in real time, including mandatory field checks, format validation, and range restrictions, and user-friendly error messages are provided to ensure that user input meets expectations. This application is not limited to this.

[0064] In one or more embodiments of S105, during the process of data binding to forms according to the Vue framework, the Vue framework's v-model directive can be used in conjunction with a Proxy object to achieve deep reactive data binding, establishing a two-way communication channel centered on the model-value / update:model-value event. Custom v-model syntactic sugar functionality can be implemented for specific components (e.g., date range selectors). For example, Table 2 shows a code example of two-way data binding:

[0065] Table 2

[0066]

[0067] In the JSON configuration, the `prop` field for form items (e.g., "prop": "name") is a binding identifier. When the JSON configuration file is parsed and a Vue component tree is generated, the Vue framework associates the form data field with the `prop` value and automatically adds directives to the component to bind that form data when rendering the component tree. For example, in Table 1, when the JSON configuration is used, the `prop` field is defined as "prop": "name". When the JSON configuration file is parsed and a Vue component tree is generated, `prop: "name"` is associated with the reactive data `formData.name`. Furthermore, when rendering the Vue component tree, the `v-model` directive is automatically added to the component, for example, defining `v-model="formData.name"`, thus establishing a two-way association between the form item component and the reactive form data.

[0068] In one or more embodiments, dynamic data processing can be used to bind data to a form in S105, and the process of dynamic data processing includes:

[0069] 1. Raw data preprocessing:

[0070] Use a JSON Schema validator to verify the compliance of the data structure and perform data cleaning operations, including null value filling and format standardization.

[0071] 2. Field-level conversion processing:

[0072] Field conversions are implemented using configurable conversion rules, including monetary unit conversion and date format processing; a chained processing function registration mechanism is designed, and Table 3 shows an example of the chained processing function registration mechanism:

[0073] Table 3

[0074]

[0075] 3. Batch data aggregation:

[0076] It employs the MapReduce model to process large datasets and utilizes Web Workers to achieve distributed computing capabilities, thereby improving the efficiency of batch data processing.

[0077] In one or more embodiments of S105, when performing data validation on a form according to rules in a JSON configuration file, a data validation engine can be used to perform the data validation. This data validation engine can employ a layered validation architecture, including:

[0078] 1. Basic Validation Layer: Based on regular expressions, it performs basic format validation. For example, it has more than 20 built-in financial industry standard regular expressions to cover the format validation needs of various basic fields.

[0079] 2. Business Rules Layer: Supports configurable cross-field validation logic, such as validation of business constraints like "end date must be greater than start date";

[0080] 3. Risk Control Verification Layer: Real-time calls to the Anti-Money Laundering (AML) rule engine interface to complete compliance verification at the risk control level.

[0081] Therefore, according to the embodiments of this application, by setting a JSON configuration file and using the Vue framework to generate configurable forms, the flexibility and configurability of the forms are enhanced. Furthermore, by binding and validating the data in the forms, configurable validation that can be quickly implemented through configuration in financial business validation scenarios and error handling that supports automatic error location are achieved, further improving development efficiency and system stability.

[0082] Figure 2 This is another flowchart illustrating the method for generating a configurable form, as described in an embodiment of this application. Figure 2 As shown, the method for generating a configurable form according to the present invention further includes the following steps:

[0083] S106: A graphical configuration interface for setting up forms after data binding and data validation.

[0084] The graphical configuration interface provides simple visual operations such as drag-and-drop, clicking, and filling in, allowing users to intuitively adjust the structure, style, and behavior of the form without directly modifying the JSON configuration file.

[0085] S107: Perform system testing on the configuration interface and optimize the system based on the test results.

[0086] The system tests verify whether the form's functionality meets expectations. For example, this includes testing whether data binding attributes are displayed correctly in the form, whether data validation rules are correctly synchronized to the JSON configuration and trigger validation logic during preview, and whether components are successfully added. Based on the test results, the system is optimized to improve the form's performance, usability, and stability.

[0087] Example 2

[0088] Example 2 provides a configurable form generation apparatus, which corresponds to the configurable form generation method in Example 1.

[0089] Figure 3This is a schematic diagram of a configuration form generation apparatus according to an embodiment of this application. Figure 3 As shown, the configurable form generation device 100 includes: a configuration unit 101, a parsing unit 102, a generation unit 103, a rendering unit 104, and a data binding and validation unit 105. The configuration unit 101 is used to set a JSON configuration file; the parsing unit 102 is used to parse the JSON configuration file to obtain matching components; the generation unit 103 is used to generate a Vue component tree based on the components; the rendering unit 104 is used to render the Vue component tree using the Vue framework to generate the form; and the data binding and validation unit 105 is used to bind data to the form according to the Vue framework and validate the form according to the rules in the JSON configuration file.

[0090] Therefore, according to the embodiments of this application, by setting a JSON configuration file and using the Vue framework to generate configurable forms, the flexibility and configurability of the forms are enhanced. Furthermore, by binding and validating the data in the forms, development efficiency and system stability are further improved.

[0091] Example 3

[0092] Figure 4 This is a schematic diagram of the computer device described in this application. Figure 4 As shown, the present invention also provides a computer device 200, including a memory 210, a processor 220, and a computer program 230 stored in the memory 210 and executable on the processor 220. When the processor 220 executes the computer program 230, it implements the steps in the method of embodiment 1.

[0093] In the computer device 200, the memory 210 may include, but is not limited to, RAM, ROM, EPROM, EEPROM, flash memory, optical disk, or any other type of volatile or non-volatile storage device. The processor 220 may be a general-purpose processor, digital signal processor (DSP), application-specific integrated circuit (ASIC), field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, etc.

[0094] Example 4

[0095] Example 4 provides a computer-readable storage medium storing a computer program / instructions that, when executed by a processor, implement the steps of the method in Example 1. Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. The storage medium can be a magnetic disk, optical disk, read-only memory (ROM), random access memory (RAM), flash memory, hard disk drive (HDD), or solid-state drive (SSD), etc.; the storage medium can also include combinations of the above types of memory.

[0096] Example 5

[0097] Example 5 provides a computer program product, which includes a computer program / instructions that, when executed by a processor, implement the steps in the method of Example 1.

[0098] The computer program product can be a computer program product stored in various media that can store program code, such as USB flash drive, portable hard drive, read-only memory (ROM), random access memory (RAM), disk or optical disc.

[0099] Preferred embodiments of this application have been described above with reference to the accompanying drawings. Many features and advantages of these embodiments are apparent from this detailed description, and therefore the appended claims are intended to cover all such features and advantages of these embodiments that fall within their true spirit and scope. Furthermore, since many modifications and alterations will readily occur to those skilled in the art, the embodiments of this application are not intended to be limited to the precise structures and operations illustrated and described, but rather to encompass all suitable modifications and equivalents falling within their scope.

Claims

1. A method for generating a configurable form, characterized in that, The generation method includes: Configure the JSON configuration file; Parse the JSON configuration file to obtain the matching components; Generate a Vue component tree based on the components described; Use the Vue framework to render the Vue component tree and generate a form; and The form is bound to data using the Vue framework, and the form is validated according to the rules in the JSON configuration file.

2. The generation method according to claim 1, characterized in that, Configure the JSON configuration file, including: Define the fields and structure of the JSON configuration based on the type and functional requirements of the target form, and configure the creation, editing, and loading functions of the JSON configuration file.

3. The generation method according to claim 1, characterized in that, The form items in the JSON configuration file have the following attributes: type, tag, data binding attributes, and data validation rules.

4. The generation method according to claim 1, characterized in that, Parse the JSON configuration file to obtain matching components, including: The form items in the JSON configuration file are traversed using a recursive parsing algorithm to parse the JSON configuration file, and the corresponding components are retrieved from a preset component library according to the type of the form items in the JSON configuration file.

5. The generation method according to claim 1, characterized in that, The Vue component tree is rendered using the Vue framework to generate a form, including: According to the rendering mechanism of the Vue framework, the Vue component tree is converted into HTML elements to generate the form.

6. The generation method according to claim 1, characterized in that, The form is bound to data according to the Vue framework, and the form is validated according to the rules in the JSON configuration file, including: Based on the two-way data binding feature of the Vue framework, an association is established between HTML elements and form data, and the form data is validated in real time according to the data validation rules in the JSON configuration file.

7. The generation method according to claim 1, characterized in that, The generation method further includes: A graphical configuration interface is set for the form after data binding and data validation; and The configuration interface was tested, and the system was optimized based on the test results.

8. A device for generating configurable forms, characterized in that, The generating apparatus includes: The configuration unit, which is configured using a JSON configuration file; A parsing unit parses the JSON configuration file to obtain matching components; The generation unit generates a Vue component tree based on the components; The rendering unit uses the Vue framework to render the Vue component tree and generate the form; and The data binding and validation unit binds data to the form according to the Vue framework and validates the form according to the rules in the JSON configuration file.

9. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program / instructions that, when executed by a processor, implement the steps of the method according to any one of claims 1 to 7.

11. A computer program product, characterized in that, The computer program product includes a computer program / instruction that, when executed by a processor, implements the steps of the method according to any one of claims 1 to 7.

Images