Form rapid building method

Abstract

The invention relates to a quick form building method. The method comprises the following steps: defining a quick search custom component based on a JSON (JavaScript Object Notation) format; defining a reusable UI module based on a Vue framework, wherein the UI module receives the attribute value and triggers a custom event; the front-end component introduces a quick search custom component; defining a to-be-searched form object and transmitting the to-be-searched form object as an attribute parameter value to the quick search custom component; configuring attribute parameter values for displaying the searched data; configuring an attribute parameter value for quickly retrieving and displaying the configuration item; custom content is inserted into the rapid search custom component through a custom slot content; and using a quick search custom component in the template of the Vue component, and binding an attribute parameter value and an event monitor. According to the method, the dynamic form search is realized based on the JSON configuration, and the fields, types and verification rules of the form are defined through the unified JSON configuration file, so that the dynamic generation and management of the form interaction interface are realized.

Description

Technical Field

[0001] The present invention relates to the technical field of interactive interface development, in particular to a method for quickly building a form. Background Art

[0002] The search interface is a commonly used interactive interface. In the process of designing and developing the search interface, in order to present an appropriate form, it is usually necessary to write a large amount of HTML and JavaScript code for each form field, which leads to redundant code, difficult maintenance and difficulty in expansion.

[0003] Therefore, it is necessary to improve the reusability of the code and uniformly manage and dynamically generate the form construction.

[0004] The information disclosed in this background technology section is only intended to deepen the understanding of the overall background technology of the present invention, and should not be regarded as acknowledging or suggesting in any form that the information constitutes the prior art already known to those skilled in the art. Summary of the invention

[0005] In view of the defects existing in the prior art, the purpose of the present invention is to provide a method for quickly building a form, configure and implement dynamic form search based on JSON, define the fields, types and validation rules of the form through a unified JSON configuration file, and realize dynamic generation and management of the form interaction interface.

[0006] In order to achieve the above purpose, the technical solution adopted by the present invention is:

[0007] A method for quickly building a form, characterized by comprising the following steps:

[0008] Create the first JSON format file to define the quick search custom component;

[0009] The quick search custom component defines a reusable UI module based on the Vue framework, which receives attribute values ​​and triggers custom events, and provides a content distribution interface for external custom content to be passed in;

[0010] The front-end component parses the first JSON format file and introduces a quick search custom component;

[0011] Define the form object to be searched in the data definition function of the Vue component, and pass the form object to be searched as an attribute parameter value to the quick search custom component;

[0012] Configure the attribute parameter values ​​used to display the searched data;

[0013] Configure the attribute parameter value of the advSearchOptions configuration item for quick search display;

[0014] Define event handling functions;

[0015] Define a custom slot concent using the declarative HTML tag to insert custom content inside the quick search custom component;

[0016] Use the quick search custom component in the Vue component template and bind attribute parameter values ​​and event listeners.

[0017] Based on the above technical solution, the configuration for displaying the attribute parameter values ​​of the searched data specifically includes:

[0018] Parameter form: defines the key value of the search form. These key values ​​correspond to the parameter name in advSearchOptions.

[0019] Parameter advSearchOptions: defines the display configuration items of the search form, including field name, label, type, and placeholder.

[0020] Based on the above technical solution, the configuration for quick search display configuration item advSearchOptions attribute parameter values ​​specifically include:

[0021] Parameter label: defines the text displayed for the search item;

[0022] Parameter inputType: defines the type of search item, such as input box, drop-down box, date and time picker, etc.

[0023] Parameter name: defines the key value in the corresponding form, which must be consistent with the key value in the form object;

[0024] Parameter placeholder: defines the placeholder of the input box;

[0025] Parameter clearable: defines whether to display the clearable icon;

[0026] Parameter multiple: defines whether multiple selection is supported. It is only effective when inputType is select.

[0027] Parameter selectData: defines the data displayed in the drop-down box, which is only effective when inputType is select;

[0028] Parameter defaultProp: defines the key and value corresponding to the drop-down box, which is only effective when inputType is select;

[0029] Parameter selfPickerOptions: defines the shortcut items on the left side of the time search, which is only effective when inputType is dateTimeRange;

[0030] Parameter alwaysShow: defines whether it is always displayed when collapsed.

[0031] Based on the above technical solution, the event processing function is defined as follows:

[0032] searchFun: defines the event processing function triggered when the search conditions change;

[0033] onReset: Defines the event handling function that is triggered when the reset button is clicked.

[0034] Based on the above technical solution, create a second JSON format file for defining an interface or a hook function;

[0035] The front-end component parses the second JSON format file to extend or customize the quick search custom component.

[0036] On the basis of the above technical solution, based on the definition interface or hook function, the logical part of the component is processed through the call of the script Script, including data definition, calculation properties, methods, and life cycle hooks. The logical part completes the rendering of the form, data verification, and event triggering.

[0037] On the basis of the above technical solution, based on the definition interface or hook function, the style setting template is called to pre-process the style information when the form is generated.

[0038] The method for quickly building a form described in the present invention has the following beneficial effects:

[0039] Based on JSON configuration and implementation of dynamic form search, the fields, types and validation rules of the form are defined through a unified JSON configuration file to achieve dynamic generation and management of the form interaction interface.

[0040] By reducing repeated code writing and lowering maintenance costs, the form interaction interface is made more flexible, which is especially suitable for quickly building a form search interface.

[0041] The method for quickly building a form described in the present invention can improve development efficiency, enhance maintainability, improve user experience, and meet the search needs of different users when building a search interface. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The present invention has the following accompanying drawings:

[0043] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0044] Figure 1 A flowchart of a first embodiment of a method for quickly building a form according to the present invention. DETAILED DESCRIPTION

[0045] The present invention is further described in detail below in conjunction with the accompanying drawings. The detailed description is an explanation made in conjunction with the exemplary embodiments of the present invention, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those skilled in the art that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0046] like Figure 1 As shown, the present invention provides a method for quickly building a form, and the method is used to quickly build a search form, comprising the following steps:

[0047] Create the first JSON format file to define the quick search custom component; for example, define a custom component <tf-quicksearch>;

[0048] The quick search custom component defines a reusable UI module based on the Vue framework, which receives attribute values ​​and triggers custom events, and provides a content distribution interface for external custom content to be passed in; for example, attribute values ​​are passed in through the attribute props; the content distribution interface is defined and provided in the form of slots;

[0049] The front-end component parses the first JSON format file and introduces a quick search custom component;

[0050] Define the form object to be searched in the data definition function of the Vue component, and pass the form object to be searched to the quick search custom component as an attribute parameter value; for example, define the object searchForm in the data function to express the form to be searched, and assign the object searchForm to the attribute advForm as the attribute parameter value;

[0051] Configure the attribute parameter values ​​used to display the searched data;

[0052] Configure the attribute parameter value of the advSearchOptions configuration item for quick search display;

[0053] Define event handling functions;

[0054] Define a custom slot using the declarative HTML tag concent to insert custom content inside the quick search custom component; for example, use the tag <template>Define a custom slot concent;

[0055] Use the quick search custom component in the Vue component template and bind attribute parameter values ​​and event listeners.

[0056] Through the above steps, use it in the Vue project <tf-quicksearch>The component can quickly build a dynamic search form.

[0057] Based on the above technical solution, the configuration for displaying the attribute parameter values ​​of the searched data specifically includes:

[0058] Parameter form: defines the key value of the search form. These key values ​​correspond to the parameter name in advSearchOptions.

[0059] Parameter advSearchOptions: defines the display configuration items of the search form, including field name, label, type, and placeholder.

[0060] Based on the above technical solution, the configuration for quick search display configuration item advSearchOptions attribute parameter values ​​specifically include:

[0061] Parameter label: defines the text displayed for the search item;

[0062] Parameter inputType: defines the type of search item, such as input box, drop-down box, date and time picker, etc.

[0063] Parameter name: defines the key value in the corresponding form, which must be consistent with the key value in the form object;

[0064] Parameter placeholder: defines the placeholder of the input box;

[0065] Parameter clearable: defines whether to display the clearable icon;

[0066] Parameter multiple: defines whether multiple selection is supported (valid only when inputType is select);

[0067] Parameter selectData: defines the data displayed in the drop-down box (valid only when inputType is select);

[0068] Parameter defaultProp: defines the key and value corresponding to the drop-down box (valid only when inputType is select);

[0069] Parameter selfPickerOptions: defines the shortcut items on the left side of the time search (valid only when inputType is dateTimeRange);

[0070] Parameter alwaysShow: defines whether it is always displayed when collapsed.

[0071] Based on the above technical solution, the event processing function is defined as follows:

[0072] searchFun: defines the event processing function triggered when the search conditions change;

[0073] onReset: Defines the event handling function that is triggered when the reset button is clicked.

[0074] Based on the above technical solution, create a second JSON format file for defining an interface or a hook function;

[0075] The front-end component parses the second JSON format file to extend or customize the quick search custom component.

[0076] On the basis of the above technical solution, based on the definition interface or hook function, the logical part of the component is processed through the call of the script Script, including data definition, calculation properties, methods, and life cycle hooks. The logical part completes the rendering of the form, data verification, and event triggering.

[0077] On the basis of the above technical solution, based on the definition interface or hook function, the style setting template is called to pre-process the style information when the form is generated.

[0078] When using it, you can use it in the template of the Vue component through the following code <tf-quicksearch>Component.

[0079]

[0080]

[0081] The above code shows the HTML template part of a Vue component, which contains a <tf-quicksearch>A custom component is used to build a search form and is bound to two event handlers: @QuickSearch and @reset. According to the declaration of the Quick Search custom component, it receives a prop called advForm (in Vue, prop is a way of communication between components, allowing parent components to pass data to child components), which is bound to the searchForm object; at the same time, it listens to the QuickSearch and reset events, and binds the searchFun and onReset methods respectively.

[0082] The component receives external data through advForm="searchForm", where advForm is a prop that receives an object as a value, which contains the configuration and data of the search form.

[0083] Custom events triggered by components are used to communicate with parent components. For example, @QuickSearch="searchFun" and @reset="onReset" correspond to search change events and reset events respectively. When these events are triggered inside the component, the methods defined in the parent component will be called.

[0084] Slots allow parent components to insert custom content into child component templates.

[0085] The searchForm object, whose data structure is used to define two objects in the advSearchOptions array, defines the fields and behaviors in the search form.

[0086] For example:

[0087] First, you can define the name and type fields of the form as needed, and the default value is null;

[0088] Then define the array advSearchOptions. Each object in the array corresponds to the information of a search field. The following is a specific example of an array advSearchOptions:

[0089]

[0090]

[0091] The information in the search field corresponds to the configuration of the search term, including:

[0092] label: the text displayed for the search item;

[0093] inputType: the type of search item, here 'input' means input box;

[0094] placeholder: the placeholder text of the input box;

[0095] name: corresponds to the key value in the form object, used to collect data when submitting the form;

[0096] clearable: Whether to display the clearable X icon. Setting it to true means displaying it.

[0097] The advSearchOptions array shown in this embodiment can be used by the quick search custom component to render a search form containing two input boxes: one for entering a news ID and the other for entering a news title. That is, the first object is configured with an input box for entering a news ID and has a placeholder to prompt the user to enter the news ID. The second object is also configured with an input box for entering a news title and also has a placeholder.

[0098] The following is another specific example of the advSearchOptions array:

[0099]

[0100]

[0101] The advSearchOptions array shown in this embodiment includes two objects: the first object is configured with an input box for inputting a data source name, and has a placeholder to prompt the user to input a data source name. The second object is configured with a drop-down selection box for selecting a data source type, and has a placeholder. The dataConfig attribute is used to configure the data source of the drop-down box, where the request attribute points to a method for obtaining data of the data source type.

[0102] This configuration method allows for dynamic form generation, where the type, label, placeholder, etc. of each field can be defined at runtime through configuration.

[0103] The JSON format is not only used to define the structure and behavior of the form, but also to achieve dynamic generation and extensibility of the form. Through JSON configuration, developers can easily adjust the function and appearance of the form without in-depth modification of the code, which greatly improves development efficiency and system maintainability.

[0104] The contents not described in detail in this specification belong to the prior art known to professional and technical personnel in this field.

[0105] The above description is only a preferred embodiment of the present invention, and the protection scope of the present invention is not limited to the above embodiment. Any equivalent modifications or changes made by those skilled in the art based on the contents disclosed by the present invention should be included in the protection scope recorded in the claims. < / template>

Claims

1. A method for quickly building a form, characterized in that: The steps include: Create the first JSON format file to define the quick search custom component; The quick search custom component defines a reusable UI module based on the Vue framework, which receives attribute values ​​and triggers custom events, and provides a content distribution interface for external custom content to be passed in; The front-end component parses the first JSON format file and introduces a quick search custom component; Define the form object to be searched in the data definition function of the Vue component, and pass the form object to be searched as an attribute parameter value to the quick search custom component; Configure the attribute parameter values ​​used to display the searched data; Configure the attribute parameter value of the advSearchOptions configuration item for quick search display; Define event handling functions; Define a custom slot concent using the declarative HTML tag to insert custom content inside the quick search custom component; Use the quick search custom component in the Vue component template and bind attribute parameter values ​​and event listeners.

2. A form quick building method as claimed in claim 1, characterized in that: The configuration is used to display the attribute parameter values ​​of the searched data, specifically including: Parameter form: defines the key value of the search form. These key values ​​correspond to the parameter name in advSearchOptions. Parameter advSearchOptions: defines the display configuration items of the search form, including field name, label, type, and placeholder.

3. A form quick building method as claimed in claim 1, characterized in that: The configuration is used for quick search and display of the attribute parameter values ​​of the configuration item advSearchOptions, which specifically includes: Parameter label: defines the text displayed for the search item; Parameter inputType: defines the type of search item, such as input box, drop-down box, date and time picker, etc. Parameter name: defines the key value in the corresponding form, which must be consistent with the key value in the form object; Parameter placeholder: defines the placeholder of the input box; Parameter clearable: defines whether to display the clearable icon; Parameter multiple: defines whether multiple selection is supported. It is only effective when inputType is select. Parameter selectData: defines the data displayed in the drop-down box, which is only effective when inputType is select; Parameter defaultProp: defines the key and value corresponding to the drop-down box, which is only effective when inputType is select; Parameter selfPickerOptions: defines the shortcut items on the left side of the time search, which is only effective when inputType is dateTimeRange; Parameter alwaysShow: defines whether it is always displayed when collapsed.

4. A form quick building method as claimed in claim 1, characterized in that: The event processing function definition specifically includes: searchFun: defines the event processing function triggered when the search conditions change; onReset: Defines the event handling function that is triggered when the reset button is clicked.

5. A form quick building method as claimed in claim 1, characterized in that: Create a second JSON format file to define the interface or hook function; The front-end component parses the second JSON format file to extend or customize the quick search custom component.

6. A form quick building method as claimed in claim 5, characterized in that: Based on the definition interface or hook function, the logical part of the component is processed through the call of the script, including data definition, calculated properties, methods, and life cycle hooks. The logical part completes the rendering of the form, the verification of the data, and the triggering of the event.

7. A form quick building method as claimed in claim 5, characterized in that: Based on the defined interface or hook function, the style setting template is called to pre-process the style information when the form is generated.

Images