Complex form bidirectional binding method and device, computer equipment and storage medium
By configuring global objects and global functions in the Vue framework and establishing two-way binding relationships in the components, the errors and high maintenance costs in complex form data interaction are solved, and more efficient data interaction is achieved and complex R&D is reduced. sex.
Patent Information
- Application Number
- CN202411521148.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-29
- Publication Date
- 2025-02-18
AI Technical Summary
In the Vue framework, complex form data is split and nested components are formed, resulting in error-prone and maintenance costs between parent and child components.
By responding to form data binding instructions, obtaining pending form data and configuring it as a global object, introducing global objects and global functions to the configured component set, and establishing a two-way binding relationship through preset binding instructions to directly disassemble the form data. Multi-dimensional nested relationships are single-dimensional component relationships.
It improves the efficiency of complex form data interaction, reduces the complexity of event communication and form change monitoring, and reduces maintenance costs.
Smart Images
Figure CN119473284A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of front-end development, and in particular to a complex form two-way binding method, device, computer equipment and storage medium. Background Art
[0002] In the front-end development process, if the Vue framework (a JavaScript framework for building user interfaces) is used for front-end development, the management of forms is generally split according to the form's data structure and business characteristics. If the form is very complex, after splitting the form data, the code organization level will form a situation of nested components.
[0003] In the case where form data is split to form nested components, data interaction between parent and child components is usually achieved through props / emit transmission between parent and child components (props is a mechanism used by the Vue framework to pass data from parent components to child components; emit is a method of communication between components used to trigger events in child components and listen to these events in parent components), or the publish-subscribe mode is used to achieve data interaction between parent and child components.
[0004] When the parent-child component transfers props / emit to realize data interaction between parent and child components, when the parent component needs to pass the form data to the child component, the child component notifies the parent component corresponding to the child component of the result of the form change, and then passes the data to the parent component layer by layer to meet the principle of one-way data flow in the Vue framework. However, the form data structure is deeply nested, and the process of data communication between parent and child components through props / emit is prone to errors and has high maintenance costs. Every time a data change occurs in the parent component, it will trigger nested event communication.
[0005] When using the publish-subscribe model to implement data interaction between parent and child components, the amount of form data that the parent component needs to monitor is very large, and the custom events are proportional to the form data. The more forms there are, the more custom events there are, the lower the efficiency of data interaction between parent and child components, and the higher the maintenance cost required to maintain communication. Summary of the invention
[0006] The embodiments of the present invention provide a complex form two-way binding method, apparatus, computer equipment and storage medium, aiming to solve the problem in the prior art that after complex form data is split into layers of nested components, parent-child components are used to pass props / emit to realize data interaction between parent and child components. Whenever data changes occur in the parent component, nested event communication will be triggered, and the data communication process between parent and child components is prone to errors and has high maintenance costs.
[0007] In a first aspect, an embodiment of the present invention provides a complex form two-way binding method, which includes:
[0008] In response to the form data binding instruction, obtaining the to-be-processed form data corresponding to the form data binding instruction;
[0009] The form data to be processed is configured as a global object, and a global function corresponding to the global object is configured; wherein the global function is a function of the component calling the corresponding data of the global object;
[0010] If a page initialization instruction is detected, a configured component set is obtained, the global object and the global function are introduced into each configured component in the configured component set and recursively rendered to obtain a rendered component set;
[0011] A bidirectional binding relationship is established between each rendered component of the rendered component set and a global object based on a preset binding instruction.
[0012] In a second aspect, an embodiment of the present invention further provides a complex form two-way binding device, which includes:
[0013] A to-be-processed form data acquisition unit, configured to, in response to a form data binding instruction, acquire the to-be-processed form data corresponding to the form data binding instruction;
[0014] A global object configuration unit, configured to configure the to-be-processed form data as a global object, and to configure a global function corresponding to the global object; wherein the global function is a function for a component to call corresponding data of the global object;
[0015] A recursive rendering unit, configured to, if a page initialization instruction is detected, obtain a configured component set, introduce the global object and the global function into each configured component in the configured component set, and perform recursive rendering to obtain a rendered component set;
[0016] The two-way binding control unit is used to establish a two-way binding relationship between each rendered component of the rendered component set and a global object based on a preset binding instruction.
[0017] In a third aspect, an embodiment of the present invention further provides a computer device, which includes a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the method described in the first aspect is implemented.
[0018] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, wherein the computer storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the method described in the first aspect above can be implemented.
[0019] The embodiment of the present invention provides a complex form two-way binding method, device, computer equipment and storage medium, the method includes: in response to a form data binding instruction, obtaining the to-be-processed form data corresponding to the form data binding instruction; configuring the to-be-processed form data as a global object, and configuring a global function corresponding to the global object; wherein the global function is a function of a component calling the corresponding data of the global object; if a page initialization instruction is detected, obtaining a configured component set, introducing both the global object and the global function into each configured component in the configured component set and performing recursive rendering to obtain a rendered component set; and establishing a two-way binding relationship between each rendered component in the rendered component set and the global object based on a preset binding instruction. The embodiment of the present invention can use global variables to directly disassemble the multi-dimensional nested relationship of the to-be-processed form data into a single-dimensional component relationship, and use preset binding instructions to bind each component to the global variable, without having to process the event communication of the form and the monitoring of form changes, so that the data interaction efficiency between the to-be-processed form data and the components is higher. BRIEF DESCRIPTION OF THE DRAWINGS
[0020] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying any creative work.
[0021] Figure 1 A schematic diagram of an application scenario of a complex form two-way binding method provided by an embodiment of the present invention;
[0022] Figure 2 A schematic diagram of a flow chart of a complex form two-way binding method provided by an embodiment of the present invention;
[0023] Figure 3 A schematic diagram of a sub-process of a complex form two-way binding method provided by an embodiment of the present invention;
[0024] Figure 4 A schematic diagram of a sub-process of a complex form two-way binding method provided by an embodiment of the present invention;
[0025] Figure 5 A schematic diagram of a sub-process of a complex form two-way binding method provided by an embodiment of the present invention;
[0026] Figure 6 A schematic diagram of a sub-process of a complex form two-way binding method provided by an embodiment of the present invention;
[0027] Figure 7 A schematic block diagram of a complex form two-way binding device provided by an embodiment of the present invention;
[0028] Figure 8 A schematic block diagram of a computer device provided in an embodiment of the present invention. DETAILED DESCRIPTION
[0029] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.
[0030] It should be understood that when used in this specification and the appended claims, the terms "include" and "comprises" indicate the presence of described features, integers, steps, operations, elements and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or combinations thereof.
[0031] It should also be understood that the terms used in this specification of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention. As used in the specification of the present invention and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.
[0032] It should be further understood that the term "and / or" used in the present description and the appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.
[0033] Please also refer to Figure 1 and Figure 2 ,in Figure 1 This is a schematic diagram of a scenario of a complex form two-way binding method according to an embodiment of the present invention. Figure 2 Schematic diagram of the process of a complex form two-way binding method provided by an embodiment of the present invention. Figure 1 As shown, the complex form two-way binding method provided by the embodiment of the present invention is applied to a server 10 , and the server 10 is communicatively connected with a user terminal 20 .
[0034] like Figure 2 As shown, the method includes the following steps S110-S140.
[0035] S110. In response to a form data binding instruction, obtain to-be-processed form data corresponding to the form data binding instruction.
[0036] In this embodiment, the technical solution is described with the server as the execution subject. After the user operates the user terminal (such as the laptop used by the front-end developer) and establishes a communication connection with the server, a form data binding instruction can be sent to the back-end system in the server to trigger the establishment of a two-way binding relationship between the to-be-processed form data in the front-end and the corresponding data in the server. After the server detects the form data binding instruction sent by the user terminal, it first obtains the to-be-processed form data corresponding to it. The obtained to-be-processed form data is not directly sent to the server for storage, but needs to be subjected to subsequent binding processing.
[0037] The form data to be processed corresponds to various information submitted by users through forms on web pages, including but not limited to text, passwords, options (such as radio buttons, check boxes, drop-down lists), file uploads, etc. A form is an important tool for data collection on a web page, and it is mainly composed of three basic components: form tags, form fields, and form buttons. The form tag contains the URL of the CGI program used to process the form data (where CGI stands for Common Gateway Interface and URL stands for Uniform Resource Locator) and the method of submitting data to the server. The form field is the area where users input data, including text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio buttons, drop-down selection boxes, and file upload boxes. The form button is used to transmit data to the CGI script on the server or cancel the input. The form button can also be used to control other processing tasks that define processing scripts, including submit buttons, reset buttons, and general buttons.
[0038] S120: Configure the form data to be processed as a global object, and configure a global function corresponding to the global object.
[0039] The global function is a function that a component uses to call corresponding data of a global object.
[0040] In this embodiment, in order to enable the form data to be processed to be accessed by other components or objects, the form data to be processed may be configured as a global object, for example, a global object store, and then a global function accessProperty is configured for the global object store. When the global function accessProperty is called by an object (such as a global object), there is only one copy of the global function accessProperty in the memory corresponding to the data area of the server.
[0041] In one embodiment, if Figure 3 As shown, step S120 includes:
[0042] S121, configuring the form data to be processed as a global object, and obtaining a global object access path corresponding to the global object;
[0043] S122: Create a global function corresponding to the global object, and save the global object access path as a pre-stored path of the global function.
[0044] In this embodiment, still referring to the above example, the global object configured corresponding to the form data to be processed is the global object store. When the global object store is created, a fixed global object access path is set correspondingly, and the global object access path will not change in the subsequent process. Then, a global function accessProperty corresponding to the global object store is specifically created. When the global object access path is input to the global function accessProperty, the global object access path is bound and saved as the pre-stored path of the global function. When the global function accessProperty determines that the global object access path is completely consistent with the pre-stored path, all data included in the global object store (such as attribute data, etc.) can be accessed accordingly. It can be seen that after the form data to be processed is configured as a global object, it is convenient to introduce it into the page components involved later.
[0045] S130: If a page initialization instruction is detected, obtain a configured component set, and introduce the global object and the global function into each configured component in the configured component set.
[0046] In this embodiment, in the backend system in the server, multiple configured components can also be obtained to form a configured component set, and the above multiple configured components are multiple components selected by the user operating the user terminal on the user interaction interface corresponding to the backend system.
[0047] There are many components displayed on the user interaction interface, mainly including basic components, navigation components, input components, display components and feedback components. For example, basic components include icons, text, buttons, pictures, cells, mask layers, pop-up layers and other components; and these components are the basic elements of page design, which are universal and applicable to various scenarios. Navigation components mainly include grids, navigation bars, tab bars, index bars, pagers and other components; and the main function of these components is to provide users with location guides to help users quickly locate the current location and ensure that users use the product more clearly and conveniently. Input components include radio buttons, check boxes, input boxes, forms, selectors and other components; and the main function of these components is to input data and provide users with an operation area for content input. Display components include components such as avatars, logos, labels, lists, notification bars and other components; and the main function of these components is to display relevant data content, clearly display data for users, and guide users. Feedback components are used for data interaction and enhance user experience through feedback mechanisms; and feedback components improve the responsiveness and usability of the user interface by instantly feeding back the user's operation results.
[0048] More specifically, the configured component set includes a page entry component, an icon component, a text component, a button component, a navigation bar component, a tab bar component, an index bar component, a pager component, a radio button component, a check box component, an input box component, a form component, and a selector component, and several of the components as parent components also include child components. At this time, when the global object and the global function are introduced into each configured component in the configured component set, the global object and the global function are introduced into each parent component in the configured component, and each parent component passes the global object and the global function to each child component included therein.
[0049] In one embodiment, if Figure 4 As shown, step S130 includes:
[0050] S131, obtaining a page entry component, and passing the global object and the global function into a first local variable in the page entry component;
[0051] S132. Recursively render each configured component in the configured component set based on the first local variable to obtain a rendered component set.
[0052] In this embodiment, if the back-end system in the server detects a page initialization instruction, it means that the front-end needs to start page initialization generation based on the configured components selected by the user. In order to introduce the global object and the global function into all configured components in the configured component set, the page entry component can be obtained first, and the page entry component can be used as a carrier to implement the introduction of the global object and the global function into all configured components.
[0053] Specifically, the page entry component can use App.vue (App.vue is the first add-on item of vue page resources, the main component, and can also be understood as the page entry file. All pages are switched under App.vue; App.vue is responsible for building definitions and page component collections), and the functions of the App.vue component are as follows: First, it refers to the root component of the entire vue project, which is used to display the content in the component; second, it is called the root component for the entire project, and template, that is, the sub-element under the template, is called the root component for the current vue instance). The App.vue used in this application includes at least template tag data (template data) and script tag data (script data), and the first local variable appData is set in the script tag data and its initial value is null (that is, an empty value). After obtaining the page entry component, the global object store can be assigned to the first local variable appData in the page entry component App.vue.
[0054] Afterwards, the global object store imported into the first local variable appData is used to recursively render each configured component in the configured component set to obtain rendered components and form a rendered component set.
[0055] In one embodiment, if Figure 5 As shown, step S132 includes:
[0056] S1321. Obtain the global object access path and global function included in the first local variable;
[0057] S1322: Obtain a configured component that is a parent component in the configured component set, and render the global object access path and the global function to each configured component that is a parent component by using the first local variable;
[0058] S1323. Based on the component tree structure and the preset recursive direction, each configured component as a parent component renders the global object access path and the global function to each configured component as a child component corresponding to the parent component to obtain the rendered component set.
[0059] In this embodiment, since the first local variable appData has been passed the global object access path by the global object store, the global object access path is stored in the first local variable appData. Afterwards, using the first local variable appData as a carrier, the global object access path is first rendered to each configured component that is a parent component in the configured component set. Afterwards, the global object access path is no longer rendered to each configured component that is a parent component through the first local variable appData as a carrier, but each configured component that is a parent component is used as a carrier, and each parent component is used as a carrier to render the global object access path it obtains to each child component belonging to the same component tree structure, and the rendering is completed in accordance with a preset recursive direction (for example, in a recursive direction from a child component with a shallow depth to a child component with a deep depth). When the configured component that is a parent component in the configured component set and the configured component that is a child component have obtained the global object access path, the rendering process can be completed and each rendered component can be obtained to form the rendered component set. It can be seen that based on the above method, the first local variable and the parent component are used to realize the transmission of the global object access path in all child components,
[0060] In one embodiment, step S1323 includes:
[0061] Recording the configured component as the parent component as the currently configured parent component, and acquiring a number of currently configured child components corresponding to the currently configured parent component based on the component tree structure traversal;
[0062] The several currently configured child components receive and store the global object access path and the global function passed in by the currently configured parent component through the second local variable according to the preset recursive direction.
[0063] In this embodiment, taking a currently configured parent component 1 as an example, the currently configured parent component 1 is a three-layer tree structure based on the component tree structure, and specifically includes subcomponent 1 and subcomponent 2 at the first node depth and subcomponent 3, subcomponent 4 and subcomponent 5 at the second node depth, wherein subcomponent 3 and subcomponent 4 are subcomponents of subcomponent 1, and subcomponent 5 is a subcomponent of subcomponent 2. When the currently configured parent component 1 and its corresponding subcomponents are known, the currently configured parent component 1 first renders subcomponent 1 and subcomponent 2, specifically, the currently configured parent component 1 passes the global object access path to subcomponent 1 and subcomponent 2. Afterwards, the currently configured parent component 1 passes the global object access path to subcomponent 3, subcomponent 4 and subcomponent 5.
[0064] Among them, taking the currently configured parent component 1 passing the global object access path to the child component 1 as an example, the currently configured parent component 1 passes the global object access path to the child component 1 and stores it in the second local variable componentData of the child component 1, more specifically, it is stored in the props.paths attribute specifically included in the second local variable componentData, and the currently configured parent component 1 passes the global function to the child component 1, more specifically, it is stored in the data.componentData attribute included in the second local variable componentData. It can be seen that through the above method, the multi-dimensional nested relationship of the components is directly disassembled into a single-dimensional component relationship, that is, each rendered component directly communicates with the global object, instead of obtaining the corresponding data from the to-be-processed form data based on the parent component corresponding to each rendered component.
[0065] S140: Establish a bidirectional binding relationship between each rendered component in the rendered component set and a global object based on a preset binding instruction.
[0066] In this embodiment, after each rendered component in the rendered component set obtains the global object, it does not completely obtain all the data of the global object, but obtains the access path to the global object. If there is a data change (i.e., data update) in the to-be-processed form data corresponding to the global object, if each rendered component has not established a two-way binding relationship with the global object, a listening event needs to be set in each rendered component to detect the data change of the global object.
[0067] At this time, a two-way binding relationship can be established between each rendered component in the rendered component set and the global object based on the preset binding instructions. In this way, once the data changes in the global object, the rendered components that need these data can obtain the changed data from the global object based on the global object access path, without having to process the event communication of the form and the monitoring of form changes, thereby solving the problems of long event communication, difficult form data maintenance, and low R&D quality due to deep component nesting.
[0068] In one embodiment, if Figure 6 As shown, step S140 includes:
[0069] S141, obtaining a two-way data binding instruction corresponding to the preset binding instruction;
[0070] S142. Establish a two-way binding relationship between the second local variable of each rendered component in the rendered component set and the global object based on the two-way data binding instruction.
[0071] In this embodiment, the preset binding instruction is specifically a two-way data binding instruction (i.e., v-model instruction), which is an instruction in Vue.js for implementing two-way data binding. The two-way data binding instruction enables an automatic synchronization relationship to be established between the front-end and back-end systems, so that changes in the data of the back-end system can be reflected in the interface in real time, and at the same time, user modifications to the interface can also be reflected in the data of the back-end system in real time. Specifically, the v-model instruction is used to establish a two-way binding relationship between the second local variable componentData of each rendered component of the rendered component set and the global object store.
[0072] In one embodiment, after step S140, the method further includes:
[0073] Each rendered component included in the rendered component set obtains corresponding target form data from the to-be-processed form data based on component data requirement information, the global object access path and the global function.
[0074] In this embodiment, for example, still referring to the example of the currently configured parent component 1 mentioned above, the child component 1 obtains the global object access path of the currently configured parent component 1 through the props.paths attribute, and the child component 1 calls the global function in the data.componentData attribute, and uses the global object access path and component data requirement information (for example, it includes the subform name and subform ID required by the child component 1) as the input of the global function, and the required current target data 1 can be obtained from the global object store. After that, the child component 1 can pass the current target data 1 into the second local variable componentData in the child component 1 for storage. Moreover, whenever the data related to the child component 1 in the global object store changes, based on the characteristics corresponding to the v-model instruction, the data related to the child component 1 in the global object store is synchronously fed back to the child component 1.
[0075] It can be seen that the implementation example of this method can use global variables to directly disassemble the multi-dimensional nested relationship of the form data to be processed into a single-dimensional component relationship, and use preset binding instructions to bind each component to the global variable. There is no need to process the event communication of the form and the monitoring of form changes, which makes the data interaction between the form data to be processed and the components more efficient.
[0076] Figure 7 Schematic diagram of a complex form two-way binding device provided by an embodiment of the present invention. Figure 7As shown, corresponding to the above complex form two-way binding method, the present invention also provides a complex form two-way binding device 100. The complex form two-way binding device 100 includes: a to-be-processed form data acquisition unit 110, a global object configuration unit 120, a recursive rendering unit 130 and a two-way binding control unit 140.
[0077] The to-be-processed form data acquiring unit 110 is used to acquire the to-be-processed form data corresponding to the form data binding instruction in response to the form data binding instruction.
[0078] In this embodiment, the technical solution is described with the server as the execution subject. After the user operates the user terminal (such as the laptop used by the front-end developer) and establishes a communication connection with the server, a form data binding instruction can be sent to the back-end system in the server to trigger the establishment of a two-way binding relationship between the to-be-processed form data in the front-end and the corresponding data in the server. After the server detects the form data binding instruction sent by the user terminal, it first obtains the to-be-processed form data corresponding to it. The obtained to-be-processed form data is not directly sent to the server for storage, but needs to be subjected to subsequent binding processing.
[0079] The form data to be processed corresponds to various information submitted by users through forms on web pages, including but not limited to text, passwords, options (such as radio buttons, check boxes, drop-down lists), file uploads, etc. A form is an important tool for data collection on a web page, and it is mainly composed of three basic components: form tags, form fields, and form buttons. The form tag contains the URL of the CGI program used to process the form data (where CGI stands for Common Gateway Interface and URL stands for Uniform Resource Locator) and the method of submitting data to the server. The form field is the area where users input data, including text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio buttons, drop-down selection boxes, and file upload boxes. The form button is used to transmit data to the CGI script on the server or cancel the input. The form button can also be used to control other processing tasks that define processing scripts, including submit buttons, reset buttons, and general buttons.
[0080] The global object configuration unit 120 is used to configure the to-be-processed form data as a global object, and configure a global function corresponding to the global object.
[0081] The global function is a function that a component uses to call corresponding data of a global object.
[0082] In this embodiment, in order to enable the form data to be processed to be accessed by other components or objects, the form data to be processed may be configured as a global object, for example, a global object store, and then a global function accessProperty is configured for the global object store. When the global function accessProperty is called by an object (such as a global object), there is only one copy of the global function accessProperty in the memory corresponding to the data area of the server.
[0083] In one embodiment, the global object configuration unit 120 is used to:
[0084] Configuring the form data to be processed as a global object, and obtaining a global object access path corresponding to the global object;
[0085] A global function corresponding to the global object is created, and the global object access path is saved as a pre-stored path of the global function.
[0086] In this embodiment, still referring to the above example, the global object configured corresponding to the form data to be processed is the global object store. When the global object store is created, a fixed global object access path is set correspondingly, and the global object access path will not change in the subsequent process. Then, a global function accessProperty corresponding to the global object store is specifically created. When the global object access path is input to the global function accessProperty, the global object access path is bound and saved as the pre-stored path of the global function. When the global function accessProperty determines that the global object access path is completely consistent with the pre-stored path, all data included in the global object store (such as attribute data, etc.) can be accessed accordingly. It can be seen that after the form data to be processed is configured as a global object, it is convenient to introduce it into the page components involved later.
[0087] The recursive rendering unit 130 is used to obtain a configured component set if a page initialization instruction is detected, and introduce the global object and the global function into each configured component in the configured component set.
[0088] In this embodiment, in the backend system in the server, multiple configured components can also be obtained to form a configured component set, and the above multiple configured components are multiple components selected by the user operating the user terminal on the user interaction interface corresponding to the backend system.
[0089] There are many components displayed on the user interaction interface, mainly including basic components, navigation components, input components, display components and feedback components. For example, basic components include icons, text, buttons, pictures, cells, mask layers, pop-up layers and other components; and these components are the basic elements of page design, which are universal and applicable to various scenarios. Navigation components mainly include grids, navigation bars, tab bars, index bars, pagers and other components; and the main function of these components is to provide users with location guides to help users quickly locate the current location and ensure that users use the product more clearly and conveniently. Input components include radio buttons, check boxes, input boxes, forms, selectors and other components; and the main function of these components is to input data and provide users with an operation area for content input. Display components include components such as avatars, logos, labels, lists, notification bars and other components; and the main function of these components is to display relevant data content, clearly display data for users, and guide users. Feedback components are used for data interaction and enhance user experience through feedback mechanisms; and feedback components improve the responsiveness and usability of the user interface by instantly feeding back the user's operation results.
[0090] More specifically, the configured component set includes a page entry component, an icon component, a text component, a button component, a navigation bar component, a tab bar component, an index bar component, a pager component, a radio button component, a check box component, an input box component, a form component, and a selector component, and several of the components as parent components also include child components. At this time, when the global object and the global function are introduced into each configured component in the configured component set, the global object and the global function are introduced into each parent component in the configured component, and each parent component passes the global object and the global function to each child component included therein.
[0091] In one embodiment, the recursive rendering unit 130 is used to:
[0092] Obtain a page entry component, and pass the global object and the global function into a first local variable in the page entry component;
[0093] Recursively render each configured component in the configured component set based on the first local variable to obtain a rendered component set.
[0094] In this embodiment, if the back-end system in the server detects a page initialization instruction, it means that the front-end needs to start page initialization generation based on the configured components selected by the user. In order to introduce the global object and the global function into all configured components in the configured component set, the page entry component can be obtained first, and the page entry component can be used as a carrier to implement the introduction of the global object and the global function into all configured components.
[0095] Specifically, the page entry component can use App.vue (App.vue is the first add-on item of vue page resources, the main component, and can also be understood as the page entry file. All pages are switched under App.vue; App.vue is responsible for building definitions and page component collections), and the functions of the App.vue component are as follows: First, it refers to the root component of the entire vue project, which is used to display the content in the component; second, it is called the root component for the entire project, and template, that is, the sub-element under the template, is called the root component for the current vue instance). The App.vue used in this application includes at least template tag data (template data) and script tag data (script data), and the first local variable appData is set in the script tag data and its initial value is null (that is, an empty value). After obtaining the page entry component, the global object store can be assigned to the first local variable appData in the page entry component App.vue.
[0096] Afterwards, the global object store imported into the first local variable appData is used to recursively render each configured component in the configured component set to obtain rendered components and form a rendered component set.
[0097] In one embodiment, recursively rendering each configured component in the configured component set based on the first local variable to obtain a rendered component set includes:
[0098] Obtaining the global object access path and global function included in the first local variable;
[0099] Obtain a configured component that is a parent component in the configured component set, and render the global object access path and the global function to each configured component that is a parent component by using the first local variable;
[0100] Based on the component tree structure and the preset recursive direction, each configured component as a parent component renders the global object access path and the global function to each configured component as a child component corresponding to the parent component to obtain the rendered component set.
[0101] In this embodiment, since the first local variable appData has been passed the global object access path by the global object store, the global object access path is stored in the first local variable appData. Afterwards, using the first local variable appData as a carrier, the global object access path is first rendered to each configured component that is a parent component in the configured component set. Afterwards, the global object access path is no longer rendered to each configured component that is a parent component through the first local variable appData as a carrier, but each configured component that is a parent component is used as a carrier, and each parent component is used as a carrier to render the global object access path it obtains to each child component belonging to the same component tree structure, and the rendering is completed in accordance with a preset recursive direction (for example, in a recursive direction from a child component with a shallow depth to a child component with a deep depth). When the configured component that is a parent component in the configured component set and the configured component that is a child component have obtained the global object access path, the rendering process can be completed and each rendered component can be obtained to form the rendered component set. It can be seen that based on the above method, the first local variable and the parent component are used to realize the transmission of the global object access path in all child components,
[0102] In one embodiment, each configured component as a parent component renders the global object access path and the global function to each configured component as a child component corresponding to the parent component based on the component tree structure and the preset recursive direction, including:
[0103] Recording the configured component as the parent component as the currently configured parent component, and acquiring a number of currently configured child components corresponding to the currently configured parent component based on the component tree structure traversal;
[0104] The several currently configured child components receive and store the global object access path and the global function passed in by the currently configured parent component through the second local variable according to the preset recursive direction.
[0105] In this embodiment, taking a currently configured parent component 1 as an example, the currently configured parent component 1 is a three-layer tree structure based on the component tree structure, and specifically includes subcomponent 1 and subcomponent 2 at the first node depth and subcomponent 3, subcomponent 4 and subcomponent 5 at the second node depth, wherein subcomponent 3 and subcomponent 4 are subcomponents of subcomponent 1, and subcomponent 5 is a subcomponent of subcomponent 2. When the currently configured parent component 1 and its corresponding subcomponents are known, the currently configured parent component 1 first renders subcomponent 1 and subcomponent 2, specifically, the currently configured parent component 1 passes the global object access path to subcomponent 1 and subcomponent 2. Afterwards, the currently configured parent component 1 passes the global object access path to subcomponent 3, subcomponent 4 and subcomponent 5.
[0106] Among them, taking the currently configured parent component 1 passing the global object access path to the child component 1 as an example, the currently configured parent component 1 passes the global object access path to the child component 1 and stores it in the second local variable componentData of the child component 1, more specifically, it is stored in the props.paths attribute specifically included in the second local variable componentData, and the currently configured parent component 1 passes the global function to the child component 1, more specifically, it is stored in the data.componentData attribute included in the second local variable componentData. It can be seen that through the above method, the multi-dimensional nested relationship of the components is directly disassembled into a single-dimensional component relationship, that is, each rendered component directly communicates with the global object, instead of obtaining the corresponding data from the to-be-processed form data based on the parent component corresponding to each rendered component.
[0107] The two-way binding control unit 140 is used to establish a two-way binding relationship between each rendered component in the rendered component set and a global object based on a preset binding instruction.
[0108] In this embodiment, after each rendered component in the rendered component set obtains the global object, it does not completely obtain all the data of the global object, but obtains the access path to the global object. If there is a data change (i.e., data update) in the to-be-processed form data corresponding to the global object, if each rendered component has not established a two-way binding relationship with the global object, a listening event needs to be set in each rendered component to detect the data change of the global object.
[0109] At this time, a two-way binding relationship can be established between each rendered component in the rendered component set and the global object based on the preset binding instructions. In this way, once the data changes in the global object, the rendered components that need these data can obtain the changed data from the global object based on the global object access path, without having to process the event communication of the form and the monitoring of form changes, thereby solving the problems of long event communication, difficult form data maintenance, and low R&D quality due to deep component nesting.
[0110] In one embodiment, the two-way binding control unit 140 is used to:
[0111] Obtain a two-way data binding instruction corresponding to the preset binding instruction;
[0112] A two-way binding relationship is established between the second local variable of each rendered component in the rendered component set and the global object based on the two-way data binding instruction.
[0113] In this embodiment, the preset binding instruction is specifically a two-way data binding instruction (i.e., v-model instruction), which is an instruction in Vue.js for implementing two-way data binding. The two-way data binding instruction enables an automatic synchronization relationship to be established between the front-end and back-end systems, so that changes in the data of the back-end system can be reflected in the interface in real time, and at the same time, user modifications to the interface can also be reflected in the data of the back-end system in real time. Specifically, the v-model instruction is used to establish a two-way binding relationship between the second local variable componentData of each rendered component of the rendered component set and the global object store.
[0114] In one embodiment, the complex form two-way binding device 100 further includes:
[0115] A data synchronization control unit is used for each rendered component included in the rendered component set to obtain corresponding target form data from the to-be-processed form data based on component data requirement information, the global object access path and the global function.
[0116] In this embodiment, for example, still referring to the example of the currently configured parent component 1 mentioned above, the child component 1 obtains the global object access path of the currently configured parent component 1 through the props.paths attribute, and the child component 1 calls the global function in the data.componentData attribute, and uses the global object access path and component data requirement information (for example, it includes the subform name and subform ID required by the child component 1) as the input of the global function, and the required current target data 1 can be obtained from the global object store. After that, the child component 1 can pass the current target data 1 into the second local variable componentData in the child component 1 for storage. Moreover, whenever the data related to the child component 1 in the global object store changes, based on the characteristics corresponding to the v-model instruction, the data related to the child component 1 in the global object store is synchronously fed back to the child component 1.
[0117] It can be seen that the implementation example of the device can use global variables to directly disassemble the multi-dimensional nested relationship of the form data to be processed into a single-dimensional component relationship, and use preset binding instructions to bind each component to the global variable. There is no need to process the event communication of the form and the monitoring of form changes, which makes the data interaction between the form data to be processed and the components more efficient.
[0118] The complex form two-way binding device can be implemented in the form of a computer program. The computer program can be used in Figure 8 Runs on the computer device shown.
[0119] See also Figure 8 , Figure 8The schematic block diagram of a computer device provided by an embodiment of the present invention is shown in FIG. The computer device integrates any complex form two-way binding device provided by an embodiment of the present invention.
[0120] See also Figure 8 The computer device 400 includes a processor 402 , a memory and a network interface 405 connected via a system bus 401 , wherein the memory may include a storage medium 403 and an internal memory 404 .
[0121] The storage medium 403 can store an operating system 4031 and a computer program 4032. The computer program 4032 includes program instructions, and when the program instructions are executed, the processor 402 can execute the complex form two-way binding method.
[0122] The processor 402 is used to provide computing and control capabilities to support the operation of the entire computer device.
[0123] The internal memory 404 provides an environment for the operation of the computer program 4032 in the storage medium 403. When the computer program 4032 is executed by the processor 402, the processor 402 can execute the complex form two-way binding method described above.
[0124] The network interface 405 is used to communicate with other devices over the network. Figure 8 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present invention, and does not constitute a limitation on the computer device to which the solution of the present invention is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.
[0125] The processor 402 is used to run a computer program 4032 stored in the memory to implement the complex form two-way binding method as described above.
[0126] It should be understood that in the embodiment of the present invention, the processor 402 may be a central processing unit (CPU), and the processor 402 may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.
[0127] It can be understood by those skilled in the art that all or part of the processes in the method for implementing the above embodiment can be completed by instructing the relevant hardware through a computer program. The computer program includes program instructions, and the computer program can be stored in a storage medium, which is a computer-readable storage medium. The program instructions are executed by at least one processor in the computer system to implement the process steps of the embodiment of the above method.
[0128] Therefore, the present invention also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, wherein the computer program includes program instructions. When the program instructions are executed by a processor, the processor executes the complex form two-way binding method as described above.
[0129] The computer-readable storage medium may be a USB flash drive, a mobile hard disk, a read-only memory (ROM), a magnetic disk, or an optical disk, etc., which are computer-readable storage media that can store program codes.
[0130] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.
[0131] In the several embodiments provided by the present invention, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of each unit is only a logical function division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed.
[0132] The steps in the method of the embodiment of the present invention can be adjusted in order, combined and deleted according to actual needs. The units in the device of the embodiment of the present invention can be combined, divided and deleted according to actual needs. In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.
[0133] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, terminal, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention.
[0134] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed by the present invention, and these modifications or replacements should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be based on the protection scope of the claims.
Claims
1. A complex form two-way binding method, characterized in that: include: In response to the form data binding instruction, obtaining the to-be-processed form data corresponding to the form data binding instruction; The form data to be processed is configured as a global object, and a global function corresponding to the global object is configured; wherein the global function is a function of the component calling the corresponding data of the global object; If a page initialization instruction is detected, a configured component set is obtained, the global object and the global function are introduced into each configured component in the configured component set and recursively rendered to obtain a rendered component set; A bidirectional binding relationship is established between each rendered component of the rendered component set and a global object based on a preset binding instruction.
2. The method according to claim 1, characterized in that The step of configuring the to-be-processed form data as a global object and configuring a global function corresponding to the global object includes: Configuring the form data to be processed as a global object, and obtaining a global object access path corresponding to the global object; A global function corresponding to the global object is created, and the global object access path is saved as a pre-stored path of the global function.
3. The method according to claim 1, characterized in that The acquiring of the configured component set, introducing the global object and the global function into each configured component in the configured component set and performing recursive rendering to obtain a rendered component set, includes: Obtain a page entry component, and pass the global object and the global function into a first local variable in the page entry component; Recursively render each configured component in the configured component set based on the first local variable to obtain a rendered component set.
4. The method according to claim 3, characterized in that The recursive rendering of each configured component in the configured component set based on the first local variable to obtain a rendered component set includes: Obtaining the global object access path and global function included in the first local variable; Obtain a configured component that is a parent component in the configured component set, and render the global object access path and the global function to each configured component that is a parent component by using the first local variable; Based on the component tree structure and the preset recursive direction, each configured component as a parent component renders the global object access path and the global function to each configured component as a child component corresponding to the parent component to obtain the rendered component set.
5. The method according to claim 4, characterized in that In the step of rendering the global object access path and the global function to each configured component as a child component corresponding to the parent component based on the component tree structure and the preset recursive direction, for each configured component as a parent component, rendering the global object access path to each configured component corresponding to the child component corresponding to the parent component based on the component tree structure and the preset recursive direction includes: Recording the configured component as the parent component as the currently configured parent component, and acquiring a number of currently configured child components corresponding to the currently configured parent component based on the component tree structure traversal; The several currently configured child components receive and store the global object access path and the global function passed in by the currently configured parent component through the second local variable according to the preset recursive direction.
6. The method according to claim 5, characterized in that The step of establishing a two-way binding relationship between each rendered component of the rendered component set and a global object based on a preset binding instruction includes: Obtain a two-way data binding instruction corresponding to the preset binding instruction; A two-way binding relationship is established between the second local variable of each rendered component in the rendered component set and the global object based on the two-way data binding instruction.
7. The method according to claim 1, characterized in that After the step of establishing a two-way binding relationship between each rendered component of the rendered component set and a global object based on a preset binding instruction, the method further includes: Each rendered component included in the rendered component set obtains corresponding target form data from the to-be-processed form data based on component data requirement information, the global object access path and the global function.
8. A complex form two-way binding device, characterized in that: include: A to-be-processed form data acquisition unit, configured to, in response to a form data binding instruction, acquire the to-be-processed form data corresponding to the form data binding instruction; A global object configuration unit, configured to configure the to-be-processed form data as a global object, and to configure a global function corresponding to the global object; wherein the global function is a function for a component to call corresponding data of the global object; A recursive rendering unit, configured to, if a page initialization instruction is detected, obtain a configured component set, introduce the global object and the global function into each configured component in the configured component set, and perform recursive rendering to obtain a rendered component set; The two-way binding control unit is used to establish a two-way binding relationship between each rendered component of the rendered component set and a global object based on a preset binding instruction.
9. A computer device, characterized in that: The computer device includes a memory and a processor, the memory stores a computer program, and the processor implements the complex form two-way binding method as described in any one of claims 1-7 when executing the computer program.
10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the complex form two-way binding method according to any one of claims 1 to 7 can be implemented.