Two-way binding method, device, equipment and storage medium for form data

Abstract

The present invention relates to the technical field of web front-end and visualization, and discloses a two-way binding method, device, equipment and storage medium for form data. The method comprises: establishing a form basic database, and obtaining a form component based on the form basic database; when detecting that the initial data in the form component has changed, sending the change of the initial data to a preset data subscription program; sending a data update request to a preset data update program according to the change of the initial data; calling a data update function according to the data update request, and encapsulating the initial data into the data update function; and bidirectionally binding the corresponding instance of the form component based on the data update function. When submitting a form, this solution only needs to read the state of the parent component, which can realize the two-way binding of the form data, avoid the confusion of data management caused by multiple forms, achieve better rendering performance, and improve development efficiency.

Description

Technical Field

[0001] The present invention relates to the technical field of web front-end and visualization, and in particular to a two-way binding method, device, equipment and storage medium for form data. Background Art

[0002] With the development of front-end technology, React, Vue and other front-end technology frameworks have emerged. These front-end technology frameworks provide developers with more streamlined and efficient development tools, so that developers do not need to reinvent the wheel and use less code to implement more complex functions. However, with the development of technology, some new technical ideas are gradually accepted by people, such as the two-way data binding feature proposed by Vue. This feature combines the data model with the user-written interface. When the user modifies the interface, the data model can monitor the user's changes. When the user directly modifies the data model through code, the user interface will also make corresponding data refresh actions, reducing some of the work that developers need to do when the data model changes or the user interface changes.

[0003] However, this technology was proposed by the Vue framework, and the earlier React framework does not have this feature. Taking the most commonly used form component as an example, most React form designs are: obtain the form instance, then assign values ​​to the form through instance methods; obtain the user's modified data through the form instance and submit it to the backend. This approach has no obvious disadvantages when there is only a single form on the page, but when there are several forms on the page that need to set form values ​​at the same time or obtain the values ​​of all forms, this approach is very cumbersome. Summary of the invention

[0004] The main purpose of the present invention is to only read the state of the parent component when submitting a form, so as to realize two-way binding of form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0005] The first aspect of the present invention provides a two-way binding method for form data, comprising: establishing a form basic database, and obtaining form components based on the form basic database, wherein the data of the form components are initial data; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; according to the change in the initial data, a data update request is sent to a preset data update program; according to the data update request, a data update function is called, and the initial data is encapsulated into the data update function; based on the data update function, a corresponding instance of the form component is bidirectionally bound.

[0006] Optionally, in a first implementation method of the first aspect of the present invention, the establishment of a form basic database includes: entering a form identifier, a form name, a form category and a form description through a data structure; based on the format of the form identifier and preset column information, storing the form name, the form category and the form description in a preset database to obtain a form basic database.

[0007] Optionally, in a second implementation method of the first aspect of the present invention, before obtaining a form component based on the form basic database, it also includes: receiving a form component generation request carrying key dimension data, and obtaining a form template matching the key dimension data and dimension matching data of the form template from the form basic database according to the key dimension data; filling data into the form template according to the form template and the dimension matching data of the form template, respectively, to obtain an initial form component corresponding to the form template; rendering the initial form component according to user data to obtain a business scenario form corresponding to the initial form component, and determining the user's form according to the actual application scenario.

[0008] Optionally, in a third implementation method of the first aspect of the present invention, when a change is detected in the initial data in the form component, sending the change in the initial data to a preset data subscription program includes: when a change is detected in the initial data in the form component, sending the change to a verification program; the verification program determines whether there is a corresponding data subscription program in a preset data subscription list; if there is a corresponding data subscription program in the data subscription list, sending the change to the subscription program.

[0009] Optionally, in a fourth implementation manner of the first aspect of the present invention, obtaining a form template matching the key dimension data and dimension matching data of the form template from the form basic database according to the key dimension data includes: querying from a preset form basic database whether a form template containing the key dimension data is stored according to the key dimension data; if so, obtaining the form template containing the key dimension data and dimension matching data corresponding to the form template; if not, determining a superior and inferior list of dimensions corresponding to the key dimension data, and querying the form basic database level by level from bottom to top based on the order of dimensions in the superior and inferior list of dimensions whether a form template containing upper-level dimension data of the key dimension data is stored; if contained, obtaining the form template containing the upper-level dimension data and dimension matching data corresponding to the form template; if not contained, continuing the query until the form template containing the top-level dimension information corresponding to the key dimension data and the dimension matching data corresponding to the form template are queried.

[0010] Optionally, in a fifth implementation of the first aspect of the present invention, filling the form template with data according to the form template and the dimension matching data with the form template to obtain the initial form component corresponding to the form template includes: determining the names of each table item corresponding to the form template according to the dimension matching information corresponding to the form template; and filling the table item names into the form template to obtain the initial form component corresponding to the form template.

[0011] Optionally, in a sixth implementation method of the first aspect of the present invention, rendering the initial form component according to the user data to obtain a business scenario form corresponding to the initial form component, and determining the user's form according to the actual application scenario includes: according to each table item name included in the initial form component, determining the business table item data corresponding to each table item name from the user data; rendering each business table item data to the corresponding table item name in the initial form component, obtaining the business scenario form corresponding to the initial form component, and determining the user's form according to the actual application scenario.

[0012] The second aspect of the present invention provides a two-way binding device for form data, including: an establishment module, used to establish a form basic database, and obtain form components based on the form basic database, wherein the data of the form components are initial data; a first sending module, used to send the changes of the initial data to a preset data subscription program when a change is detected in the initial data in the form component; a second sending module, used to send a data update request to a preset data update program according to the change of the initial data; an encapsulation module, used to call a data update function according to the data update request, and encapsulate the initial data into the data update function; an update module, used to perform two-way binding on the corresponding instance of the form component based on the data update function.

[0013] Optionally, in a first implementation method of the second aspect of the present invention, the establishment module is specifically used to: enter the form identifier, form name, form category and form description through a data structure; based on the format of the form identifier and preset column information, store the form name, the form category and the form description in a preset database to obtain a form basic database.

[0014] Optionally, in a second implementation of the second aspect of the present invention, the two-way binding device for form data further includes: a receiving module, used to receive a form component generation request carrying key dimension data, and obtain a form template matching the key dimension data and dimension matching data of the form template from the form basic database according to the key dimension data; a filling module, used to fill the form template with data according to the form template and the dimension matching data of the form template, respectively, to obtain an initial form component corresponding to the form template; a rendering module, used to render the initial form component according to user data, to obtain a business scenario form corresponding to the initial form component, and determine the user's form according to the actual application scenario.

[0015] Optionally, in a third implementation method of the second aspect of the present invention, the first sending module is specifically used to: when a change is detected in the initial data in the form component, send the change to a verification program; the verification program determines whether there is a corresponding data subscription program in a preset data subscription list; if there is a corresponding data subscription program in the data subscription list, send the change to the subscription program.

[0016] Optionally, in a fourth implementation manner of the second aspect of the present invention, the receiving module is specifically used to: query from a preset form basic database whether a form template containing the key dimension data is stored according to the key dimension data; if so, obtain the form template containing the key dimension data and the dimension matching data corresponding to the form template; if not, determine the upper and lower dimension list corresponding to the key dimension data, and query the form basic database step by step from bottom to top based on the order of the dimensions in the upper and lower dimension list whether a form template containing the upper dimension data of the key dimension data is stored; if contained, obtain the form template containing the upper dimension data and the dimension matching information corresponding to the form template; if not contained, continue to query until the form template containing the top-level dimension information corresponding to the key dimension data and the dimension matching data corresponding to the form template are queried.

[0017] Optionally, in a fifth implementation of the second aspect of the present invention, the filling module includes: a determination unit, used to determine the names of each table item corresponding to the form template according to dimension matching information corresponding to the form template; and a filling unit, used to fill the table item names into the form template to obtain an initial form component corresponding to the form template.

[0018] Optionally, in a sixth implementation method of the second aspect of the present invention, the rendering module is specifically used to: determine the business table item data corresponding to each table item name from the user data according to the table item names included in the initial form component; render each business table item data to the corresponding table item name in the initial form component, obtain the business scenario form corresponding to the initial form component, and determine the user's form according to the actual application scenario.

[0019] A third aspect of the present invention provides a two-way binding device for form data, comprising: a memory and at least one processor, wherein instructions are stored in the memory, and the memory and the at least one processor are interconnected via a line;

[0020] The at least one processor calls the instructions in the memory to enable the two-way binding device of form data to execute each step of the above-mentioned two-way binding method of form data.

[0021] A fourth aspect of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores instructions, which, when executed on a computer, enable the computer to execute the various steps of the above-mentioned two-way binding method for form data.

[0022] In the technical solution provided by the present invention, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and a bidirectional binding is performed on the corresponding instance of the form component based on the data update function. This solution only needs to read the state of the parent component when submitting a form, which can realize bidirectional binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 A schematic diagram of a first embodiment of a two-way binding method for form data provided by the present invention;

[0024] Figure 2 A schematic diagram of a second embodiment of the two-way binding method for form data provided by the present invention;

[0025] Figure 3 A schematic diagram of a third embodiment of the two-way binding method for form data provided by the present invention;

[0026] Figure 4 A schematic diagram of a fourth embodiment of the two-way binding method for form data provided by the present invention;

[0027] Figure 5 A schematic diagram of a fifth embodiment of the two-way binding method for form data provided by the present invention;

[0028] Figure 6 A schematic diagram of a first embodiment of a two-way binding device for form data provided by the present invention;

[0029] Figure 7 A schematic diagram of a second embodiment of the bidirectional binding device for form data provided by the present invention;

[0030] Figure 8 A schematic diagram of an embodiment of a two-way binding device for form data provided by the present invention. DETAILED DESCRIPTION

[0031] The embodiment of the present invention provides a two-way binding method, device, equipment and storage medium for form data. In the technical solution of the present invention, firstly, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and the corresponding instance of the form component is two-way bound based on the data update function. This solution only needs to read the state of the parent component when submitting the form, which can realize two-way binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0032] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "including" or "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0033] For ease of understanding, the specific process of the embodiment of the present invention is described below. Figure 1 The first embodiment of the two-way binding method of form data in the embodiment of the present invention includes:

[0034] 101. Establish a form basic database, and obtain form components based on the form basic database, wherein the data of the form components is initial data;

[0035] In this embodiment, the form identifier, form name, form classification and form description are entered in the form of a data structure. The data structure is a way for a computer to store and organize data. A data structure refers to a collection of data elements that have one or more specific relationships with each other. Generally, a carefully selected data structure can bring higher operation or storage efficiency. Data structures are often related to efficient retrieval algorithms and indexing techniques.

[0036] Specifically, the column information of each table in the form information table is stored in the form of form identification and column information. In other words, in order to realize the personalized modification and configuration of the functional module, it is necessary to establish a form basic database, whose form identification, form name, form classification and form description are entered into the system through the data structure, and the column information of each table in the form information table is stored in the form of form identification and column information, and the functional module is bound to the menu. Binding the menu means associating the form with the user menu. The user can open the corresponding form by clicking the menu on the front end. After the binding menu is completed, the form can be enabled.

[0037] In this embodiment, the form is mainly responsible for the data collection function in the web page. A form has three basic components: Form tag: This contains the URL of the CGI program used to process the form data and the method of submitting the data to the server. Form field: Contains text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio buttons, drop-down selection boxes and file upload boxes. Form buttons: Includes submit buttons, reset buttons and general buttons; used to transmit data to the CGI script on the server or cancel input. Form buttons can also be used to control other processing tasks that define processing scripts.

[0038] 102. When a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program;

[0039] In this embodiment, the initial data in the form component is constructed by inheriting the entity base class, the listener and the subscriber are constructed by inheriting the moduleview base class, and are encapsulated in the initial data in the form component. The significance of this is that each group of initial data and corresponding views in the form component are encapsulated with a group of listeners and subscribers, and each group of listeners and subscribers is only responsible for listening to and modifying the initial data and corresponding views in the form component at the location;

[0040] Since a subclass can have the properties and methods of the parent class by inheriting the base class object, the embodiment provided in the present application pre-builds the entity base class and the moduleview base class to facilitate the reuse of entity data, listening programs and subscription programs.

[0041] 103. Sending a data update request to a preset data update program according to changes in the initial data;

[0042] In this embodiment, when the subscription program receives a change in the initial data in the form component monitored by the listening program, the subscription program sends a view update instruction to the updating program according to the change.

[0043] Specifically, the data table is an important object of the database and the basic unit for storing data. After the table structure is created, it involves inserting new data into the table, as well as modifying and deleting existing data. This is data update, which can be achieved using the "Object Explorer" and T-SQL statements. In other words, data update is the process of replacing the corresponding old data items or records in the data file or database with new data items or records, which is achieved through deletion, modification, and re-insertion operations.

[0044] 104. Calling a data update function according to a data update request, and encapsulating the initial data into the data update function;

[0045] In this embodiment, the data update function is called according to the data update request, and the initial data is encapsulated into the data update function. In general, data encapsulation is to map the business data into the payload of a certain encapsulation protocol, and then fill the header of the corresponding protocol to form a data packet of the encapsulation protocol, and complete rate adaptation. When the data packet is transmitted between different devices using the network, in order to reliably and accurately send it to the destination and efficiently use the transmission resources (transmission equipment and transmission lines), the data packet must be split and packaged in advance, and the target address, local address, and some bytes for error correction are attached to the sent data packet. When the security and reliability are high, encryption processing is also required. These operations are called data encapsulation. The rules followed and negotiated by the communicating parties when processing the data packet are the protocol. Compared with mailing items, the data packet itself is like an item, and the encapsulation is like filling in various mailing information. The protocol is the regulation on how to fill in the information.

[0046] 105. Perform bidirectional binding on the corresponding instance of the form component based on the data update function.

[0047] In this embodiment, bidirectional binding is performed on the corresponding instance of the form component based on the data update function. The change event in the corresponding helper class is called; the user input value obtained in the change event is read; whether the user input value is legal is determined, and if legal, the user input value is set as the value attribute of the corresponding helper class; the corresponding event is looped out from the global event management queue, and the page modification method is directly traversed to realize the synchronous display of page data.

[0048] Specifically, the form data is managed by the state of the parent component. Multiple forms correspond to multiple states in the parent component. The example is the parent component state. this.state = {form1:{},form2:{}…}; The parent component requires the form component to pass a form data source form1, and a callback method after the form value changes, temporarily recorded as f1. This method is used to receive the new value of the form and update the state. f1(newform){this.setState({form1:newform})}; Encapsulate the required form content into a function or a class. This function or class needs to implement the name assignment callback of the form items, which is recorded as f2, and the monitoring of the change of the form value is recorded as f3. In f2, it is necessary to implement the binding of the props passed down by the parent element to the name of the form. When the props of the parent element change, the value of the name corresponding to the form form will also be updated. The role of f3 is to trigger this callback method when the content of the form is updated. Inside f3, f1 needs to be called to pass the updated value of the form upward, similar to f3(){f1(new formData)}.

[0049] In the embodiment of the present invention, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and a bidirectional binding is performed on the corresponding instance of the form component based on the data update function. This solution only needs to read the state of the parent component when submitting a form, which can realize bidirectional binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0050] See also Figure 2 The second embodiment of the two-way binding method of form data in the embodiment of the present invention includes:

[0051] 201. Receive a form component generation request carrying key dimension data, and obtain a form template matching the key dimension data and dimension matching data of the form template from a form basic database according to the key dimension data;

[0052] In this embodiment, the user data corresponding to the target user is the data related to the target user and the target business. For example, assuming that the target business is the auto insurance business, the user data corresponding to the target user is the vehicle type, license plate number, vehicle ticket data, etc. related to the auto insurance. The user data can be entered by the target user through the human-computer interaction interface, or it can be the user data sent by a terminal such as a mobile phone or computer of the target user.

[0053] Further, after obtaining the user data of the target user, the salesperson triggers a form generation request for the target user, and the form generation request includes key dimension data and the user data of the target user. The key dimension data may be the lowest-level dimension information in the dimension upper and lower lists corresponding to the target business.

[0054] In this embodiment, based on the key dimension data, it is queried whether a form template containing the key dimension data is stored in the form template database. If so, the form template containing the key dimension data and its corresponding dimension matching data are obtained. The dimension matching data includes the dimension upper and lower level lists corresponding to the form template and the dimension data corresponding to the dimension information at each level.

[0055] If the form template database does not store a form template containing key dimension data, obtain the dimension upper and lower levels list corresponding to the target business, determine the dimension upper and lower levels list as the dimension upper and lower levels list corresponding to the key dimension data, and query the form template database level by level from bottom to top in the order of the dimensions in the dimension upper and lower levels list to see if there is a form template containing the upper dimension information of the key dimension data stored in the form template database. If yes, obtain the form template containing the upper dimension information and the corresponding dimension matching data; if not, continue to query until the form template containing the top-level dimension information corresponding to the key dimension data and the corresponding dimension matching data are found.

[0056] Specifically, when it is determined that no form template containing key dimension data is stored in the form template database, the upper dimension information of the key dimension data is determined from the dimension upper and lower lists, and the form template database is queried whether the form template containing the upper dimension information is stored. If yes, the form template containing the upper dimension information is obtained; if not, the upper dimension information of the upper dimension information is determined from the dimension upper and lower lists, and the form template database is queried whether the form template containing the upper dimension information is stored, and the query is continued one level at a time until the top-level dimension information in the dimension upper and lower lists is queried, and the form template containing the top-level dimension information is obtained from the form template database.

[0057] 202. According to the form template and the dimension matching data with the form template, fill the form template with data respectively to obtain the initial form component corresponding to the form template;

[0058] In this embodiment, the data filling process for each obtained form template is the same, so here only the form template is used as an example to illustrate the data filling process. The form template is any form template in at least one form template that matches the key dimension data.

[0059] First, according to the dimension matching data corresponding to the form template, determine the names of the table items corresponding to the form template. The dimension matching data includes the dimension information of the table items corresponding to the form template. Fill the table item names in the form template to obtain the initial form corresponding to the form template. The initial form is a blank form that only contains the table item names, and the specific table item data corresponding to the table item names are not filled in.

[0060] For example, dimension matching data includes dimension information such as vehicle type, license plate number, vehicle ticket data, owner's name, etc. Then fill in the table item names such as vehicle type, license plate number, vehicle ticket data, owner's name, etc. in the form template.

[0061] For other obtained form templates, data of table item names are filled in respectively in the above manner to obtain initial form components corresponding to each other form template respectively.

[0062] 203. Render the initial form component according to the user data, obtain the business scenario form corresponding to the initial form component, and determine the user's form according to the actual application scenario;

[0063] In this embodiment, after obtaining one or more blank initial form components, data rendering is performed on each initial form according to the user data of the target user to obtain a business scenario form with complete information filled in.

[0064] Since the data rendering process of each initial form is the same, the embodiment of the present application only takes the initial form as an example to illustrate the data rendering process, and the initial table unit refers to any initial form in the initial forms corresponding to each form template.

[0065] According to the table item names included in the initial form, the business table item data corresponding to each table item name is determined from the user data, and each determined business table item data is rendered under the corresponding table item name in the initial form to obtain the business scenario form corresponding to the initial form.

[0066] Through the above data rendering process, the target user's corresponding information is filled in the blank initial form to obtain a business scenario form. For other initial forms, the corresponding information of the target user is rendered into other initial forms in the same way to obtain business scenario forms corresponding to each other initial form.

[0067] 204. Enter the form identifier, form name, form category and form description in a data structure manner;

[0068] In this embodiment, the form identifier, form name, form category and form description are entered in a data structure manner; and the column information of each table in the form information table is stored in the form of form identifier and column information.

[0069] Specifically, data structure is a collection of data elements with structural characteristics. It studies the logical structure and physical structure of data and the relationship between them, defines appropriate operations for this structure, designs corresponding algorithms, and ensures that the new structure obtained after these operations still maintains the original structure type. In short, data structure is a collection of data elements that have one or more specific relationships with each other, that is, a collection of data elements with "structure". "Structure" refers to the relationship between data elements, which is divided into logical structure and storage structure.

[0070] 205. Store the data of the form based on the format of the form identifier and the preset column information, store the form name, form category and form description in a preset database, and obtain a form basic database;

[0071] In this embodiment, in order to realize personalized modification and configuration of functional modules, it is necessary to establish a form basic database, and its form identification, form name, form classification and form description are entered into the system through data structure. The column information of each table in the form information table is stored in the form of form identification and column information, and the functional module is bound to the menu. Binding the menu means associating the form with the user menu. The user can open the corresponding form by clicking the menu on the front end. After the binding menu is completed, the form can be enabled.

[0072] In this way, the configuration method can solve problems encountered during project implementation and meet various needs. This simple setting work can be completely operated by the user. When the user's needs change, for example, when personalized modifications are required to the completed product function modules, a visual configuration of the solution form can be provided. Only the relevant modules need to be simply set up, and the form can be automatically drawn according to the user-defined results.

[0073] 206. When a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program;

[0074] 207. Sending a data update request to a preset data update program according to changes in the initial data;

[0075] 208. Calling a data update function according to the data update request, and encapsulating the initial data into the data update function;

[0076] 209. Perform bidirectional binding on the corresponding instance of the form component based on the data update function.

[0077] Steps 206-209 in this embodiment are similar to steps 102-105 in the first embodiment and are not described again here.

[0078] In the embodiment of the present invention, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and a bidirectional binding is performed on the corresponding instance of the form component based on the data update function. This solution only needs to read the state of the parent component when submitting a form, which can realize bidirectional binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0079] See also Figure 3 A third embodiment of the two-way binding method for form data in the embodiment of the present invention includes:

[0080] 301. Establish a form basic database, and obtain a form component based on the form basic database, wherein the data of the form component is initial data;

[0081] 302. When a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program;

[0082] 303. When a change is detected in the initial data of the form component, the change is sent to the verification program;

[0083] In this embodiment, when the listening program detects data changes, it needs to notify the subscribing program, which requires an intermediate medium, the verification program, which is actually an array used to collect the subscribing program. When the data changes, it triggers a notification and then calls an update method of the subscribing program.

[0084] 304. The verification program determines whether there is a corresponding data subscription program in the preset data subscription list;

[0085] In this embodiment, the verification program determines whether there is a subscription program in the subscription list; if so, when the verification program receives the change heard between the listening programs, the verification program determines whether there is a subscription program in the subscription list;

[0086] Optionally, when creating a subscription program, the subscription program may send an instruction to add the subscription program to the verification program, and the verification program adds the subscription program to the subscription list according to the instruction.

[0087] 305. If a corresponding data subscription program exists in the data subscription list, the change is sent to the subscription program;

[0088] In this embodiment, if there is a corresponding data subscription program in the data subscription list, the change is sent to the subscription program.

[0089] Specifically, the data subscription function is designed to help users obtain real-time incremental data from self-built MySQL and RDS MySQL. You can freely consume incremental data according to your own business needs, such as cache update strategy, asynchronous business decoupling, real-time synchronization of heterogeneous data sources, and real-time synchronization of data containing complex ETL, etc. The original data subscription function has a relatively high cost. In order to improve user experience and reduce usage costs, Alibaba Cloud has upgraded the data subscription function to realize multiple downstream repeated consumption of data.

[0090] 306. Calling a data update function according to the data update request, and encapsulating the initial data into the data update function;

[0091] 307. Perform bidirectional binding on the corresponding instance of the form component based on the data update function.

[0092] Steps 301 - 302 and 306 - 307 in this embodiment are similar to steps 101 - 102 and 104 - 105 in the first embodiment, and are not described again here.

[0093] In the embodiment of the present invention, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and a bidirectional binding is performed on the corresponding instance of the form component based on the data update function. This solution only needs to read the state of the parent component when submitting a form, which can realize bidirectional binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0094] See also Figure 4 The fourth embodiment of the two-way binding method of form data in the embodiment of the present invention includes:

[0095] 401. According to the key dimension data, query whether a form template containing the key dimension data is stored in the preset form basic database;

[0096] In this embodiment, based on the key dimension data, it is queried whether a form template containing the key dimension data is stored in the form template database. If so, the form template containing the key dimension data and its corresponding dimension matching data are obtained. The dimension matching data includes the dimension upper and lower level lists corresponding to the form template and the dimension data corresponding to the dimension information at each level.

[0097] 402. If yes, obtain the form template containing the key dimension data and the dimension matching data corresponding to the form template;

[0098] In this embodiment, if the form template database does not store a form template containing key dimension data, then obtain the dimension upper and lower level list corresponding to the target business, determine the dimension upper and lower level list as the dimension upper and lower level list corresponding to the key dimension data, and query the form template database level by level from bottom to top in the order of the dimensions in the dimension upper and lower level list to see whether there is a form template containing the upper dimension information of the key dimension data stored. If yes, obtain the form template containing the upper dimension information and the corresponding dimension matching data; if not, continue to query until the form template containing the top-level dimension information corresponding to the key dimension data and the corresponding dimension matching data are found.

[0099] 403. If not, determine the dimension upper and lower level lists corresponding to the key dimension data, and query the form basic database level by level based on the order of the dimensions in the dimension upper and lower level lists from bottom to top to see whether a form template containing the upper level dimension data of the key dimension data is stored;

[0100] In this embodiment, specifically, when it is determined that no form template containing key dimension data is stored in the form template database, the upper-level dimension information of the key dimension data is determined from the dimension upper-lower list, and it is queried whether a form template containing the upper-level dimension information is stored in the form template database.

[0101] 404. If yes, obtain the form template containing the upper-level dimension data and the dimension matching information corresponding to the form template;

[0102] In this embodiment, if yes, then the form template containing the previous-level dimension information is obtained; if not, then the previous-level dimension information of the previous-level dimension information is determined from the dimension upper and lower lists, and the form template database is further queried to see whether a form template containing this previous-level dimension information is stored. This process is continued level by level until the top-level dimension information in the dimension upper and lower lists is found, and then the form template containing the top-level dimension information is obtained from the form template database.

[0103] 405. If not, continue to query until the form template containing the top-level dimension information corresponding to the key dimension data and the dimension matching data corresponding to the form template are found;

[0104] In this embodiment, if not, the upper-level dimension information of the upper-level dimension information is determined from the dimension upper-level and lower-level lists, and the form template database is queried to see whether a form template containing this upper-level dimension information is stored. This process is continued upwards level by level until the top-level dimension information in the dimension upper-level and lower-level lists is found, and the form template containing the top-level dimension information is obtained from the form template database.

[0105] In the above manner, one or more form templates are queried from the form template database, and the dimension upper and lower level lists corresponding to each queried form template and the dimension data corresponding to each level of dimension information are obtained.

[0106] 406. According to the form template and the dimension matching data with the form template, the form template is respectively filled with data to obtain an initial form component corresponding to the form template;

[0107] 407. Render the initial form component according to the user data, obtain the business scenario form corresponding to the initial form component, and determine the user's form according to the actual application scenario;

[0108] 408. Establish a form basic database, and obtain form components based on the form basic database;

[0109] 409. When a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program;

[0110] 410. Sending a data update request to a preset data update program according to changes in the initial data;

[0111] 411. Calling a data update function according to a data update request, and encapsulating initial data into the data update function;

[0112] 412. Perform bidirectional binding on the corresponding instance of the form component based on the data update function.

[0113] Steps 406-407, 408-412 in this embodiment are similar to steps 202-203, 101-105 in the first embodiment, and are not described again here.

[0114] In the embodiment of the present invention, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and a bidirectional binding is performed on the corresponding instance of the form component based on the data update function. This solution only needs to read the state of the parent component when submitting a form, which can realize bidirectional binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0115] See also Figure 5 The fifth embodiment of the two-way binding method of form data in the embodiment of the present invention includes:

[0116] 501. Receive a form component generation request carrying key dimension data, and obtain a form template matching the key dimension data and dimension matching data of the form template from a form basic database according to the key dimension data;

[0117] 502. Determine the names of each table item corresponding to the form template according to the dimension matching information corresponding to the form template;

[0118] In this embodiment, the data filling process for each obtained form template is the same, so here only the first form template is used as an example to illustrate the data filling process. The first form template is any form template of at least one form template that matches the key dimension data.

[0119] First, according to the dimension matching data corresponding to the first form template, the names of the table items corresponding to the first form template are determined.

[0120] 503. Fill the table item name in the form template to obtain the initial form component corresponding to the form template;

[0121] In this embodiment, the dimension information included in the dimension matching data is the name of each table item corresponding to the first form template. Each table item name is filled in the first form template to obtain an initial form corresponding to the first form template. The initial form is a blank form that only contains the table item name and does not fill in the specific table item data corresponding to the table item name.

[0122] For example, the dimension matching data includes dimension information such as vehicle type, license plate number, vehicle ticket data, owner's name, etc. Then fill in the table item names such as vehicle type, license plate number, vehicle ticket data, owner's name, etc. in the first form template. For other obtained form templates, fill in the data of the table item names in the above manner, and obtain the initial form components corresponding to each other form template.

[0123] 504. According to the table item names included in the initial form component, the business table item data corresponding to each table item name is determined from the user data;

[0124] In this embodiment, according to the names of the various table items included in the initial form component, the business table item data corresponding to each table item name is determined from the user data. After obtaining one or more blank initial forms, data is rendered for each initial form according to the user data of the target user to obtain a business form with complete information. Since the data rendering process of each initial form component is the same, this embodiment only takes the initial form component as an example to illustrate the data rendering process, and an initial table unit is any initial form in the initial form corresponding to each form template.

[0125] 505. Render each business item data to the corresponding item name in the initial form component, obtain the business scenario form corresponding to the initial form component, and determine the user's form according to the actual application scenario;

[0126] In this embodiment, according to each item name included in the initial form, the business item data corresponding to each item name is determined from the user data, and each determined business item data is rendered under the corresponding item name in the initial form to obtain the business form corresponding to the initial form.

[0127] For example, the initial form includes the table items of owner name, vehicle type, license plate number, and vehicle ticket data. The owner name "Wang", vehicle type "Sedan", license plate number "xxxxx", and vehicle ticket data "Running a red light once" are obtained from the user data. Then "Wang" is rendered into the cell corresponding to the owner name in the initial form, "Sedan" is rendered into the cell corresponding to the vehicle type in the initial form, "xxxxx" is rendered into the cell corresponding to the license plate number in the initial form, and "Running a red light once" is rendered into the cell corresponding to the vehicle ticket data in the initial form.

[0128] Through the above data rendering process, the target user's corresponding information is filled in the blank initial form to obtain a business form. For other initial forms, the corresponding information of the target user is rendered into other initial forms in the same way to obtain business forms corresponding to each other initial form.

[0129] 506. Establish a form basic database, and obtain form components based on the form basic database;

[0130] 507. When a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program;

[0131] 508. Sending a data update request to a preset data update program according to the change of the initial data;

[0132] 509. Calling a data update function according to the data update request, and encapsulating the initial data into the data update function;

[0133] 510. Perform bidirectional binding on the corresponding instance of the form component based on the data update function.

[0134] Steps 506-510 in this embodiment are similar to steps 101-105 in the first embodiment and will not be described in detail here.

[0135] In an embodiment of the present invention, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and a bidirectional binding is performed on the corresponding instance of the form component based on the data update function. This solution only needs to read the state of the parent component when submitting a form, which can realize bidirectional binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0136] The above describes the bidirectional binding method of form data in the embodiment of the present invention. The following describes the bidirectional binding device of form data in the embodiment of the present invention. Figure 6 The first embodiment of the two-way binding device for form data in the embodiment of the present invention includes:

[0137] Establishing module 601, used to establish a form basic database, and obtain form components based on the form basic database, wherein the data of the form components are initial data;

[0138] A first sending module 602 is used to send the change of the initial data to a preset data subscription program when detecting that the initial data in the form component has changed;

[0139] A second sending module 603, configured to send a data update request to a preset data update program according to a change of the initial data;

[0140] The encapsulation module 604 is used to call the data update function according to the data update request and encapsulate the initial data into the data update function;

[0141] The updating module 605 is used to perform bidirectional binding on the corresponding instance of the form component based on the data updating function.

[0142] In the embodiment of the present invention, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and a bidirectional binding is performed on the corresponding instance of the form component based on the data update function. This solution only needs to read the state of the parent component when submitting a form, which can realize bidirectional binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0143] See also Figure 7 , a second embodiment of the bidirectional binding device for form data in an embodiment of the present invention, the bidirectional binding device for form data specifically comprises:

[0144] Establishing module 601, used to establish a form basic database, and obtain form components based on the form basic database, wherein the data of the form components are initial data;

[0145] A first sending module 602 is used to send the change of the initial data to a preset data subscription program when detecting that the initial data in the form component has changed;

[0146] A second sending module 603, configured to send a data update request to a preset data update program according to a change of the initial data;

[0147] The encapsulation module 604 is used to call the data update function according to the data update request and encapsulate the initial data into the data update function;

[0148] The updating module 605 is used to perform bidirectional binding on the corresponding instance of the form component based on the data updating function.

[0149] In this embodiment, the establishment module 601 is specifically used for:

[0150] Enter the form ID, form name, form category and form description in a data structure manner;

[0151] Based on the form identifier and the format of the preset column information, the form name, the form category and the form description are stored in a preset database to obtain a form basic database.

[0152] In this embodiment, the two-way binding device of the form data further includes:

[0153] A receiving module 606 is used to receive a form component generation request carrying key dimension data, and acquire, according to the key dimension data, a form template matching the key dimension data and dimension matching data of the form template from the form basic database;

[0154] A filling module 607 is used to fill the form template with data according to the form template and the dimension matching data of the form template, so as to obtain an initial form component corresponding to the form template;

[0155] The rendering module 608 is used to render the initial form component according to the user data, obtain the business scenario form corresponding to the initial form component, and determine the user's form according to the actual application scenario.

[0156] In this embodiment, the first sending module 602 is specifically used for:

[0157] When a change is detected in the initial data of the form component, the change is sent to the verification program;

[0158] The verification program determines whether there is a corresponding data subscription program in the preset data subscription list;

[0159] If there is a corresponding data subscription program in the data subscription list, the change is sent to the subscription program.

[0160] In this embodiment, the receiving module 606 is specifically used for:

[0161] According to the key dimension data, querying from a preset form basic database whether a form template containing the key dimension data is stored;

[0162] If yes, obtaining a form template containing the key dimension data and dimension matching data corresponding to the form template;

[0163] If not, determine the dimension upper and lower levels list corresponding to the key dimension data, and query the form basic database level by level based on the order of the dimensions in the dimension upper and lower levels list from bottom to top to see whether a form template containing the upper level dimension data of the key dimension data is stored;

[0164] If yes, obtaining a form template including the upper-level dimension data and dimension matching information corresponding to the form template;

[0165] If not, continue to query until a form template containing top-level dimension information corresponding to the key dimension data and dimension matching data corresponding to the form template are found.

[0166] In this embodiment, the filling module 607 includes:

[0167] The determining unit 6071 is used to determine the names of each table item corresponding to the form template according to the dimension matching information corresponding to the form template;

[0168] The filling unit 6072 is used to fill the table item name into the form template to obtain an initial form component corresponding to the form template.

[0169] In this embodiment, the rendering module 608 is specifically used for:

[0170] According to each table item name included in the initial form component, determining the business table item data corresponding to each table item name from the user data;

[0171] Render each business item data to the corresponding item name in the initial form component, obtain the business scenario form corresponding to the initial form component, and determine the user's form according to the actual application scenario.

[0172] In the embodiment of the present invention, a form basic database is established, and a form component is obtained based on the form basic database; when a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; a data update request is sent to a preset data update program according to the change in the initial data; a data update function is called according to the data update request, and the initial data is encapsulated into the data update function; and a bidirectional binding is performed on the corresponding instance of the form component based on the data update function. This solution only needs to read the state of the parent component when submitting a form, which can realize bidirectional binding of the form data, avoid data management confusion caused by multiple forms, achieve better rendering performance, and improve development efficiency.

[0173] above Figure 6 and Figure 7The bidirectional binding device for form data in the embodiment of the present invention is described in detail from the perspective of modular functional entities. The bidirectional binding device for form data in the embodiment of the present invention is described in detail from the perspective of hardware processing.

[0174] Figure 8 1 is a schematic diagram of the structure of a two-way binding device for form data provided in an embodiment of the present invention. The two-way binding device 800 for form data may have relatively large differences due to different configurations or performances, and may include one or more processors (central processing units, CPU) 810 (for example, one or more processors) and a memory 820, and one or more storage media 830 (for example, one or more mass storage devices) storing application programs 833 or data 832. Among them, the memory 820 and the storage medium 830 may be short-term storage or permanent storage. The program stored in the storage medium 830 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations in the two-way binding device 800 for form data. Furthermore, the processor 810 may be configured to communicate with the storage medium 830, and execute a series of instruction operations in the storage medium 830 on the two-way binding device 800 for form data to implement the steps of the two-way binding method for form data provided in the above-mentioned method embodiments.

[0175] The two-way binding device 800 for form data may also include one or more power supplies 840, one or more wired or wireless network interfaces 850, one or more input and output interfaces 860, and / or one or more operating systems 831, such as Windows Serve, Mac OS X, Unix, Linux, FreeBSD, etc. It will be appreciated by those skilled in the art that Figure 8 The illustrated two-way binding device structure for form data does not constitute a limitation on the two-way binding device for form data provided in the present application, and may include more or fewer components than illustrated, or a combination of certain components, or a different arrangement of components.

[0176] The present invention also provides a computer-readable storage medium, which may be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium. Instructions are stored in the computer-readable storage medium. When the instructions are executed on a computer, the computer executes the steps of the above-mentioned two-way binding method for form data.

[0177] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0178] 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 computer-readable 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. The computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program codes.

[0179] As described above, the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features thereof may be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A two-way binding method for form data, characterized in that: The two-way binding method of the form data includes: Establishing a form basic database, and acquiring form components based on the form basic database, wherein the data of the form components are initial data; When a change in the initial data in the form component is detected, the change in the initial data is sent to a preset data subscription program; Sending a data update request to a preset data update program according to changes in the initial data; Calling a data update function according to the data update request, and encapsulating the initial data into the data update function; Perform bidirectional binding on the corresponding instance of the form component based on the data update function; The bidirectional binding of the corresponding instance of the form component based on the data update function includes: calling the change event in the corresponding helper class; reading the user input value obtained in the change event; judging whether the user input value is legal, and if legal, setting the user input value as the value attribute of the corresponding helper class; looping through the corresponding events from the global event management queue, and directly traversing and executing the page modification method to realize the synchronous display of page data; wherein the form data is managed by the state of the parent component, and the state of a form corresponding to the parent component is represented as this.state={form:{}}; the parent component includes a form component passing a form data source form and a table The callback method after the single value name changes is temporarily recorded as f1. This method is used to receive the new value newform of the data source and update the state; the required form content is encapsulated into a function; this function implements the name assignment callback of the form and is recorded as f2, and the monitoring of the form value change of the form is recorded as f3; in f2, the props of the parent element itself are bound to the name of the form. When the props of the parent element change, the name corresponding to the form will also be updated accordingly; the role of f3 is to trigger this callback method when the content of the form is updated, and inside f3, f1 is called to pass the updated value of the form upward.

2. The two-way binding method of form data according to claim 1, characterized in that: The establishment of the form basic database includes: Enter the form ID, form name, form category and form description in a data structure manner; Based on the form identifier and the format of the preset column information, the form name, the form category and the form description are stored in a preset database to obtain a form basic database.

3. The two-way binding method of form data according to claim 1, characterized in that: Before obtaining the form component based on the form basic database, the method further includes: receiving a form component generation request carrying key dimension data, and acquiring, according to the key dimension data, a form template matching the key dimension data and dimension matching data of the form template from the form basic database; According to the form template and the dimension matching data of the form template, the form template is respectively filled with data to obtain an initial form component corresponding to the form template; The initial form component is rendered according to the user data to obtain a business scenario form corresponding to the initial form component, and the user's form is determined according to the actual application scenario.

4. The two-way binding method of form data according to claim 1, characterized in that: When detecting that the initial data in the form component has changed, sending the change of the initial data to the preset data subscription program includes: When a change is detected in the initial data of the form component, the change is sent to the verification program; The verification program determines whether there is a corresponding data subscription program in the preset data subscription list; If there is a corresponding data subscription program in the data subscription list, the change is sent to the subscription program.

5. The two-way binding method of form data according to claim 3, characterized in that: The acquiring, according to the key dimension data, from the form basic database a form template matching the key dimension data and dimension matching data of the form template comprises: According to the key dimension data, querying from a preset form basic database whether a form template containing the key dimension data is stored; If yes, obtaining a form template containing the key dimension data and dimension matching data corresponding to the form template; If not, determine the dimension upper and lower levels list corresponding to the key dimension data, and query the form basic database level by level based on the order of the dimensions in the dimension upper and lower levels list from bottom to top to see whether a form template containing the upper level dimension data of the key dimension data is stored; If yes, then obtaining a form template containing the upper-level dimension data and dimension matching information corresponding to the form template; If not, continue to query until a form template containing top-level dimension information corresponding to the key dimension data and dimension matching data corresponding to the form template are found.

6. The two-way binding method of form data according to claim 3, characterized in that: The step of filling the form template with data according to the form template and the dimension matching data of the form template to obtain the initial form component corresponding to the form template includes: Determine the names of the table items corresponding to the form template according to the dimension matching information corresponding to the form template; Fill the table item name into the form template to obtain an initial form component corresponding to the form template.

7. The two-way binding method of form data according to claim 3, characterized in that: The rendering of the initial form component according to the user data to obtain a business scenario form corresponding to the initial form component, and determining the user's form according to the actual application scenario includes: According to each table item name included in the initial form component, determining the business table item data corresponding to each table item name from the user data; Render each business item data to the corresponding item name in the initial form component, obtain the business scenario form corresponding to the initial form component, and determine the user's form according to the actual application scenario.

8. A two-way binding device for form data, characterized in that: The two-way binding device of the form data comprises: An establishment module is used to establish a form basic database and obtain form components based on the form basic database, wherein the data of the form components are initial data; A first sending module, configured to send the change of the initial data to a preset data subscription program when detecting that the initial data in the form component has changed; A second sending module, used for sending a data update request to a preset data update program according to the change of the initial data; An encapsulation module, used for calling a data update function according to the data update request, and encapsulating the initial data into the data update function; An update module, used for bidirectionally binding the corresponding instance of the form component based on the data update function; The bidirectional binding of the corresponding instance of the form component based on the data update function includes: calling the change event in the corresponding helper class; reading the user input value obtained in the change event; judging whether the user input value is legal, and if legal, setting the user input value as the value attribute of the corresponding helper class; looping through the corresponding events from the global event management queue, and directly traversing and executing the page modification method to realize the synchronous display of page data; wherein the form data is managed by the state of the parent component, and the state of a form corresponding to the parent component is represented as this.state={form:{}}; the parent component includes a form component passing a form data source form and a table The callback method after the single value name changes is temporarily recorded as f1. This method is used to receive the new value newform of the data source and update the state; the required form content is encapsulated into a function; this function implements the name assignment callback of the form and is recorded as f2, and the monitoring of the form value change of the form is recorded as f3; in f2, the props of the parent element itself are bound to the name of the form. When the props of the parent element change, the name corresponding to the form will also be updated accordingly; the role of f3 is to trigger this callback method when the content of the form is updated, and inside f3, f1 is called to pass the updated value of the form upward.

9. A two-way binding device for form data, characterized in that: The two-way binding device for form data comprises: a memory and at least one processor, the memory stores instructions, and the memory and the at least one processor are interconnected via a line; The at least one processor calls the instructions in the memory to enable the two-way binding device for form data to perform each step of the two-way binding method for form data according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, each step of the two-way binding method for form data according to any one of claims 1 to 7 is implemented.

Images