CN113760251B - Form development method and device based on Vue - Google Patents
Form development method and device based on Vue Download PDFInfo
- Publication number
- CN113760251B CN113760251B CN202011242668.9A CN202011242668A CN113760251B CN 113760251 B CN113760251 B CN 113760251B CN 202011242668 A CN202011242668 A CN 202011242668A CN 113760251 B CN113760251 B CN 113760251B
- Authority
- CN
- China
- Prior art keywords
- configuration data
- component
- data
- item
- form item
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 32
- 238000011161 development Methods 0.000 title claims abstract description 27
- 238000004891 communication Methods 0.000 claims abstract description 38
- 238000009877 rendering Methods 0.000 claims abstract description 17
- 230000002457 bidirectional effect Effects 0.000 claims description 15
- 238000004590 computer program Methods 0.000 claims description 9
- 238000010586 diagram Methods 0.000 description 13
- 230000006870 function Effects 0.000 description 7
- 230000008859 change Effects 0.000 description 6
- 238000012360 testing method Methods 0.000 description 5
- 238000013499 data model Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 239000000835 fiber Substances 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 230000003542 behavioural effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
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/34—Graphical or visual programming
-
- 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/60—Software deployment
- G06F8/65—Updates
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a form development method and device based on Vue, and relates to the technical field of computers. One embodiment of the method comprises the following steps: receiving input of configuration data of each form item in the form container assembly; using the dynamic rendering capability of the built-in components in the Vue, circularly traversing the configuration data of each form item to generate at least one form item; the data field names are assembled into key value pairs for communication to a v-model container attribute data communication interface of the form container component to establish a bi-directional data communication relationship between at least one form item and the form container component via the v-model. The form container component in this embodiment dynamically renders configuration data in the form based on the dynamic component functionality provided by the open source framework vue, building a specific form from the incoming form container props (component properties).
Description
Technical Field
The invention relates to the technical field of computers, in particular to a form development method and device based on Vue.
Background
In the current web front-end development, the common practice is to combine the engineering mode development based on an open source front-end framework and a set of UI component library, and compared with the history development based on a jQuery framework, the development efficiency is improved greatly. Form submission is a relatively common and very important operation in web front-end development, and the code of its form usually requires manual writing by a developer. To achieve the effect of fig. 1, corresponding example code is shown in fig. 2.
In carrying out the present invention, the inventors have found that at least the following problems exist in the prior art: when the form items are more, the corresponding code quantity is also relatively bulky, which is unfavorable for the readability and the later maintenance of the code, and the possible repeatability content is more. Because the codes are written manually, if the sequence of the menu items needs to be adjusted, the code sequence needs to be adjusted manually. Form item codes are all written on pages, and lack of structured data results in poor reusability.
Disclosure of Invention
In view of the above, the embodiment of the invention provides a form development method and device based on Vue, which at least can solve the problems of low form reusability, poor maintainability and low development efficiency caused by writing excessive form codes in the existing form development.
To achieve the above object, according to an aspect of the embodiments of the present invention, there is provided a form development method based on Vue, including:
Receiving input of configuration data of each form item in the form container assembly; the form item configuration data at least comprises a data field name;
using the dynamic rendering capability of the built-in components in the Vue, circularly traversing the configuration data of each form item to generate at least one form item;
The data field names are assembled into key value pairs for communication to a v-model container attribute data communication interface of the form container component to establish a bi-directional data communication relationship between the at least one form item and the form container component via the v-model.
Optionally, the method further comprises: adding a schema attribute interface and a v-model for the form container component according to a component interface specification;
Receiving input of configuration data of each form item through the schema attribute interface;
And establishing a bidirectional data communication relationship between the at least one form item and the form container component through the v-model so as to synchronously update data and views.
Optionally, the v-model includes formData variables;
before receiving input of configuration data of each form item in the form container component, the method further comprises:
Traversing each form item configuration data through the schema attribute interface to obtain the array field names in each form item configuration data, assembling the array field names into a key value pair form, and assigning the key value pair form to the formData variables.
Optionally, the form configuration data further includes a component default value, a component name, a component attribute name, and an attribute value for a form item.
To achieve the above object, according to another aspect of the embodiments of the present invention, there is provided a Vue-based form development apparatus including:
the input module is used for receiving the input of the configuration data of each form item in the form container assembly; the form item configuration data at least comprises a data field name;
The rendering module is used for circularly traversing the configuration data of each form item by using the dynamic rendering capability of the built-in component in the Vue so as to generate at least one form item;
And the establishing module is used for assembling each data field name into a key value pair form and transmitting the key value pair form to a v-model container attribute data communication interface of the form container assembly so as to establish a bidirectional data communication relationship between the at least one form item and the form container assembly through the v-model.
Optionally, the device further comprises an attribute interface adding module for:
adding a schema attribute interface and a v-model for the form container component according to a component interface specification;
Receiving input of configuration data of each form item through the schema attribute interface;
And establishing a bidirectional data communication relationship between the at least one form item and the form container component through the v-model so as to synchronously update data and views.
Optionally, the v-model includes formData variables;
the apparatus further comprises a valuation module for:
Traversing each form item configuration data through the schema attribute interface to obtain the array field names in each form item configuration data, assembling the array field names into a key value pair form, and assigning the key value pair form to the formData variables.
Optionally, the form configuration data further includes a component default value, a component name, a component attribute name, and an attribute value for a form item.
To achieve the above object, according to still another aspect of the embodiments of the present invention, there is provided a form development electronic device based on Vue.
The electronic equipment of the embodiment of the invention comprises: one or more processors; and a storage device for storing one or more programs which, when executed by the one or more processors, cause the one or more processors to implement any of the Vue-based form development methods described above.
To achieve the above object, according to still another aspect of the embodiments of the present invention, there is provided a computer-readable medium having stored thereon a computer program which, when executed by a processor, implements any of the above-described Vue-based form development methods.
According to the solution provided by the present invention, one embodiment of the above invention has the following advantages or beneficial effects: based on the dynamic component function provided by the open source framework Vue, the configuration data in the form items are dynamically rendered, and the specific form items are rendered by the structured data model in the form container component, so that the purposes of reducing form item codes and improving the reusability of the form container and the structured data model are achieved, and the development efficiency is improved.
Further effects of the above-described non-conventional alternatives are described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
FIG. 1 is a specific form effect diagram;
FIG. 2 is example code for a UI development form item of FIG. 1;
FIG. 3 is a schematic flow diagram of a Vue-based form development method according to an embodiment of the invention;
FIG. 4 is a workflow diagram of a form container assembly;
FIG. 5 is a schematic diagram of the main modules of a Vue-based form development device according to an embodiment of the invention;
FIG. 6 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;
Fig. 7 is a schematic diagram of a computer system suitable for use in implementing a mobile device or server of an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention will now be described with reference to the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding, and are to be considered merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
It should be noted that, the form item in the form control of the present invention refers generally to a UI control/component that can be used for man-machine interaction in a form, such as an input box, a drop-down, a multi-selection, and other native web form items, and also includes common UI interaction components such as Cascader cascade selector, slide Slider, switch, and the like.
The form container component of the scheme can be used for rendering based on any kind of open-source UI component library developed based on a Vue technology stack, for example, the open-source element UI component library is adopted, and the type of the control can be any component in the element UI. In actual web front-end development, a UI control library is generally registered on a Vue instance in advance, a component name (i.e. type attribute) in a data model corresponds to the UI control library, and after the Vue is analyzed, a corresponding component can be found, and the corresponding component is triggered by an event, wherein the method can be a native DOM event: input or change can also be realized by self-defining event, DOM elements in the component have event binding, and can monitor the operation of a user to obtain related data, and finally render the data into a page view
Referring to fig. 3, a main flowchart of a form development method based on Vue provided by an embodiment of the present invention is shown, including the following steps:
S301: receiving input of configuration data of each form item in the form container assembly; the form item configuration data at least comprises a data field name;
s302: using the dynamic rendering capability of the built-in components in the Vue, circularly traversing the configuration data of each form item to generate at least one form item;
S303: the data field names are assembled into key-value pairs for communication to a v-model container properties data communication interface of the form container component to establish a bi-directional data communication relationship between at least one form item and the form container component via the v-model.
In the above embodiment, currently, the front end frames of the main stream have Vue, react, and the like, where Vue is a set of progressive frames for constructing a user interface. The use of Vue to process forms is a common operation in the web front-end development field, and the scheme is implemented based on the dynamic component capability of Vue.
According to the component interface specification, two important attribute interfaces are added for the form container component, and the names are respectively named as follows: schema and v-model (container attribute data communication interface); wherein,
1) The schema is used for receiving externally-transmitted form item configuration data, one form container component can contain a plurality of form item configuration data, and the data format of the schema is agreed as follows:
for example:
2) The v-model is used to create a bi-directional data binding on the form, establishing a bi-directional data communication relationship between the form and the form container component. Vue is a mvvm framework, i.e., data is bound bi-directionally, and when the data changes, the view changes, and when the view changes, the data also changes synchronously. Notably, the data bi-directional binding must be for UI controls, and non-UI controls do not involve data bi-directional binding.
The v-model includes formData attributes for assigning formData variables to submit to the backend, where the array field names may be null, by traversing the array field names of the form configuration data in the schema attribute interface and assembling into key-value pair form queryString, before the user inputs the form configuration data. After the follow-up user inputs the form configuration data, the data update is required based on the array field names containing the numerical values, so that the bidirectional data communication relationship between the form and the form container component is realized. Such as:
<RetailForm
v-modell＝"formData"
@getCompData Func＝"getList(1)
:schema＝"RetailForm0"
v-bind＝"{..pageSchemas[0]['attribute']}"
></RetailForm>
the bidirectional data binding automatically selects the correct method to update the form item according to the control type, and is responsible for monitoring the input event of the user to update the data and performing special treatment on some extreme scenes. The input event refers to an input event (input box) at the front end of the web, or a change event (particularly a select element), and is a behavior that can trigger the change of data in a component, and after the data change, the data is reflected on rendering of a page view, so that the data changes.
The Vue form input binds, and the interpretation of the official document is that the v-model internally uses different properties for different input elements and throws out different events:
Text and textarea elements use value property and input events;
The use checked property and change events by a checkbox and a radio;
the select field has value as prop and change as event.
The HTML native input element types do not always meet the requirements, but the Vue component system allows for the creation of fully custom behavioural and reusable input components that can be used with the v-model.
By setting the two attributes of the schema and the v-model, the simple and practical form container assembly can be realized. Wherein the schema attribute is used to receive the form configuration data rendered in the form container component and the v-model attribute is used to establish a two-way data communication relationship between the form item and the form container component.
For steps S301 and S302, user input of configuration data for each form item is received through a schema attribute interface in the form container component. Traversing each schema data (one schema data corresponds to one form configuration data) by using a built-in component of the Vue, and acquiring a type value in each schema data so as to realize the creation of the Vue.component (tagName, options) of the dynamic component based on the type value; wherein Component authorities introduce as dynamic components and asynchronous components, encapsulating code that can be multiplexed, example code such as < Component v-bind: is= "dynComponent" >/Component > checking dynamic and asynchronous components for more detailed information, using < Component/> will allow global and local components to be accessed by name.
At a higher level, the component is a custom element for which the editor of vue. In some cases, the component may also be in the form of a native element, extended by an is property. The component exposed is attribute (with dynamic rendering capabilities) is used to decide which form item can be rendered.
For step S303, an instruction v-model binding formData field is used to obtain configuration data for an item in the form container component to implement data bidirectional binding. The instruction v-bind dynamically binds the component attribute object to realize dynamic expansion of the configuration information of the form item; where the instruction is a syntax of the Vue framework, a special attribute with a v-prefix, and it is the responsibility of acting the associated influence of the value of the expression on the DOM in response when it changes.
The v-model is essentially a grammatical sugar. The following code < input v-model= "test" > is essentially < input: value= "test" @ input= "test= $event, target. Value" >, where @ input is one snoop to the < input > input event and value= "test" is to put the data in the snoop event to the input. It is emphasized that the v-model can not only assign a value to input but also acquire data in input, but also that the acquisition of data is real-time, because the grammar is listening to the input box with @ input. The input data may be obtained by adding < p > { { { test } } } p to div, and then de-modifying the data in the input may find that the data in < p > </p > changes accordingly.
The method provided by the embodiment of the invention develops a form container component to set the attribute of the form item, dynamically generates the form item based on the capability of the Vue dynamic component, automatically realizes the bidirectional data binding of the form item, solves the problems of low efficiency and low code multiplexing rate of the handwritten form item, and is more convenient to maintain and flexible to expand by setting the structured data model.
Referring to fig. 4, which is a whole workflow diagram of a form container component, firstly, input of form configuration data by a user is received, then all form configuration data are circularly traversed to realize dynamic assembly of the form component, and finally, the form configuration data and the Vue component are rendered into an internet page form.
The method provided by the embodiment of the invention eliminates the mode of writing codes one by one through vue components in the prior art, sets the table item configuration data through the structured data, and then constructs the table item through vue, and has at least the following beneficial effects:
1) The structured data of the form items are separated from the view, and the structured data is stored in the schema attribute, so that the reusability is high; compared with the existing mode of handwriting a plurality of form codes, the form container component adopting the scheme can be a line of codes, so that the code quantity is reduced;
2) Because the data of the schema attribute is structured JSON format data, the schema attribute can be written and killed locally when the front end is developed, or pulled from a remote server through an interface, thereby being suitable for dynamic assembly under different scenes and having high flexibility;
3) The form item configuration data is easy to maintain and expandable, and the problems of page display sequence adjustment, related style adjustment and the like can be achieved by modifying the data corresponding to the schema attribute.
Referring to fig. 5, a schematic diagram of main modules of a Vue-based form development apparatus 500 according to an embodiment of the present invention is shown, including:
an input module 501 for receiving input of configuration data for each form item in the form container assembly; the form item configuration data at least comprises a data field name;
a rendering module 502, configured to use dynamic rendering capability of built-in components in the Vue to cycle through configuration data of each form item, so as to generate at least one form item;
An establishing module 503, configured to assemble each data field name into a key value pair form, and transmit the key value pair form to the v-model container attribute data communication interface of the form container component, so as to establish a bidirectional data communication relationship between the at least one form item and the form container component through the v-model.
The implementation device of the present invention further includes an attribute interface adding module 504 (not shown in the figure) for:
adding a schema attribute interface and a v-model for the form container component according to a component interface specification;
Receiving input of configuration data of each form item through the schema attribute interface;
And establishing a bidirectional data communication relationship between the at least one form item and the form container component through the v-model so as to synchronously update data and views.
In an embodiment of the present invention, the v-model comprises formData variables;
the apparatus further comprises an assignment module 505 (not shown) for:
Traversing each form item configuration data through the schema attribute interface to obtain the array field names in each form item configuration data, assembling the array field names into a key value pair form, and assigning the key value pair form to the formData variables.
In the implementation device of the invention, the form configuration data also comprises a component default value, a component name, a component attribute name and an attribute value of a form item.
In addition, the implementation of the apparatus in the embodiments of the present invention has been described in detail in the above method, so that the description is not repeated here.
Fig. 6 illustrates an exemplary system architecture 600 in which embodiments of the present invention may be applied.
As shown in fig. 6, the system architecture 600 may include terminal devices 601, 602, 603, a network 604, and a server 605 (by way of example only). The network 604 is used as a medium to provide communication links between the terminal devices 601, 602, 603 and the server 605. The network 604 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
A user may interact with the server 605 via the network 604 using the terminal devices 601, 602, 603 to receive or send messages, etc. Various communication client applications can be installed on the terminal devices 601, 602, 603.
The terminal devices 601, 602, 603 may be various electronic devices having a display screen and supporting web browsing, and the server 605 may be a server providing various services.
It should be noted that, the method provided by the embodiment of the present invention is generally performed by the server 605, and accordingly, the apparatus is generally disposed in the server 605.
It should be understood that the number of terminal devices, networks and servers in fig. 6 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Referring now to FIG. 7, there is illustrated a schematic diagram of a computer system 700 suitable for use in implementing an embodiment of the present invention. The terminal device shown in fig. 7 is only an example, and should not impose any limitation on the functions and the scope of use of the embodiment of the present invention.
As shown in fig. 7, the computer system 700 includes a Central Processing Unit (CPU) 701, which can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 702 or a program loaded from a storage section 708 into a Random Access Memory (RAM) 703. In the RAM 703, various programs and data required for the operation of the system 700 are also stored. The CPU 701, ROM 702, and RAM 703 are connected to each other through a bus 704. An input/output (I/O) interface 705 is also connected to bus 704.
The following components are connected to the I/O interface 705: an input section 706 including a keyboard, a mouse, and the like; an output portion 707 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, a speaker, and the like; a storage section 708 including a hard disk or the like; and a communication section 709 including a network interface card such as a LAN card, a modem, or the like. The communication section 709 performs communication processing via a network such as the internet. The drive 710 is also connected to the I/O interface 705 as needed. A removable medium 711 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 710 as necessary, so that a computer program read therefrom is mounted into the storage section 708 as necessary.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication portion 709, and/or installed from the removable medium 711. The above-described functions defined in the system of the present invention are performed when the computer program is executed by a Central Processing Unit (CPU) 701.
The computer readable medium shown in the present invention may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules involved in the embodiments of the present invention may be implemented in software or in hardware. The described modules may also be provided in a processor, for example, as: a processor includes an input module, a rendering module, and a setup module. The names of these modules do not constitute a limitation on the module itself in some cases, and for example, a rendering module may also be described as a "form rendering module".
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be present alone without being fitted into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to include:
Receiving input of configuration data of each form item in the form container assembly; the form item configuration data at least comprises a data field name;
using the dynamic rendering capability of the built-in components in the Vue, circularly traversing the configuration data of each form item to generate at least one form item;
The data field names are assembled into key value pairs for communication to a v-model container attribute data communication interface of the form container component to establish a bi-directional data communication relationship between the at least one form item and the form container component via the v-model.
According to the technical scheme of the embodiment of the invention, a mode of writing codes one by one through vue components in the prior art is eliminated, the form item configuration data is set through the structured data, and then the form item is constructed through vue, and besides, the method has at least the following beneficial effects:
1) The structured data of the form items are separated from the view, and the structured data is stored in the schema attribute, so that the reusability is high; compared with the existing mode of handwriting a plurality of form codes, the form container component adopting the scheme can be a line of codes, so that the code quantity is reduced;
2) Because the data of the schema attribute is structured JSON format data, the schema attribute can be written and killed locally when the front end is developed, or pulled from a remote server through an interface, thereby being suitable for dynamic assembly under different scenes and having high flexibility;
3) The form item configuration data is easy to maintain and expandable, and the problems of page display sequence adjustment, related style adjustment and the like can be achieved by modifying the data corresponding to the schema attribute.
The above embodiments do not limit the scope of the present invention. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives can occur depending upon design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of the present invention.
Claims (10)
1. A form development method based on Vue, comprising:
Receiving input of configuration data of each form item in the form container assembly; the form item configuration data at least comprises a data field name;
using the dynamic rendering capability of the built-in components in the Vue, circularly traversing the configuration data of each form item to generate at least one form item;
And assembling each data field name into a key value pair form, transmitting the key value pair form to a v-model container attribute data communication interface of the form container component so as to establish a bidirectional data communication relationship between at least one form item and the form container component through the v-model, wherein the v-model comprises formData attributes, and is used for establishing the bidirectional data communication relationship between the form item and the form container component by traversing the array field names of each form item configuration data in the schema attribute interface and assembling the key value pair form before a user inputs the form item configuration data, assigning the key value pair form to formData variables to submit the key value pair form to a rear end, and after a subsequent user inputs the form item configuration data, carrying out data update based on the array field names containing numerical values.
2. The method as recited in claim 1, further comprising:
adding a schema attribute interface and a v-model for the form container component according to a component interface specification;
Receiving input of configuration data of each form item through the schema attribute interface;
And establishing a bidirectional data communication relationship between the at least one form item and the form container component through the v-model so as to synchronously update data and views.
3. The method of claim 2, wherein the v-model comprises a formData variable;
before receiving input of configuration data of each form item in the form container component, the method further comprises:
Traversing each form item configuration data through the schema attribute interface to obtain the array field names in each form item configuration data, assembling the array field names into a key value pair form, and assigning the key value pair form to the formData variables.
4. A method according to any of claims 1-3, wherein the form configuration data further comprises component default values, component names, component attribute names, and attribute values for a form item.
5. A Vue-based form development device, comprising:
the input module is used for receiving the input of the configuration data of each form item in the form container assembly; the form item configuration data at least comprises a data field name;
The rendering module is used for circularly traversing the configuration data of each form item by using the dynamic rendering capability of the built-in component in the Vue so as to generate at least one form item;
The establishing module is used for assembling each data field name into a key value pair form, transmitting the key value pair form to the v-model container attribute data communication interface of the form container component so as to establish a bidirectional data communication relationship between the at least one form item and the form container component through the v-model, wherein the v-model comprises formData attributes, and before a user inputs form item configuration data, the v-model is used for establishing the bidirectional data communication relationship between the form item and the form container component by traversing array field names of each form item configuration data in the schema attribute interface and assembling the array field names into a key value pair form, assigning the key value pair form to formData variables so as to submit the key value pair form to the back end, and after the form item configuration data is input by a subsequent user, carrying out data update based on the array field names containing numerical values.
6. The apparatus of claim 5, further comprising an attribute interface adding module configured to:
adding a schema attribute interface and a v-model for the form container component according to a component interface specification;
Receiving input of configuration data of each form item through the schema attribute interface;
And establishing a bidirectional data communication relationship between the at least one form item and the form container component through the v-model so as to synchronously update data and views.
7. The apparatus of claim 6, wherein the v-model comprises a formData variable;
the apparatus further comprises a valuation module for:
Traversing each form item configuration data through the schema attribute interface to obtain the array field names in each form item configuration data, assembling the array field names into a key value pair form, and assigning the key value pair form to the formData variables.
8. The apparatus of any of claims 5-7, wherein the form configuration data further comprises a component default value, a component name, a component attribute name, and an attribute value for a form item.
9. An electronic device, comprising:
one or more processors;
Storage means for storing one or more programs,
When executed by the one or more processors, causes the one or more processors to implement the method of any of claims 1-4.
10. A computer readable medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the method according to any of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011242668.9A CN113760251B (en) | 2020-11-09 | 2020-11-09 | Form development method and device based on Vue |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011242668.9A CN113760251B (en) | 2020-11-09 | 2020-11-09 | Form development method and device based on Vue |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113760251A CN113760251A (en) | 2021-12-07 |
| CN113760251B true CN113760251B (en) | 2024-05-17 |
Family
ID=78786027
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011242668.9A Active CN113760251B (en) | 2020-11-09 | 2020-11-09 | Form development method and device based on Vue |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113760251B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114003220B (en) * | 2021-12-30 | 2022-05-03 | 思创数码科技股份有限公司 | Workflow model implementation method, system, readable storage medium and computer equipment |
| CN114327605B (en) * | 2022-03-08 | 2022-08-23 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN114579098B (en) * | 2022-03-18 | 2024-05-28 | 河钢数字技术股份有限公司 | Method for ElementUI form and list linkage control |
| CN114675923A (en) * | 2022-04-13 | 2022-06-28 | 上海微盟企业发展有限公司 | Configuration type operation interface setting method, device and medium |
| CN115344243B (en) * | 2022-10-17 | 2023-02-03 | 中邮消费金融有限公司 | Component packaging method and system of X6 flow chart |
| CN116501719B (en) * | 2023-06-21 | 2023-09-12 | 北京长河数智科技有限责任公司 | Data modeling system and method based on visual view realization |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017156916A1 (en) * | 2016-03-16 | 2017-09-21 | 百度在线网络技术（北京）有限公司 | Data access method and device |
| CN111158818A (en) * | 2019-12-24 | 2020-05-15 | 中国建设银行股份有限公司 | Page rendering method and device |
-
2020
- 2020-11-09 CN CN202011242668.9A patent/CN113760251B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017156916A1 (en) * | 2016-03-16 | 2017-09-21 | 百度在线网络技术（北京）有限公司 | Data access method and device |
| CN111158818A (en) * | 2019-12-24 | 2020-05-15 | 中国建设银行股份有限公司 | Page rendering method and device |
Non-Patent Citations (2)
| Title |
|---|
| A Flexible Method for Multi-Material Decomposition of Dual-Energy CT Images;Paulo R. S. Mendonça;IEEE;20130916;全文 * |
| 基于组件化与服务端渲染的动态内容管理系统;侯俐;姚李岳;邹家矞;;电脑知识与技术;20200325(第09期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113760251A (en) | 2021-12-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113760251B (en) | Form development method and device based on Vue | |
| US11144711B2 (en) | Webpage rendering method, device, electronic apparatus and storage medium | |
| US11188310B2 (en) | Automatically generating an interface description in an interface description language | |
| CN111158818A (en) | Page rendering method and device | |
| US20100005410A1 (en) | Mobile device application framework | |
| CN109873735B (en) | Performance test method and device for H5 page and computer equipment | |
| US10135910B2 (en) | Cross-platform document presentation | |
| CN110780874B (en) | Method and device for generating information | |
| CN107122398B (en) | Data display chart generation method and system | |
| US10148790B2 (en) | Deployment of integrative HTML-based engine from an edge server | |
| CN108958826B (en) | Method and device for dynamically configuring application installation package | |
| CN109815107A (en) | The method and apparatus of automatic test | |
| CN113722647A (en) | Method and device for displaying information | |
| CN113468067B (en) | Application program debugging method and device, electronic equipment and computer readable medium | |
| CN111600920B (en) | JS-based data request proxy method, device, equipment and readable storage medium | |
| CN113778405A (en) | Cross-platform APP construction method, device, system and medium | |
| CN113094138A (en) | Interface display method and device, electronic equipment and storage medium | |
| CN112486482A (en) | Page display method and device | |
| CN110807056A (en) | Excel-based report processing method, Excel-based report processing device, Excel-based report processing medium and electronic equipment | |
| CN115731319A (en) | Graph drawing method, device, equipment and storage medium | |
| CN113342450A (en) | Page processing method and device, electronic equipment and computer readable medium | |
| CN113722115A (en) | Method, device, equipment and computer readable medium for calling interface | |
| CN112306324B (en) | Information processing method, apparatus, device and medium | |
| CN108984189B (en) | Module parsing method and device | |
| CN113779468A (en) | Method and device for processing page interface data |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |