Front-end and rear-end event linkage interaction method and system

Abstract

The invention provides a front-end and back-end event linkage interaction method and system, and the method comprises the steps: constructing an event linkage data structure, and configuring node information for each node in the event linkage data structure; obtaining a plurality of interaction nodes based on a pre-obtained user demand, and generating a rendering array according to the plurality of interaction nodes; binding a monitoring event to each interaction node in the rendering array based on a pre-acquired user demand, and constructing an event scheduling center to trigger and link the monitoring event to obtain a to-be-rendered event linkage data structure; sending the event linkage data structure to be rendered to a rear end for storage; and when a user demand update request is received, receiving a to-be-rendered event linkage data structure sent by a rear end, and rendering and restoring the event linkage data structure. The problem of poor event linkage interaction reliability in the prior art is solved. According to the method, the event linkage interaction reliability is improved by designing a unified data structure and a unified logic scheduling mechanism.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of web front-end development, and in particular to a front-end and back-end event linkage interaction method and system. BACKGROUND

[0002] Event linkage includes event occurrence conditions and event occurrence actions, and is finally issued to a hardware device. In the configuration interaction implementation process, a combination of HTML+JS or HTML+TS is usually used for design, wherein TS is a superset of JS, and adds functions such as static type checking.

[0003] Currently, in the interaction process, the prior art needs to first check the event occurrence conditions and event occurrence actions, then confirm the template, and finally select the corresponding device and configuration data in the template. In this process, there are two highly similar renderings, which are the condition action tree rendering and the rendering of the confirmed template, respectively. Therefore, in a complex condition and action configuration scenario, the cost of repeated rendering is the redundancy of the front-end code, and at the same time, due to the lack of a unified scheduling mechanism, the business logic of TS is also scattered, resulting in the problem of poor event linkage interaction reliability. SUMMARY

[0004] To solve the above problems, the present application provides a front-end and back-end event linkage interaction method and system, which realizes improving the event linkage interaction reliability by designing a unified data structure and a unified logic scheduling mechanism.

[0005] To achieve the above purpose, the embodiment of the present application provides a front-end and back-end event linkage interaction method executed by the front-end, which comprises: constructing an event linkage data structure and configuring node information for each node in the event linkage data structure; obtaining a plurality of interaction nodes based on pre-acquired user requirements, and generating a rendering array according to the plurality of interaction nodes; binding a listening event to each interaction node in the rendering array based on the pre-acquired user requirements, and constructing an event scheduling center trigger and a linkage listening event to obtain a to-be-rendered event linkage data structure; sending the to-be-rendered event linkage data structure to the back-end for storage; when a user requirement update request is received, receiving the to-be-rendered event linkage data structure sent by the back-end and rendering the event linkage data structure.

[0006] The embodiment of the application provides a front-end and back-end event linkage interaction method, constructs a unified event linkage data structure, configures information of each node in the structure, establishes a single data source for the whole interaction process, ensures the consistency of data, generates a rendering array according to user demand, binds a listening event to an interaction node, thereby centrally managing user interaction logic, realizes unified triggering and linkage of events through construction of an event scheduling center, and finally realizes reliable storage of data and reliability of interface rendering restoration during update and editing through a standardized conversion and restoration mechanism of data between the front end and the back end, thereby improving the event linkage interaction reliability through design of a unified data structure and a unified logic scheduling mechanism.

[0007] Further, the event linkage data structure is constructed, and node information of each node in the event linkage data structure is configured, including: based on a preset condition action judgment field, marking pre-acquired user demand as a condition event or an action event, constructing the event linkage data structure, wherein the event linkage data structure is set as a tree structure; and acquiring a plurality of nodes in the event linkage data structure and configuring node information of each node.

[0008] In the above scheme, the event linkage data structure is set as a tree structure, which has the ability of natural hierarchical and nested expression, and the preset condition action judgment field is set, which marks the pre-acquired user demand as a condition event or an action event, so that the unified event linkage data structure is designed, which can render to a corresponding condition area or an action area of an interface according to the type of user demand in a subsequent rendering process, thereby providing reliable data structure logic for subsequent processes and improving the event linkage interaction reliability.

[0009] Further, the plurality of nodes in the event linkage data structure are acquired, and node information of each node is configured, including: configuring a preset rendering template control field and a preset loop nesting field for each pre-acquired node; based on the preset rendering template control field, marking the node as a node that can participate in template rendering; and based on the preset loop nesting field, marking the node as a loop nesting node.

[0010] In the above scheme, the preset rendering template control field and the preset loop nesting field are configured for each node in the event linkage data structure, and the two fields support the nested logic expression of the node and judge whether the node participates in template rendering, so that the linkage logic is more clear in structure, invalid data can be flexibly filtered in the rendering process, the data structure logic is further optimized, and the event linkage interaction reliability is improved.

[0011] Furthermore, based on the pre-acquired user requirements, several interactive nodes are obtained, and a rendering array is generated based on these interactive nodes. This includes: identifying the nodes that the user needs to interact with based on the pre-acquired user requirements, and obtaining several interactive nodes; configuring preset type control fields for the several interactive nodes, and marking each interactive node as the corresponding interactive component type based on the preset type control fields; and obtaining the rendering array after all interactive nodes have completed the configuration of the preset type control fields.

[0012] In the above solution, the nodes that need to be interacted are determined according to user needs, and a preset type control field is configured in the interactive nodes to mark the interactive nodes as the corresponding interactive component type. In this way, multiple interactive logics can be extended under one set of rendering logic without the need for additional logical structures. That is, only a single data structure needs to be designed to complete the rendering configuration of multiple interactive logics, thereby improving the reliability of event linkage interaction.

[0013] Furthermore, based on the pre-acquired user requirements, listener events are bound to each interactive node in the rendering array, and an event scheduling center is constructed to trigger and link the listener events, resulting in a linked data structure for the events to be rendered. This includes: binding at least one listener event to each interactive node in the rendering array based on the pre-acquired user requirements; constructing an event scheduling center to trigger and link the listener events of each interactive node; and outputting the linked data structure for the events to be rendered when the listener events bound to each interactive node in the rendering array meet the pre-acquired user requirements.

[0014] In the above scheme, each interaction node is bound to a listening event and a unified event scheduling center is built. This design creates a unified logical scheduling mechanism that prevents business logic from being scattered and improves the reliability of event-linked interactions.

[0015] Furthermore, before sending the event-linked data structure to be rendered to the backend for storage, the process includes: configuring preset key fields and preset value fields for several interactive nodes; matching the several interactive nodes with the backend interface fields based on the preset key fields; and storing the data values ​​of the several interactive nodes based on the preset value fields. Further, sending the event-linked data structure to be rendered to the backend for storage includes: traversing the event-linked data structure to be rendered, identifying the preset key fields and preset value fields of each interactive node; encapsulating the preset key fields and preset value fields of each interactive node into a data packet that matches the backend interface fields, and sending the data packet to the backend for storage.

[0016] In the above scheme, a preset key field and a preset value field are configured for each interaction node. The preset key field is matched with the backend data interface to ensure data consistency after data storage, and the preset value field facilitates the unified storage of subsequent data, thereby improving the reliability of event linkage interaction.

[0017] Furthermore, upon receiving a user request update, the system receives and renders the event-linked data structure to be rendered from the backend. This includes: receiving the data packet sent by the backend upon receiving the user request update, and restoring the data packet into the event-linked data structure to be rendered based on preset key fields and preset value fields; obtaining the preset conditional action judgment fields, preset rendering template control fields, preset loop nesting fields, preset type control fields, and listener events configured in each interaction node based on the event-linked data structure to be rendered; and rendering and restoring the event-linked data structure based on the preset conditional action judgment fields, preset rendering template control fields, preset loop nesting fields, preset type control fields, and listener events configured in each interaction node.

[0018] In the above scheme, whenever a user update request is received, the data packet sent by the backend is received synchronously. The event linkage data structure to be rendered is restored through preset value fields and preset key fields. Based on the fields configured in each interaction node, the event linkage data structure to be rendered is restored to the event linkage data structure for display on the front end. Thus, by designing a single data structure stored on the backend and restoring it to the front end for rendering when editing is required, the reliability of event linkage interaction is improved by designing a unified data structure and a unified logical scheduling mechanism.

[0019] This invention also provides a front-end and back-end event linkage interaction system, including: a node information configuration module, a rendering array generation module, a listening event binding module, a back-end storage module, and a rendering and restoration module; the node information configuration module is used to construct an event linkage data structure and configure node information for each node in the event linkage data structure; the rendering array generation module is used to obtain several interactive nodes based on pre-acquired user requirements and generate a rendering array based on the several interactive nodes; the listening event binding module is used to bind listening events to each interactive node in the rendering array based on pre-acquired user requirements and construct an event scheduling center trigger and linkage listening events to obtain the event linkage data structure to be rendered; the back-end storage module is used to send the event linkage data structure to be rendered to the back-end for storage; the rendering and restoration module is used to receive the event linkage data structure to be rendered sent by the back-end and render and restore the event linkage data structure when a user requirement update request is received.

[0020] This invention proposes a front-end and back-end event-linked interactive system. A node information configuration module constructs a unified event-linked data structure and configures the information of each node within the structure, establishing a single data source for the entire interaction process and ensuring data consistency. A rendering array generation module generates a rendering array based on user needs and binds listening events to interactive nodes through an event binding module, thereby centralizing the management of user interaction logic. Furthermore, an event scheduling center is constructed to achieve unified event triggering and linkage. Finally, a back-end storage module and a rendering and restoration module ensure reliable data storage and reliable interface rendering and restoration during updates and editing through a standardized data conversion and restoration mechanism between the front-end and back-end. This achieves improved reliability of event-linked interaction through the design of a unified data structure and a unified logic scheduling mechanism.

[0021] Furthermore, the rendering and restoration module is used to receive and render the event-linked data structure sent by the backend when a user update request is received. This includes: an update request receiving unit, a node data restoration unit, and a structure data restoration unit. The update request receiving unit receives the data packet sent by the backend when a user update request is received, and restores the data packet into the event-linked data structure to be rendered based on preset key and preset value fields. The node data restoration unit obtains the preset conditional action judgment fields, preset rendering template control fields, preset loop nesting fields, preset type control fields, and listener events configured in each interactive node based on the event-linked data structure to be rendered. The structure data restoration unit renders and restores the event-linked data structure based on the preset conditional action judgment fields, preset rendering template control fields, preset loop nesting fields, preset type control fields, and listener events configured in each interactive node. Attached Figure Description

[0022] Figure 1 A flowchart illustrating the steps of a front-end and back-end event linkage interaction method provided in a certain embodiment of the present invention;

[0023] Figure 2 A schematic diagram of the event linkage data structure for a front-end and back-end event linkage interaction method provided in a certain embodiment of the present invention;

[0024] Figure 3 This is a schematic diagram of the module structure of a front-end and back-end event linkage interaction system provided in a certain embodiment of the present invention. Detailed Implementation

[0025] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0026] Example 1

[0027] See Figure 1 , Figure 1 This is a flowchart illustrating the steps of a front-end and back-end event linkage interaction method according to a certain embodiment of the present invention; for example... Figure 1 As shown, this embodiment of the invention provides a front-end and back-end event linkage interaction method, including steps 101 to 105. The front-end and back-end event linkage interaction method is executed by the front-end, and the specific steps are as follows:

[0028] Step 101: Construct an event linkage data structure and configure node information for each node in the event linkage data structure;

[0029] Step 102: Obtain several interaction nodes based on the pre-acquired user requirements, and generate a rendering array based on the several interaction nodes;

[0030] Step 103: Based on the pre-acquired user requirements, bind listening events to each interactive node in the rendering array and construct the event scheduling center to trigger and link listening events to obtain the linkage data structure of the event to be rendered.

[0031] Step 104: Send the event linkage data structure to be rendered to the backend for storage;

[0032] Step 105: When a user request for an update is received, the event linkage data structure to be rendered is received from the backend and the event linkage data structure is rendered and restored.

[0033] One possible implementation method is described in [link to implementation details]. Figure 2 , Figure 2 This is a schematic diagram of the event linkage data structure for a front-end and back-end event linkage interaction method provided in a certain embodiment of the present invention; for example... Figure 2As shown, the front-end first constructs a tree-like data structure based on user requirements, and uses the `action` field to divide user requirements into conditional events and action events. This allows conditional rendering to occur at the corresponding level, corresponding to the conditional or action events in the event linkage, thus obtaining the event linkage data structure. This structure has good scalability and hierarchical expression capabilities, facilitating centralized management of complex linkage logic. Then, node information is configured for each node in the event linkage data structure. The `children` field is used to express nested node logic, supporting a recursive nested tree structure. The `check` field controls whether to enable template rendering, making the linkage logic structurally clearer and allowing for flexible filtering of invalid data during rendering. Next, based on user needs, the nodes requiring interaction are obtained and defined as interactive nodes. A `row` field is set to achieve multi-dimensional data rendering. Each row in the `row` field can include multiple interactive nodes, and each interactive node can have multiple data items. Each data item can be configured with corresponding interactive components according to user needs. To distinguish between different interaction types, since each conditional event in complex business scenarios such as monitoring alarms, security linkage, and industrial control requires multiple actions, and each action may have multiple time, quantity, personnel, and content limitations, this embodiment of the invention also proposes a `class` field to identify the data's interaction type, achieving high-density information expression and optimized user interaction experience. For example, text requiring user confirmation is set to blue in the `class` field, data requiring no interaction is set to black in the `class` field, and already filled data is set to orange in the `class` field. After generating a rendering array by setting the `row` field, listener events are bound to each interactive node, and a unified event scheduling center is built to trigger and link listener events. Listener events can be `click`, `change`, `input`, and `blue`, etc. The linkage of various listener events can also be configured as a chain structure to handle complex business scenarios. Once the user completes the configuration, i.e., when the user's needs are met, the frontend outputs the event-linked data structure to be rendered and sends it to the backend. It's worth noting that each interaction node in the event-linked data structure has a `value` field for storing data and a `key` field for matching with backend interface fields. The backend interface fields are also set as `key` fields. Thus, when the frontend uniformly converts and stores the event-linked data structure to the backend database, it matches and stores it using the `key` field. It is also through the `key` field that, when a user update request is received, the backend is triggered to send the stored data to the frontend, matches the data using the `key` field, restores it to the corresponding event-linked data structure, and then performs the corresponding rendering operation using HTML.

[0034] This invention proposes a front-end and back-end event linkage interaction method. It constructs a unified event linkage data structure and configures information for each node in the structure, establishing a single data source for the entire interaction process to ensure data consistency. Then, it generates a rendering array based on user needs and binds listening events to the interaction nodes, thereby centralizing the management of user interaction logic. Furthermore, it achieves unified event triggering and linkage by constructing an event scheduling center. Finally, through a standardized data conversion and restoration mechanism between the front-end and back-end, it ensures reliable data storage and reliable interface rendering restoration during updates and editing. This approach improves the reliability of event linkage interaction by designing a unified data structure and a unified logic scheduling mechanism.

[0035] A preferred approach involves constructing an event-linked data structure and configuring node information for each node in the event-linked data structure. This includes: marking pre-acquired user needs as conditional events or action events based on preset conditional action judgment fields, constructing the event-linked data structure, wherein the event-linked data structure is set as a tree structure; acquiring several nodes in the event-linked data structure and configuring node information for each node.

[0036] One preferred implementation method is as follows: Figure 2 As shown, the front-end first constructs a tree-like data structure based on user requirements, and divides user requirements into conditional events and action events through the `action` field. This ensures that conditional rendering corresponds to the conditional event or action event in the event linkage at the corresponding level, thus obtaining the event linkage data structure. This structure has good scalability and hierarchical expression capabilities, facilitating centralized management of complex linkage logic. Specifically, in one embodiment, the user requirement is "automatically capture an image when someone moves." In this case, the root node is "when someone moves," and its `action` field is marked as "condition." A child node is "automatically capture an image," and its `action` field is marked as "action." Thus, by setting the `action` field, during the subsequent rendering process, it can be determined whether the rendering is based on the condition or action in the template, depending on whether the `action` field is true. Finally, node information is configured for all nodes in the event linkage data structure. In this embodiment, the preset conditional action judgment field is represented by `action`.

[0037] In the above scheme, the event linkage data structure is set as a tree structure, which gives it the ability to express itself hierarchically and nested. Then, a preset condition action judgment field is set for each node in the tree structure, and the nodes are classified as condition nodes or action nodes. This unified event linkage data structure design enables the rendering of the corresponding condition area or action area of ​​the interface according to the node type in the subsequent rendering process, providing reliable data structure logic for the subsequent process and improving the reliability of event linkage interaction.

[0038] A preferred approach involves acquiring several nodes from an event-linked data structure and configuring node information for each node, including: configuring a preset rendering template control field and a preset circular nesting field for each node to be acquired; marking the node as a node that can participate in template rendering based on the preset rendering template control field; and marking the node as a node that can be nested in a circular manner based on the preset circular nesting field.

[0039] One preferred implementation method is as follows: Figure 2 As shown, node information is configured for each node in the pre-acquired event-linked data structure. The nested node logic is expressed by setting the `children` field, supporting a recursive nested tree structure. The `check` field controls whether to enable template rendering, making the linkage logic structurally clearer and allowing for flexible filtering of invalid data during rendering. Specifically, the `children` field can be used to determine if there are more detailed subcategories, while the `check` field can be used to filter nodes not selected by the user. By configuring the `children` and `check` fields for each node in the event-linked data structure, during subsequent rendering, the presence of the `children` field determines whether the data has a subset for recursive rendering, and the presence of the `check` field determines whether the event-linked template contains this data. In this embodiment, the preset rendering template control field is represented by the `check` field, and the preset loop nesting field is represented by the `children` field.

[0040] In the above scheme, each node in the event linkage data structure is configured with a preset rendering template control field and a preset loop nesting field. The two fields work together to support the node in expressing nested logic and determine whether the node participates in template rendering, making the linkage logic clearer in structure. During the rendering process, invalid data can also be flexibly filtered, further optimizing the data structure logic and improving the reliability of event linkage interaction.

[0041] A preferred embodiment involves obtaining several interactive nodes based on pre-acquired user needs and generating a rendering array based on these interactive nodes. This includes: identifying nodes that the user needs to interact with based on the pre-acquired user needs, thus obtaining several interactive nodes; configuring preset type control fields for the several interactive nodes, and marking each interactive node as a corresponding interactive component type based on the preset type control fields; and obtaining a rendering array after all interactive nodes have completed the configuration of the preset type control fields.

[0042] One preferred implementation method is as follows: Figure 2As shown, nodes requiring interaction are obtained based on user needs and defined as interactive nodes. A `row` field is set to implement multi-dimensional data rendering. Each row in the `row` field can include multiple interactive nodes, and each interactive node can have multiple data items. Each data item can be configured with corresponding interactive components according to user needs. Specifically, based on user needs, if a node is determined to require interactive configuration, it is defined as an interactive node, and a `row` field containing multiple data items is set. Each data item is configured with a `type` field to distinguish the type of each interactive component. The `type` field includes different types such as input, select, and text. For example, in one embodiment, the user's required action is "automatically capture an image when someone moves." The front-end identifies the "automatic image capture" node, requiring further user configuration parameters. This node is marked as an interactive node, and a `row` field with multiple data items is generated for it. Each data item can include "camera selection" (`type: select`) and "number of captures" (`type: input`), etc. After configuring all `type` fields, the `row` field is output to obtain the rendering array. The `row` field implements multi-dimensional data rendering. In this embodiment, the preset type control field is represented by the `type` field.

[0043] It is worth mentioning that, in order to distinguish various interaction types, since each conditional event in complex business scenarios such as monitoring and alarm, security linkage, and industrial control requires multiple actions, and each action may also have multiple time, quantity, personnel, and content limitations, this embodiment of the invention also proposes a class field to identify the interaction type of data, thereby achieving high-density information expression and optimizing user interaction experience. For example, text that requires user confirmation is set to blue in the class field, data that does not require any interaction is set to black in the class field, and data that has already been filled in is set to orange in the class field. For example, in one embodiment, the user's required action is "when someone moves, automatically capture images a few times at intervals of a few seconds". In this checkbox action, "a few seconds" and "a few times" are data that needs to be filled in by the user, and the class field is set to blue. "When someone moves" is data that has already been filled in, and the class field is set to orange. "Intervals" and "automatically capture images" are data that does not require any interaction, and the class field is set to black.

[0044] In the above solution, the nodes that need to be interacted are determined according to user needs, and a preset type control field is configured in the interactive nodes to mark the interactive nodes as the corresponding interactive component type. In this way, multiple interactive logics can be extended under one set of rendering logic without the need for additional logical structures. That is, only a single data structure needs to be designed to complete the rendering configuration of multiple interactive logics, thereby improving the reliability of event linkage interaction.

[0045] A preferred approach involves binding listener events to each interactive node in the rendering array based on pre-acquired user requirements and constructing an event scheduling center to trigger and link the listener events, resulting in a linked data structure for the events to be rendered. This includes: binding at least one listener event to each interactive node in the rendering array based on pre-acquired user requirements; constructing an event scheduling center to trigger and link the listener events of each interactive node; and outputting the linked data structure for the events to be rendered when the listener events bound to each interactive node in the rendering array meet the pre-acquired user requirements.

[0046] One preferred implementation method is as follows: Figure 2 As shown, after generating a rendering array by setting the `row` field, listener events are bound to each interactive node, and a unified event dispatch center is built to trigger and link listener events. Listener events can be `click`, `change`, `input`, and `blue`, etc. The linkage of various listener events can also be configured as a chain structure to handle complex business scenarios. Specifically, a corresponding listener event is bound to each data item of each interactive node in the output `row` field rendering array. It's worth noting that each data item is bound to at least one listener event, and all events are managed by a pre-built unified event dispatch center. For example, in one embodiment, the user requirement action is "when someone moves, automatically capture images a few times at intervals of a few seconds." In this checkbox action, the small data item "a few times" can have an `input` event added to detect whether the input data is negative and pop up some prompts. Finally, after the `row` field rendering array completes all listener event configuration and node configuration, the data structure of the linked events to be rendered is output.

[0047] In the above scheme, each interaction node is bound to a listening event and a unified event scheduling center is built. This design creates a unified logical scheduling mechanism that prevents business logic from being scattered and improves the reliability of event-linked interactions.

[0048] In a preferred embodiment, before sending the event-linked data structure to be rendered to the backend for storage, the process includes: configuring preset key fields and preset value fields for several interactive nodes; matching the several interactive nodes with backend interface fields based on the preset key fields; and storing the data values ​​of the several interactive nodes based on the preset value fields. Furthermore, sending the event-linked data structure to be rendered to the backend for storage includes: traversing the event-linked data structure to be rendered, identifying the preset key fields and preset value fields of each interactive node; encapsulating the preset key fields and preset value fields of each interactive node into a data packet that matches the backend interface fields, and sending the data packet to the backend for storage.

[0049] One preferred implementation method is as follows: Figure 2As shown, once the user completes the configuration, i.e., when the user's needs are met, the front-end outputs the event-linked data structure to be rendered and sends it to the back-end. It's worth noting that each interactive node in the event-linked data structure also has a `value` field for storing data and a `key` field for matching with back-end interface fields. The back-end interface fields are also set as `key` fields. Therefore, when the front-end uniformly converts and stores the event-linked data structure to be rendered in the back-end database, it matches and stores it with the back-end through the `key` field. Specifically, each interactive node in the row rendering array of the event-linked data structure is configured with a `key` field and a `value` field. When the user's requirements are filled in and saved, the front-end traverses the event-linked data structure, assembling the `key` and `value` of each interactive node into a JSON data packet and sending it to the back-end for storage. In this embodiment, the preset key field is represented as the `key` field, and the preset value field is represented as the `value` field. Assembling the `key` and `value` fields into a JSON data packet is one interpretation of this embodiment and does not limit the data format.

[0050] In the above scheme, a preset key field and a preset value field are configured for each interaction node. The preset key field is matched with the backend data interface to ensure data consistency after data storage, and the preset value field facilitates the unified storage of subsequent data, thereby improving the reliability of event linkage interaction.

[0051] A preferred embodiment involves receiving and rendering an event-linked data structure sent by the backend when a user request for an update is received. This includes: receiving a data packet sent by the backend and reconstructing the data packet into an event-linked data structure based on preset key and preset value fields; obtaining preset conditional action judgment fields, preset rendering template control fields, preset nested loop fields, preset type control fields, and listener events configured in each interaction node based on the event-linked data structure; and rendering and reconstructing the event-linked data structure based on the preset conditional action judgment fields, preset rendering template control fields, preset nested loop fields, preset type control fields, and listener events configured in each interaction node.

[0052] One preferred implementation method is as follows: Figure 2As shown, when a user update request is received via the `key` field, the backend sends the stored data to the frontend. The frontend then matches the data using the `key` field and restores it to the corresponding event-driven data structure before performing the corresponding HTML rendering. Specifically, when the user edits the rule again (i.e., when a user update request is received), the frontend receives the JSON data returned by the backend. It automatically fills the values ​​back into the corresponding interactive node data items in the `row` rendering array using `key` matching. Based on fields such as `action`, `check`, `children`, and `type`, and the event listeners for each interactive node data item, it uses HTML rendering to restore the complete event-driven data structure. During rendering, the presence of the `check` field determines whether the event-driven data structure contains the data; the presence of the `action` field determines whether the event-driven data structure is a conditional event or an action event for rendering; the presence of the `children` field determines whether there are subsets of data for recursive rendering; the `row` field rendering array restores the data for each row based on the user's needs; different `type` fields render different interactive components to obtain form data; when adding a new data item, the `check` field is always false, and all corresponding values ​​are empty, leaving the user to select and confirm data according to their new needs.

[0053] In the above scheme, whenever a user update request is received, the data packet sent by the backend is received synchronously. The event linkage data structure to be rendered is restored through preset value fields and preset key fields. Based on the fields configured in each interaction node, the event linkage data structure to be rendered is restored to the event linkage data structure for display on the front end. Thus, by designing a single data structure stored on the backend and restoring it to the front end for rendering when editing is required, the reliability of event linkage interaction is improved by designing a unified data structure and a unified logical scheduling mechanism.

[0054] Example 2

[0055] See Figure 3 , Figure 3 This is a schematic diagram of the module structure of a front-end and back-end event linkage interaction system provided in a certain embodiment of the present invention. Figure 3As shown in the figure, this embodiment of the invention also provides a front-end and back-end event linkage interaction system, including: a node information configuration module 201, a rendering array generation module 202, a listening event binding module 203, a back-end storage module 204, and a rendering and restoration module 205; the node information configuration module 201 is used to construct an event linkage data structure and configure node information for each node in the event linkage data structure; the rendering array generation module 202 is used to obtain several interactive nodes based on pre-acquired user requirements and generate a rendering array based on the several interactive nodes; the listening event binding module 203 is used to bind listening events to each interactive node in the rendering array based on pre-acquired user requirements and construct an event scheduling center trigger and linkage listening event to obtain the event linkage data structure to be rendered; the back-end storage module 204 is used to send the event linkage data structure to be rendered to the back-end for storage; the rendering and restoration module 205 is used to receive the event linkage data structure to be rendered sent by the back-end and render and restore the event linkage data structure when a user requirement update request is received.

[0056] This invention proposes a front-end and back-end event-linked interactive system. A node information configuration module constructs a unified event-linked data structure and configures the information of each node within the structure, establishing a single data source for the entire interaction process and ensuring data consistency. A rendering array generation module generates a rendering array based on user needs and binds listening events to interactive nodes through an event binding module, thereby centralizing the management of user interaction logic. Furthermore, an event scheduling center is constructed to achieve unified event triggering and linkage. Finally, a back-end storage module and a rendering and restoration module ensure reliable data storage and reliable interface rendering and restoration during updates and editing through a standardized data conversion and restoration mechanism between the front-end and back-end. This achieves improved reliability of event-linked interaction through the design of a unified data structure and a unified logic scheduling mechanism.

[0057] Furthermore, the rendering and restoration module 205 is used to receive the event-linked data structure to be rendered sent by the backend and render and restore the event-linked data structure when a user update request is received. It includes: an update request receiving unit 301, a node data restoration unit 302, and a structure data restoration unit 303. The update request receiving unit 301 receives the data packet sent by the backend when a user update request is received, and restores the data packet to the event-linked data structure to be rendered based on preset key fields and preset value fields. The node data restoration unit 302 obtains the preset condition action judgment fields, preset rendering template control fields, preset loop nesting fields, preset type control fields, and listener events configured in each interactive node based on the event-linked data structure to be rendered. The structure data restoration unit 303 renders and restores the event-linked data structure based on the preset condition action judgment fields, preset rendering template control fields, preset loop nesting fields, preset type control fields, and listener events configured in each interactive node.

[0058] The above description is only a preferred embodiment of the present invention. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the technical principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

[0059] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. Furthermore, the described specific features, structures, materials, or characteristics may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of those different embodiments or examples.

[0060] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "a plurality of" means two or more, unless otherwise explicitly specified.

Claims

1. A method for front-end and back-end event linkage and interaction, characterized in that, Executed by the front-end, the front-end and back-end event linkage interaction method includes: Construct an event linkage data structure and configure node information for each node in the event linkage data structure; Based on the pre-acquired user needs, several interaction nodes are obtained, and a rendering array is generated according to the several interaction nodes; Based on the pre-acquired user requirements, listener events are bound to each interactive node in the rendering array, and an event scheduling center is constructed to trigger and link the listener events, thereby obtaining the linked data structure of the event to be rendered. The event-linked data structure to be rendered is sent to the backend for storage. When the user request for update is received, the event linkage data structure to be rendered is received from the backend and the event linkage data structure is rendered and restored.

2. The front-end and back-end event linkage interaction method as described in claim 1, characterized in that, The construction of the event linkage data structure, including configuring node information for each node in the event linkage data structure, includes: Based on the preset conditional action judgment field, the pre-acquired user needs are marked as conditional events or action events, and an event linkage data structure is constructed, wherein the event linkage data structure is set as a tree structure. Obtain several nodes from the event linkage data structure and configure node information for each node.

3. The front-end and back-end event linkage interaction method as described in claim 2, characterized in that, Obtain several nodes from the event linkage data structure, and configure node information for each node, including: Configure preset rendering template control fields and preset loop nesting fields for each node to be acquired; Based on the preset rendering template control field, the node is marked as a node that can participate in template rendering; Based on the preset nested loop field, nodes are marked as nestable nodes.

4. The front-end and back-end event linkage interaction method as described in claim 3, characterized in that, The process of acquiring several interaction nodes based on pre-acquired user needs and generating a rendering array based on these interaction nodes includes: Based on the pre-acquired user needs, identify the nodes that the user needs to interact with, and obtain several interaction nodes; Configure a preset type control field for a number of interactive nodes, and mark each interactive node as a corresponding interactive component type based on the preset type control field; Once all interactive nodes have completed the configuration of the preset type control fields, a rendering array is obtained.

5. The front-end and back-end event linkage interaction method as described in claim 4, characterized in that, Based on the pre-acquired user requirements, listener events are bound to each interactive node in the rendering array, and an event scheduling center is constructed to trigger and link the listener events, resulting in a data structure for the linked events to be rendered, including: Based on the pre-acquired user requirements, bind at least one listener event to each of the interactive nodes in the rendering array; Construct an event scheduling center to trigger and coordinate the listening events of each of the aforementioned interactive nodes; When the listener events bound to each interactive node in the rendering array meet the pre-acquired user requirements, the event linkage data structure to be rendered is output.

6. The front-end and back-end event linkage interaction method as described in claim 5, characterized in that, Before executing the step of sending the event-linked data structure to be rendered to the backend for storage, the following steps are included: Configure preset key fields and preset value fields for several of the aforementioned interactive nodes; Based on the preset key field, several interactive nodes are matched with the interface fields of the backend; Based on the preset value field, the data values ​​of several interactive nodes are stored.

7. The front-end and back-end event linkage interaction method as described in claim 6, characterized in that, Sending the event-linked data structure to be rendered to the backend for storage includes: Traverse the event linkage data structure to be rendered and identify the preset key field and preset value field of each interaction node; The preset key field and preset value field of each interactive node are encapsulated into a data packet that matches the backend interface field, and the data packet is sent to the backend for storage.

8. The front-end and back-end event linkage interaction method as described in claim 7, characterized in that, When the user request for update is received, the system receives the event-linked data structure to be rendered from the backend and renders and restores the event-linked data structure, including: When the user request for update is received, the data packet sent by the backend is received, and the data packet is restored into the event linkage data structure to be rendered according to the preset key field and preset value field. Based on the event linkage data structure to be rendered, obtain the preset condition action judgment field, the preset rendering template control field, the preset loop nesting field, and the listening event configured in each interaction node; Based on the preset condition action judgment field, preset rendering template control field, preset loop nesting field, preset type control field and the listening event configured in each interaction node, the event linkage data structure is rendered and restored.

9. A front-end and back-end event linkage and interaction system, characterized in that, The method for front-end and back-end event linkage interaction as described in any one of claims 1 to 8 includes: The module includes a node information configuration module, a rendering array generation module, a listening event binding module, a backend storage module, and a rendering and restoration module. The node information configuration module is used to construct an event linkage data structure and configure node information for each node in the event linkage data structure. The rendering array generation module is used to obtain a number of interactive nodes based on the pre-acquired user requirements, and generate a rendering array based on the number of interactive nodes. The event binding module is used to bind event listeners to each interactive node in the rendering array based on the pre-acquired user requirements and to build an event scheduling center to trigger and link the event listeners, thereby obtaining the event linkage data structure to be rendered. The backend storage module is used to send the event linkage data structure to be rendered to the backend for storage; The rendering and restoration module is used to receive the event linkage data structure to be rendered sent by the backend and render and restore the event linkage data structure when the user's request for update is received.

10. A front-end and back-end event linkage and interaction system as described in claim 9, characterized in that, The rendering and restoration module is used to receive the event-linked data structure to be rendered from the backend and render and restore the event-linked data structure when the user's request for an update is received, including: Update the request receiving unit, node data restoration unit, and structure data restoration unit; The update request receiving unit is used to receive the data packet sent by the backend when the user's request for update is received, and restore the data packet into the event linkage data structure to be rendered according to the preset key field and preset value field. The node data restoration unit is used to obtain the preset condition action judgment field, preset rendering template control field, preset loop nesting field, preset type control field and listening event configured in each interactive node based on the event linkage data structure to be rendered; The structure data restoration unit is used to render and restore the event linkage data structure based on the preset condition action judgment field, preset rendering template control field, preset loop nesting field, preset type control field and listening event configured in each interaction node.

Images