CN116069324A - Dynamic form construction method and device based on Vue - Google Patents
Dynamic form construction method and device based on Vue Download PDFInfo
- Publication number
- CN116069324A CN116069324A CN202211708734.6A CN202211708734A CN116069324A CN 116069324 A CN116069324 A CN 116069324A CN 202211708734 A CN202211708734 A CN 202211708734A CN 116069324 A CN116069324 A CN 116069324A
- Authority
- CN
- China
- Prior art keywords
- component
- metadata
- target information
- vue
- analyzing
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/75—Structural analysis for program understanding
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
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
Technical Field
The invention relates to the technical field of software design and development, in particular to a dynamic form construction method and device based on Vue.
Background
The construction mode of the form page in the front-end development project at present is generally that a developer manually configures the required form component codes one by one according to the data required by the form in a manual configuration mode, and the construction mode enables the form page not to be dynamically constructed in the development process of the front-end project, so that the problems of low construction efficiency and high development cost of the form page are caused. The invention provides a dynamic form construction method and a dynamic form construction device based on Vue, which dynamically construct forms so as to solve the problems of low construction efficiency and high development cost of form pages in the prior art.
Disclosure of Invention
The invention aims to solve the technical problem of providing a dynamic form construction method and a dynamic form construction device based on Vue, which can effectively improve the construction efficiency of form pages and reduce the development cost of the form pages.
In order to solve the technical problem, the first aspect of the present invention discloses a dynamic form construction method based on Vue, which comprises the following steps:
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.
In an alternative implementation manner, in the first aspect of the present invention, the UI component is a front-end component developed based on Vue, and the architectural version of 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.
As an optional implementation manner, in the first aspect of the present invention, after the 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.
In a first aspect of the present invention, the step of transmitting first target information matched with the UI component to the corresponding UI component to trigger the UI component to generate a 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.
In an optional implementation manner, in the first aspect of the present invention, the parsing the UI components configured by the form field obtains metadata sets of all UI components, including:
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.
As an optional implementation manner, in the first aspect of the present invention, before the delivering, by the component of the Vue, the second target information matched with the UI component to the corresponding UI component, the method further includes:
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.
As an alternative embodiment, in the first aspect of the present invention, the method further includes:
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.
The second aspect of the invention discloses a dynamic form construction device based on Vue, which comprises:
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.
As an alternative implementation manner, in the second aspect of the present invention, the UI component is a front-end component developed based on Vue, and the architectural version of Vue is Vue2.0;
the analyzing module analyzes the component type corresponding to each piece of metadata, and the specific mode for obtaining the first target information corresponding to each piece of metadata is as follows:
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.
In a second aspect of the present invention, after the parsing module parses all metadata in the metadata set to obtain the component type corresponding to each metadata, the apparatus further includes:
the traversing module traverses the metadata set;
the analysis module is further used for analyzing all metadata in the metadata set obtained by the traversal module to obtain public information corresponding to each piece of metadata;
the analysis module is further configured to analyze 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.
As an optional implementation manner, in the second aspect of the present invention, the specific manner that the input module inputs, to a corresponding UI component, first target information that is matched with the UI component, so as to trigger the UI component to generate a corresponding form component according to the first target information is:
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.
In a second aspect of the present invention, as an optional implementation manner, the parsing module parses the UI components configured by the form field to obtain metadata sets of all the UI components in the following specific manners:
analyzing UI components configured through preset form fields and component parameters to obtain metadata sets of all the UI components;
the specific way of analyzing the public information corresponding to each piece of metadata by the analysis module to obtain the second target information corresponding to each piece of metadata is as follows:
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 input module is further configured to input 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, where the component attributes are used to initialize functional attributes of the form component.
As an optional implementation manner, in the second aspect of the present invention, before the incoming module passes the second target information matched with the UI component to the corresponding UI component through the component of the Vue, the apparatus further includes:
the judging module is used for judging whether the first identification information in the first target information corresponding to the UI component is matched with the second identification information in the 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 an incoming module to execute the operation of introducing second target information matched with the UI component to the corresponding UI component through the component of the Vue; if the first identification information corresponding to the UI component is not matched with the second identification information, triggering the analysis module to execute the operation of analyzing the public information of whether read-only, editable, component value and field name corresponding to each piece of metadata to obtain second target information corresponding to each piece of metadata;
The first updating module is used for updating the second target information obtained by analysis of the analysis module.
As an alternative embodiment, in the second aspect of the present invention, the
The third aspect of the present invention discloses another dynamic form construction device based on Vue, which comprises:
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 some or all of the steps in the Vue-based dynamic form construction method disclosed in the first aspect of the present invention.
A fourth aspect of the present invention discloses a computer storage medium storing computer instructions which, when invoked, are adapted to perform part or all of the steps of the Vue-based dynamic form construction method disclosed in the first aspect of the present invention.
Compared with the prior art, the embodiment of the invention has the following beneficial effects: the utility model provides a dynamic form construction method and device based on Vue, wherein the dynamic form construction method based on Vue comprises the following steps: 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, each metadata corresponds to each UI component, and analyzing all the metadata in the metadata sets to obtain component types corresponding to each metadata; analyzing the component type corresponding to each metadata to obtain first target information corresponding to each metadata, and transmitting the first target information matched with the UI component to the corresponding UI component to trigger the UI component to generate a corresponding form component according to the first target information. Therefore, the UI components configured in the preset form field can be analyzed to obtain a plurality of metadata, and the metadata can be analyzed into parameters of a plurality of UI components, so that the construction efficiency and flexibility of the form page can be improved; analyzing all metadata to obtain the component type corresponding to each metadata, and analyzing the corresponding component type to obtain first target information corresponding to each metadata, thereby being beneficial to improving the construction efficiency and accuracy of the form page; and finally, corresponding first target information is transmitted to the UI component so that the UI component generates a corresponding form component, and the form component generating mode with different functions is dynamically changed, so that the construction efficiency of the form page is improved, and the development cost of the form page is reduced.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for the description of the embodiments will be briefly described below, and it is apparent that the drawings in the following description are only some embodiments of the present invention, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic flow diagram of a dynamic form construction method based on Vue according to an embodiment of the present invention;
FIG. 2 is a flow chart of another dynamic form construction method based on Vue according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of a dynamic form construction device based on Vue according to an embodiment of the present invention;
FIG. 4 is a schematic diagram of another dynamic form construction device based on Vue according to an embodiment of the present invention;
FIG. 5 is a schematic diagram of a dynamic form construction device based on Vue according to an embodiment of the present invention.
Detailed Description
In order that those skilled in the art will better understand the present invention, a technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in which it is apparent that the described embodiments are only some embodiments of the present invention, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
The terms first, second and the like in the description and in the claims and in the above-described figures are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order. Furthermore, the terms "comprise" and "have," as well as any variations thereof, are intended to cover a non-exclusive inclusion. For example, a process, method, apparatus, article, or device that comprises a list of steps or elements is not limited to the list of steps or elements but may, in the alternative, include other steps or elements not expressly listed or inherent to such process, method, article, or device.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the invention. The appearances of such phrases 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. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.
The invention discloses a dynamic form construction method and a device based on Vue, wherein the dynamic form construction method based on Vue comprises the following steps: 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, each metadata corresponds to each UI component, and analyzing all the metadata in the metadata sets to obtain component types corresponding to each metadata; analyzing the component type corresponding to each metadata to obtain first target information corresponding to each metadata, and transmitting the first target information matched with the UI component to the corresponding UI component to trigger the UI component to generate a corresponding form component according to the first target information. By implementing the method, the UI components configured in the preset form field can be analyzed to obtain a plurality of metadata, and the metadata can be analyzed into parameters of a plurality of UI components, so that the construction efficiency and the flexibility of the form page can be improved; analyzing all metadata to obtain the component type corresponding to each metadata, and analyzing the corresponding component type to obtain first target information corresponding to each metadata, thereby being beneficial to improving the construction efficiency and accuracy of the form page; and finally, corresponding first target information is transmitted to the UI component so that the UI component generates a corresponding form component, and the form component generating mode with different functions is dynamically changed, so that the construction efficiency of the form page is improved, and the development cost of the form page is reduced. The following will describe in detail.
Example 1
Referring to fig. 1, fig. 1 is a schematic flow chart of a dynamic form construction method based on Vue according to an embodiment of the present invention. The dynamic form construction method based on the Vue described in fig. 1 can be applied to a dynamic form construction device based on the Vue, and the device can be applied to an application program of a local terminal device or a mobile terminal device. The local terminal device may include a PC terminal, a local server, and the like, and the mobile terminal device may include at least one of a smart phone (Android mobile phone, iOS mobile phone), a tablet computer, a palm computer, a personal digital assistant (Personal Digital Assistant, PDA), an intelligent navigator, and a mobile internet device (Mobile Internet Devices, MID), which is not limited in the embodiments of the present invention. As shown in fig. 1, the dynamic form construction method based on Vue may include the following operations:
101. and analyzing the UI components configured through the preset form field to obtain metadata sets of all the UI components.
In the embodiment of the present invention, optionally, parsing the UI component configured by the form field may include:
and analyzing the UI component configured by the preset form fields and the component parameters.
In the embodiment of the present invention, optionally, the component parameters may be used to render the UI component, the preset form field may include at least one of a field name, a field type, a field content, and the like, and the metadata set may include a plurality of metadata, where each metadata corresponds to each UI component, and each metadata may be used to integrally generate a corresponding form component. Further, the field type may include at least one of a text field, a number field, a date field, a time field, a currency field, an image field, etc., the UI component may be a front-end component developed based on Vue, and the architectural version of Vue may include one of Vue1.0, vue2.0, vue 3.0. In this way, the form configured according to the preset form field is analyzed to obtain a plurality of corresponding metadata of different types, and the more abundant and detailed the metadata obtained by analysis is, the more beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.
102. And analyzing all metadata in the metadata set to obtain the component type corresponding to each metadata.
In the embodiment of the present invention, optionally, the component type corresponding to each metadata may include one of a check box component, an input box component, a drop-down box component, a text box component, a screening box component, and the like. The richer and more detailed corresponding component types are obtained through metadata analysis, and the method is more beneficial to improving the construction efficiency of the form page and improving the construction flexibility of the form page.
103. And analyzing the component type corresponding to each piece of metadata to obtain first target information corresponding to each piece of metadata.
In the embodiment of the present invention, analyzing the component type corresponding to each metadata to obtain the first target information corresponding to each metadata may include:
and 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.
The first target information may include first identification information and first parameter information. Further, the first identification information may include at least one of an identification name, an identification number, etc. of the component type to which the metadata corresponds, each of the first identification information corresponding to unique metadata. In this way, the corresponding first target information is obtained by analyzing the component type corresponding to each metadata according to the specific corresponding component type analyzer, and each metadata corresponds to a unique metadata, so that the construction accuracy of the form page is improved, and the construction efficiency of the form page is improved, and the development cost of the form page is reduced.
104. 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.
In the embodiment of the present invention, optionally, 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 may include:
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.
The component of the Vue is a built-in component in the Vue, and the component is used for dynamically rendering the component in cooperation with an is component attribute, and the is component attribute is used for dynamically switching the component (for example, a Vue code is shown as < component: is= 'component variable name' > … < component >, where the component variable name may be the first target information). In this way, the component of the Vue transmits the first target information matched with the UI component to the corresponding UI component, so that the UI component generates the corresponding form component according to the first target information, which is beneficial to improving the construction accuracy of the form page, thereby being beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.
In an alternative embodiment, after parsing all metadata in the metadata set to obtain a component type corresponding to each metadata, the method further includes the following operations:
Traversing the metadata set and analyzing all metadata in the metadata set to obtain the public information corresponding to each metadata.
And 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 may include:
each metadata corresponds to at least one common information of a component type, whether read-only, editable, component value, component attribute, field name, field type, etc. of each UI component.
The second target information may include second identification information, second parameter information. Further, the second identification information may include at least one of an identification name, an identification number, and the like of the metadata corresponding to the common information, each of the second identification information corresponding to unique metadata.
In this optional embodiment, further optionally, analyzing the public information corresponding to each piece of metadata to obtain the second target information corresponding to each piece of metadata specifically includes:
and analyzing 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.
Therefore, the optional embodiment can analyze the metadata to obtain the corresponding public information, and analyze the metadata to obtain various second target information corresponding to the metadata according to various corresponding public information, so that the more abundant and detailed the second target information obtained by analysis is, the more beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.
In another alternative embodiment, after performing step 104, the method may further perform the following:
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 the component attribute of the corresponding form component according to the target information, wherein the component attribute is used for initializing the functional attribute of the form component.
It can be seen that the optional embodiment can also analyze the metadata to obtain corresponding public information, and analyze according to the corresponding public information to obtain second target information corresponding to the metadata, where the second target information can also enable the UI component to initialize functional attributes, thereby improving automation of form component generation, further being beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.
In yet another alternative embodiment, before the second target information matched with the UI component is transferred to the corresponding UI component through the component of the Vue, the method further includes the following operations:
and judging whether the first identification information in the first target information corresponding to the UI component is matched with the second identification information in the second target information.
And 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 if the first identification information corresponding to the UI component is judged to be matched with the second identification information.
And if the first identification information corresponding to the UI component is not matched with the second identification information, triggering and executing the operation of analyzing the public information of whether the metadata is read only or not, whether the metadata is editable or not, the component value and the field name corresponding to each metadata, obtaining second target information corresponding to each metadata, and updating the second target information.
It can be seen that, this optional embodiment can also judge in real time whether the public information is parsed to obtain the corresponding second identification information and the first identification information match, and when judging that the two are not matched, re-parse the parsed public information to obtain new second target information, and update the wrong second target information in real time, so that the wrong construction information can be quickly detected and repaired, and further improvement of the construction efficiency and accuracy of the form page is facilitated.
Example two
Referring to fig. 2, fig. 2 is a schematic flow chart of a dynamic form construction method based on Vue according to an embodiment of the present invention. The dynamic form construction method based on the Vue described in fig. 1 can be applied to a dynamic form construction device based on the Vue, and the device can be applied to an application program of a local terminal device or a mobile terminal device. The local terminal device may include a PC terminal, a local server, and the like, and the mobile terminal device may include at least one of a smart phone (Android mobile phone, iOS mobile phone), a tablet computer, a palm computer, a personal digital assistant (Personal Digital Assistant, PDA), an intelligent navigator, and a mobile internet device (Mobile Internet Devices, MID), which is not limited in the embodiments of the present invention. As shown in fig. 2, the dynamic form construction method based on Vue may include the following operations:
201. 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.
202. And analyzing all metadata in the metadata set to obtain the component type corresponding to each metadata.
203. And analyzing the component type corresponding to each piece of metadata to obtain first target information corresponding to each piece of metadata.
204. Traversing the metadata set and analyzing all metadata in the metadata set to obtain the public information corresponding to each metadata.
205. And analyzing the public information corresponding to each piece of metadata to obtain second target information corresponding to each piece of metadata.
206. Whether the common information is changed is detected, and when it is detected that a certain information in the common information is changed, step 207 is performed.
In the embodiment of the present invention, optionally, when it is detected that any one of the public information is unchanged, step 206 is performed again.
207. 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 the corresponding form component according to the updated first target information and the updated second target information.
In the embodiment of the present invention, for the description of steps 201 to 205, please refer to the detailed description of steps 101 to 103 and the optional embodiment in the first embodiment, and the description of the embodiment of the present invention is omitted.
Therefore, the embodiment of the invention can also detect whether the public information obtained by analyzing the metadata changes in real time, and when detecting that one piece of information in the public information changes, the first target information and the second target information are analyzed and updated in real time, so that the change of the target information required by constructing the form assembly can be monitored in time and updated in real time, the instantaneity of constructing the form is improved, and the construction efficiency of the form page is further improved, and the development cost of the form page is reduced.
Therefore, the method described in fig. 2 can be implemented to analyze the UI components configured by the preset form field to obtain a plurality of metadata, and the metadata can be analyzed into parameters of a plurality of UI components, which is beneficial to improving the construction efficiency and flexibility of the form page; analyzing all metadata to obtain the component type corresponding to each metadata, and analyzing the corresponding component type to obtain first target information corresponding to each metadata, thereby being beneficial to improving the construction efficiency and accuracy of the form page; finally, corresponding first target information is transmitted to the UI component so that the UI component generates a corresponding form component, and the form component with different functions is dynamically generated, so that the construction efficiency of the form page is improved, and the development cost of the form page is reduced; the method and the system can also detect whether the public information obtained by analyzing the metadata changes in real time, analyze and update the first target information and the second target information in real time when detecting that one piece of the public information changes, monitor the change of the target information required by constructing the form component in time and update the change in real time, improve the instantaneity of constructing the form, and further are beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.
Example III
Referring to fig. 3, fig. 3 is a schematic structural diagram of a dynamic form construction device based on Vue according to an embodiment of the present invention. The dynamic form construction device based on the Vue described in fig. 3 may perform the dynamic form construction method based on the Vue, and the device may be applied to an application program of a local terminal device or a mobile terminal device. The local terminal device may include a PC terminal, a local server, and the like, and the mobile terminal device may include at least one of a smart phone (Android mobile phone, iOS mobile phone), a tablet computer, a palm computer, a personal digital assistant (Personal Digital Assistant, PDA), an intelligent navigator, and a mobile internet device (Mobile Internet Devices, MID), which is not limited in the embodiments of the present invention. As shown in fig. 3, the apparatus may include: parsing module 301, incoming module 302, wherein:
the parsing module 301 is configured to parse UI components configured by the form field to obtain metadata sets of all UI components, where the metadata sets include a plurality of metadata, and each metadata corresponds to each UI component;
the parsing module 301 is further configured to parse all metadata in the metadata set to obtain a component type corresponding to each metadata.
The parsing module 301 further parses the component type corresponding to each piece of metadata to obtain first target information corresponding to each piece of metadata.
The input module 302 is configured to input, to the corresponding UI component, the first target information obtained by parsing by the parsing module 301 and matched with the UI component, so as to trigger the UI component to generate a corresponding form component according to the first target information.
As can be seen, implementing the dynamic form construction device based on Vue described in fig. 3 obtains a plurality of metadata by analyzing UI components configured by preset form fields, where the metadata can be analyzed into parameters of a plurality of UI components, which is beneficial to improving the construction efficiency and flexibility of form pages; analyzing all metadata to obtain the component type corresponding to each metadata, and analyzing the corresponding component type to obtain first target information corresponding to each metadata, thereby being beneficial to improving the construction efficiency and accuracy of the form page; and finally, corresponding first target information is transmitted to the UI component so that the UI component generates a corresponding form component, and the form component generating mode with different functions is dynamically changed, so that the construction efficiency of the form page is improved, and the development cost of the form page is reduced.
In an alternative embodiment, the UI component is a front-end component developed based on Vue, the architectural version of which is Vue2.0.
As shown in fig. 4, the specific manner of resolving the component type corresponding to each metadata by the resolving module 301 to obtain the first target information corresponding to each metadata is as follows:
and 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.
Therefore, the dynamic form construction device based on Vue described in FIG. 4 is implemented to obtain a plurality of corresponding metadata of different types through form analysis configured by the preset form field, and the richer and more detailed the metadata obtained through analysis is, the more beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page is; and analyzing the component type corresponding to each metadata by a specific corresponding component type analyzer to obtain corresponding first target information, wherein each metadata corresponds to a unique metadata, so that the construction accuracy of the form page is improved, and the construction efficiency of the form page is improved and the development cost of the form page is reduced.
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 apparatus further includes:
the traversal module 303 traverses the set of metadata.
The parsing module 301 is further configured to parse all metadata in the metadata set obtained by the traversing module 303 to obtain common information corresponding to each metadata.
The parsing module 301 is further configured to parse the common information corresponding to each piece of metadata, so as to obtain second target information corresponding to each piece of metadata.
Wherein, public information corresponding to each metadata includes:
each metadata corresponds to at least one common information of a component type, whether read-only, editable, component value, field name of each UI component.
The second target information includes: second identification information and second parameter information.
Therefore, the dynamic form construction device based on Vue described in FIG. 4 is implemented to analyze the metadata to obtain the corresponding public information, and analyze according to the corresponding various public information to obtain various second target information corresponding to the metadata, so that the second target information obtained by analysis is richer and more detailed, which is more beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.
In yet another alternative embodiment, as shown in fig. 4, the specific manner in which the incoming module 302 enters the first target information matched with the UI component into the corresponding UI component to trigger the UI component to generate the corresponding form component according to the first target information is:
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.
Therefore, the dynamic form construction device based on the Vue described in FIG. 4 is implemented to transfer the first target information matched with the UI component to the corresponding UI component through the component of the Vue, so that the UI component generates the corresponding form component according to the first target information, which is beneficial to improving the construction accuracy of the form page, thereby being beneficial to improving the construction efficiency of the form page and reducing the development cost of the form page.
In yet another alternative embodiment, as shown in fig. 4, the specific manner in which the parsing module 301 parses the UI components configured by the form field to obtain the metadata sets of all the UI components is:
analyzing UI components configured through preset form fields and component parameters to obtain metadata sets of all the UI components;
The specific manner of analyzing the public information corresponding to each piece of metadata by the analyzing module 301 to obtain the second target information corresponding to each piece of metadata is as follows:
and analyzing 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 input module 302 is further configured to input, through the component of the Vue, second target information that is matched with the UI component to the corresponding UI component, so as to trigger the UI component to initialize component attributes of the corresponding form component according to the target information, where the component attributes are used to initialize functional attributes of the form component.
It can be seen that implementing the dynamic form construction device based on Vue described in fig. 4 obtains the corresponding public information by analyzing the metadata, and obtains the second target information corresponding to the metadata according to the corresponding public information, where the second target information also can enable the UI component to initialize the functional attribute, and improve the automation of the 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 alternative embodiment, as shown in fig. 4, before the incoming module 302 enters the second target information matched with the UI component into the corresponding UI component through the component of the Vue, the apparatus further includes:
The judging module 304 is configured to judge whether first identification information in the first target information corresponding to the UI component obtained by the analyzing module 301 is matched with second identification information in the second target information, and if it is judged that the first identification information corresponding to the UI component is matched with the second identification information, trigger the incoming module 302 to perform an operation of introducing the second target information matched with the UI component to the corresponding UI component through the component of the Vue; if the first identification information corresponding to the UI component is not matched with the second identification information, the trigger analysis module 301 performs an operation of analyzing public information of whether read-only, editable, component value and field name corresponding to each metadata, so as to obtain second target information corresponding to each metadata.
The first updating module 305 is configured to update the second target information obtained by the parsing module 301.
It can be seen that implementing the dynamic form construction device based on Vue described in fig. 4, by judging whether the corresponding second identification information is matched with the first identification information by analyzing the public information in real time, when judging that the two are not matched, re-analyzing the analyzed public information to obtain new second target information, and updating the wrong second target information in real time, the wrong construction information can be detected and repaired rapidly, and further improvement of the construction efficiency and accuracy of the form page is facilitated.
In yet another alternative embodiment, the apparatus further comprises:
the detection module 306 is configured to detect whether the public information obtained by the parsing module 301 changes.
And a second updating module 307, configured to update the first target information and the second target information according to the changed common information when the detecting module 306 detects that one of the common information is changed.
The input module 302 is further configured to input, through the component of the Vue, the updated first target information and the updated second target information of the second update module to the corresponding UI component, 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.
Therefore, the dynamic form construction device based on Vue described in fig. 4 is implemented to detect whether the public information obtained by analyzing the metadata changes in real time, and analyze and update the first target information and the second target information in real time when detecting that one kind of information in the public information changes, so that the change of the target information required by constructing the form component can be monitored in time and updated in real time, the real-time performance of the form construction is improved, and the improvement of the form page construction efficiency and the reduction of the form page development cost are further facilitated.
Example IV
Referring to fig. 5, fig. 5 is a schematic structural diagram of a dynamic form construction device based on Vue according to an embodiment of the present invention. The dynamic form construction device based on the Vue described in fig. 5 may perform the dynamic form construction method based on the Vue, and the device may be applied to an application program of a local terminal device or a mobile terminal device. The local terminal device may include a PC terminal, a local server, and the like, and the mobile terminal device may include at least one of a smart phone (Android mobile phone, iOS mobile phone), a tablet computer, a palm computer, a personal digital assistant (Personal Digital Assistant, PDA), an intelligent navigator, and a mobile internet device (Mobile Internet Devices, MID), which is not limited in the embodiments of the present invention. As shown in fig. 5, the apparatus may include:
a memory 501 in which executable program codes are stored;
a processor 502 coupled to the memory 501;
further, an input interface 503 and an output interface 504 coupled to the processor 502 may also be included;
the processor 502 invokes executable program codes stored in the memory 501 to execute some or all of the steps in the Vue-based dynamic form construction method disclosed in the first or second embodiment of the present invention.
Example five
The embodiment of the invention discloses a computer storage medium which stores computer instructions for executing part or all of the steps in the dynamic form construction method based on Vue disclosed in the first or second embodiment of the invention when the computer instructions are called.
The apparatus embodiments described above are merely illustrative, in which the modules illustrated as separate components may or may not be physically separate, and the components illustrated as modules may or may not be physical, i.e., may be located in one place, or may be distributed over multiple network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art will understand and implement the present invention without undue burden.
From the above detailed description of the embodiments, it will be apparent to those skilled in the art that the embodiments may be implemented by means of software plus necessary general hardware platforms, or of course by means of hardware. Based on such understanding, the foregoing technical solutions may be embodied essentially or in part in the form of a software product that may be stored in a computer-readable storage medium including 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), electrically erasable programmable Read-Only Memory (EEPROM), compact disc Read-Only Memory (Compact Disc Read-Only Memory, CD-ROM) or other optical disc Memory, magnetic disc Memory, tape Memory, or any other medium that can be used for computer-readable carrying or storing data.
Finally, it should be noted that: the embodiment of the invention discloses a dynamic form construction method and device based on Vue, which are disclosed by the embodiment of the invention only for illustrating the technical scheme of the invention, but not limiting the technical scheme; although the invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art will understand that; the technical scheme recorded in the various embodiments can be modified or part of technical features in the technical scheme can be replaced equivalently; such modifications and substitutions do not depart from the spirit and scope of the corresponding technical solutions.
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.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211708734.6A CN116069324A (en) | 2022-12-29 | 2022-12-29 | Dynamic form construction method and device based on Vue |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211708734.6A CN116069324A (en) | 2022-12-29 | 2022-12-29 | Dynamic form construction method and device based on Vue |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116069324A true CN116069324A (en) | 2023-05-05 |
Family
ID=86181438
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211708734.6A Pending CN116069324A (en) | 2022-12-29 | 2022-12-29 | Dynamic form construction method and device based on Vue |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116069324A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117519889A (en) * | 2024-01-05 | 2024-02-06 | 北京中盈安信技术服务股份有限公司 | Form component switching method and device, storage medium and electronic equipment |
-
2022
- 2022-12-29 CN CN202211708734.6A patent/CN116069324A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117519889A (en) * | 2024-01-05 | 2024-02-06 | 北京中盈安信技术服务股份有限公司 | Form component switching method and device, storage medium and electronic equipment |
| CN117519889B (en) * | 2024-01-05 | 2024-03-29 | 北京中盈安信技术服务股份有限公司 | Form component switching method and device, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110198247B (en) | Interface test method and system | |
| CN110427331B (en) | Method for automatically generating performance test script based on interface test tool | |
| CN110442511B (en) | Visual embedded point testing method and device | |
| CN111552633A (en) | Interface abnormal call testing method and device, computer equipment and storage medium | |
| CN109739494B (en) | Tree-LSTM-based API (application program interface) use code generation type recommendation method | |
| CN111813701B (en) | HTTP-based interface testing method and device, computer equipment and storage medium | |
| CN104750663B (en) | The recognition methods of text messy code and device in the page | |
| CN111949522A (en) | User interface automatic testing method and device | |
| CN110769002A (en) | LabVIEW-based message analysis method, system, electronic device and medium | |
| CN116069324A (en) | Dynamic form construction method and device based on Vue | |
| CN111580821B (en) | Script binding method and device, electronic equipment and computer readable storage medium | |
| CN111209210A (en) | Method and device for generating test case, electronic equipment and storage medium | |
| CN110727576B (en) | Web page testing method, device, equipment and storage medium | |
| CN110489124B (en) | Source code execution method, source code execution device, storage medium and computer equipment | |
| CN115309661A (en) | Application testing method and device, electronic equipment and readable storage medium | |
| CN111125605B (en) | Page element acquisition method and device | |
| CN110764783B (en) | Method, device, equipment and storage medium for generating information acquisition tool | |
| CN111151008B (en) | Verification method and device for game operation data, configuration background and medium | |
| CN113946516A (en) | Code coverage rate determining method and device and storage medium | |
| CN114065197A (en) | Call sequence generation method and device, electronic equipment, storage medium and product | |
| CN113742192A (en) | Log rule quality analysis method, system, electronic device and storage medium | |
| CN110738024A (en) | Method for converting WebAPP into API service interface | |
| CN113312880B (en) | Text form conversion method and device and electronic equipment | |
| CN114201149B (en) | Operation flow generation method, device and system and computer readable storage medium | |
| CN116680171B (en) | Test method, device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |