Vue-based low-code form generator

Abstract

The invention discloses a Vue-based low-code form generator, which comprises a component library module which is internally provided with a preset Vue component and supports the extension of a user-defined component; the form designer module provides a visual drag type form design interface, and a user can drag the components in the component library to a design area and perform attribute configuration; a form renderer module; according to the method, the development efficiency can be improved: through a visual dragging and configuration mode, the development threshold is reduced, and the form development efficiency is improved; the automatically generated Vue component code is clear in structure and easy to maintain, and the code quality is improved; flexibility is enhanced, self-defined component extension and logic control are supported, and complex service requirements are met; import and export: supporting export of structural data and codes which can be flexibly selected; vue ecology is seamlessly integrated, wherein the advantages of response type data binding, modularization and the like of Vue are fully utilized, and seamless integration with a Vue project is achieved.

Description

Technical Field

[0001] The present invention relates to the field of software technology, and in particular to a low-code form generator based on Vue. Background Art

[0002] There are many form generators available on the market. These tools usually include a graphical user interface (GUI) and users can build forms by dragging and dropping components. The prior art usually has the following structure and principle:

[0003] 1. Graphical interface: Users can design forms in a visual environment and use drag and drop operations to add components such as input boxes, drop-down menus, radio buttons, etc.

[0004] 2. Component library: Most form builders provide a basic component library that users can select and configure to meet basic form needs.

[0005] 3. Data binding: Existing technologies usually use a two-way data binding mechanism to connect the data input by the user with the data model of the application to ensure data consistency.

[0006] 4. Validation mechanism: Some form generators have built-in simple validation rules, such as required field checking and format validation, to ensure that the data entered by the user conforms to the expected format.

[0007] Problems and shortcomings of existing technologies

[0008] Although the existing form generators meet certain requirements in terms of basic functions, they still have the following problems and shortcomings:

[0009] 1. Insufficient flexibility: Existing technologies often only support basic components and simple nesting, and cannot meet the needs of complex forms. For example, it is impossible to implement multi-level deeply nested sub-forms, which limits the flexibility of users in designing complex data structures.

[0010] 2. Weak customization capabilities: Most tools have limited support for custom components, making it difficult for users to create exclusive components based on specific needs. The lack of comprehensive exposure of component events and properties makes it difficult for users to flexibly handle complex interaction logic.

[0011] 3. Limitations of verification rules: The verification rules of existing technologies are usually fixed built-in rules, which cannot meet the diverse needs of specific business scenarios. When users need complex verification logic, they often have to rely on additional code implementation, which increases the development burden.

[0012] 4. Weak import and export functions: The existing form structure import and export functions are not perfect. Users often face problems such as format incompatibility or loss of settings when migrating or sharing form designs, which reduces the reusability of form designs.

[0013] 5. Poor user experience: The interface design of some existing form generators is not user-friendly and the learning curve is steep, which makes non-professional users feel confused when using them, thus affecting their user experience.

[0014] To this end, the present invention proposes a low-code form generator based on Vue. Summary of the invention

[0015] In view of the defects in the prior art, the present invention provides a low-code form generator based on Vue, which includes:

[0016] The component library module has built-in preset Vue components and supports the extension of user-defined components;

[0017] The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties.

[0018] The form renderer module supports rendering the structure exported by the form designer into a web page;

[0019] The component tree module supports displaying the organization of components in the form of attribute structures and dragging;

[0020] Form template module, which has built-in form templates;

[0021] The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data;

[0022] Data storage and synchronization module, form data can be synchronized to the server or local storage in real time.

[0023] The logic control module supports dynamic logic control of the form by configuring event triggering methods;

[0024] The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

[0025] Preferably: the Vue components in the component library module include single-line input, multi-line input, counter, single selection, multiple selection, drop-down, time, time range, date, date range, switch, rating, color selector, slider, button, text, dividing line, html, picture, file, rich text, tree selection, cascade, vue slot, multi-line form, form, table, grid component, tab, pop-up window.

[0026] Preferably: the form designer, the attribute configuration includes field name, data type, and verification rule.

[0027] Preferably: the working logic of the data storage and synchronization module includes the following steps:

[0028] S1: Collection of form data. When users enter data through the form interface, the input data is collected;

[0029] S2: Processing of form data. Before the form is submitted, the system will verify the data entered by the user and then format the data according to storage requirements.

[0030] S3: Storage of form data, select the storage method, and then serialize the data for storage;

[0031] S4: Data backup and recovery, determine the update frequency and backup logic of data backup, create data copies, and restore through data copies during recovery;

[0032] S5: Security and privacy protection: encrypt the data and then set access permissions. Data can only be accessed and modified after permission verification.

[0033] Preferably: in the step S1, in the Vue component, the v-model binding mechanism is used to bind the form input element to the data object in the Vue instance, and the data input by the user is automatically updated to the data object in the Vue instance.

[0034] Preferably: in the S3 step, the storage method is JSON or XML.

[0035] Preferably: in the step S3, the data object is directly converted into a string during data serialization.

[0036] Preferably: in the step S3, the character string is directly written into the file in the data storage logic.

[0037] Preferably: in the step S3, the data storage architecture adopts a tree-like distributed architecture.

[0038] The tree-like distributed architecture includes the following steps:

[0039] S31c: The data fragmentation module divides the data packet into multiple multi-level fragment data;

[0040] S32c: storing the divided multi-level slice data in corresponding storage nodes;

[0041] S33c: The system management module grants the query authority to the queryer, limiting the storage nodes that the queryer can query;

[0042] S34c: The distributed indexing module queries the node data and displays it to the queryer based on the permissions and needs of the queryer.

[0043] Preferably, in step S31c, the data sharding method adopts a comprehensive method based on feature extraction and clustering, which includes the following steps:

[0044] A1: Data preprocessing: processing the data for coarse-grained missing values, abnormal values, and duplicate values ​​to form regular data columns;

[0045] A2: Feature selection and classification: select p different feature types based on the characteristics of the data, and initially divide the data into p data slices based on different feature types;

[0046] A3: Randomly extract a data point from each data slice as the initial cluster center;

[0047] A4: Set a distance threshold and calculate the distance between all data and the initial cluster center. If the distance is less than the threshold, the target data is classified into the initial cluster center.

[0048] The beneficial effects of the present invention are embodied in:

[0049] 1. The present invention can improve development efficiency: through visual drag and configuration, it can lower the development threshold and improve form development efficiency; improve code quality: the automatically generated Vue component code has a clear structure and is easy to maintain, which improves code quality; enhance flexibility: supports custom component extension and logic control to meet complex business needs; import and export: supports exporting structured data and code, and can be flexibly selected; seamlessly integrate Vue ecology: make full use of Vue's responsive data binding, componentization and other advantages to achieve seamless integration with Vue projects, and support multi-level and unlimited sub-form nesting. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following is a brief introduction to the drawings required for the specific embodiments or the description of the prior art. In all the drawings, similar elements or parts are generally identified by similar reference numerals. In the drawings, the elements or parts are not necessarily drawn according to the actual scale.

[0051] Figure 1 It is a logic diagram of the present invention. DETAILED DESCRIPTION

[0052] The following embodiments of the technical solution of the present invention are described in detail in conjunction with the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solution of the present invention, and are therefore only used as examples, and cannot be used to limit the protection scope of the present invention.

[0053] It should be noted that, unless otherwise specified, the technical terms or scientific terms used in this application should have the common meanings understood by those skilled in the art to which the present invention belongs.

[0054] Embodiment 1:

[0055] A low-code form builder based on Vue, which includes:

[0056] The component library module has built-in preset Vue components and supports the extension of user-defined components;

[0057] The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties.

[0058] The form renderer module supports rendering the structure exported by the form designer into a web page;

[0059] The component tree module supports displaying the organization of components in the form of attribute structures and dragging;

[0060] Form template module, which has built-in form templates;

[0061] The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data;

[0062] Data storage and synchronization module, form data can be synchronized to the server or local storage in real time.

[0063] The logic control module supports dynamic logic control of the form by configuring event triggering methods;

[0064] The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

[0065] Embodiment 2:

[0066] A low-code form builder based on Vue, which includes:

[0067] The component library module has built-in preset Vue components and supports the extension of user-defined components;

[0068] The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties.

[0069] The form renderer module supports rendering the structure exported by the form designer into a web page;

[0070] The component tree module supports displaying the organization of components in the form of attribute structures and dragging;

[0071] Form template module, which has built-in form templates;

[0072] The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data;

[0073] Data storage and synchronization module, form data can be synchronized to the server or local storage in real time.

[0074] The logic control module supports dynamic logic control of the form by configuring event triggering methods;

[0075] The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

[0076] The Vue components in the component library module include single-line input, multi-line input, counter, single selection, multi-select, drop-down, time, time range, date, date range, switch, rating, color selector, slider, button, text, dividing line, html, picture, file, rich text, tree selection, cascade, vue slot, multi-line form, form, table, grid component, tab, pop-up window.

[0077] The form designer, attribute configuration includes field name, data type, and validation rules.

[0078] Embodiment 3:

[0079] A low-code form builder based on Vue, which includes:

[0080] The component library module has built-in preset Vue components and supports the extension of user-defined components;

[0081] The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties.

[0082] The form renderer module supports rendering the structure exported by the form designer into a web page;

[0083] The component tree module supports displaying the organization of components in the form of attribute structures and dragging;

[0084] Form template module, which has built-in form templates;

[0085] The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data;

[0086] Data storage and synchronization module, form data can be synchronized to the server or local storage in real time.

[0087] The logic control module supports dynamic logic control of the form by configuring event triggering methods;

[0088] The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

[0089] The Vue components in the component library module include single-line input, multi-line input, counter, single selection, multi-select, drop-down, time, time range, date, date range, switch, rating, color selector, slider, button, text, dividing line, html, picture, file, rich text, tree selection, cascade, vue slot, multi-line form, form, table, grid component, tab, pop-up window.

[0090] The form designer, attribute configuration includes field name, data type, and validation rules.

[0091] The working logic of the data storage and synchronization module includes the following steps:

[0092] S1: Collection of form data. When users enter data through the form interface, the input data is collected;

[0093] S2: Processing of form data. Before the form is submitted, the system will verify the data entered by the user and then format the data according to storage requirements.

[0094] S3: Storage of form data, select the storage method, and then serialize the data for storage;

[0095] S4: Data backup and recovery, determine the update frequency and backup logic of data backup, create data copies, and restore through data copies during recovery;

[0096] S5: Security and privacy protection: encrypt the data and then set access permissions. Data can only be accessed and modified after permission verification.

[0097] Embodiment 4:

[0098] A low-code form builder based on Vue, which includes:

[0099] The component library module has built-in preset Vue components and supports the extension of user-defined components;

[0100] The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties.

[0101] The form renderer module supports rendering the structure exported by the form designer into a web page;

[0102] The component tree module supports displaying the organization of components in the form of attribute structures and dragging;

[0103] Form template module, which has built-in form templates;

[0104] The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data;

[0105] Data storage and synchronization module, form data can be synchronized to the server or local storage in real time.

[0106] The logic control module supports dynamic logic control of the form by configuring event triggering methods;

[0107] The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

[0108] The Vue components in the component library module include single-line input, multi-line input, counter, single selection, multi-select, drop-down, time, time range, date, date range, switch, rating, color selector, slider, button, text, dividing line, html, picture, file, rich text, tree selection, cascade, vue slot, multi-line form, form, table, grid component, tab, pop-up window.

[0109] The form designer, attribute configuration includes field name, data type, and validation rules.

[0110] The working logic of the data storage and synchronization module includes the following steps:

[0111] S1: Collection of form data. When users enter data through the form interface, the input data is collected;

[0112] S2: Processing of form data. Before the form is submitted, the system will verify the data entered by the user and then format the data according to storage requirements.

[0113] S3: Storage of form data, select the storage method, and then serialize the data for storage;

[0114] S4: Data backup and recovery, determine the update frequency and backup logic of data backup, create data copies, and restore through data copies during recovery;

[0115] S5: Security and privacy protection: encrypt the data and then set access permissions. Data can only be accessed and modified after permission verification.

[0116] In the step S1, in the Vue component, the v-model binding mechanism is used to bind the form input element to the data object in the Vue instance, and the data entered by the user is automatically updated to the data object in the Vue instance.

[0117] Embodiment 5:

[0118] A low-code form builder based on Vue, which includes:

[0119] The component library module has built-in preset Vue components and supports the extension of user-defined components;

[0120] The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties.

[0121] The form renderer module supports rendering the structure exported by the form designer into a web page;

[0122] The component tree module supports displaying the organization of components in the form of attribute structures and dragging;

[0123] Form template module, which has built-in form templates;

[0124] The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data;

[0125] Data storage and synchronization module, form data can be synchronized to the server or local storage in real time.

[0126] The logic control module supports dynamic logic control of the form by configuring event triggering methods;

[0127] The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

[0128] The Vue components in the component library module include single-line input, multi-line input, counter, single selection, multi-select, drop-down, time, time range, date, date range, switch, rating, color selector, slider, button, text, dividing line, html, picture, file, rich text, tree selection, cascade, vue slot, multi-line form, form, table, grid component, tab, pop-up window.

[0129] The form designer, attribute configuration includes field name, data type, and validation rules.

[0130] The working logic of the data storage and synchronization module includes the following steps:

[0131] S1: Collection of form data. When users enter data through the form interface, the input data is collected;

[0132] S2: Processing of form data. Before the form is submitted, the system will verify the data entered by the user and then format the data according to storage requirements.

[0133] S3: Storage of form data, select the storage method, and then serialize the data for storage;

[0134] S4: Data backup and recovery, determine the update frequency and backup logic of data backup, create data copies, and restore through data copies during recovery;

[0135] S5: Security and privacy protection: encrypt the data and then set access permissions. Data can only be accessed and modified after permission verification.

[0136] In the step S1, in the Vue component, the v-model binding mechanism is used to bind the form input element to the data object in the Vue instance, and the data entered by the user is automatically updated to the data object in the Vue instance.

[0137] In the S3 step, the storage method is JSON or XML.

[0138] In the S3 step, the data object is directly converted into a string during data serialization.

[0139] In the S3 step, the string is directly written into the file in the data storage logic.

[0140] Embodiment 6:

[0141] A low-code form builder based on Vue, which includes:

[0142] The component library module has built-in preset Vue components and supports the extension of user-defined components;

[0143] The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties.

[0144] The form renderer module supports rendering the structure exported by the form designer into a web page;

[0145] The component tree module supports displaying the organization of components in the form of attribute structures and dragging;

[0146] Form template module, which has built-in form templates;

[0147] The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data;

[0148] Data storage and synchronization module, form data can be synchronized to the server or local storage in real time.

[0149] The logic control module supports dynamic logic control of the form by configuring event triggering methods;

[0150] The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

[0151] The Vue components in the component library module include single-line input, multi-line input, counter, single selection, multi-select, drop-down, time, time range, date, date range, switch, rating, color selector, slider, button, text, dividing line, html, picture, file, rich text, tree selection, cascade, vue slot, multi-line form, form, table, grid component, tab, pop-up window.

[0152] The form designer, attribute configuration includes field name, data type, and validation rules.

[0153] The working logic of the data storage and synchronization module includes the following steps:

[0154] S1: Collection of form data. When users enter data through the form interface, the input data is collected;

[0155] S2: Processing of form data. Before the form is submitted, the system will verify the data entered by the user and then format the data according to storage requirements.

[0156] S3: Storage of form data, select the storage method, and then serialize the data for storage;

[0157] S4: Data backup and recovery, determine the update frequency and backup logic of data backup, create data copies, and restore through data copies during recovery;

[0158] S5: Security and privacy protection: encrypt the data and then set access permissions. Data can only be accessed and modified after permission verification.

[0159] In the step S1, in the Vue component, the v-model binding mechanism is used to bind the form input element to the data object in the Vue instance, and the data entered by the user is automatically updated to the data object in the Vue instance.

[0160] In the S3 step, the storage method is JSON or XML.

[0161] In the S3 step, the data object is directly converted into a string during data serialization.

[0162] In the S3 step, the string is directly written into the file in the data storage logic.

[0163] In the S3 step, the data storage architecture adopts a tree-like distributed architecture.

[0164] The tree-like distributed architecture includes the following steps:

[0165] S31c: The data fragmentation module divides the data packet into multiple multi-level fragment data;

[0166] S32c: storing the divided multi-level slice data in corresponding storage nodes;

[0167] S33c: The system management module grants the query authority to the queryer, limiting the storage nodes that the queryer can query;

[0168] S34c: The distributed indexing module queries the node data and displays it to the queryer based on the permissions and needs of the queryer.

[0169] Embodiment 7:

[0170] A low-code form builder based on Vue, which includes:

[0171] The component library module has built-in preset Vue components and supports the extension of user-defined components;

[0172] The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties.

[0173] The form renderer module supports rendering the structure exported by the form designer into a web page;

[0174] The component tree module supports displaying the organization of components in the form of attribute structures and dragging;

[0175] Form template module, which has built-in form templates;

[0176] The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data;

[0177] Data storage and synchronization module, form data can be synchronized to the server or local storage in real time.

[0178] The logic control module supports dynamic logic control of the form by configuring event triggering methods;

[0179] The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

[0180] The Vue components in the component library module include single-line input, multi-line input, counter, single selection, multi-select, drop-down, time, time range, date, date range, switch, rating, color selector, slider, button, text, dividing line, html, picture, file, rich text, tree selection, cascade, vue slot, multi-line form, form, table, grid component, tab, pop-up window.

[0181] The form designer, attribute configuration includes field name, data type, and validation rules.

[0182] The working logic of the data storage and synchronization module includes the following steps:

[0183] S1: Collection of form data. When users enter data through the form interface, the input data is collected;

[0184] S2: Processing of form data. Before the form is submitted, the system will verify the data entered by the user and then format the data according to storage requirements.

[0185] S3: Storage of form data, select the storage method, and then serialize the data for storage;

[0186] S4: Data backup and recovery, determine the update frequency and backup logic of data backup, create data copies, and restore through data copies during recovery;

[0187] S5: Security and privacy protection: encrypt the data and then set access permissions. Data can only be accessed and modified after permission verification.

[0188] In the step S1, in the Vue component, the v-model binding mechanism is used to bind the form input element to the data object in the Vue instance, and the data entered by the user is automatically updated to the data object in the Vue instance.

[0189] In the S3 step, the storage method is JSON or XML.

[0190] In the S3 step, the data object is directly converted into a string during data serialization.

[0191] In the S3 step, the string is directly written into the file in the data storage logic.

[0192] In the S3 step, the data storage architecture adopts a tree-like distributed architecture.

[0193] The tree-like distributed architecture includes the following steps:

[0194] S31c: The data fragmentation module divides the data packet into multiple multi-level fragment data;

[0195] S32c: storing the divided multi-level slice data in corresponding storage nodes;

[0196] S33c: The system management module grants the query authority to the queryer, limiting the storage nodes that the queryer can query;

[0197] S34c: The distributed indexing module queries the node data and displays it to the queryer based on the permissions and needs of the queryer.

[0198] In the step S31c, the data sharding method adopts a comprehensive method based on feature extraction and clustering, which includes the following steps:

[0199] A1: Data preprocessing: processing the data for coarse-grained missing values, abnormal values, and duplicate values ​​to form regular data columns;

[0200] A2: Feature selection and classification: select p different feature types based on the characteristics of the data, and initially divide the data into p data slices based on different feature types;

[0201] A3: Randomly extract a data point from each data slice as the initial cluster center;

[0202] A4: Set a distance threshold and calculate the distance between all data and the initial cluster center. If the distance is less than the threshold, the target data is classified into the initial cluster center.

[0203] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. These modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present invention, and they should all be included in the scope of the claims and specification of the present invention.

Claims

1. A low-code form generator based on Vue, featuring: include: The component library module has built-in preset Vue components and supports the extension of user-defined components; The form designer module provides a visual drag-and-drop form design interface. Users can drag components from the component library to the design area and configure properties. The form renderer module supports rendering the structure exported by the form designer into a web page; The component tree module supports displaying the organization of components in the form of attribute structures and dragging; Form template module, which has built-in form templates; The data binding module supports two-way binding of form data with the responsive data of Vue components to achieve automatic update and synchronization of data; Data storage and synchronization module, form data can be synchronized to the server or local storage in real time; The logic control module supports dynamic logic control of the form by configuring event triggering methods; The code generation module automatically generates Vue component code that can be run directly based on the form structure and configuration designed by the user, and supports the export and import of code.

2. The Vue-based low-code form generator according to claim 1 is characterized in that: The Vue components in the component library module include single-line input, multi-line input, counter, single selection, multi-select, drop-down, time, time range, date, date range, switch, rating, color selector, slider, button, text, dividing line, html, picture, file, rich text, tree selection, cascade, vue slot, multi-line form, form, table, grid component, tab, pop-up window.

3. The Vue-based low-code form generator according to claim 2 is characterized in that: The form designer, attribute configuration includes field name, data type, and validation rules.

4. The Vue-based low-code form generator according to claim 3 is characterized in that: The working logic of the data storage and synchronization module includes the following steps: S1: Collection of form data. When users enter data through the form interface, the input data is collected; S2: Processing of form data. Before the form is submitted, the system will verify the data entered by the user and then format the data according to storage requirements. S3: Storage of form data, select the storage method, and then serialize the data for storage; S4: Data backup and recovery, determine the update frequency and backup logic of data backup, create data copies, and restore through data copies during recovery; S5: Security and privacy protection: encrypt the data and then set access permissions. Data can only be accessed and modified after permission verification.

5. The Vue-based low-code form generator according to claim 4 is characterized in that: In the step S1, in the Vue component, the v-model binding mechanism is used to bind the form input element to the data object in the Vue instance, and the data entered by the user is automatically updated to the data object in the Vue instance.

6. The Vue-based low-code form generator according to claim 5, characterized in that: In the S3 step, the storage method is JSON or XML.

7. The Vue-based low-code form generator according to claim 6, characterized in that: In the S3 step, the data object is directly converted into a string during data serialization.

8. The Vue-based low-code form generator according to claim 7, characterized in that: In the S3 step, the string is directly written into the file in the data storage logic.

9. The Vue-based low-code form generator according to claim 8, characterized in that: In the S3 step, the data storage architecture adopts a tree-like distributed architecture; The tree-like distributed architecture includes the following steps: S31c: The data fragmentation module divides the data packet into multiple multi-level fragment data; S32c: storing the divided multi-level slice data in corresponding storage nodes; S33c: The system management module grants the query authority to the queryer, limiting the storage nodes that the queryer can query; S34c: The distributed indexing module queries the node data and displays it to the queryer based on the permissions and needs of the queryer.

10. The Vue-based low-code form generator according to claim 9, characterized in that: In the step S31c, the data sharding method adopts a comprehensive method based on feature extraction and clustering, which includes the following steps: A1: Data preprocessing: processing the data for coarse-grained missing values, abnormal values, and duplicate values ​​to form regular data columns; A2: Feature selection and classification: select p different feature types based on the characteristics of the data, and initially divide the data into p data slices based on different feature types; A3: Randomly extract a data point from each data slice as the initial cluster center; A4: Set a distance threshold and calculate the distance between all data and the initial cluster center. If the distance is less than the threshold, the target data is classified into the initial cluster center.

Images