CN116069324A - Dynamic form construction method and device based on Vue - Google Patents

Abstract

The invention discloses a dynamic form construction method and a device based on Vue, wherein the method comprises the following steps: analyzing UI components configured through preset form fields to obtain metadata sets of all the UI components, wherein each metadata set comprises a plurality of metadata, each metadata corresponds to each UI component, analyzing all metadata in the metadata sets to obtain component types corresponding to each metadata, analyzing the component types corresponding to each metadata to obtain first target information corresponding to each metadata, and transmitting the first target information matched with the UI components to the corresponding UI components to trigger the UI components to generate the corresponding form components according to the first target information. By implementing the method and the device, the UI component configured in the form field can be analyzed to obtain various metadata, corresponding target information is obtained according to metadata analysis, and the UI component can generate the corresponding form component according to the corresponding target information, so that the construction efficiency of the form page is improved, and the development cost of the form page is reduced.

Description

A Vue-based dynamic form construction method and device

technical field

The invention relates to the technical field of software design and development, in particular to a Vue-based dynamic form construction method and device.

Background technique

At present, the construction method of form pages in front-end development projects is generally that developers manually configure the required form component codes one by one according to the data required by the form. This construction method makes it impossible to dynamically The form page is constructed in an accurate manner, which leads to the problems of low construction efficiency and high development cost of the form page. At present, the present invention provides a Vue-based dynamic form construction method and device, which makes the form construction method dynamic, so as to solve the problems of low construction efficiency and high development cost of form pages in the prior art.

Contents of the invention

The technical problem to be solved by the present invention is to provide a Vue-based dynamic form construction method and device, which can effectively improve the construction efficiency of form pages and reduce the development cost of form pages.

In order to solve the above technical problems, the first aspect of the present invention discloses a Vue-based dynamic form construction method, the method comprising:

Analyzing the UI components configured through the preset form fields to obtain the metadata collection of all UI components, the metadata collection includes multiple metadata, and each metadata corresponds to each UI component;

Parse all the metadata in the metadata set to obtain the component type corresponding to each piece of metadata;

Analyzing the component type corresponding to each piece of metadata to obtain the first target information corresponding to each piece of metadata;

The first target information matching the UI component is passed to the corresponding UI component, so as to trigger the UI component to generate a corresponding form component according to the first target information.

An optional implementation manner, in the first aspect of the present invention, the UI component is a front-end component developed based on Vue, and the architecture version of the Vue is Vue2.0;

The analyzing the component type corresponding to each piece of metadata to obtain the first target information corresponding to each piece of metadata includes:

Parsing the component type corresponding to each piece of metadata by a data parser that matches the corresponding component type, to obtain the first target information corresponding to each piece of metadata;

Wherein, the first target information includes: first identification information and first parameter information.

As an optional implementation manner, in the first aspect of the present invention, after parsing all the metadata in the metadata set to obtain the component type corresponding to each piece of metadata, the method further includes :

Traversing the metadata set and parsing all the metadata in the metadata set to obtain the public information corresponding to each piece of metadata;

Analyzing the public information corresponding to each of the metadata to obtain the second target information corresponding to each of the metadata;

Wherein, the public information corresponding to each metadata includes:

Each piece of metadata corresponds to at least one public information of the component type, read-only, editable, component value, and field name of each UI component;

The second target information includes: second identification information and second parameter information.

As an optional implementation manner, in the first aspect of the present invention, the first target information matching the UI component is passed to the corresponding UI component, so as to trigger the UI component to Target information generates corresponding form components, including:

The first target information matching the UI component is passed to the corresponding UI component through the component component of Vue, so as to trigger the UI component to generate a corresponding form component according to the first target information.

As an optional implementation, in the first aspect of the present invention, the parsing is performed through UI components configured through form fields to obtain metadata sets of all UI components, including:

Analyze the UI components configured through the preset form fields and component parameters, and get the metadata collection of all UI components;

The analyzing the public information corresponding to each metadata to obtain the second target information corresponding to each metadata includes:

Analyzing the public information of read-only, editable, component value, and field name corresponding to each metadata, to obtain the second target information corresponding to each metadata;

The method also includes:

Pass the second target information matching the UI component to the corresponding UI component through the component component of Vue, so as to trigger the UI component to initialize the component properties of the corresponding form component according to the target information, and the component property is used to initialize the functional properties of the form component.

As an optional implementation manner, in the first aspect of the present invention, before passing the second target information matching the UI component to the corresponding UI component through the Vue component, the Methods also include:

judging whether the first identification information in the first target information corresponding to the UI component matches the second identification information in the second target information;

If it is determined that the first identification information corresponding to the UI component matches the second identification information, trigger the execution of passing the information that matches the UI component to the corresponding UI component through the component component of the Vue. Operation of the second target information;

If it is determined that the first identification information corresponding to the UI component does not match the second identification information, trigger the execution of the parsing of whether the metadata corresponds to read-only, editable, component value, field public information of the name, obtain the operation of the second target information corresponding to each piece of metadata, and update the second target information.

As an optional implementation manner, in the first aspect of the present invention, the method further includes:

detecting whether said public information has changed;

updating the first target information and the second target information according to the changed public information when it is detected that a certain type of information in the public information has changed;

Pass the updated first target information and updated second target information to the corresponding UI component through the component component of Vue, so as to trigger the UI component according to the updated first target information and the updated The following second target information generates a corresponding form component.

The second aspect of the present invention discloses a Vue-based dynamic form construction device, the device comprising:

The parsing module is configured to parse the UI components configured through the form fields to obtain the metadata collection of all UI components, the metadata collection includes a plurality of metadata, and each metadata corresponds to each UI component;

The parsing module is further configured to parse all the metadata in the metadata set to obtain the component type corresponding to each piece of metadata;

The parsing module further obtains the first target information corresponding to each metadata by parsing the component type corresponding to each metadata;

The incoming module is used to pass in the first target information that is parsed by the parsing module and matches the UI component to the corresponding UI component, so as to trigger the UI component to generate a corresponding form according to the first target information components.

As an optional implementation, in the second aspect of the present invention, the UI component is a front-end component developed based on Vue, and the architecture version of Vue is Vue2.0;

The parsing module parses the component type corresponding to each metadata, and obtains the first target information corresponding to each metadata in a specific manner as follows:

Parsing the component type corresponding to each piece of metadata by a data parser that matches the corresponding component type, to obtain the first target information corresponding to each piece of metadata;

Wherein, the first target information includes: first identification information and first parameter information.

As an optional implementation manner, in the second aspect of the present invention, after the parsing module parses all the metadata in the metadata set to obtain the component type corresponding to each piece of metadata, the device Also includes:

Traversing modules, traversing the metadata collection;

The parsing module is further configured to parse all metadata in the metadata set traversed by the traversal module to obtain public information corresponding to each metadata;

The parsing module is further configured to parse the public information corresponding to each metadata, and obtain the second target information corresponding to each metadata;

Wherein, the public information corresponding to each metadata includes:

Each piece of metadata corresponds to at least one public information of the component type, read-only, editable, component value, and field name of each UI component;

The second target information includes: second identification information and second parameter information.

As an optional implementation manner, in the second aspect of the present invention, the input module transmits the first target information matching the UI component to the corresponding UI component, so as to trigger the UI component to The specific way to generate the corresponding form component for the first target information is as follows:

The first target information matching the UI component is passed to the corresponding UI component through the component component of Vue, so as to trigger the UI component to generate a corresponding form component according to the first target information.

As an optional implementation, in the second aspect of the present invention, the parsing module parses the UI components configured through the form fields, and obtains the metadata collection of all UI components in a specific manner as follows:

Analyze the UI components configured through the preset form fields and component parameters, and get the metadata collection of all UI components;

The parsing module parses the public information corresponding to each metadata, and obtains the second target information corresponding to each metadata in a specific manner as follows:

Analyzing the public information of read-only, editable, component value, and field name corresponding to each metadata, to obtain the second target information corresponding to each metadata;

The incoming module is also used to pass the second target information matching the UI component to the corresponding UI component through the component component of Vue, so as to trigger the UI component to initialize the corresponding target information according to the target information. The component attribute of the form component, the component attribute is used to initialize the function attribute of the form component.

As an optional implementation, in the second aspect of the present invention, before the incoming module passes the second target information matching the UI component to the corresponding UI component through the Vue component , the device also includes:

A judging module, configured to judge whether the first identification information in the first target information corresponding to the UI component matches the second identification information in the second target information; if it is determined that the first identification information corresponding to the UI component When the identification information matches the second identification information, trigger the incoming module to perform the operation of passing the second target information matching the UI component to the corresponding UI component through the component component of the Vue; if When it is determined that the first identification information corresponding to the UI component does not match the second identification information, the parsing module is triggered to perform the parsing of whether the metadata corresponds to read-only, editable, component The public information of value and field name, the operation of obtaining the second target information corresponding to each metadata;

A first updating module, configured to update the second target information analyzed by the parsing module.

As an optional implementation, in the second aspect of the present invention, the

The third aspect of the present invention discloses another Vue-based dynamic form construction device, which includes:

a memory storing executable program code;

a processor coupled to the memory;

The processor invokes the executable program code stored in the memory to execute some or all of the steps in the Vue-based dynamic form construction method disclosed in the first aspect of the present invention.

The fourth aspect of the present invention discloses a computer storage medium, the computer storage medium stores computer instructions, and when the computer instructions are called, it is used to execute part of the Vue-based dynamic form construction method disclosed in the first aspect of the present invention. or all steps.

Compared with the prior art, the embodiments of the present invention have the following beneficial effects: a Vue-based dynamic form construction method and device are provided, and the Vue-based dynamic form construction method includes: parsing the UI configured through preset form fields Components, get the metadata collection of all UI components, the metadata collection includes multiple metadata, each metadata corresponds to each UI component, parse all the metadata in the metadata collection, and get the component corresponding to each metadata Type; analyze the component type corresponding to each metadata, obtain the first target information corresponding to each metadata, and pass the first target information matching the UI component to the corresponding UI component, so as to trigger the UI component according to the first target The information generates the corresponding form component. It can be seen that the implementation of the present invention can analyze the UI components of the preset form field configuration to obtain a plurality of metadata, which can be parsed into parameters of various UI components, which is conducive to improving the construction efficiency and flexibility of form pages; The data obtains the component type corresponding to each metadata, and analyzes the corresponding component type to obtain the first target information corresponding to each metadata, which is conducive to improving the construction efficiency and accuracy of the form page; finally, the corresponding first target information is passed to the UI component. The target information enables UI components to generate corresponding form components, making the way of generating form components with different functions dynamic, which is conducive to improving the construction efficiency of form pages and reducing the development cost of form pages.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings that need to be used in the description of the embodiments will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present invention. For those skilled in the art, other drawings can also be obtained based on these drawings without creative effort.

Fig. 1 is a schematic flow diagram of a Vue-based dynamic form construction method disclosed in an embodiment of the present invention;

Fig. 2 is a schematic flow diagram of another Vue-based dynamic form construction method disclosed in the embodiment of the present invention;

Fig. 3 is a schematic structural diagram of a Vue-based dynamic form construction device disclosed in an embodiment of the present invention;

Fig. 4 is a schematic structural diagram of another Vue-based dynamic form construction device disclosed in the embodiment of the present invention;

Fig. 5 is a schematic structural diagram of another Vue-based dynamic form construction device disclosed in an embodiment of the present invention.

Detailed ways

In order to enable those skilled in the art to better understand the solutions of the present invention, the following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only It is a part of embodiments of the present invention, but not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by persons of ordinary skill in the art without creative efforts fall within the protection scope of the present invention.

The terms "first", "second" and the like in the description and claims of the present invention and the above drawings are used to distinguish different objects rather than to describe a specific order. Furthermore, the terms "include" and "have", as well as any variations thereof, are intended to cover a non-exclusive inclusion. For example, a process, method, device, product or equipment comprising a series of steps or units is not limited to the listed steps or units, but optionally also includes steps or units not listed, or optionally further includes For other steps or units inherent in these processes, methods, products or devices.

Reference herein to an "embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the present invention. The occurrences of this phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is understood explicitly and implicitly by those skilled in the art that the embodiments described herein can be combined with other embodiments.

The present invention discloses a Vue-based dynamic form construction method and device. The Vue-based dynamic form construction method includes: analyzing UI components configured through preset form fields to obtain metadata sets of all UI components, metadata sets Including multiple metadata, each metadata corresponds to each UI component, parses all metadata in the metadata collection, and obtains the component type corresponding to each metadata; parses the component type corresponding to each metadata, and obtains each First target information corresponding to one piece of metadata, and the first target information matching the UI component is passed to the corresponding UI component, so as to trigger the UI component to generate a corresponding form component according to the first target information. The implementation of the present invention can analyze the UI components of the preset form field configuration to obtain a plurality of metadata, which can be parsed into parameters of various UI components, which is conducive to improving the construction efficiency and flexibility of the form page; analyzing all the metadata to obtain The component type corresponding to each metadata, parse the corresponding component type to get the first target information corresponding to each metadata, which is conducive to improving the construction efficiency and accuracy of the form page; finally pass the corresponding first target information to the UI component The UI components can be used to generate corresponding form components, and the way of generating form components with different functions can be made dynamic, so as to improve the construction efficiency of form pages and reduce the development cost of form pages. Each will be described in detail below.

Embodiment one

Please refer to FIG. 1 . FIG. 1 is a schematic flowchart of a Vue-based dynamic form construction method disclosed in an embodiment of the present invention. Wherein, the Vue-based dynamic form construction method described in FIG. 1 can be applied to a Vue-based dynamic form construction device, and the device can be applied to an application program of a local terminal device or a mobile terminal device. Among them, the local terminal equipment can include PC terminals, local servers, etc., and the mobile terminal equipment can include smart phones (Android mobile phones, iOS mobile phones), tablet computers, handheld computers, personal digital assistants (Personal Digital Assistant, PDA), intelligent navigators and At least one of Mobile Internet Devices (Mobile Internet Devices, MID), etc., which is not limited in this embodiment of the present invention. As shown in Figure 1, the Vue-based dynamic form construction method may include the following operations:

101. Analyzing UI components configured through preset form fields to obtain metadata sets of all UI components.

In the embodiment of the present invention, optionally, parsing the UI components configured through form fields may include:

Parses UI components configured through preset form fields and component parameters.

In the embodiment of the present invention, optionally, component parameters can be used to render UI components, preset form fields can include at least one of field name, field type, field content, etc., and the metadata set can include multiple metadata , each metadata corresponds to each UI component, and each metadata can be used to integrate and generate corresponding form components. Further, the field type may include at least one of text field, number field, date field, time field, currency field, image field, etc., the UI component may be a front-end component developed based on Vue, and the architecture version of Vue may include Vue1. 0, one of Vue2.0, Vue3.0. In this way, multiple different types of metadata will be obtained by parsing the configured form according to the preset form fields. The richer and more detailed the metadata obtained by parsing, the more conducive to improving the construction efficiency of the form page and reducing the development cost of the form page.

102. Parse all the metadata in the metadata set, and obtain the component type corresponding to each piece of metadata.

In this embodiment of the present invention, optionally, the component type corresponding to each piece of metadata may include one of a check box component, an input box component, a drop-down box component, a text box component, a filter box component, and the like. In this way, the richer and more detailed the corresponding component types obtained through metadata analysis, the more conducive to improving the construction efficiency of the form page and improving the construction flexibility of the form page.

103. Analyze the component type corresponding to each metadata, and obtain the first target information corresponding to each metadata.

In the embodiment of the present invention, parsing the component type corresponding to each metadata to obtain the first target information corresponding to each metadata may include:

The component type corresponding to each piece of metadata is parsed by a data parser that matches the corresponding component type, and the first target information corresponding to each piece of metadata is obtained.

Wherein, the first target information may include first identification information and first parameter information. Further, the first identification information may include at least one of the identification name and identification number of the component type corresponding to the metadata, and each piece of first identification information corresponds to unique metadata. In this way, according to the specific corresponding component type parser, the component type corresponding to each metadata is parsed to obtain the corresponding first target information, and each metadata corresponds to a unique metadata, which improves the construction accuracy of the form page, thereby facilitating Improve the construction efficiency of form pages and reduce the development cost of form pages.

104. Introduce first target information matching the UI component to the corresponding UI component, so as to trigger the UI component to generate a corresponding form component according to the first target information.

In the embodiment of the present invention, optionally, the first target information matching the UI component is passed to the corresponding UI component, so as to trigger the UI component to generate a corresponding form component according to the first target information, which may include:

Pass the first target information matching the UI component to the corresponding UI component through the component component of Vue, so as to trigger the UI component to generate the corresponding form component according to the first target information.

Among them, the component component of Vue is a built-in component in Vue. The component component is used to dynamically render components with the is component attribute, and the is component attribute is used to dynamically switch components (for example: Vue code is expressed as: <component:is='component Variable name'>...<component>, where the component variable name can be the first target information). In this way, the first target information that matches the UI component is passed to the corresponding UI component through the component component of Vue, so that the UI component generates the corresponding form component according to the first target information, which is conducive to improving the construction accuracy of the form page, thereby effectively It is beneficial to improve the construction efficiency of the form page and reduce the development cost of the form page.

In an optional embodiment, after parsing all the metadata in the metadata collection and obtaining the component type corresponding to each piece of metadata, the method further includes the following operations:

Traverse the metadata collection and parse all the metadata in the metadata collection to obtain the public information corresponding to each metadata.

The public information corresponding to each metadata is analyzed to obtain the second target information corresponding to each metadata.

Among them, the public information corresponding to each metadata may include:

Each piece of metadata corresponds to at least one public information of each UI component, such as component type, read-only, editable, component value, component attribute, field name, field type, and the like.

The second target information may include second identification information and second parameter information. Further, the second identification information may include at least one of an identification name, an identification number, and the like that the metadata corresponds to public information, and each piece of second identification information corresponds to unique metadata.

In this optional embodiment, it is further optional to analyze the public information corresponding to each metadata to obtain the second target information corresponding to each metadata, specifically including:

The public information corresponding to each metadata is read-only, editable, component value, field name, and the second target information corresponding to each metadata is obtained.

It can be seen that this optional embodiment can analyze the metadata to obtain the corresponding public information, and analyze and obtain various second target information corresponding to the metadata according to the corresponding various public information. In this way, the second target information obtained through analysis is richer and more relevant The more detailed, the more conducive to improving the construction efficiency of the form page and reducing the development cost of the form page.

In another optional embodiment, after step 104 is performed, the method may also perform the following operations:

Pass the second target information that matches the UI component to the corresponding UI component through the component component of Vue to trigger the UI component to initialize the component properties of the corresponding form component according to the target information, which is used to initialize the functional properties of the form component .

It can be seen that this optional embodiment can also parse the metadata to obtain the corresponding public information, and analyze the corresponding public information to obtain the second target information corresponding to the metadata, and the second target information can also enable the UI component to initialize the functional attributes, Improving the automation of form component generation is further beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.

In yet another optional embodiment, before passing the second target information matching the UI component to the corresponding UI component through the Vue component component, the method further includes the following operations:

It is judged whether the first identification information in the first target information corresponding to the UI component matches the second identification information in the second target information.

If it is determined that the first identification information corresponding to the UI component matches the second identification information, the operation of passing the second target information matching the UI component to the corresponding UI component through the component component of Vue is triggered.

If it is determined that the first identification information corresponding to the UI component does not match the second identification information, trigger the execution of parsing the public information corresponding to each metadata, whether it is read-only, whether it can be edited, component value, and field name, and obtain Each piece of metadata corresponds to an operation on the second target information, and updates the second target information.

It can be seen that this optional embodiment can also judge in real time whether the corresponding second identification information obtained by parsing the public information matches the first identification information, and when it is judged that the two do not match, the parsed public information is redistributed. Analyzing, obtaining new second target information, and updating the wrong second target information in real time, can quickly detect and repair wrong construction information, and further help to improve the efficiency and accuracy of form page construction.

Embodiment two

Please refer to FIG. 2 . FIG. 2 is a schematic flowchart of a Vue-based dynamic form construction method disclosed in an embodiment of the present invention. Wherein, the Vue-based dynamic form construction method described in FIG. 1 can be applied to a Vue-based dynamic form construction device, and the device can be applied to an application program of a local terminal device or a mobile terminal device. Among them, the local terminal equipment can include PC terminals, local servers, etc., and the mobile terminal equipment can include smart phones (Android mobile phones, iOS mobile phones), tablet computers, handheld computers, personal digital assistants (Personal Digital Assistant, PDA), intelligent navigators and At least one of Mobile Internet Devices (Mobile Internet Devices, MID), etc., which is not limited in this embodiment of the present invention. As shown in Figure 2, the Vue-based dynamic form construction method may include the following operations:

201. Analyze the UI components configured through preset form fields to obtain metadata sets of all UI components. The metadata sets include multiple metadata, and each metadata corresponds to each UI component.

202. Parse all the metadata in the metadata set to obtain a component type corresponding to each piece of metadata.

203. Analyze the component type corresponding to each metadata, and obtain the first target information corresponding to each metadata.

204. Traverse the metadata set and parse all metadata in the metadata set to obtain public information corresponding to each piece of metadata.

205. Analyze the public information corresponding to each metadata, and obtain the second target information corresponding to each metadata.

206. Detect whether the public information has changed, and when it is detected that a certain type of information in the public information has changed, perform step 207.

In this embodiment of the present invention, optionally, when it is detected that certain information in the public information has not changed, step 206 is re-executed.

207. Update the first target information and the second target information according to the changed public information, and pass the updated first target information and the updated second target information to the corresponding UI component through the component component of Vue to trigger The UI component generates a corresponding form component according to the updated first target information and the updated second target information.

In this embodiment of the present invention, it should be noted that, for related descriptions of steps 201-205, please refer to the detailed description of steps 101-103 and optional embodiments in Embodiment 1, and details are not repeated in this embodiment of the present invention.

It can be seen that the embodiment of the present invention can also detect in real time whether the public information obtained by metadata analysis has changed, and when it is detected that a certain type of information in the public information has changed, analyze the first target information and the second target information in real time Update, which can timely monitor the change of the target information required to build the form component and update the change in real time, which improves the real-time performance of building the form, further helps to improve the construction efficiency of the form page and reduce the development cost of the form page .

It can be seen that the implementation of the method described in Figure 2 can analyze the UI components of the preset form field configuration, and obtain multiple metadata, which can be parsed into parameters of various UI components, which is conducive to improving the efficiency and flexibility of form page construction ; Parse all metadata to get the component type corresponding to each metadata, and parse the corresponding component type to get the first target information corresponding to each metadata, which is conducive to improving the construction efficiency and accuracy of the form page; finally, pass it to the UI component The corresponding first target information enables UI components to generate corresponding form components, making the way of generating form components with different functions dynamic, which is conducive to improving the construction efficiency of form pages and reducing the development cost of form pages; it can also real-time Detect whether the public information obtained by metadata analysis has changed. When a certain type of information in the public information is detected to change, it will analyze and update the first target information and the second target information in real time, and can timely monitor the information generated by the form component. The change of the required target information is updated in real time, which improves the real-time performance of building the form, further helps to improve the construction efficiency of the form page and reduce the development cost of the form page.

Embodiment Three

Please refer to FIG. 3 . FIG. 3 is a schematic structural diagram of a Vue-based dynamic form construction device disclosed in an embodiment of the present invention. Wherein, the Vue-based dynamic form construction device described in FIG. 3 can execute the above-mentioned Vue-based dynamic form construction method, and the device can be applied to an application program of a local terminal device or a mobile terminal device. Among them, the local terminal equipment can include PC terminals, local servers, etc., and the mobile terminal equipment can include smart phones (Android mobile phones, iOS mobile phones), tablet computers, handheld computers, personal digital assistants (Personal Digital Assistant, PDA), intelligent navigators and At least one of Mobile Internet Devices (Mobile Internet Devices, MID), etc., which is not limited in this embodiment of the present invention. As shown in Figure 3, the device may include: a parsing module 301, an incoming module 302, wherein:

The parsing module 301 is configured to parse the UI components configured through the form fields to obtain the metadata collection of all UI components, the metadata collection includes multiple metadata, and each metadata corresponds to each UI component;

The parsing module 301 is further configured to parse all the metadata in the metadata set to obtain the component type corresponding to each piece of metadata.

The parsing module 301 further obtains the first target information corresponding to each metadata by parsing the component type corresponding to each metadata.

The importing module 302 is configured to transfer to the corresponding UI component the first target information that is parsed by the parsing module 301 and matches the UI component, so as to trigger the UI component to generate a corresponding form component according to the first target information.

It can be seen that implementing the Vue-based dynamic form construction device described in Figure 3 obtains multiple metadata by parsing the UI components configured by the preset form fields, and the metadata can be parsed into parameters of various UI components, which is conducive to improving the form page. construction efficiency and flexibility; parse all metadata to get the component type corresponding to each metadata, and parse the corresponding component type to get the first target information corresponding to each metadata, which is conducive to improving the construction efficiency and accuracy of form pages; Finally, the corresponding first target information is passed to the UI component to enable the UI component to generate the corresponding form component, making the generation of form components with different functions dynamic, which is conducive to improving the construction efficiency of the form page and reducing the development of the form page cost.

In an optional embodiment, the UI component is a front-end component developed based on Vue, and the architecture version of Vue is Vue2.0.

And, as shown in FIG. 4 , the parsing module 301 parses the component type corresponding to each metadata, and obtains the first target information corresponding to each metadata in a specific manner as follows:

The component type corresponding to each piece of metadata is parsed by a data parser that matches the corresponding component type, and the first target information corresponding to each piece of metadata is obtained.

Wherein, the first target information includes: first identification information and first parameter information.

It can be seen that implementing the Vue-based dynamic form construction device described in Figure 4 can obtain multiple different types of metadata corresponding to the configured form analysis of the preset form fields. The richer and more detailed the metadata obtained by the analysis, the more conducive to improving The construction efficiency of the form page and the reduction of the development cost of the form page; the component type corresponding to each metadata is parsed by a specific corresponding component type parser to obtain the corresponding first target information, and each metadata corresponds to a unique piece of metadata, The construction accuracy of the form page is improved, thereby helping to improve the construction efficiency of the form page and reduce the development cost of the form page.

In another optional embodiment, after the parsing module 301 parses all metadata in the metadata set to obtain the component type corresponding to each metadata, the device further includes:

The traversal module 303 traverses the metadata collection.

The parsing module 301 is further configured to parse and traverse all metadata in the metadata set obtained by traversing the traversal module 303 to obtain public information corresponding to each metadata.

The analyzing module 301 is further configured to analyze the public information corresponding to each metadata, and obtain the second target information corresponding to each metadata.

Among them, the public information corresponding to each metadata includes:

Each piece of metadata corresponds to at least one public information among the component type, read-only, editable, component value, and field name of each UI component.

The second target information includes: second identification information and second parameter information.

It can be seen that implementing the Vue-based dynamic form construction device described in Figure 4 parses the metadata to obtain the corresponding public information, and analyzes the corresponding multiple public information to obtain various second target information corresponding to the metadata. 2. The richer and more detailed the target information is, the more beneficial it is to improve the construction efficiency of the form page and reduce the development cost of the form page.

In yet another optional embodiment, as shown in FIG. 4 , the input module 302 transmits the first target information matching the UI component to the corresponding UI component, so as to trigger the UI component to generate the corresponding target information according to the first target information. The specific method of the form component is:

Pass the first target information matching the UI component to the corresponding UI component through the component component of Vue, so as to trigger the UI component to generate the corresponding form component according to the first target information.

It can be seen that implementing the Vue-based dynamic form construction device described in Figure 4 passes the first target information matching the UI component to the corresponding UI component through the Vue component component, so that the UI component generates the corresponding form according to the first target information Components are beneficial to improve the accuracy of form page construction, thereby improving the construction efficiency of form pages and reducing the development cost of form pages.

In yet another optional embodiment, as shown in FIG. 4 , the parsing module 301 parses the UI components configured through the form fields, and obtains the metadata collection of all UI components in a specific manner as follows:

Analyze the UI components configured through the preset form fields and component parameters, and get the metadata collection of all UI components;

The parsing module 301 parses the public information corresponding to each metadata, and the specific way to obtain the second target information corresponding to each metadata is as follows:

The public information corresponding to each metadata is read-only, editable, component value, field name, and the second target information corresponding to each metadata is obtained.

The incoming module 302 is also used to pass in the second target information matching the UI component to the corresponding UI component through the component component of Vue, so as to trigger the UI component to initialize the component attribute of the corresponding form component according to the target information. The component attribute uses Functional properties for initializing form components.

It can be seen that the implementation of the Vue-based dynamic form construction device described in Figure 4 obtains the corresponding public information by parsing the metadata, and obtains the second target information corresponding to the metadata according to the parsing of the corresponding public information. The second target information can also make the The UI component initializes functional attributes and improves the automation of form component generation, which is further beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.

In yet another optional embodiment, as shown in FIG. 4, before the input module 302 transmits the second target information matching the UI component to the corresponding UI component through the component component of Vue, the device further includes:

A judging module 304, configured to judge whether the first identification information in the first target information corresponding to the UI component parsed by the parsing module 301 matches the second identification information in the second target information; When the first identification information matches the second identification information, trigger the input module 302 to execute the operation of passing the second target information matching the UI component to the corresponding UI component through the component component of Vue; if it is determined that the corresponding UI component When the first identification information does not match the second identification information, the parsing module 301 is triggered to analyze the public information corresponding to each metadata, whether it is read-only, whether it can be edited, component values, and field names, and obtains the public information corresponding to each metadata. Operation of the second target information.

The first update module 305 is configured to update the second target information analyzed by the analysis module 301 .

It can be seen that implementing the Vue-based dynamic form construction device described in FIG. 4 judges in real time whether the corresponding second identification information obtained by parsing the public information matches the first identification information. When it is judged that the two do not match, the parsing Re-analyze the public information to obtain new second target information, and update the wrong second target information in real time, which can quickly detect and repair wrong construction information, and further help to improve the construction efficiency of form pages and Accuracy.

In another optional embodiment, the device also includes:

The detection module 306 is configured to detect whether the public information parsed by the parsing module 301 has changed.

The second update module 307 is configured to update the first target information and the second target information according to the changed public information when the detection module 306 detects that a certain type of information in the public information changes.

The incoming module 302 is also used to pass in the updated first target information and the updated second target information of the second update module to the corresponding UI component through the component component of Vue, so as to trigger the UI component according to the updated first target information. A form component corresponding to the target information and the updated second target information is generated.

It can be seen that the implementation of the Vue-based dynamic form construction device described in Figure 4 detects whether the public information obtained by metadata analysis has changed in real time, and when a change in a certain type of public information is detected, the first target Information and the second target information are analyzed and updated, which can timely monitor the change of the target information required to build the form component and update the change in real time, which improves the real-time performance of building the form and further helps to improve the construction of the form page Efficiency and reduced development costs for form pages.

Embodiment Four

Please refer to FIG. 5 . FIG. 5 is a schematic structural diagram of a Vue-based dynamic form construction device disclosed in an embodiment of the present invention. Wherein, the Vue-based dynamic form construction device described in FIG. 5 can execute the above-mentioned Vue-based dynamic form construction method, and the device can be applied to an application program of a local terminal device or a mobile terminal device. Among them, the local terminal equipment can include PC terminals, local servers, etc., and the mobile terminal equipment can include smart phones (Android mobile phones, iOS mobile phones), tablet computers, handheld computers, personal digital assistants (Personal Digital Assistant, PDA), intelligent navigators and At least one of Mobile Internet Devices (Mobile Internet Devices, MID), etc., which is not limited in this embodiment of the present invention. As shown in Figure 5, the device may include:

A memory 501 storing executable program codes;

a processor 502 coupled to the memory 501;

Further, an input interface 503 and an output interface 504 coupled with the processor 502 may also be included;

Wherein, the processor 502 invokes the executable program code stored in the memory 501 to execute some or all of the steps in the Vue-based dynamic form construction method disclosed in Embodiment 1 or Embodiment 2 of the present invention.

Embodiment five

The embodiment of the present invention discloses a computer-storage medium, the computer-storage medium stores computer instructions, and when the computer instructions are called, it is used to execute the Vue-based dynamic form disclosed in the first or second embodiment of the present invention Build some or all of the steps in the method.

The device embodiments described above are only illustrative, and the modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical modules, that is, they may be located in one place , or can also be distributed to multiple network modules. Part or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. It can be understood and implemented by those skilled in the art without any creative effort.

Through the specific description of the above embodiments, those skilled in the art can clearly understand that each implementation manner can be implemented by means of software plus a necessary general-purpose hardware platform, and of course also by hardware. Based on this understanding, the above-mentioned technical solution essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, and the storage medium includes a read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), programmable read-only memory (Programmable Read-only Memory, PROM), erasable programmable read-only memory (Erasable Programmable Read Only Memory, EPROM) , One-time Programmable Read-Only Memory (OTPROM), Electronically Erasable Programmable Read-Only Memory (EEPROM), Compact Disc Read-Only Memory , CD-ROM) or other optical disk storage, magnetic disk storage, magnetic tape storage, or any other computer-readable medium that can be used to carry or store data.

Finally, it should be noted that: the Vue-based dynamic form construction method and device disclosed in the embodiment of the present invention are only the preferred embodiments of the present invention, and are only used to illustrate the technical solutions of the present invention, not to Restrictions; Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that it is still possible to modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements for some of the technical features However, these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the various embodiments of the present invention.

Claims (10)

1. A dynamic form construction method based on Vue, the method comprising:

analyzing UI components configured through a preset form field to obtain metadata sets of all the UI components, wherein each metadata set comprises a plurality of metadata, and each metadata corresponds to each UI component;

analyzing all metadata in the metadata set to obtain the component type corresponding to each metadata;

analyzing the component type corresponding to each piece of metadata to obtain first target information corresponding to each piece of metadata;

And transmitting first target information matched with the UI component to the corresponding UI component so as to trigger the UI component to generate a corresponding form component according to the first target information.

2. The dynamic form construction method based on the Vue according to claim 1, wherein the UI component is a front-end component developed based on the Vue, and the architecture version of the Vue is Vue2.0;

the analyzing the component type corresponding to each piece of metadata to obtain the first target information corresponding to each piece of metadata includes:

analyzing the component type corresponding to each piece of metadata through a data analyzer matched with the corresponding component type to obtain first target information corresponding to each piece of metadata;

wherein the first target information includes: first identification information and first parameter information.

3. The dynamic Vue-based form construction method of claim 2, wherein,

after parsing all metadata in the metadata set to obtain the component type corresponding to each metadata, the method further includes:

traversing the metadata set and analyzing all metadata in the metadata set to obtain public information corresponding to each piece of metadata;

Analyzing the public information corresponding to each piece of metadata to obtain second target information corresponding to each piece of metadata;

wherein, the public information corresponding to each metadata includes:

each metadata corresponds to at least one common information of the component type, whether read-only, editable, component value and field name of each UI component;

the second target information includes: second identification information and second parameter information.

4. The dynamic form construction method based on Vue according to claim 3, wherein the step of transmitting first target information matched with the UI component to the corresponding UI component to trigger the UI component to generate the corresponding form component according to the first target information includes:

and transmitting first target information matched with the UI component to the corresponding UI component through the component of the Vue so as to trigger the UI component to generate a corresponding form component according to the first target information.

5. The dynamic form construction method based on Vue according to claim 3 or 4, wherein the parsing the UI components configured by the form field to obtain metadata sets of all the UI components includes:

Analyzing UI components configured through preset form fields and component parameters to obtain metadata sets of all the UI components;

the analyzing the public information corresponding to each piece of metadata to obtain second target information corresponding to each piece of metadata includes:

analyzing the public information of whether the metadata is read-only or editable, the component value and the field name, and obtaining second target information corresponding to each metadata;

the method further comprises the steps of:

and transmitting second target information matched with the UI component to the corresponding UI component through the component of the Vue so as to trigger the UI component to initialize component attributes of the corresponding form component according to the target information, wherein the component attributes are used for initializing functional attributes of the form component.

6. The method for dynamically constructing a form based on Vue according to claim 5, wherein before the second target information matched with the UI component is transferred to the corresponding UI component through the component of Vue, the method further comprises:

judging whether first identification information in first target information corresponding to the UI component is matched with second identification information in second target information or not;

If the first identification information corresponding to the UI component is judged to be matched with the second identification information, triggering and executing the operation of transmitting second target information matched with the UI component to the corresponding UI component through the component of the Vue;

and if the first identification information corresponding to the UI component is not matched with the second identification information, triggering and executing the analysis of the public information of whether read-only, editable, component values and field names corresponding to each piece of metadata to obtain the operation of the second target information corresponding to each piece of metadata, and updating the second target information.

7. The Vue-based dynamic form construction method of claim 3 or 6, further comprising:

detecting whether the public information is changed;

when detecting that one of the public information is changed, updating the first target information and the second target information according to the changed public information;

and transmitting the updated first target information and the updated second target information to the corresponding UI component through the component of the Vue so as to trigger the UI component to generate a corresponding form component according to the updated first target information and the updated second target information.

8. A Vue-based dynamic form building apparatus, the apparatus comprising:

the analysis module is used for analyzing the UI components configured through the form field to obtain metadata sets of all the UI components, wherein the metadata sets comprise a plurality of metadata, and each metadata corresponds to each UI component;

the analysis module is further configured to analyze all metadata in the metadata set to obtain a component type corresponding to each metadata;

the analysis module is used for analyzing the component type corresponding to each piece of metadata to obtain first target information corresponding to each piece of metadata;

and the input module is used for inputting the first target information which is obtained by analysis by the analysis module and is matched with the UI component into the corresponding UI component so as to trigger the UI component to generate a corresponding form component according to the first target information.

9. A Vue-based dynamic form building apparatus, the apparatus comprising:

a memory storing executable program code;

a processor coupled to the memory;

the processor invokes the executable program code stored in the memory to perform the Vue-based dynamic form construction method of any one of claims 1-7.

10. A computer storage medium storing computer instructions which when invoked are used to perform the Vue-based dynamic form construction method of any one of claims 1-7.

Images