A method, system, computer device and medium for dynamic form automatic update

Abstract

This invention discloses a method, system, computer device, and medium for automatically updating dynamic forms. One embodiment of the method, applied to a browser, includes: sending a resource request instruction to a front-end server in response to a form initiation operation by the user, and obtaining resources from the front-end server; parsing and executing the resources, triggering a form engine to obtain form metadata; setting an event listener function based on the form metadata and generating dynamic form code; running the dynamic form code to present a visual dynamic form and triggering the event listener function; modifying the form metadata and generating an editing trigger signal in response to a form editing operation by the user, the event listener function listening to and transmitting the editing trigger signal to the front-end server, and the front-end server calling the data interface of the back-end server to modify the form metadata stored in the database. This embodiment can dynamically update the form metadata stored in the database through the event listener function, and has practical application value.

Description

Technical Field

[0001] This invention relates to the field of Internet technology, and in particular to a method, system, computer storage medium, and computer device for automatic updating of dynamic forms. Background Technology

[0002] In current technology, the application of dynamic forms is becoming increasingly popular. However, the development process of traditional dynamic forms has problems such as unclear requirements and easy changes in requirements, which leads to extensive modifications to the form code developed in the early stage, resulting in increased workload and extended development period.

[0003] Therefore, how to achieve automatic updates of dynamic forms has become an urgent problem to be solved. Summary of the Invention

[0004] To address at least one of the aforementioned problems, a first embodiment of the present invention provides a method for automatically updating dynamic forms, applied in a browser, comprising:

[0005] In response to a form initiation operation on the user's end, a resource request instruction is sent to the front-end server, and resources are obtained from the front-end server;

[0006] The resource is parsed and executed, triggering the form engine to obtain the first form metadata. The first form metadata is the second form metadata stored in the database, which is read by the form engine requesting the front-end server and the front-end server calling the data interface of the back-end server when the browser executes the resource and triggers the form engine. The second form metadata is cached in the browser. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0007] Set an event listener function based on the first form metadata and generate dynamic form code;

[0008] Running the dynamic form code renders a visual dynamic form and triggers the event listener function.

[0009] In response to a form editing operation by the user, the first form metadata is modified and an editing trigger signal is generated. The event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database.

[0010] In one specific embodiment, the step of setting the event listener function based on the first form metadata and generating dynamic form code further includes:

[0011] Set the event listener function according to the data structure of the first form metadata;

[0012] Dynamic form code is generated based on the data structure of the first form metadata.

[0013] In one specific embodiment, setting the event listener function based on the data structure of the first form metadata further includes:

[0014] The data hierarchy of the first form metadata is divided according to a preset element structure, which includes parent elements and nested child elements. The first form metadata includes at least one parent element.

[0015] The event listener function is set on the parent element. The event listener function responds to the browser running the dynamic form code and transmits the edit trigger signal generated by the browser in response to the user's form editing operation to the front-end server.

[0016] In one specific embodiment, generating dynamic form code based on the data structure of the first form metadata further includes:

[0017] Based on the structured data of the first form metadata, it traverses the objects it includes and the key-value pairs contained in those objects, and generates the corresponding dynamic form code.

[0018] In one specific embodiment, the edit trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation. The step of modifying the first form metadata and generating the edit trigger signal in response to the user's form editing operation, and the event listener function listening to and transmitting the edit trigger signal to the front-end server, further includes:

[0019] The event listener function listens for the edit trigger signal and caches the structured data edit package of the edit trigger signal in the browser. It then sends all the structured data edit packages within the predetermined interval to the front-end server at predetermined intervals. The front-end server then calls the data interface of the back-end server to modify the second form metadata stored in the database.

[0020] In one specific embodiment, the structured data editing package includes:

[0021] The first structured data includes a first edit key-value pair for representing a first form editing operation. The first form editing operation is for the user to modify the value of an existing key-value pair of an existing object of the first form metadata on the visual dynamic form presented by the browser. The first edit key-value pair includes a first content key-value pair of the modified attribute and / or value, and a first coordinate key-value pair representing the coordinate position of the first content key-value pair.

[0022] or

[0023] The second structured data includes a second edit key-value pair, used to characterize a second form editing operation. The second form editing operation is for the user to add a key-value pair of an existing object of the first form metadata to the visual dynamic form presented by the browser, as well as the attributes and values ​​of the key-value pair. The second edit key-value pair includes the newly added second content key-value pair and a second coordinate key-value pair characterizing the coordinate position of the second content key-value pair.

[0024] or

[0025] The third structured data includes a third edit key-value pair, used to represent a third form editing operation. The third form editing operation is for the user to add an object of the first form metadata, at least one key-value pair of the object, and the attributes and values ​​of the key-value pair to the visual dynamic form presented by the browser. The third edit key-value pair includes the newly added third content key-value pair and a third coordinate key-value pair representing the coordinate position of the third content key-value pair. The third content key-value pair includes nested sub-content key-value pairs, and the third coordinate key-value pair includes nested sub-coordinate key-value pairs corresponding to each sub-content key-value pair.

[0026] In one specific embodiment, the structured data editing package is digitally signed and asymmetric encrypted using a pre-set encryption function.

[0027] In one specific embodiment, after the event listener function listens for and transmits the edit trigger signal to the front-end server in response to a form editing operation by the user, the method further includes:

[0028] Use pre-defined callback functions to perform data statistics and output the statistical data.

[0029] In one specific embodiment, the dynamic form includes one or more of the following: a text box, a multiline text box, a password box, a hidden field, a checkbox, a radio button, a file upload box, and a drop-down selection box.

[0030] The second embodiment of the present invention provides a method for automatic updating of dynamic forms, applied to a front-end server, including:

[0031] In response to a resource request instruction sent by the browser, the stored resources are sent to the browser so that the browser can parse and execute the resources and trigger the form engine;

[0032] In response to the request from the form engine, the backend server's data interface is invoked to read the second form metadata stored in the database and send it to the browser, so that the form engine obtains the first form metadata and stores it in the browser, sets an event listener function according to the first form metadata and generates dynamic form code, so that the browser runs the dynamic form code to display a visual dynamic form and trigger the event listener function. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0033] In response to the received edit trigger signal, the backend server's data interface is invoked to modify the second form metadata stored in the database. The edit trigger signal is generated by the browser in response to the user's form editing operation and is listened to and transmitted by the event listener function.

[0034] The third embodiment of the present invention provides a method for automatic updating of dynamic forms, applied to a backend server, including:

[0035] In response to a call from the front-end server, the system uses its data interface connected to the database to read the second form metadata stored in the database and transmits it to the front-end server. The front-end server then transmits the metadata to the browser and caches it as the first form metadata. This allows the browser's form engine to set an event listener function based on the first form metadata and generate dynamic form code. The browser then runs the dynamic form code to display a visual dynamic form and triggers the event listener function. The second form metadata is structured data, including at least one object. Each object includes at least one key-value pair, and each key-value pair includes an attribute and a value.

[0036] In response to the call from the front-end server, the data interface connecting the front-end server to the database is used to modify the second form metadata stored in the database according to the modified first form metadata output by the browser. The modified first form metadata is modified by the browser in response to the form editing operation of the user and generates an editing trigger signal, which is listened to by the event listener function and transmitted to the front-end server.

[0037] The fourth embodiment of the present invention provides a method for automatically updating dynamic forms, applied to a database, including:

[0038] In response to a data request from the backend server's data interface, the stored second form metadata is output, so that the backend server transmits the second table unit data to the frontend server and then to the browser via the frontend server, where it is cached as first form metadata. This allows the browser to obtain and cache the first form metadata, and the form engine triggered by the browser sets an event listener function and generates dynamic form code based on the first form metadata. This allows the browser to run the dynamic form code, render a visual dynamic form, and trigger the event listener function. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0039] In response to an update request from the data interface of the backend server, the stored second form metadata is updated according to the modified first form metadata sent by the backend server. The modified first form metadata is modified by the browser in response to the form editing operation of the user and generates an editing trigger signal, which is listened to by the event listener function and transmitted to the frontend server, and then transmitted to the backend server via the frontend server.

[0040] The fifth embodiment of the present invention provides a method for automatically updating dynamic forms, applied to a user terminal, including:

[0041] The browser is triggered based on the input form, causing it to send a resource request instruction to the front-end server, obtain resources from the front-end server, parse and execute the resources, and trigger the form engine to obtain first form metadata. The form engine then sets an event listener function based on the first form metadata and generates dynamic form code, which the browser then runs to display a visual dynamic form and triggers the event listener function. The first form metadata is second form metadata stored in the database, which is retrieved by the browser when it executes the resource to trigger the form engine, by the form engine when it requests the front-end server, and by the front-end server when it calls the data interface of the back-end server. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0042] The browser is triggered based on the input form editing operation, so that the browser modifies the first form metadata and generates an editing trigger signal. The event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to update the second form metadata stored in the database according to the modified first form metadata.

[0043] The sixth embodiment of the present invention provides a dynamic form automatic update system, including a user terminal, a browser, a front-end server, a back-end server, and a database, wherein the browser is configured as follows:

[0044] In response to a form initiation operation on the user's end, a resource request instruction is sent to the front-end server, and resources are obtained from the front-end server;

[0045] The resource is parsed and executed, triggering the form engine to obtain the first form metadata. The first form metadata is the second form metadata stored in the database, which is read by the form engine requesting the front-end server and the front-end server calling the data interface of the back-end server when the browser executes the resource and triggers the form engine. The second form metadata is cached in the browser. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0046] Set an event listener function based on the first form metadata and generate dynamic form code;

[0047] Running the dynamic form code renders a visual dynamic form and triggers the event listener function.

[0048] In response to a form editing operation by the user, the first form metadata is modified and an editing trigger signal is generated. The event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database.

[0049] The seventh embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon.

[0050] When the program is executed by the processor, it implements the method described in the first embodiment;

[0051] or

[0052] When the program is executed by the processor, it implements the method described in the second embodiment;

[0053] or

[0054] When the program is executed by the processor, it implements the method described in the third embodiment;

[0055] or

[0056] When the program is executed by the processor, it implements the method described in the fourth embodiment;

[0057] or

[0058] When the program is executed by the processor, it implements the method described in the fifth embodiment.

[0059] The eighth embodiment of the present invention provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor.

[0060] When the processor executes the program, it implements the method as described in the first embodiment;

[0061] or

[0062] When the processor executes the program, it implements the method as described in the second embodiment;

[0063] or

[0064] When the processor executes the program, it implements the method as described in the third embodiment;

[0065] or

[0066] When the processor executes the program, it implements the method as described in the fourth embodiment;

[0067] or

[0068] When the processor executes the program, it implements the method described in the fifth embodiment.

[0069] The beneficial effects of this invention are as follows:

[0070] This invention addresses existing problems by providing a method, system, computer device, and medium for automatic updating of dynamic forms. It utilizes an event listener function to monitor editing trigger signals generated by the browser in response to user form editing operations. Based on these signals, the front-end and back-end servers update the form metadata stored in the database, achieving automatic mapping and updating of dynamic forms. This overcomes the problems in existing technologies, effectively improves the application flexibility of dynamic forms, increases development efficiency, reduces development costs, and has broad application prospects. Attached Figure Description

[0071] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0072] Figure 1 A flowchart illustrating an embodiment of the dynamic form automatic update method of the present invention is shown;

[0073] Figure 2 This diagram illustrates a structural block diagram of a dynamic form automatic update system according to an embodiment of the present invention.

[0074] Figure 3 An interactive swimlane diagram of the dynamic form automatic update method according to an embodiment of the present invention is shown;

[0075] Figure 4 A flowchart illustrating an embodiment of the dynamic form automatic update method of the present invention is shown.

[0076] Figure 5 This diagram illustrates the structure of the event listener function and form metadata according to an embodiment of the present invention.

[0077] Figure 6 A schematic diagram of a structured data editing package according to an embodiment of the present invention is shown;

[0078] Figures 7a-7l A schematic diagram illustrating the developer mode of a dynamic form according to another embodiment of the present invention;

[0079] Figure 8 A flowchart illustrating another embodiment of the dynamic form automatic update method of the present invention is shown;

[0080] Figure 9 A flowchart illustrating another embodiment of the dynamic form automatic update method of the present invention is shown;

[0081] Figure 10 A flowchart illustrating another embodiment of the dynamic form automatic update method of the present invention is shown;

[0082] Figure 11 A flowchart illustrating another embodiment of the dynamic form automatic update method of the present invention is shown;

[0083] Figure 12 This diagram illustrates a structural block diagram of a dynamic form automatic update system according to another embodiment of the present invention;

[0084] Figure 13 A schematic diagram of the structure of a computer device according to another embodiment of the present invention is shown. Detailed Implementation

[0085] To more clearly illustrate the present invention, the following description, in conjunction with preferred embodiments and accompanying drawings, further explains the invention. Similar components in the drawings are indicated by the same reference numerals. Those skilled in the art should understand that the specific description below is illustrative rather than restrictive and should not be construed as limiting the scope of protection of the present invention.

[0086] like Figure 1 As shown, one embodiment of the present invention provides a method for automatically updating dynamic forms, applied in a browser, including:

[0087] In response to a form initiation operation on the user's end, a resource request instruction is sent to the front-end server, and resources are obtained from the front-end server;

[0088] The resource is parsed and executed, triggering the form engine to obtain the first form metadata. The first form metadata is the second form metadata stored in the database, which is read by the form engine requesting the front-end server and the front-end server calling the data interface of the back-end server when the browser executes the resource and triggers the form engine. The second form metadata is cached in the browser. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0089] Set an event listener function based on the first form metadata and generate dynamic form code;

[0090] Running the dynamic form code renders a visual dynamic form and triggers the event listener function.

[0091] In response to a form editing operation by the user, the first form metadata is modified and an editing trigger signal is generated. The event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database.

[0092] In this embodiment, as Figure 12 As shown, the form engine is the core technology for realizing automatic updates of dynamic forms. The form engine includes a visual editor and a dynamic form framework. The visual editor presents a visual data structure based on the hierarchical relationship of the structured data to realize visual operations on the structured data. The dynamic form framework includes multiple functions and can call and execute the functions to realize automatic updates of dynamic forms.

[0093] It is worth noting that the form engine may also include other components, such as visual components. This application does not specifically limit this, and those skilled in the art should select appropriate components according to the actual application situation, which will not be elaborated here.

[0094] In this embodiment, the browser responds to a form initiation operation input by the user to obtain resources from the front-end server, parses and executes the resources, triggers the form engine to obtain first form metadata, and the form engine sets an event listener function based on the first form metadata and generates dynamic form code. The browser runs the dynamic form code to present a visual dynamic form and triggers the event listener function. In response to a form editing operation by the user, the browser modifies the first form metadata and generates an editing trigger signal. The set event listener function listens for and forwards the editing trigger signal to the front-end server. The front-end server and the back-end server update the form metadata stored in the database to achieve automatic mapping and updating of the dynamic form. This overcomes the problems existing in the prior art, effectively improves the application flexibility of dynamic forms, increases development efficiency, reduces development costs, and has broad application prospects.

[0095] In a specific embodiment, such as Figure 2 The diagram shows a dynamic form auto-update system, comprising a client, browser, front-end server, back-end server, and database. The client can be a computer, laptop, tablet, smartphone, or other browser-enabled device. Users can launch the browser through the client and access the dynamic form by entering the corresponding Internet standard resource address (URL) in the browser. They can then modify the dynamic form through form editing operations, including modifying and adding elements. The browser is an HTML5-enabled browser capable of recognizing and visually displaying the dynamic form's mapping. The front-end server is a high-performance HTTP and reverse proxy web server, Nginx, which calls the back-end server via the Hypertext Transfer Protocol (HTTP) interface to transmit data. The back-end server is a Spring Boot Java back-end service deployed on a Linux system, which calls the database via the JDBC interface to transmit data. The database is a relational database used to store the form metadata of the dynamic form.

[0096] It is worth noting that this application does not impose specific limitations on the hardware structure of the front-end server, back-end server, and database. They can be independent hardware or different parts based on the same hardware. Those skilled in the art should select an appropriate hardware structure according to the actual application situation, which will not be elaborated here.

[0097] like Figure 1-4 The workflow of a dynamic form auto-update system is explained in detail below:

[0098] First, in response to the form initiation operation on the user's end, the browser sends a resource request instruction to the front-end server and obtains the resource from the front-end server.

[0099] Specifically, such as Figure 3 As shown,

[0100] S1. The client responds to the user's form input and triggers the browser.

[0101] In this embodiment, the user launches a browser through a client and accesses the dynamic form by entering the URL corresponding to the dynamic form's Internet standard resource address. Specifically, the browser is triggered based on the URL address. That is, the browser is triggered by the user's input form.

[0102] S2. The browser sends a resource request instruction to the front-end server.

[0103] In this embodiment, the browser sends a resource request instruction to the front-end server based on the received URL address, requesting resources stored on the front-end server. The resources include static resources (HTML text) and dynamic resources (JS files).

[0104] It is worth noting that before the browser responds to the user's form initiation operation by sending a resource request instruction to the front-end server and obtaining resources from the front-end server, the browser accesses the dynamic form through the front-end server, back-end server, and database based on the dynamic form's URL, and stores the static resource HTML text and dynamic resource JS file of the dynamic form in the front-end server.

[0105] S3. The front-end server returns resources to the browser.

[0106] In this embodiment, the front-end server sends the stored resources, including static HTML text and dynamic JS files, to the browser.

[0107] Second, the browser parses and executes the resource, triggers the form engine to obtain the first form metadata. The first form metadata is the second form metadata stored in the database, which is read by the browser executing the resource, triggering the form engine, requesting the front-end server, and then the front-end server calling the data interface of the back-end server. It is also cached in the browser.

[0108] Specifically, such as Figure 3 As shown,

[0109] S4. The browser parses and executes resources and triggers the form engine.

[0110] In this embodiment, the browser parses and executes the dynamic resource JS file in the resources, and at the same time triggers the form engine to perform automatic mapping of the dynamic form through the form engine.

[0111] S5. The form engine's dynamic form framework sends a request to the front-end server to obtain the initial form metadata.

[0112] In this embodiment, the triggered form engine uses the form engine's dynamic form framework to send a request to the front-end server, which then calls the back-end server to retrieve the form metadata stored in the database.

[0113] S6. The front-end server uses the first API call to call the back-end server.

[0114] In this embodiment, as Figure 4 As shown, the front-end server is a front-end web server. The front-end server communicates with the back-end server through a first API call interface, which is the Hypertext Transfer Protocol (HTTP). Specifically, the front-end server sends HTTP messages to the back-end server through the first API call interface, including the HTTP URL corresponding to the dynamic form. That is, in response to a request from the form engine's dynamic form framework, the front-end server calls the back-end server's data interface to read the second form metadata stored in the database.

[0115] S7. The backend server uses the second API call to retrieve the second form metadata from the database.

[0116] In this embodiment, the backend server is a backend application server that communicates with the database through a second calling interface. This second calling interface is JDBC (Java Database Connectivity), used to communicate with the database, including requesting second form metadata corresponding to the dynamic form stored in the database—that is, the data address stored in the database corresponding to the URL address of the dynamic form. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. In other words, in response to the call from the frontend server, the backend server uses its data interface connected to the database to read the second form metadata stored in the database.

[0117] S8. The database returns the second form metadata to the backend server.

[0118] In this embodiment, the database is a relational database that stores the metadata of the dynamic form. This metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. The metadata represents the dynamic form through the multiple key-value pairs it includes; that is, it describes the object through the attributes and values ​​of the structured data. In other words, the structured data, also known as row data, is data logically expressed and implemented using a two-dimensional table structure, strictly adhering to data format and length specifications, and is mainly stored and managed through a relational database. Specifically, the database outputs the stored second form metadata in response to data requests from the backend server's data interface.

[0119] It is worth noting that the dynamic form can be a one-dimensional form, i.e., an object form, or a multi-dimensional form, such as a single row being an object form. This application does not impose specific limitations on this, and those skilled in the art should select an appropriate dynamic form based on actual application needs, which will not be elaborated further here.

[0120] like Figure 4 In step 1, the database uses the JDBC interface between the backend application server and the database to transmit the data of the second table cell corresponding to the stored dynamic form to the backend application server.

[0121] S9. The backend server returns the first form metadata to the frontend server.

[0122] In this embodiment, the backend server processes the received second form metadata, for example, by structuring the second form metadata to form first form metadata that the frontend server can recognize. That is, the backend server converts the second form metadata into structured first form metadata and transmits it to the frontend server.

[0123] like Figure 4 In step 2, as shown, the backend application server transmits the first form metadata using the API interface with the frontend web server. Specifically, the first form metadata is the description metadata (MD) of the dynamic form shown in the diagram. For example, a specific key-value pair includes:

[0124]

[0125] Here, fontFamily is the attribute of this key-value pair, with a value of "normal", representing a dropdown list "select" with the label "font family" and a default value of "normal". The dropdown list's options are "_Properties.fontFamily".

[0126] S10. The front-end server returns the first form metadata to the browser.

[0127] In this embodiment, the front-end server further returns the first form metadata to the browser and caches it in the browser.

[0128] Third, set an event listener function based on the first form metadata and generate dynamic form code. Run the dynamic form code to present a visual dynamic form and trigger the event listener function.

[0129] Specifically, such as Figure 3 As shown,

[0130] S11. The form engine's dynamic form framework sets an event listener function based on the first form metadata and generates dynamic form code. The browser runs the dynamic form code to present a visual dynamic form and triggers the event listener function.

[0131] In this embodiment, on the one hand, the event listener function is set up and dynamic form code is generated through the form engine; on the other hand, the dynamic form code is run by the browser to present a visual dynamic form and trigger the event listener function at the same time.

[0132] In an optional embodiment, the step of setting an event listener function and generating dynamic form code based on the first form metadata further includes: setting an event listener function based on the data structure of the first form metadata; and generating dynamic form code based on the data structure of the first form metadata.

[0133] In this embodiment, a delegation form structure is created using a form engine, such as... Figure 5 As shown, the structure includes a parent node, multiple child nodes belonging to the parent node, an event listener function (i.e., an event function) set on the parent node, and a trigger event set on the parent node.

[0134] According to this setting, when a user makes a modification to the visual dynamic form displayed in the browser in response to the user's form editing operation, the modification operation generates a trigger event ①. The event listener function set on the parent node captures the trigger event ②, and the target child node executes the event ③, thus completing the specific process of triggering the event, listening to the event, and updating the child node.

[0135] In this embodiment, the data hierarchy of the first form metadata is divided according to a preset element structure, which includes parent elements and nested child elements. The first form metadata includes at least one parent element. The event listener function is set on the parent element. The event listener function is triggered when the browser runs the dynamic form code, and transmits the edit trigger signal generated by the browser in response to the form editing operation of the user to the front-end server.

[0136] The parent element is... Figure 5 The parent node in the text, the child element is... Figure 5 The child nodes in the first form metadata include at least one node, which includes at least one key-value pair of at least one object, that is, the node is the parent element of the first form metadata.

[0137] Specifically, in this embodiment, the form engine generates an edit trigger signal based on the form editing operation received by the browser (i.e., Figure 5 The event is triggered in the parent element (i.e., the event is set in the parent element). Figure 5 The event listener function on the parent node (i.e.) Figure 5 The event function in the file listens for the edit trigger signal and modifies the cached first form metadata (i.e., Figure 5 The target child node executes an event, thereby modifying the first form metadata. At the same time, the edit trigger signal is transmitted to the front-end server. The HTTP interface between the front-end server and the back-end server, and the JDBC interface between the back-end server and the database are used to update the second form metadata stored in the database.

[0138] For example, using a form engine to set event listener functions, where, <div id＝”main_content”> " is the parent node, " <div id＝”main_content”> The expression `$('#main_content').delegate('input,select','change',function(e))` sets the event listener function on the parent node.

[0139]

[0140] It is worth noting that, compared to the existing technology where setting event listener functions on each element leads to complex interaction logic and problems such as confusion, conflict, and redundancy, this embodiment sets the event listener functions on the parent element, with the parent node uniformly managing events. This has the advantage of clear logic, while improving software readability and maintainability and reducing program complexity.

[0141] While the form engine sets the event listener function, the form engine generates dynamic form code based on the data structure of the first form metadata. Furthermore, it iterates through the structured data of the first form metadata, including the objects and key-value pairs contained in those objects, and generates corresponding dynamic form code. The dynamic form code is rendered as a visual dynamic form by the browser at runtime, triggering the event listener function.

[0142] In this embodiment, the form engine's dynamic form framework generates DOM code based on the first form metadata. Specifically, the DOM code, i.e., the dynamic form code, is generated based on the data structure of the first form metadata. For example, if the dynamic form is a one-dimensional form, the form data is directly traversed, specifically, the form object and its key-value pairs (attributes and values) are traversed to generate the corresponding dynamic form code. If it is a multi-dimensional form, the dimensions are traversed first, and then the objects in each dimension and their key-value pairs (attributes and values) are traversed to achieve traversal of the entire dynamic form.

[0143] Specifically, the metadata of the first form is traversed.

[0144]

[0145] Specifically, such as Figure 4 As shown, the form engine's dynamic form framework converts a key-value pair in the first metadata into DOM code, that is, DOM code with form tags and form fields, thereby forming code text that corresponds one-to-one with each key-value pair in the first metadata, so that the browser can recognize and render a visual dynamic form.

[0146] For example, the form engine's dynamic form framework can be used to convert the following key-value pairs into the following DOM text.

[0147]

[0148] In an optional embodiment, the dynamic form includes one or more of the following: a text box, a multiline text box, a password box, a hidden field, a checkbox, a radio button, a file upload box, and a drop-down selection box.

[0149] Specifically, the structured data form styles for dynamic forms should include at least the following styles:

[0150] 1) Text box: A text box is a form object that allows visitors to enter content themselves. It is usually used to fill in a single word or a short answer, such as name, address, etc.

[0151] Code format <input name＝”属性”value＝”值”>

[0152] 2) Multiline text box: A form object that allows visitors to enter content themselves, usually used to fill in longer content.

[0153] Code format <textarea name＝”属性”> value< / textarea>

[0154] 3) Password field: This is a special text field used to enter a password. When a visitor enters text, the text is replaced with asterisks or other symbols, and the entered text is hidden.

[0155] Code format <input type＝”password”name＝”属性”value＝”值”>

[0156] 4) Hidden Fields: Hidden fields are invisible elements used to collect or send information. They are not visible to visitors to the webpage. When a form is submitted, the hidden field sends the information to the server using the name and value defined during setup.

[0157] Code format <input type＝”hidden”name＝”属性”value＝”值”>

[0158] 5) Checkboxes: Checkboxes allow more than one option to be selected in a list of options. Each checkbox is an independent element and must have a unique name.

[0159] Code format <input type＝”checkbox”name＝”属性”value＝”值”>

[0160] 6) Radio buttons: Radio buttons are used when visitors need to select a single answer from a set of options.

[0161] Code format <input type＝”radio”name＝”属性”value＝”值”>

[0162] 7) File Upload Box: This box requires users to upload their own files. It looks similar to other text fields, except that it also includes a browse button. Visitors can select the file to upload by entering its path or clicking the browse button.

[0163] Code format <input type＝”file”name＝”属性”value＝”值”>

[0164] It is worth noting that the file upload box itself is structured data. Its key-value pair attribute is the file upload box, and the value is the file path. Although the uploaded file, such as an image, video, or audio, is unstructured data, the file is stored in the file system / tmp / upload / file / ****.png (mp4). During the automatic update of the dynamic form, there is no need to update the uploaded file.

[0165] 8) Drop-down selection box: The drop-down selection box allows users to set multiple options in a limited space.

[0166] Code format <select name＝”属性”> <option value＝”值”>< / option> <option value="value">< / select>

[0167] The above form styles are only used to illustrate the specific styles included in this application and are not limited thereto.

[0168] It is worth noting that this application only describes the specific implementation of the application by generating DOM code through the form dynamic framework of the form engine. This application does not make specific limitations in this regard. Form engine technology can be used, or dynamic form code can be generated by accessing remote devices, cloud devices, etc. through a browser. For example, dynamic form code can be generated by using a distributed server SaaS. Those skilled in the art should select an appropriate form engine or device to generate dynamic form code according to the actual application requirements, which will not be elaborated here.

[0169] Furthermore, the browser runs the dynamic form code, renders the visual dynamic form, and triggers event listener functions.

[0170] In this embodiment, as Figure 4 As shown, the browser displays a visual dynamic form, such as dropdown menus labeled with font family and text boxes labeled with font size; at the same time, it triggers event listener functions, which listen for editing trigger signals generated by the browser in real time and transmit them to the front-end server.

[0171] Fourth, the browser responds to the user's form editing operation by modifying the first form metadata and generating an editing trigger signal. The event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database. The editing trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation.

[0172] Specifically, such as Figure 3 As shown,

[0173] S12. The client updates the dynamic form in response to user-inputted form editing operations.

[0174] S13. The browser modifies the first form metadata according to the form editing operation and generates an editing trigger signal.

[0175] S14. The event listener function running in the browser sends the listened-for editing trigger signal to the front-end server.

[0176] In this embodiment, the browser is triggered by the user's input form editing operation. Specifically, as shown... Figure 4Step 5, as shown, modifies the first form metadata cached in the browser based on the editing operation on the browser interface. This means that changes to the dynamic form's attribute values ​​are automatically mapped to the browser's cached form metadata. Simultaneously, an editing trigger signal is generated. This signal includes a pre-set structured data editing package, which characterizes the data changes caused by the form editing operation. In other words, the dynamic form is updated by modifying its form editing operation on the browser interface.

[0177] In an optional embodiment, after the first form metadata is modified in response to a form editing operation on the user end and an editing trigger signal is generated, and the event listener function listens for and transmits the editing trigger signal to the front-end server, the method further includes: performing data statistics using a pre-set callback function and outputting statistical data.

[0178] In this embodiment, a pre-set callback function can also be used to perform data statistics operations and output statistical data based on the data statistics operations, thereby improving the practical performance of dynamic forms and having practical application value.

[0179] Specifically, the browser modifies the first form metadata based on the form editing operation and calls the callback function based on the generated editing trigger signal to realize the statistical function of the dynamic form.

[0180]

[0181] In an optional embodiment, the structured data editing package includes: first structured data, including first edit key-value pairs for characterizing a first form editing operation, wherein the first form editing operation is for the user to modify the value of an existing key-value pair of an existing object of the first form metadata on the visual dynamic form presented by the browser, and the first edit key-value pair includes a first content key-value pair of the modified attribute and / or the value, and a first coordinate key-value pair characterizing the coordinate position of the first content key-value pair.

[0182] In this embodiment, the structured data including the first structured form data is a way to modify the value of an existing key-value pair of an existing object, i.e., an update method for updating a dynamic form.

[0183] In an optional embodiment, the structured data editing package includes: second structured data, including second editing key-value pairs for characterizing a second form editing operation, wherein the second form editing operation is for the user to add a key-value pair of an existing object of the first form metadata to the visual dynamic form presented by the browser, as well as the attributes and values ​​of the key-value pair, and the second editing key-value pair includes the newly added second content key-value pair and a second coordinate key-value pair characterizing the coordinate position of the second content key-value pair.

[0184] In this embodiment, the structured data including the second structured data is the value of a key-value pair of an existing object, such as adding a key-value pair and its corresponding coordinate value, thereby updating the dynamic form. This is one method of updating the dynamic form.

[0185] In another optional embodiment, the structured data editing package includes: third structured data, including third editing key-value pairs, used to characterize a third form editing operation, wherein the third form editing operation is for the user to add an object of the first form metadata to the visual dynamic form presented by the browser, as well as at least one key-value pair of the object and the attributes and values ​​of the key-value pair; the third editing key-value pair includes the newly added third content key-value pair and a third coordinate key-value pair characterizing the coordinate position of the third content key-value pair; the third content key-value pair includes nested sub-content key-value pairs; and the third coordinate key-value pair includes nested sub-coordinate key-value pairs corresponding to each sub-content key-value pair.

[0186] In this embodiment, the structured data including the third structure data consists of adding a new object and the values ​​of each key-value pair included in that object. For example, adding an object, including each key-value pair and the coordinate values ​​corresponding to each key-value pair, thereby updating the dynamic form. This is one way to update a dynamic form.

[0187] In a specific example, such as Figure 6 As shown, two new objects are added. The first object contains four key-value pairs: the first key-value pair has the property "name" and the value "Zhang San"; the second key-value pair has the property "age" and the value "12"; the third key-value pair has the property "gender" and the value "0"; and the fourth key-value pair is a hidden key-value pair with the property "coordinates" and the value "0". The second object is similar to the first object and also contains four key-value pairs: the first key-value pair has the property "name" and the value "Li Si"; the second key-value pair has the property "age" and the value "15"; the third key-value pair has the property "gender" and the value "1"; and the fourth key-value pair is a hidden key-value pair with the property "coordinates" and the value "1".

[0188] Considering the issues of tamper-proofing and data security of dynamic forms, in an optional embodiment, the structured data editing package is further digitally signed and asymmetric encrypted using a pre-set encryption function.

[0189] In this embodiment, the structured data editing package is digitally signed by an encryption function set in the dynamic form framework of the form engine to prevent the first form metadata from being tampered with; at the same time, the structured data editing package is asymmetricly encrypted by an encryption function set in the dynamic form framework of the form engine to prevent plaintext leakage; thereby effectively improving the anti-tampering performance and data security performance of the dynamic form.

[0190] S15. The front-end server uses the first API call to call the back-end server.

[0191] In this embodiment, the communication is similar to that between the aforementioned front-end server and back-end server, such as... Figure 4 In step 7, the front-end server uses the HTTP interface corresponding to the back-end server to call the back-end server and transmits the editing trigger signal, including the structured data editing package, to the back-end server.

[0192] S16. The backend server uses the second API call to access the database.

[0193] In this embodiment, the communication is similar to that between the backend server and the database, as described above. Figure 4 In step 8, the backend server and database communicate using the backend server's JDBC interface to transmit edit trigger signals, including structured data editing packages, to the database.

[0194] S17. Modify the second form metadata stored in the database.

[0195] In this embodiment, the database modifies the second form data according to the edit trigger signal including the structured data editing package, thereby completing the automatic mapping update of the dynamic form.

[0196] Thus, the dynamic form auto-update method described above has automatically updated the second form metadata stored in the database, achieving the update of the second form metadata stored in the database.

[0197] Considering the update efficiency of dynamic forms, in an optional embodiment, the event listener function listens for the edit trigger signal and caches the structured data edit package of the edit trigger signal in the browser, sends all the structured data edit packages within the predetermined interval to the front-end server at predetermined intervals, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database.

[0198] In this embodiment, based on the event listener function set on the parent element, further optimization and integration can be performed, such as processing multiple triggered events in a unified manner. Specifically, a preset interval time for unified event processing is set, and multiple triggered events within a processing cycle are processed uniformly using this preset interval time as the processing period, thereby optimizing the network data interaction strategy on the parent element.

[0199] Specifically, the event listener function listens for the edit trigger signal and caches the structured data edit package of the edit trigger signal in the browser. After a preset interval, all the structured data edit packages cached within the interval are sent to the front-end server in a unified manner, thereby merging multiple form editing operations into one for processing. That is, by caching multiple trigger events locally in the browser, the update efficiency of browser-front-end server-back-end server-database is effectively improved, which can reduce bandwidth consumption and browser computing resource load pressure, thereby effectively improving transmission efficiency.

[0200] Specifically, the preset interval time is set to 10 seconds, and the save() function is called every 10 seconds to uniformly modify the updated content into the second form metadata in the database through the communication interface between the front-end server, the back-end server, and the database.

[0201]

[0202] In consideration of version control for dynamic forms, in an optional embodiment, the browser further includes a storage unit for storing historical data, which includes all structured data editing packages used in historical updates for data rollback.

[0203] In this embodiment, by storing a structured data editing package in the browser for each update, the rollback performance of form metadata for dynamic form data can be achieved. That is, by using the historical modification records stored locally in the browser, the historical versions of dynamic forms can be traced and recovered.

[0204] In a practical example, let's take a dynamic student information form in the education field as an example for detailed explanation. This dynamic form includes a basic form and a grade form. The basic form includes basic information such as student name, student ID, ID number, gender, and age. The grade form includes student name, student ID, ID number, Chinese language score, math score, and English score. Based on this dynamic form, it automatically updates according to the school's update needs.

[0205] Update requirement 1: Change the percentage-based system for Chinese, Math, and English scores in the grade sheet to an AE (Advanced Assessment) rating system.

[0206] Specific automatic update methods include:

[0207] Step 1: Respond to the user launching a browser on their computer and entering the URL address corresponding to the student dynamic form;

[0208] Step 2: The browser sends a resource request instruction to the front-end server and obtains the resource from the front-end server;

[0209] Step 3: The browser parses and executes the resource, triggers the form engine to request the front-end server, and calls the back-end server through the HTTP interface between the front-end server and the back-end server. Then, it reads the second form metadata of the student dynamic form stored in the database through the JDBC interface between the back-end server and the database. The back-end server performs structured processing to generate the first form metadata and transmits it to the front-end server. The front-end server then transmits it to the browser and caches it in the browser.

[0210] Step 4: The form engine sets event listener functions and generates dynamic form code based on the data structure of the first form metadata. Specifically, the form engine divides the parent element and nested child elements according to the data hierarchy of the first form metadata, and sets the event listener functions on the parent element. The form engine then traverses the structured data of the first form metadata, including the objects and the key-value pairs included in the objects, and generates the corresponding dynamic form code. The dynamic form code is then transmitted to the browser to present a visual dynamic form.

[0211] Step 5: The browser runs the dynamic form code to display the visual dynamic form and triggers the event listener function;

[0212] Step 6: In response to the user modifying the key-value pairs corresponding to the Chinese, Math and English scores on the browser page, modify the first form metadata and generate an edit trigger signal, so that the event listener function set in the parent node can listen to the edit trigger signal and transmit it to the front-end server;

[0213] Step 7: The front-end server calls the back-end server via an HTTP interface, and the back-end server modifies the second form metadata stored in the database, thereby enabling the modification of the student dynamic form.

[0214] Close your browser, restart it, and enter the URL address corresponding to the student dynamic form. The browser will display the updated student dynamic form, in which the Chinese, Math, and English scores in the grade form are AE level.

[0215] Update requirement 2: Add physical education scores to the report card.

[0216] Specific automatic update methods include:

[0217] Step 1: Respond to the user launching a browser on their computer and entering the URL address corresponding to the student dynamic form;

[0218] Step 2: The browser sends a resource request instruction to the front-end server and obtains the resource from the front-end server;

[0219] Step 3: The browser parses and executes the resource, triggers the form engine to request the front-end server, and calls the back-end server through the HTTP interface between the front-end server and the back-end server. Then, it reads the second form metadata of the student dynamic form stored in the database through the JDBC interface between the back-end server and the database. The back-end server performs structured processing to generate the first form metadata and transmits it to the front-end server. The front-end server then transmits it to the browser and caches it in the browser.

[0220] Step 4: The form engine sets event listener functions and generates dynamic form code based on the data structure of the first form metadata. Specifically, the form engine divides the parent element and nested child elements according to the data hierarchy of the first form metadata, and sets the event listener functions on the parent element. The form engine then traverses the structured data of the first form metadata, including the objects and the key-value pairs included in the objects, and generates the corresponding dynamic form code. The dynamic form code is then transmitted to the browser to present a visual dynamic form.

[0221] Step 5: The browser runs the dynamic form code to display the visual dynamic form and triggers the event listener function;

[0222] Step 6: In response to the user adding a sports score key-value pair to the browser page and the corresponding position of the sports score key-value pair, modify the first form metadata and generate an edit trigger signal, so that the event listener function set in the parent node can listen to the edit trigger signal and transmit it to the front-end server;

[0223] Step 7: The front-end server calls the back-end server via an HTTP interface, and the back-end server modifies the second form metadata stored in the database, thereby enabling the modification of the student dynamic form.

[0224] Close your browser, restart it, and enter the URL address corresponding to the student dynamic form. The browser will display the updated student dynamic form, which includes scores in Chinese, Mathematics, English, and Physical Education.

[0225] Update requirement 3: Create a new temperature monitoring form in the student dynamic form. This temperature monitoring form includes the student's name, student ID, ID number, date, and temperature.

[0226] Specific automatic update methods include:

[0227] Step 1: Respond to the user launching a browser on their computer and entering the URL address corresponding to the student dynamic form;

[0228] Step 2: The browser sends a resource request instruction to the front-end server and obtains the resource from the front-end server;

[0229] Step 3: The browser parses and executes the resource, triggers the form engine to request the front-end server, and calls the back-end server through the HTTP interface between the front-end server and the back-end server. Then, it reads the second form metadata of the student dynamic form stored in the database through the JDBC interface between the back-end server and the database. The back-end server performs structured processing to generate the first form metadata and transmits it to the front-end server. The front-end server then transmits it to the browser and caches it in the browser.

[0230] Step 4: The form engine sets event listener functions and generates dynamic form code based on the data structure of the first form metadata. Specifically, the form engine divides the parent element and nested child elements according to the data hierarchy of the first form metadata, and sets the event listener functions on the parent element. The form engine then traverses the structured data of the first form metadata, including the objects and the key-value pairs included in the objects, and generates the corresponding dynamic form code. The dynamic form code is then transmitted to the browser to present a visual dynamic form.

[0231] Step 5: The browser runs the dynamic form code to display the visual dynamic form and triggers the event listener function;

[0232] Step 6: In response to the user adding a body temperature monitoring form to the browser page, as well as multiple key-value pairs (student name, student ID, ID number, date, and body temperature) in the body temperature monitoring form and the corresponding positions of each key-value pair, modify the first form metadata and generate an edit trigger signal, so that the event listener function set in the parent node can listen to the edit trigger signal and transmit it to the front-end server;

[0233] Step 7: The front-end server calls the back-end server via an HTTP interface, and the back-end server modifies the second form metadata stored in the database, thereby enabling the modification of the student dynamic form.

[0234] Close your browser, restart it, and enter the URL address corresponding to the student dynamic form. The browser will display the updated student dynamic form, which includes a basic form, a grade form, and a temperature monitoring form. The temperature monitoring form includes the student's name, student ID, ID number, date, and temperature.

[0235] In this embodiment, three update methods are illustrated by updating requirement one, updating requirement two, and updating requirement three, which are only used to illustrate the specific implementation of this application. The specific update content is not specifically limited. Those skilled in the art should update the form according to the actual application requirements, with the automatic updating of dynamic forms as the design principle, which will not be elaborated here.

[0236] In another practical example, we will illustrate the automatic updating of a dynamic form with a line chart, which includes a base form and a chart-style form, such as... Figure 7b As shown, the basic form includes basic information such as the line chart name, width, height, and positioning relative to the left and top of the page; the chart style form includes the title, legend, tooltip, toolbar, color palette, coordinate system, x-axis, y-axis, chart series, etc. The title has hundreds of style attributes, including whether child elements are displayed, main title, main title style, subtitle, chart title style, horizontal alignment, vertical alignment, spacing between main and subtitles, and distance from the left side.

[0237] The chart style form is configured and updated through the line chart styles in the visualization editor. The chart series in the visualization editor contains multiple line series forms, each with over a hundred style attributes such as type, series name, edited graph, marker size, text labels, and line endpoint labels. Based on this dynamic form, it automatically updates according to the visualization needs of the line chart.

[0238] Update requirement 1: Change the width, height, and relative left position of the basic form from pixel values ​​(width: 600px, height: 400px, relative left position: 70px) to percentages (width: 30%, height: 30%, relative left position: 0%).

[0239] Specific automatic update methods include:

[0240] Step 1: Respond to the user launching a browser on their computer and entering the URL address corresponding to the dynamic form for the line chart;

[0241] Step 2: The browser sends a resource request instruction to the front-end server and obtains the resource from the front-end server;

[0242] Step 3: The browser parses and executes the resource, triggers the form engine to request the front-end server, and calls the back-end server through the HTTP interface between the front-end server and the back-end server. Then, it reads the second form metadata of the dynamic line chart form stored in the database through the JDBC interface between the back-end server and the database. The back-end server performs structured processing to generate the first form metadata and transmits it to the front-end server. The front-end server then transmits it to the browser and caches it in the browser.

[0243] Step 4: The form engine sets event listener functions and generates dynamic form code based on the data structure of the first form metadata. Specifically, the form engine divides the parent element and nested child elements according to the data hierarchy of the first form metadata, and sets the event listener functions on the parent element. The form engine then traverses the structured data of the first form metadata, including the objects and the key-value pairs included in the objects, and generates the corresponding dynamic form code. The dynamic form code is then transmitted to the browser to present a visual dynamic form.

[0244] Step 5: The browser runs the dynamic form code to display the visual dynamic form and triggers the event listener function;

[0245] Step 6: In response to the user modifying the height, width, and key-value pairs corresponding to the left position of the browser page, modify the first form metadata and generate an edit trigger signal, so that the event listener function set in the parent node can listen to the edit trigger signal and transmit it to the front-end server;

[0246] Step 7: The front-end server calls the back-end server via an HTTP interface, and the back-end server modifies the second form metadata stored in the database, thereby enabling the modification of the dynamic form of the line chart.

[0247] Step 8: Because the listener function sets a callback function for refreshing the line chart, the line chart is also displayed in the visualization editor with a width of 30%, a height of 30%, and a relative left position of 0%.

[0248] Close your browser, restart it, and enter the URL address corresponding to the dynamic line chart form. The browser will display the updated dynamic line chart form, where the width, height, and relative left position of the basic form are set to width: 30%, height: 30%, and relative left position of the page: 0%.

[0249] Update requirement 2: Add a color to the color palette list, for example, add purple.

[0250] Specific automatic update methods include:

[0251] Step 1: Respond to the user launching a browser on their computer and entering the URL address corresponding to the dynamic form for the line chart;

[0252] Step 2: The browser sends a resource request instruction to the front-end server and obtains the resource from the front-end server;

[0253] Step 3: The browser parses and executes the resource, triggers the form engine to request the front-end server, and calls the back-end server through the HTTP interface between the front-end server and the back-end server. Then, it reads the second form metadata of the student dynamic form stored in the database through the JDBC interface between the back-end server and the database. The back-end server performs structured processing to generate the first form metadata and transmits it to the front-end server. The front-end server then transmits it to the browser and caches it in the browser.

[0254] Step 4: The form engine sets event listener functions and generates dynamic form code based on the data structure of the first form metadata. Specifically, the form engine divides the parent element and nested child elements according to the data hierarchy of the first form metadata, and sets the event listener functions on the parent element. The form engine then traverses the structured data of the first form metadata, including the objects and the key-value pairs included in the objects, and generates the corresponding dynamic form code. The dynamic form code is then transmitted to the browser to present a visual dynamic form.

[0255] Step 5: The browser runs the dynamic form code to display the visual dynamic form and triggers the event listener function;

[0256] Step 6: In response to the user adding color palette key-value pairs to the browser page and the corresponding positions of the color palette key-value pairs, modify the first form metadata and generate an edit trigger signal, so that the event listener function set in the parent node can listen to the edit trigger signal and transmit it to the front-end server;

[0257] Step 7: The front-end server calls the back-end server via an HTTP interface, and the back-end server modifies the second form metadata stored in the database, thereby enabling the modification of the dynamic form of the line chart.

[0258] Step 8: Because the listener function sets a callback function for refreshing the line chart, the first line in the visualization editor changes from the default blue to purple.

[0259] Close your browser, restart it, and enter the URL address corresponding to the dynamic line chart form. The browser will then display an updated dynamic line chart form, in which purple is listed in the color palette.

[0260] Update Requirement 3: Create a new line chart series form in the dynamic form chart series of line charts. This series form includes more than 100 items such as type, series name, graphic of markers, size of markers, rotation angle of markers, text labels, line breakpoint labels, etc.

[0261] Specific automatic update methods include:

[0262] Step 1: Respond to the user launching a browser on their computer and entering the URL address corresponding to the dynamic form for the line chart;

[0263] Step 2: The browser sends a resource request instruction to the front-end server and obtains the resource from the front-end server;

[0264] Step 3: The browser parses and executes the resource, triggers the form engine to request the front-end server, and calls the back-end server through the HTTP interface between the front-end server and the back-end server. Then, it reads the second form metadata of the student dynamic form stored in the database through the JDBC interface between the back-end server and the database. The back-end server performs structured processing to generate the first form metadata and transmits it to the front-end server. The front-end server then transmits it to the browser and caches it in the browser.

[0265] Step 4: The form engine sets event listener functions and generates dynamic form code based on the data structure of the first form metadata. Specifically, the form engine divides the parent element and nested child elements according to the data hierarchy of the first form metadata, and sets the event listener functions on the parent element. The form engine then traverses the structured data of the first form metadata, including the objects and the key-value pairs included in the objects, and generates the corresponding dynamic form code. The dynamic form code is then transmitted to the browser to present a visual dynamic form.

[0266] Step 5: The browser runs the dynamic form code to display the visual dynamic form and triggers the event listener function;

[0267] Step 6: In response to the user adding a chart series form to the browser page, and the multiple key-value pairs in the chart series form (type, series name, graphic of the marker, size of the marker, rotation angle of the marker, text label, line breakpoint label, etc., more than a hundred items) and the corresponding positions of each key-value pair, modify the metadata of the first form and generate an edit trigger signal, so that the event listener function set in the parent node can listen to the edit trigger signal and transmit it to the front-end server.

[0268] Step 7: The front-end server calls the back-end server via an HTTP interface, and the back-end server modifies the second form metadata stored in the database, thereby enabling the modification of the dynamic form of the line chart.

[0269] Close your browser, restart it, and enter the URL for the dynamic line chart form. The browser will display the updated dynamic line chart form, which includes a basic form and chart style forms. The basic form includes basic information such as the line chart name, width, height, and relative positioning to the left and top of the page. The chart style forms include the title, legend, tooltip, toolbar, color palette, coordinate system, x-axis, y-axis, and chart series. The title has hundreds of style attributes, including whether child elements are displayed, main title, main title style, subtitle, chart title style, horizontal alignment, vertical alignment, main and subtitle spacing, and distance from the left side. The chart series contains multiple line series forms, which in turn include over a hundred items such as type, series name, editable graph, marker size, text labels, and line endpoint labels.

[0270] In this embodiment, three update methods are illustrated by updating requirement one, updating requirement two, and updating requirement three, which are only used to illustrate the specific implementation of this application. The specific update content is not specifically limited. Those skilled in the art should update the form according to the actual application requirements, with the automatic updating of dynamic forms as the design principle, which will not be elaborated here.

[0271] To further illustrate the dynamic form automatic form update method provided in this application, this example is traced using developer mode, such as... Figures 7a-7i As shown, for example, if the development device used is a computer, the F12 key can be used to track the browser's execution steps.

[0272] Create a new line chart series within the dynamic form chart series. Based on the visual dynamic form displayed in the browser, enter developer mode:

[0273] Step 1: As Figure 7a As shown, for example, after entering the dashboard page, click the "Configuration" button on a specific dashboard.

[0274] As shown in the figure, this interface displays several existing dynamic forms, such as dynamic form "4", "Bank_Bank Operation Data Analysis" and "test". You can directly edit the corresponding dynamic form visually by clicking on it; you can also search by the name of the dynamic form; or click "Create Visual Project" to create a new dynamic form.

[0275] In this example, select a dynamic form to create a new line chart series form.

[0276] Step 2: As Figure 7b As shown, enter the chart editor, click the line chart component, and the style editor corresponding to the chart component will appear on the right. Create the desired line chart through the style editor.

[0277] Step 3: As Figure 7c As shown, after editing through the style editor, click the Elements tab, then click the "Show" button to activate the DOM selection mode. After clicking this button, move the mouse to the chart component and confirm its selection, then click the left mouse button. The DOM source code of the chart component will be displayed in the code area at the bottom of the page. Specifically: Locate the chart component as shown in the image, and the DOM source code of the component will be displayed in the code area at the bottom of the page. Extract the component id = "assembly-1be27a23-cd2f-5c42-3948-1ec1686df2f2", where the part starting with "assembly-" is the chart component id.

[0278] Step 4: As Figure 7d As shown, based on the chart component ID obtained in the previous step, click the "console" tab and enter the command "$.dynamicObjects ['assembly-1be27a23-cd2f-5c42-3948-1ec1686df2f2']" in the command line to obtain the object of the chart component in the browser's memory.

[0279] Step 5: As Figure 7e As shown, based on the input execution command, the object content is displayed in the code area at the bottom of the page. Clicking the down arrow to the right of the object expands the object content. Here, md is the form metadata description md of the chart component; title is an attribute key-value pair object of the chart component, which corresponds to the title form in the style form on the right side of the page. Based on the above operations, you can clearly and intuitively locate each key-value pair of an object, as well as the attributes and values ​​of each key-value pair. Specifically, title is the key-value pair object.

[0280] Step 6: As Figure 7f As shown, clicking on the title expands the sub-structured data of that key-value pair object. Specifically, it locates the specific structured data of the title and finds the mapping relationship between this structured data and the form. For example, in the "show" key-value pair of the title object, the value of the attribute "Whether to display" is "No," which corresponds to the "Whether to display" radio button in the title form of the style form on the right side of the page; in the "text" key-value pair of the title object, the value of the attribute "Main title" is empty, which corresponds to the "Main title" text box in the title form of the style form on the right side of the page.

[0281] Step 7: As Figure 7g As shown, entering commands via the command line to modify structured data and reloading the form engine will regenerate the DOM.

[0282] like Figure 7h As shown, the specific modifications are as follows:

[0283] 1. Change the setting

Title - Show or Not

[0284] $.dynamicObjects['assembly-1be27a23-cd2f-5c42-3948-1ec1686df2f2'].md.attribute_deploy.title.value.show.value=true

[0285] 2. Change the title to 'Patent' by entering the following command in the command line:

[0286] $.dynamicObjects['assembly-1be27a23-cd2f-5c42-3948-1ec1686df2f2'].md.attribute_deploy.title.value.text.value='Patent'.

[0287] Correspondingly, a structured data editing package is generated based on this modification. This package includes an object—the title—which contains a "Show or Not" radio button and a "Main Title" text box. The "Show or Not" radio button includes three key-value pairs, such as... Figure 7i As shown, the first key-value pair has the attribute "name" and the value "whether to display", the second key-value pair has the attribute "value" and the value "false", and the third key-value pair is a hidden key-value pair with the attribute "coordinates" and the value "011". Similarly, the "Main Title" textbox also includes three key-value pairs, including the main title, the value, and the coordinates, which will not be described further here.

[0288] It's worth noting that the title is the parent node, while the "Show or Not" radio button and the "Main Title" text box are child nodes. When a child node is edited, an edit trigger signal is generated, such as... Figure 7j As shown, the event listener function set on the parent node (i.e. the parent element in the diagram) listens for the edit trigger signal and modifies the first form metadata cached in the browser, thereby modifying the first form metadata. At the same time, the edit trigger signal is transmitted to the front-end server, and the second form metadata stored in the database is updated using the HTTP interface between the front-end server and the back-end server, and the JDBC interface between the back-end server and the database.

[0289] Step 8: As Figure 7kAs shown, click the "Save" button at the top of the page to save the structured data to the database using the form engine; then click the "Redo" button to retrieve the structured data again and call the form engine to generate the DOM; finally, click the chart component to display the updated structured data and the corresponding chart form.

[0290] Step 9: As Figure 7l As shown, reload and display the updated dynamic form.

[0291] This completes the creation of a new line chart series form, as well as the setting and updating of each key-value pair for that line chart.

[0292] It is worth noting that the above embodiments describe the specific implementation of this application in detail through student dynamic forms in the education field and automatic updating methods for dynamic forms with charts, but are not limited to other fields, such as office dynamic forms in enterprise OA systems, which include attendance dynamic forms, including leave forms, business trip forms, etc.; or monitoring dynamic forms in the fields of park property and security, including surveillance camera forms, automatic door forms, etc. The automatic updating of dynamic forms in this application has broad application prospects and practical application value.

[0293] Based on the above method for automatic updating of dynamic forms, such as Figure 8 As shown, one embodiment of this application also provides a method for automatically updating dynamic forms applied to a front-end server, comprising:

[0294] In response to a resource request instruction sent by the browser, the stored resources are sent to the browser so that the browser can parse and execute the resources and trigger the form engine;

[0295] In response to the request from the form engine, the backend server's data interface is invoked to read the second form metadata stored in the database and send it to the browser, so that the form engine obtains the first form metadata and stores it in the browser, sets an event listener function according to the first form metadata and generates dynamic form code, so that the browser runs the dynamic form code to display a visual dynamic form and trigger the event listener function. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0296] In response to the received edit trigger signal, the backend server's data interface is invoked to modify the second form metadata stored in the database. The edit trigger signal is generated by the browser in response to the user's form editing operation, and is listened to and transmitted by the event listener function. The edit trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation.

[0297] In this embodiment, an event listener function is set to listen for the editing trigger signal generated by the browser in response to the user's form editing operation. Based on the editing trigger signal, the form metadata stored in the database is updated through the front-end server and the back-end server to realize the automatic mapping and updating of dynamic forms. This makes up for the problems existing in the prior art, effectively improves the application flexibility of dynamic forms, improves development efficiency, reduces development costs, and has broad application prospects.

[0298] The specific implementation method of this embodiment is the same as that in the foregoing embodiments, and will not be repeated here.

[0299] Based on the above method for automatic updating of dynamic forms, such as Figure 9 As shown, one embodiment of this application also provides a method for automatically updating dynamic forms applied to a backend server, comprising:

[0300] In response to a call from the front-end server, the system uses its data interface connected to the database to read the second form metadata stored in the database and transmits it to the front-end server. The front-end server then transmits the metadata to the browser and caches it as the first form metadata. This allows the browser's form engine to set an event listener function based on the first form metadata and generate dynamic form code. The browser then runs the dynamic form code to display a visual dynamic form and triggers the event listener function. The second form metadata is structured data, including at least one object. Each object includes at least one key-value pair, and each key-value pair includes an attribute and a value.

[0301] In response to the call from the front-end server, the data interface connecting the front-end server to the database is used to modify the second form metadata stored in the database according to the modified first form metadata output by the browser. The modified first form metadata is modified by the browser in response to the form editing operation on the user's end and generates an editing trigger signal. The event listener function listens for the editing trigger signal and transmits the editing trigger signal to the front-end server. The editing trigger signal includes a structured data editing package, which is used to characterize the data changes caused by the form editing operation.

[0302] The specific implementation method of this embodiment is the same as that in the foregoing embodiments, and will not be repeated here.

[0303] Based on the above method for automatic updating of dynamic forms, such as Figure 10 As shown, one embodiment of this application also provides a method for automatically updating dynamic forms applied to a database, comprising:

[0304] In response to a data request from the backend server's data interface, the stored second form metadata is output, so that the backend server transmits the second table unit data to the frontend server and then to the browser via the frontend server, where it is cached as first form metadata. This allows the browser to obtain and cache the first form metadata, and the form engine triggered by the browser sets an event listener function and generates dynamic form code based on the first form metadata. This allows the browser to run the dynamic form code, render a visual dynamic form, and trigger the event listener function. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0305] In response to an update request from the backend server's data interface, and based on the modified first form metadata sent by the backend server, the stored second form metadata is updated. The modified first form metadata is modified by the browser in response to a form editing operation by the user and generates an editing trigger signal. The event listener function listens for and transmits the editing trigger signal to the frontend server, which then transmits it to the backend server. The editing trigger signal includes a structured data editing package, which is used to characterize the data changes caused by the form editing operation.

[0306] The specific implementation method of this embodiment is the same as that in the foregoing embodiments, and will not be repeated here.

[0307] Based on the above method for automatic updating of dynamic forms, such as Figure 11 As shown, one embodiment of this application also provides a method for automatically updating dynamic forms applied to a user terminal, including:

[0308] The browser is triggered based on the input form, causing it to send a resource request instruction to the front-end server, obtain resources from the front-end server, parse and execute the resources, and trigger the form engine to obtain first form metadata. The form engine then sets an event listener function based on the first form metadata and generates dynamic form code, which the browser then runs to display a visual dynamic form and triggers the event listener function. The first form metadata is second form metadata stored in the database, which is retrieved by the browser when it executes the resource to trigger the form engine, by the form engine when it requests the front-end server, and by the front-end server when it calls the data interface of the back-end server. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0309] The browser is triggered based on the input form editing operation, so that the browser modifies the first form metadata and generates an editing trigger signal. The event listener function listens for and transmits the editing trigger signal to the front-end server. The front-end server then calls the data interface of the back-end server and updates the second form metadata stored in the database according to the modified first form metadata. The editing trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation.

[0310] The specific implementation method of this embodiment is the same as that in the foregoing embodiments, and will not be repeated here.

[0311] Based on the above-described method for automatic updating of dynamic forms, one embodiment of this application also provides a dynamic form automatic updating system that implements the above-described method. Since the dynamic form automatic updating system provided in this embodiment corresponds to the dynamic form automatic updating method provided in the above-described embodiments, the previous implementation methods are also applicable to the dynamic form automatic updating system provided in this embodiment, and will not be described in detail in this embodiment.

[0312] like Figure 2 As shown, one embodiment of this application also provides a dynamic form automatic update system, including a user terminal, a browser, a front-end server, a back-end server, and a database, wherein the browser is configured to:

[0313] In response to a form initiation operation on the user's end, a resource request instruction is sent to the front-end server, and resources are obtained from the front-end server;

[0314] The resource is parsed and executed, triggering the form engine to obtain the first form metadata. The first form metadata is the second form metadata stored in the database, which is read by the form engine requesting the front-end server and the front-end server calling the data interface of the back-end server when the browser executes the resource and triggers the form engine. The second form metadata is cached in the browser. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0315] Set an event listener function based on the first form metadata and generate dynamic form code;

[0316] Running the dynamic form code renders a visual dynamic form and triggers the event listener function.

[0317] In response to a form editing operation by the user, the first form metadata is modified and an editing trigger signal is generated. The event listener function listens for and transmits the editing trigger signal to the front-end server. The front-end server then calls the data interface of the back-end server to modify the second form metadata stored in the database. The editing trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation.

[0318] In this embodiment, an event listener function is set to listen for the editing trigger signal generated by the browser in response to the user's form editing operation. Based on the editing trigger signal, the form metadata stored in the database is updated through the front-end server and the back-end server to realize the automatic mapping and updating of dynamic forms. This makes up for the problems existing in the prior art, effectively improves the application flexibility of dynamic forms, improves development efficiency, reduces development costs, and has broad application prospects.

[0319] like Figure 12 As shown, this embodiment also provides a dynamic form automatic update system, including a user terminal (not shown in the figure), a browser (web browser in the figure), components of the browser after loading resources from the front-end server (visual editor and online analytical processing editor in the figure), a front-end server (a web server storing resources including: js, html, css, img, etc.), a back-end server (back-end application server and distributed SQL engine server in the figure), and a database (database server in the figure).

[0320] in:

[0321] The browser includes multiple browser interfaces, namely HTML page 1, HTML page 2 and HTML page 3 shown in the figure, which are used to display different dynamic forms respectively.

[0322] The browser loads resources (js, html, css, images) from the front-end server into a visual editor and an online analytical processing (OLAP) editor. The visual editor includes a dynamic form engine, which sets up a delegated form mode, i.e., sets up event listener functions, and automatically maps the form metadata of structured data to dynamic forms and structured data. At the same time, it generates DOM dynamic form code based on the form metadata, corresponding to the visual components that the browser can recognize. The OLAP editor is used to inject and populate business data, such as data for charts, into the visual components.

[0323] The front-end server is a high-performance HTTP and reverse proxy web server using Nginx, which processes static files and provides web services.

[0324] The backend server comprises a backend application server and a distributed SQL engine server. The backend application server includes a dynamic form API, a platform basic API, a client, and a business data API. The dynamic form API serves as the data interface between the frontend and backend servers, used for data communication. The platform basic API is used for managing platform user permission functions, etc. The client is used to communicate with the distributed SQL engine server. The business data API is used for displaying business data in visual charts. The distributed SQL engine server provides the business data for these visual charts.

[0325] The database includes platform databases and business databases. Platform databases are relational databases (such as Postgres) used to store form metadata. Business databases include relational databases (such as Postgres and MySQL) used to store business or statistical data, such as user payment order details, daily transaction volume or transaction amount of a certain product, etc.

[0326] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, performs the following: a browser responds to a form initiation operation by a user by sending a resource request instruction to a front-end server and obtaining resources from the front-end server; parses and executes the resources; triggers a form engine to obtain first form metadata, wherein the first form metadata is second form metadata stored in a database, which is obtained by the browser executing the resources to trigger the form engine, the form engine requesting the front-end server, and the front-end server calling the data interface of the back-end server; and is cached in the browser, wherein the second form metadata is structured data, including at least one object, each... The object includes at least one key-value pair, each key-value pair including an attribute and a value; an event listener function is set according to the first form metadata and dynamic form code is generated; the dynamic form code is run to present a visual dynamic form and trigger the event listener function; in response to the form editing operation on the user end, the first form metadata is modified and an editing trigger signal is generated, the event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database, the editing trigger signal including a pre-set structured data editing package, the structured data editing package being used to characterize the data changes caused by the form editing operation.

[0327] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon. When executed by a processor, the program performs the following: a front-end server, in response to a resource request instruction sent by a browser, sends stored resources to the browser, causing the browser to parse and execute the resources, triggering a form engine; in response to a request from the form engine, it calls a data interface of a back-end server to read second form metadata stored in a database and sends it to the browser, causing the form engine to obtain first form metadata and store it in the browser; it sets an event listener function based on the first form metadata and generates dynamic form code; it runs the dynamic form code to present a visual dynamic form and triggers the event listener function; the second form metadata is structured data, including at least one object, each object including at least one key-value pair, each key-value pair including an attribute and a value; in response to a received edit trigger signal, it calls a data interface of the back-end server to modify the second form metadata stored in the database; the edit trigger signal is generated by the browser in response to a form editing operation on the user end, and is listened to and transmitted by the event listener function; the edit trigger signal includes a pre-set structured data editing package, the structured data editing package being used to characterize the data changes caused by the form editing operation.

[0328] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon. When executed by a processor, the program implements the following: a backend server responds to a call from a frontend server by using its data interface connected to a database to read second form metadata stored in the database and transmitting it to the frontend server. The frontend server then transmits the second form metadata to a browser and caches it as first form metadata. This enables the browser to set an event listener function based on the first form metadata, generate dynamic form code, run the dynamic form code to present a visual dynamic form, and trigger the event listener function. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value.

[0329] In response to the call from the front-end server, the modified first form metadata output by the browser is used to modify the second form metadata stored in the database using its data interface connected to the database. The modified first form metadata is modified by the browser in response to the form editing operation on the user's end, and an editing trigger signal is generated. The event listener function listens for the editing trigger signal and transmits the editing trigger signal to the front-end server. The editing trigger signal includes a structured data editing package, which is used to characterize the data changes caused by the form editing operation.

[0330] Another embodiment of the present invention provides a computer-readable storage medium storing a computer program that, when executed by a processor, performs the following: a database responds to a data request from a backend server's data interface by outputting stored second form metadata, such that the backend server transmits the second table cell data to a frontend server, which then transmits it to a browser and caches it as first form metadata. The browser then acquires and caches the first form metadata, sets an event listener function based on the first form metadata, generates dynamic form code, runs the dynamic form code to present a visual dynamic form, and triggers the event listener function. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. The browser responds to an update request from the backend server's data interface and updates the stored second form metadata based on the modified first form metadata sent by the backend server. The modified first form metadata is modified by the browser in response to a form editing operation by the user, and generates an editing trigger signal. The event listener function listens to and transmits the editing trigger signal to the frontend server. The editing trigger signal includes a structured data editing package, which characterizes the data changes caused by the form editing operation.

[0331] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon. When executed by a processor, the program performs the following: a user terminal initiates an operation based on an input form, triggering a browser to send a resource request instruction to a front-end server, obtains resources from the front-end server, parses and executes the resources, triggers a form engine to obtain first form metadata, sets an event listener function based on the first form metadata and generates dynamic form code, runs the dynamic form code to present a visual dynamic form and triggers the event listener function, wherein the first form metadata is the data interface between the browser executing the resources, triggering the form engine, requesting the front-end server, and the front-end server calling the back-end server. The browser reads second form metadata stored in the database and caches it. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. The browser is triggered based on the input form editing operation, so that the browser modifies the first form metadata and generates an editing trigger signal. The event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database. The editing trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation.

[0332] In practical applications, the computer-readable storage medium can be any combination of one or more computer-readable media. The computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. For example, a computer-readable storage medium can be, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media (a non-exhaustive list) include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this embodiment, the computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0333] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, capable of sending, propagating, or transmitting programs for use by or in connection with an instruction execution system, apparatus, or device.

[0334] Program code contained on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0335] Computer program code for performing the operations of this invention can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as "C" or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0336] like Figure 13 As shown, another embodiment of the present invention provides a structural schematic diagram of a computer device. Figure 13 The computer device 12 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of the present invention.

[0337] like Figure 13 As shown, the computer device 12 is represented in the form of a general-purpose computing device. The components of the computer device 12 may include, but are not limited to: one or more processors or processing units 16, system memory 28, and a bus 18 connecting different system components (including system memory 28 and processing unit 16).

[0338] Bus 18 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. For example, these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MAC) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0339] Computer device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by computer device 12, including volatile and non-volatile media, removable and non-removable media.

[0340] System memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. Computer device 12 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 34 may be used to read and write non-removable, non-volatile magnetic media (…). Figure 13 Not shown; usually referred to as a "hard drive"). Although Figure 13 Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk") and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 via one or more data media interfaces. Memory 28 may include at least one program product having a set (e.g., at least one) of program modules configured to perform the functions of the embodiments of the present invention.

[0341] A program / utility 40 having a set (at least one) of program modules 42 may be stored, for example, in memory 28. Such program modules 42 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. Program modules 42 typically perform the functions and / or methods described in the embodiments of the present invention.

[0342] Computer device 12 can also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), and with one or more devices that enable a user to interact with the computer device 12, and / or with any device that enables the computer device 12 to communicate with one or more other computing devices (e.g., network card, modem, etc.). This communication can be performed through input / output (I / O) interface 22. Furthermore, computer device 12 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 20. Figure 13 As shown, network adapter 20 communicates with other modules of computer device 12 via bus 18. It should be understood that, although... Figure 13 As not shown, it can be used in conjunction with computer device 12 with other hardware and / or software modules, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0343] The processor unit 16 executes various functional applications and data processing by running programs stored in the system memory 28, such as implementing a method for automatic updating of dynamic forms provided in an embodiment of the present invention.

[0344] This invention addresses existing problems by providing a method, system, computer device, and medium for automatic updating of dynamic forms. It utilizes an event listener function to monitor editing trigger signals generated by the browser in response to user-side form editing operations. These signals are then transmitted to the front-end and back-end servers to update the form metadata stored in the database. This achieves automatic mapping and updating of dynamic forms, overcoming existing technical limitations, effectively improving the flexibility of dynamic form applications, increasing development efficiency, reducing development costs, and demonstrating broad application prospects.

[0345] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, and are not intended to limit the implementation of the present invention. For those skilled in the art, other variations or modifications can be made based on the above description. It is impossible to exhaustively list all the implementation methods here. All obvious variations or modifications derived from the technical solutions of the present invention are still within the protection scope of the present invention.

Claims

1. A method for automatically updating dynamic forms, applied in a browser, characterized in that, include: In response to a form initiation operation on the user's end, a resource request instruction is sent to the front-end server, and resources are obtained from the front-end server; The resource is parsed and executed, and the form engine is triggered to obtain the first form metadata. The first form metadata is the second form metadata stored in the database, which is read by the form engine requesting the front-end server and the front-end server calling the data interface of the back-end server, and cached in the browser. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. Set an event listener function based on the first form metadata and generate dynamic form code; Running the dynamic form code renders a visual dynamic form and triggers the event listener function. In response to a form editing operation by the user, the first form metadata is modified and an editing trigger signal is generated. The event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database. The edit trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation. The step of modifying the first form metadata and generating an edit trigger signal in response to the form editing operation on the user side, and the event listener function listening to and transmitting the edit trigger signal to the front-end server, further includes: the event listener function listening to the edit trigger signal and caching the structured data editing package of the edit trigger signal in the browser, and sending all structured data editing packages within the predetermined interval to the front-end server at predetermined intervals.

2. The method according to claim 1, characterized in that, The step of setting an event listener function and generating dynamic form code based on the first form metadata further includes: Set the event listener function according to the data structure of the first form metadata; Dynamic form code is generated based on the data structure of the first form metadata.

3. The method according to claim 2, characterized in that, The step of setting the event listener function based on the data structure of the first form metadata further includes: The data hierarchy of the first form metadata is divided according to a preset element structure, which includes parent elements and nested child elements. The first form metadata includes at least one parent element. The event listener function is set on the parent element. The event listener function responds to the browser running the dynamic form code and transmits the edit trigger signal generated by the browser in response to the user's form editing operation to the front-end server.

4. The method according to claim 2, characterized in that, The step of generating dynamic form code based on the data structure of the first form metadata further includes: Based on the structured data of the first form metadata, it traverses the objects it includes and the key-value pairs contained in those objects, and generates the corresponding dynamic form code.

5. The method according to claim 1, characterized in that, The structured data editing package includes: The first structured data includes a first edit key-value pair for representing a first form editing operation. The first form editing operation is for the user to modify the value of an existing key-value pair of an existing object of the first form metadata on the visual dynamic form presented by the browser. The first edit key-value pair includes a first content key-value pair of the modified attribute and / or value, and a first coordinate key-value pair representing the coordinate position of the first content key-value pair. or The second structured data includes a second edit key-value pair, used to characterize a second form editing operation. The second form editing operation is for the user to add a key-value pair of an existing object of the first form metadata to the visual dynamic form presented by the browser, as well as the attributes and values ​​of the key-value pair. The second edit key-value pair includes the newly added second content key-value pair and a second coordinate key-value pair characterizing the coordinate position of the second content key-value pair. or The third structured data includes a third edit key-value pair, used to represent a third form editing operation. The third form editing operation is for the user to add an object of the first form metadata, at least one key-value pair of the object, and the attributes and values ​​of the key-value pair to the visual dynamic form presented by the browser. The third edit key-value pair includes the newly added third content key-value pair and a third coordinate key-value pair representing the coordinate position of the third content key-value pair. The third content key-value pair includes nested sub-content key-value pairs, and the third coordinate key-value pair includes nested sub-coordinate key-value pairs corresponding to each sub-content key-value pair.

6. The method according to claim 5, characterized in that, The structured data editing package is digitally signed and asymmetric encrypted using a pre-set encryption function.

7. The method according to claim 1, characterized in that, After the event listener function listens for and transmits the edit trigger signal to the front-end server in response to a form editing operation by the user, the method further includes: Use pre-defined callback functions to perform data statistics and output the statistical data.

8. The method according to any one of claims 1-7, characterized in that, The dynamic form includes one or more of the following: text box, multi-line text box, password box, hidden field, check box, radio button, file upload box, and drop-down selection box.

9. A method for automatically updating dynamic forms, applied to a front-end server, characterized in that, include: In response to a resource request instruction sent by the browser, the stored resources are sent to the browser so that the browser can parse and execute the resources and trigger the form engine; In response to the request from the form engine, the backend server's data interface is invoked to read the second form metadata stored in the database and send it to the browser, so that the form engine obtains the first form metadata and stores it in the browser, sets an event listener function according to the first form metadata and generates dynamic form code, so that the browser runs the dynamic form code to display a visual dynamic form and trigger the event listener function. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. In response to a received edit trigger signal, the backend server's data interface is invoked to modify the second form metadata stored in the database. The edit trigger signal is generated by the browser in response to a form editing operation on the user's end, and is monitored and transmitted by the event listener function. The edit trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation. The edit trigger signal is monitored by the event listener function, and the structured data editing package of the edit trigger signal is cached in the browser. All structured data editing packages within the predetermined interval are transmitted at predetermined intervals.

10. A method for automatically updating dynamic forms, applied to a backend server, characterized in that, include: In response to a call from the front-end server, the system uses its data interface connected to the database to read the second form metadata stored in the database and transmits it to the front-end server. The front-end server then transmits the metadata to the browser and caches it as the first form metadata. This allows the browser's form engine to set an event listener function based on the first form metadata and generate dynamic form code. The browser then runs the dynamic form code to display a visual dynamic form and triggers the event listener function. The second form metadata is structured data, including at least one object. Each object includes at least one key-value pair, and each key-value pair includes an attribute and a value. In response to the call from the front-end server, the data interface connecting the front-end server to the database is used to modify the second form metadata stored in the database according to the modified first form metadata output by the browser. The modified first form metadata is modified by the browser in response to the form editing operation of the user and generates an editing trigger signal, which is listened to by the event listener function and transmitted to the front-end server. The edit trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation. The edit trigger signal is listened to by the event listener function, and the structured data editing package of the edit trigger signal is cached in the browser. All structured data editing packages within the predetermined interval are transmitted to the front-end server at predetermined intervals.

11. A method for automatically updating dynamic forms, applied to a database, characterized in that, include: In response to a data request from the backend server's data interface, the stored second form metadata is output, so that the backend server transmits the second form cell data to the frontend server and then to the browser via the frontend server, where it is cached as first form metadata. This allows the browser to obtain and cache the first form metadata, and the form engine triggered by the browser sets an event listener function and generates dynamic form code based on the first form metadata. This allows the browser to run the dynamic form code, render a visual dynamic form, and trigger the event listener function. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. In response to an update request from the backend server's data interface, and based on the modified first form metadata sent by the backend server, the browser updates the stored second form metadata. The modified first form metadata is modified by the browser in response to a form editing operation by the user, and an editing trigger signal is generated. This signal is listened to by the event listener function and transmitted to the frontend server, which then transmits it to the backend server. The editing trigger signal includes a pre-set structured data editing package, which represents the data changes caused by the form editing operation. The event listener function listens to the editing trigger signal and caches the structured data editing package of the editing trigger signal in the browser. At predetermined intervals, all structured data editing packages within the predetermined interval are transmitted to the frontend server.

12. A method for automatically updating dynamic forms, applied to a user terminal, characterized in that, include: The browser is triggered based on the input form, causing it to send a resource request instruction to the front-end server, obtain resources from the front-end server, parse and execute the resources, and trigger the form engine to obtain first form metadata. The form engine then sets an event listener function based on the first form metadata and generates dynamic form code, which the browser then runs to display a visual dynamic form and triggers the event listener function. The first form metadata is second form metadata stored in the database, which is retrieved by the browser when it executes the resource to trigger the form engine, by the form engine when it requests the front-end server, and by the front-end server when it calls the data interface of the back-end server. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. The browser is triggered by the input form editing operation, causing it to modify the first form metadata and generate an editing trigger signal. The event listener function listens for and transmits the editing trigger signal to the front-end server. The front-end server then calls the data interface of the back-end server and updates the second form metadata stored in the database according to the modified first form metadata. The editing trigger signal includes a pre-set structured data editing package, which represents the data changes caused by the form editing operation. The event listener function listens for the editing trigger signal and caches the structured data editing package of the editing trigger signal in the browser. All structured data editing packages within the predetermined interval are transmitted to the front-end server at predetermined intervals.

13. A dynamic form automatic update system, characterized in that, This includes the client, browser, front-end server, back-end server, and database, wherein the browser is configured as follows: In response to a form initiation operation on the user's end, a resource request instruction is sent to the front-end server, and resources are obtained from the front-end server; The resource is parsed and executed, triggering the form engine to obtain the first form metadata. The first form metadata is the second form metadata stored in the database, which is read by the form engine requesting the front-end server and the front-end server calling the data interface of the back-end server when the browser executes the resource and triggers the form engine. The second form metadata is cached in the browser. The second form metadata is structured data, including at least one object, each object including at least one key-value pair, and each key-value pair including an attribute and a value. Set an event listener function based on the first form metadata and generate dynamic form code; Running the dynamic form code renders a visual dynamic form and triggers the event listener function. In response to a form editing operation by the user, the first form metadata is modified and an editing trigger signal is generated. The event listener function listens for and transmits the editing trigger signal to the front-end server, and the front-end server calls the data interface of the back-end server to modify the second form metadata stored in the database. The edit trigger signal includes a pre-set structured data editing package, which is used to characterize the data changes caused by the form editing operation. The step of modifying the first form metadata and generating an edit trigger signal in response to the form editing operation on the user side, and the event listener function listening to and transmitting the edit trigger signal to the front-end server, further includes: the event listener function listening to the edit trigger signal and caching the structured data editing package of the edit trigger signal in the browser, and sending all structured data editing packages within the predetermined interval to the front-end server at predetermined intervals.

14. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-8; or When the program is executed by the processor, it implements the method as described in claim 9; or When the program is executed by the processor, it implements the method as described in claim 10; or When the program is executed by the processor, it implements the method as described in claim 11; or When the program is executed by the processor, it implements the method as described in claim 12.

15. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the method as described in any one of claims 1-8; or When the processor executes the program, it implements the method as described in claim 9; or When the processor executes the program, it implements the method as described in claim 10; or When the processor executes the program, it implements the method as described in claim 11; or When the processor executes the program, it implements the method as described in claim 12.

Images