CN113760251A - Form development method and device based on Vue - Google Patents
Form development method and device based on Vue Download PDFInfo
- Publication number
- CN113760251A CN113760251A CN202011242668.9A CN202011242668A CN113760251A CN 113760251 A CN113760251 A CN 113760251A CN 202011242668 A CN202011242668 A CN 202011242668A CN 113760251 A CN113760251 A CN 113760251A
- Authority
- CN
- China
- Prior art keywords
- component
- data
- configuration data
- item
- attribute
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 33
- 238000011161 development Methods 0.000 title claims abstract description 29
- 238000004891 communication Methods 0.000 claims abstract description 32
- 238000009877 rendering Methods 0.000 claims abstract description 16
- 230000002457 bidirectional effect Effects 0.000 claims abstract description 13
- 238000004590 computer program Methods 0.000 claims description 10
- 230000006870 function Effects 0.000 abstract description 8
- 238000010586 diagram Methods 0.000 description 11
- 230000027455 binding Effects 0.000 description 9
- 238000009739 binding Methods 0.000 description 9
- 230000008859 change Effects 0.000 description 8
- 238000013499 data model Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012360 testing method Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 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
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006872 improvement Effects 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
- 239000000126 substance Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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/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: receiving input of configuration data of each form item in the form container assembly; circularly traversing each form configuration data using the dynamic rendering capability of the built-in component in Vue to generate at least one form; and assembling the names of the data fields 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 at least one form item and the form container assembly through a v-model. In this embodiment, the form container component dynamically renders the configuration data in the form item based on the dynamic component functions provided by the open source framework vue, and constructs a specific form item from the tips (component properties) of the incoming form container.
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 development efficiency is improved greatly compared with the development efficiency based on a jQuery framework historically based on the combination of an open source front-end framework and a set of UI component library and the combination of an engineering mode development. Form submission is a common and very important operation in web front-end development, and the code of the form item usually needs to be written by a developer manually. If the effect of fig. 1 is to be achieved, the corresponding example code is shown in fig. 2.
In the process of implementing the invention, the inventor finds that the prior art has at least the following problems: when the number of the form items is large, the corresponding code amount is too large, the readability and the later maintenance of the code are not facilitated, and the possibility of repeated content is large. Because the codes are written manually, if the order of the form items needs to be adjusted, the code order needs to be adjusted manually. The form codes are all written on the page, and lack structured data, resulting in poor reusability.
Disclosure of Invention
In view of this, embodiments of the present invention provide a form development method and apparatus based on Vue, which can at least solve the problems of low reusability of form items in existing form development, and poor maintainability and low development efficiency caused by writing too many form item codes.
To achieve the above object, according to an aspect of the embodiments of the present invention, there is provided an Vue-based form development method, including:
receiving input of configuration data of each form item in the form container assembly; wherein, the configuration data of the form item at least comprises the name of the data field;
circularly traversing each form configuration data using the dynamic rendering capability of the built-in component in Vue to generate at least one form;
and assembling the names of the data fields 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 component so as to establish a bidirectional data communication relation between the at least one form item and the form container component through the v-model.
Optionally, the method further includes: adding a schema attribute interface and a v-model to the form container component according to a component interface specification;
receiving input of configuration data of each form item through the schema attribute interface;
establishing, by the v-model, a bi-directional data communication relationship between the at least one form item and the form container component for simultaneous updating of data and views.
Optionally, the v-model includes a formData variable;
before the receiving the input of the configuration data of each form item in the form container component, the method further comprises the following steps:
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 values 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 of a form item.
To achieve the above object, according to another aspect of the embodiments of the present invention, there is provided an Vue-based form development apparatus, including:
the input module is used for receiving the input of configuration data of each form item in the form container assembly; wherein, the configuration data of the form item at least comprises the name of the data field;
a rendering module for circularly traversing each form configuration data using the dynamic rendering capability of the built-in components in Vue to generate at least one form;
and the establishing module is used for assembling the names of the data fields 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 relation between the at least one form item and the form container assembly through the v-model.
Optionally, the system further includes an attribute interface adding module, configured to:
adding a schema attribute interface and a v-model to the form container component according to a component interface specification;
receiving input of configuration data of each form item through the schema attribute interface;
establishing, by the v-model, a bi-directional data communication relationship between the at least one form item and the form container component for simultaneous updating of data and views.
Optionally, the v-model includes a formData variable;
the apparatus also includes an assignment module to:
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 values 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 of a form item.
To achieve the above object, according to still another aspect of the embodiments of the present invention, an Vue-based form development electronic device is provided.
The electronic device of the embodiment of the invention comprises: one or more processors; 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 a further aspect of the embodiments of the present invention, there is provided a computer readable medium having a computer program stored thereon, where the computer program is executed by a processor to implement any one of the Vue-based form development methods described above.
According to the scheme provided by the invention, one embodiment of the 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 item is dynamically rendered, and the specific form item is rendered according to the structural data model transmitted into the form container component, so that the purposes of reducing form item codes and improving the reusability of the form container and the structural data model are achieved, and the development efficiency is improved.
Further effects of the above-mentioned non-conventional alternatives will be 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 diagram of the effect of a specific form;
FIG. 2 is example code for the UI development form item of FIG. 1;
FIG. 3 is a schematic main flow chart of a Vue-based form development method according to an embodiment of the invention;
FIG. 4 is a workflow diagram of the form container component;
FIG. 5 is a schematic diagram of the main modules of an 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 employed;
FIG. 7 is a schematic block diagram of a computer system suitable for use with a mobile device or server implementing an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, in which various details of embodiments of the invention are included to assist understanding, and which are to be considered as 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 to UI control/component that can be used for human-computer interaction in the form, such as native web form items of input box, pull-down, multi-selection, etc., and also includes common UI interaction components such as cascade selector of cascade of cascaders, Slider of Slider, Switch, etc.
The form container component in the scheme can be rendered based on any open source UI component library developed based on the Vue technical stack, for example, an 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, the UI control library is generally registered in the Vue instance in advance, the component name (i.e. type attribute) in the data model corresponds to it, and after parsing through Vue, the corresponding component can be found, and the corresponding component has event trigger, and the method may be a native DOM event: input or change can also be realized by self-defining events, and when DOM elements in the components are event-bound, the operations of users can be monitored to obtain related data, and the related data are finally rendered into a page view
Referring to fig. 3, a main flowchart of a Vue-based form development method according to 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; wherein, the configuration data of the form item at least comprises the name of the data field;
s302: circularly traversing each form configuration data using the dynamic rendering capability of the built-in component in Vue to generate at least one form;
s303: and assembling the names of the data fields 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 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.
In the above embodiments, currently, mainstream front end frames include Vue, act, etc., wherein Vue is a set of progressive frames for constructing a user interface. It is a common operation in the field of web front-end development to process forms using Vue, and the present solution is based on Vue dynamic component capability implementation.
According to the component interface specification, two important attribute interfaces are added to the form container component, and the names are respectively named as: schema and v-model (container attribute data communication interface); wherein the content of the first and second substances,
1) the schema is used for receiving externally-transmitted form item configuration data, and a form container component can contain a plurality of form item configuration data, and the data format of the form item configuration data is defined as:
for example:
2) the v-model is used to create a bi-directional data binding on the form item, establishing a bi-directional data communication relationship between the form item and the form container component. Vue is an mvvm framework, i.e., bi-directional binding of data, where a view changes when data changes and the data changes synchronously when the view changes. Notably, the data bi-directional binding must be for the UI control, and non-UI controls do not involve data bi-directional binding.
The v-model comprises a formData attribute and is used for assigning a formData variable to be submitted to a back end by traversing the array field names of various form configuration data in a schema attribute interface and assembling the array field names into a key-value pair form queryString before a user inputs the form configuration data, wherein the array field names can be null at the moment. After the subsequent user inputs the configuration data of the form item, data updating is carried out based on the name of the array field containing the numerical value, so that the bidirectional data communication relation between the form item and the form container assembly is realized. Such as:
<RetailForm
v-modell＝"formData"
@getCompData Func＝"getList(1)
:schema＝"RetailForm0"
v-bind＝"{..pageSchemas[0]['attribute']}"
></RetailForm>
the bidirectional data binding can automatically select a correct method to update the form item according to the control type, and is responsible for monitoring input events of a user to update data and specially processing some extreme scenes. The input event refers to an input event (input box) at the front end of the web, and may also be a change event (refer to a select element), which is a behavior, and may trigger a change of data in the component, and the change of data may be reflected on the rendering of the page view, so that the change occurs.
Vue the form enters bindings, the interpretation of official documents is that v-models internally use different properties for different input elements and throw different events:
text and textarea elements use value property and input events;
checkbox and radio use a checked property and change event;
the select field has value as prop and change as an event.
The HTML native input element types do not always meet the requirements, but the component system of Vue allows the creation of fully custom behavior and reusable input components that can be used with v-models.
By setting the two attributes of the schema and the v-model, the form container assembly is simple, convenient and practical. The schema attribute is used for receiving the configuration data of the form items rendered in the form container component, and the v-model attribute is used for establishing a bidirectional data communication relation between the form items and the form container component.
For steps S301 and S302, user input of configuration data for each form item is received via the schema attributes interface in the form container component. Traversing each schema data (one schema data corresponds to one form item configuration data) by using the built-in component of Vue, and acquiring a type value in each schema data to realize creation Vue of dynamic components based on the type value; where Component authorities are introduced as dynamic and asynchronous components, encapsulating code that can be multiplexed, example code such as < Component v-bind is ═ dynacomponent "> < Component > examining dynamic and asynchronous components for more detailed information, using < Component/> will allow access to global and local components by name.
At a higher level, the component is a custom element for which special functionality is added by the editor of vue. In some cases, components may also be in the form of native elements, extended by the is property. The is property (dynamic rendering capability enabled) exposed by the component is used to decide which form item can be rendered.
For step S303, an instruction v-model binding formData field is used for obtaining the configuration data of the form item in the form container component, and data bidirectional binding is realized. Instructing the v-bind to dynamically bind the attribute object of the component to realize the dynamic expansion of the configuration information of the form item; where the instruction is the syntax of the Vue framework, a special attribute with a v-prefix, the responsibility is to act on the DOM responsively with the associated effects it produces when the values of the expression change.
A v-model is essentially a grammatical sugar. The following code < input v-model ═ test "> is essentially < input @ value @ test" @ input @ ═ test ═ event. It should be emphasized that the v-model can not only assign values to the input but also obtain data in the input, and the data is obtained in real time because the grammar sugar listens to the input box with @ input. The < p > { { test } } can be added into div to acquire input data, and then the data in the < p > </p > is changed by modifying the data in the input.
The method provided by the embodiment develops the form container component to set the form item attribute, dynamically generates the form item based on Vue dynamic component capability, automatically realizes bidirectional data binding of the form item, solves the problems of low efficiency and low code reuse rate of a handwritten form item, and is more convenient to maintain and more flexible to expand by setting a structured data model.
Referring to fig. 4, which is a flowchart illustrating the overall operation of the form container assembly, the user input of form configuration data is first received, then all the form configuration item data are traversed in a loop to realize the dynamic assembly of the form assembly, and finally the form configuration data and Vue components are rendered into a web form.
The method provided by the embodiment of the invention has the following beneficial effects that the method provided by the embodiment of the invention eliminates the mode that vue components write codes one by one in the prior art, sets form item configuration data through structured data, and then constructs form items through vue:
1) the structured data and the view of the form items in the form are separated, the structured data are stored in the schema attribute, and the reusability is strong; compared with the conventional mode of needing to write a plurality of form codes by hand, the form container component adopting the scheme can be a line of codes, so that the code amount is reduced;
2) because the data of the schema attribute is the structured JSON format data, the schema attribute can be written and died locally during front-end development or pulled from a remote server through an interface, so that the schema attribute is suitable for dynamic assembly under different scenes and has high flexibility;
3) the configuration data of the form item is easy to maintain and expandable, and the problems of page display sequence, related styles and the like can be adjusted by modifying the data corresponding to the schema attribute.
Referring to fig. 5, a schematic diagram of main modules of an Vue-based form development apparatus 500 according to an embodiment of the present invention is shown, including:
an input module 501, configured to receive input of configuration data of each form item in the form container assembly; wherein, the configuration data of the form item at least comprises the name of the data field;
a rendering module 502 for circularly traversing each form configuration data using the dynamic rendering capabilities of the built-in components in Vue to generate at least one form;
an establishing module 503, configured to assemble the names of the data fields into a key-value pair form, and transmit 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.
The apparatus for implementing the present invention further includes an attribute interface adding module 504 (not shown in the figure), configured to:
adding a schema attribute interface and a v-model to the form container component according to a component interface specification;
receiving input of configuration data of each form item through the schema attribute interface;
establishing, by the v-model, a bi-directional data communication relationship between the at least one form item and the form container component for simultaneous updating of data and views.
In the implementation device of the invention, the v-model comprises a formData variable;
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 values to the formData variables.
In the implementation device of the invention, the form configuration data further comprises a component default value, a component name, a component attribute name and an attribute value of a form item.
In addition, the detailed implementation of the device in the embodiment of the present invention has been described in detail in the above method, so that the repeated description is not repeated here.
FIG. 6 illustrates an exemplary system architecture 600 to which embodiments of the 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 serves to provide a medium for communication links between the terminal devices 601, 602, 603 and the server 605. Network 604 may include various types of connections, such as wire, wireless communication links, or fiber optic cables, to name a few.
A user may use the terminal devices 601, 602, 603 to interact with the server 605 via the network 604 to receive or send messages or the like. 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 display screens 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 executed 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, shown is a block diagram of a computer system 700 suitable for use with a terminal device implementing an embodiment of the present invention. The terminal device shown in fig. 7 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments 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 in accordance with 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 necessary for the operation of the system 700 are also stored. The CPU 701, the ROM 702, and the RAM 703 are connected to each other via 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 portion 706 including a keyboard, a mouse, and the like; an output section 707 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage section 708 including a hard disk and 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. A 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 out therefrom is mounted into the storage section 708 as necessary.
In particular, according to the embodiments of the present disclosure, the processes described above with reference to the 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 illustrated in the flow chart. In such an embodiment, the computer program can be downloaded and installed from a network through the communication section 709, and/or installed from the removable medium 711. The computer program performs the above-described functions defined in the system of the present invention when executed by the Central Processing Unit (CPU) 701.
It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination 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 present invention, 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, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. 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 flowchart 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 described in the embodiments of the present invention may be implemented by software or hardware. The described modules may also be provided in a processor, which may be described as: a processor includes an input module, a rendering module, and an establishment module. Where the names of these modules do not in some cases constitute a limitation on the module itself, 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 separate and not incorporated into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to comprise:
receiving input of configuration data of each form item in the form container assembly; wherein, the configuration data of the form item at least comprises the name of the data field;
circularly traversing each form configuration data using the dynamic rendering capability of the built-in component in Vue to generate at least one form;
and assembling the names of the data fields 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 component so as to establish a bidirectional data communication relation between the at least one form item and the form container component through the v-model.
According to the technical scheme of the embodiment of the invention, the mode that vue components write codes one by one in the prior art is eliminated, the configuration data of the form item is set through the structured data, and then the form item is constructed through vue, and in addition, the following beneficial effects are at least existed:
1) the structured data and the view of the form items in the form are separated, the structured data are stored in the schema attribute, and the reusability is strong; compared with the conventional mode of needing to write a plurality of form codes by hand, the form container component adopting the scheme can be a line of codes, so that the code amount is reduced;
2) because the data of the schema attribute is the structured JSON format data, the schema attribute can be written and died locally during front-end development or pulled from a remote server through an interface, so that the schema attribute is suitable for dynamic assembly under different scenes and has high flexibility;
3) the configuration data of the form item is easy to maintain and expandable, and the problems of page display sequence, related styles and the like can be adjusted by modifying the data corresponding to the schema attribute.
The above-described embodiments should not be construed as limiting the scope of the invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present invention should be included in the protection 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; wherein, the configuration data of the form item at least comprises the name of the data field;
circularly traversing each form configuration data using the dynamic rendering capability of the built-in component in Vue to generate at least one form;
and assembling the names of the data fields 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 component so as to establish a bidirectional data communication relation between the at least one form item and the form container component through the v-model.
2. The method of claim 1, further comprising:
adding a schema attribute interface and a v-model to the form container component according to a component interface specification;
receiving input of configuration data of each form item through the schema attribute interface;
establishing, by the v-model, a bi-directional data communication relationship between the at least one form item and the form container component for simultaneous updating of data and views.
3. The method of claim 2, wherein the v-model comprises a formData variable;
before the receiving the input of the configuration data of each form item in the form container component, the method further comprises the following steps:
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 values to the formData variables.
4. The method of any of claims 1-3, 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.
5. An Vue-based form development device, comprising:
the input module is used for receiving the input of configuration data of each form item in the form container assembly; wherein, the configuration data of the form item at least comprises the name of the data field;
a rendering module for circularly traversing each form configuration data using the dynamic rendering capability of the built-in components in Vue to generate at least one form;
and the establishing module is used for assembling the names of the data fields 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 relation between the at least one form item and the form container assembly through the v-model.
6. The apparatus of claim 5, further comprising an attribute interface addition module to:
adding a schema attribute interface and a v-model to the form container component according to a component interface specification;
receiving input of configuration data of each form item through the schema attribute interface;
establishing, by the v-model, a bi-directional data communication relationship between the at least one form item and the form container component for simultaneous updating of data and views.
7. The apparatus of claim 6, wherein the v-model comprises a formData variable;
the apparatus also includes an assignment module to:
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 values 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;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-4.
10. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out the method according to any one 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 true CN113760251A (en) | 2021-12-07 |
| CN113760251B 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) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114003220A (en) * | 2021-12-30 | 2022-02-01 | 思创数码科技股份有限公司 | Workflow model implementation method, system, readable storage medium and computer equipment |
| CN114327605A (en) * | 2022-03-08 | 2022-04-12 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN114579098A (en) * | 2022-03-18 | 2022-06-03 | 河钢数字技术股份有限公司 | Method for linkage control of ElementUI form and list |
| CN114675923A (en) * | 2022-04-13 | 2022-06-28 | 上海微盟企业发展有限公司 | Configuration type operation interface setting method, device and medium |
| CN115344243A (en) * | 2022-10-17 | 2022-11-15 | 中邮消费金融有限公司 | Component packaging method and system of X6 flow chart |
| CN116501719A (en) * | 2023-06-21 | 2023-07-28 | 北京长河数智科技有限责任公司 | 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 |
|---|
| PAULO R. S. MENDONÇA: "A Flexible Method for Multi-Material Decomposition of Dual-Energy CT Images", IEEE, 16 September 2013 (2013-09-16) * |
| 侯俐;姚李岳;邹家矞;: "基于组件化与服务端渲染的动态内容管理系统", 电脑知识与技术, no. 09, 25 March 2020 (2020-03-25) * |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114003220A (en) * | 2021-12-30 | 2022-02-01 | 思创数码科技股份有限公司 | Workflow model implementation method, system, readable storage medium and computer equipment |
| CN114327605A (en) * | 2022-03-08 | 2022-04-12 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN114327605B (en) * | 2022-03-08 | 2022-08-23 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN114579098A (en) * | 2022-03-18 | 2022-06-03 | 河钢数字技术股份有限公司 | Method for linkage control of ElementUI form and list |
| 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 |
| CN115344243A (en) * | 2022-10-17 | 2022-11-15 | 中邮消费金融有限公司 | Component packaging method and system of X6 flow chart |
| CN116501719A (en) * | 2023-06-21 | 2023-07-28 | 北京长河数智科技有限责任公司 | Data modeling system and method based on visual view realization |
| CN116501719B (en) * | 2023-06-21 | 2023-09-12 | 北京长河数智科技有限责任公司 | Data modeling system and method based on visual view realization |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113760251B (en) | 2024-05-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113760251B (en) | Form development method and device based on Vue | |
| CN111158818A (en) | Page rendering method and device | |
| CN110109659A (en) | A kind of system that realizing front end applications scaffold and server | |
| CN112069201A (en) | Target data acquisition method and device | |
| CN108038212B (en) | Data interaction method, device, system, equipment and storage medium | |
| CN113031946B (en) | Method and device for rendering page component | |
| CN110780874B (en) | Method and device for generating information | |
| CN111819535A (en) | Asynchronous C # -JS data binding bridge | |
| CN111294395A (en) | Terminal page transmission method, device, medium and electronic equipment | |
| CN111666293A (en) | Database access method and device | |
| CN112269576A (en) | Component display method and device, server and storage medium | |
| CN112579048B (en) | Applet integration method, device, electronic equipment and storage medium | |
| CN113468067B (en) | Application program debugging method and device, electronic equipment and computer readable medium | |
| CN112988588B (en) | Client software debugging method and device, storage medium and electronic equipment | |
| CN116860286A (en) | Page dynamic update method, device, electronic equipment and computer readable medium | |
| CN112486482A (en) | Page display method and device | |
| CN110825622A (en) | Software testing method, device, equipment and computer readable medium | |
| CN115617420A (en) | Application program generation method, device, equipment and storage medium | |
| CN110830427A (en) | Method and device for message encoding and message decoding in netty environment | |
| CN114661402A (en) | Interface rendering method and device, electronic equipment and computer readable medium | |
| CN113741878A (en) | GraphQL-based interface construction method and system, electronic equipment and storage medium | |
| CN113495651A (en) | Window control method and device | |
| CN111723051A (en) | Mirror image reconstruction method and device based on module | |
| CN112688863B (en) | Gateway data processing method and device and electronic equipment | |
| CN111221513B (en) | Method, device, medium and electronic equipment for adjusting cascading style sheet |
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 |