Front-end logic execution system based on canvas process

Abstract

The invention provides a front-end logic execution system based on a canvas flow, and the system comprises an editor end which comprises an item switching module which is used for providing an item menu tree and a visual page; the page building module is used for storing a menu component; the action flow arrangement module is used for connecting the menu components according to the running sequence and configuring execution conditions, preposed actions, delay events and loop events to form a low-code data packet; the running device end comprises a data packet analysis module which is used for loading a low-code data packet and restoring the low-code data packet into JSON (JavaScript Object Notation) configuration; the rendering module is used for converting the JSON configuration into HTML (Hypertext Markup Language) elements and JS (JavaScript) codes and rendering the HTML elements and the JS codes to a browser And the event execution module is used for executing each action after the browser component is triggered. The method has the beneficial effects that the generation convenience of the business logic execution link can be improved, the technical threshold of front-end business logic development is reduced, and the flow visualization of the whole link generation and execution links is realized.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development systems, and more particularly, to a front-end logic execution system based on a canvas process. Background Art

[0002] In the traditional front-end business logic development paradigm, developers usually implement business requirements by manually writing imperative code. There are three typical technical defects in this mode: First, complex business logics are often scattered in multiple functional modules in the form of discrete code fragments, resulting in fragmented logical focus points. According to the 2023 Stack Overflow Developer Survey Report, 68% of front-end developers have caused production environment accidents due to scattered logics; Second, the lack of a unified process visualization expression mechanism forces developers to reverse-derive the execution link through code, resulting in an average cognitive deviation rate of 23% in multi-person collaboration scenarios (data source: IEEE Transactions on Software Engineering, 2022); Third, there is a risk of incomplete coverage during the logic iteration process. Industry case studies show that the business logic regression test coverage rate is less than 60% in the traditional development mode.

[0003] Existing low-code platforms have obvious technical bottlenecks in business logic configuration: The code-invasive solution adopts a hybrid development mode of visual components and code fragments, and there are three contradictions in its technical architecture: 1) Developers need to frequently switch between the graphical interface and the code editor, and the link generation is not convenient; 2) The logic reuse granularity is too coarse, and the coupling degree between components reaches 0.72 (the coupling degree index range is 0-1); 3) The debugging tool chain is incomplete, lacking the ability of visual breakpoint tracking; while the simple logic configurator is limited by the finite state machine model, and there are four-dimensional defects in its technical implementation: 1) It only supports single-threaded synchronous execution flow and cannot handle asynchronous callback nesting exceeding 3 layers; 2) The branch judgment is limited to Boolean expressions and does not have pattern matching ability; 3) The loop control lacks an iteration context retention mechanism; 4) The exception handling only provides global capture and lacks fine-grained error boundary definition. According to the Gartner 2024 Low-Code Platform Evaluation Report, the complete implementation rate of existing solutions for complex business logics is less than 35%.

[0004] In summary, the existing technical solutions lack the convenience of generating the business logic execution link, the technical threshold for front-end business logic development is relatively high, and there is a lack of process visualization in the entire link generation and execution process. Summary of the Invention

[0005] The technical problem to be solved by the present invention is to improve the convenience of generating the business logic execution link, reduce the technical threshold of front-end business logic development, and realize the process visualization of the entire link generation and execution process. To overcome the defects of the above-mentioned prior art (or related art), the present invention provides a front-end logic execution system based on a canvas process.

[0006] The present invention provides a front-end logic execution system based on a canvas process, including: An editor side, which includes: A project switching module, which is used to provide a project menu tree to the user. There are multiple menu branches under the project menu tree, and each menu branch is respectively linked to a visualization page, so that when the user clicks any one of the menu branches, it can be switched to the visualization page corresponding to the menu branch; A page building module, connected to the project switching module, which is used to store multiple menu components for the user to drag and drop each menu component into the visualization page; An action flow arrangement module, connected to the page building module, which is used to arrange the serial components and parallel components by connecting the menu components in the running order, and configure the execution conditions, pre-actions, delay events, and loop events for each menu component, and save the configuration to form a low-code data packet; A runner side, connected to the editor side, including: A data packet parsing module, which is used to load the low-code data packet into the network and decompress, decrypt, and restore it to a JSON configuration; A rendering module, connected to the data packet parsing module, which is used to convert the JSON configuration into HTML elements and JS code, and render the HTML elements to the browser, so that each menu component is converted into an action for execution; An event execution module, connected to the rendering module, which is used to convert the action flow data according to the JS code, and serially and parallelly execute each action according to the action flow data after the user clicks and triggers the browser components set on the browser.

[0007] Compared with the prior art, the front-end logic execution system based on a canvas process of the present application has the following advantages: In the present invention, an editor is used to match components of a visual page and generate a low-code data packet. Among them, a project switching module is used to provide functions for establishing a project menu tree and switching visual pages, a page building module is used to provide a combined visualization function for menu components, an action flow choreography module is used to provide functions for wiring arrangement and configuration of menu components, and a runner is used for browser rendering and action execution. Among them, a data packet parsing module is used to provide a function for parsing and restoring a low-code data packet, a rendering module is used to provide functions for browser rendering and action conversion of menu components, and an event execution module is used to provide an action execution function. The division of labor tasks between the editor and the runner is clear. Through the function implementation and cooperation of each module, the process visualization of the entire link generation and execution process is realized. And during the whole process, the user only needs to drag and drop menu components to combine and arrange them to generate a business logic execution link, without the need to frequently switch between the menu page and the visual page, which can greatly improve the convenience of generating the business logic execution link. The entire system is built and implemented on a host computer and only requires a browser and each module to run, which can reduce the technical threshold for front-end business logic development.

[0008] In a possible implementation manner, the pre-actions configured by the action flow choreography module for each of the menu components include execution after all are completed, execution after one is completed, and execution after one fails.

[0009] Compared with the prior art, adopting the above technical solution can enable the system to have an intelligent action execution scheduling ability through multi-mode configuration of pre-actions. This design effectively solves the problem of complex dependency relationships in asynchronous operations, ensures the complete execution of the critical link, and allows for fault tolerance processing in specific scenarios, significantly improving the system's response speed to abnormal situations and the flexibility of process control.

[0010] In a possible implementation manner, each of the menu components in the page building module includes a first component having only a lower endpoint, a plurality of second components having both an upper endpoint and a lower endpoint, and a third component having only an upper endpoint. The first component serves as a starting node, each of the second components serves as an intermediate node, and the third component serves as an ending node.

[0011] Compared with the prior art, adopting the above technical solution can form a clear process topology structure through the differential design of the endpoints of menu components, which forcibly standardizes the design logic of developers. The hierarchical division of the starting node, intermediate node, and ending node gives the business logic flow natural timing and integrity, avoiding common problems such as broken-end nodes or infinite loops in traditional process designs and reducing the configuration error rate.

[0012] In a possible implementation, the connections between the menu components include solid grey arrow lines, dashed grey arrow lines, and dashed red arrow lines. For each of the second and third components, when the pre-action representations configured for the second or third component are all completed before execution, the connection at the upper endpoint of the second or third component is a solid grey arrow line; when one of the pre-action representations configured for the second or third component is completed before execution, the connection at the upper endpoint of the second or third component is a dashed grey arrow line; when one of the pre-action representations configured for the second or third component fails before execution, the connection at the upper endpoint of the second or third component is a dashed red arrow line.

[0013] Compared with the prior art, adopting the above technical solution can establish a visual semantic coding specification through a three-color arrow line type system, realize the visual representation of the configuration logic, where the solid grey arrow line represents a strong dependency relationship, the dashed grey arrow line represents a weak dependency relationship, and the dashed red arrow line represents an exception handling path. This design makes the state dependency relationship of complex processes clear at a glance, reducing the configuration error rate while improving the code review efficiency.

[0014] In a possible implementation, after the browser component is triggered, the event execution module executes actions from the start node to subsequent intermediate nodes in the order of the connections and stops at the end node.

[0015] Compared with the prior art, adopting the above technical solution can ensure the execution of the logic flow based on the chain execution mechanism of the node topology, with the one-way transfer characteristic from the start node to the end node, which not only maintains the smooth execution of the process but also realizes the phased processing of business logic through the connection of intermediate nodes, improving the execution efficiency compared with the traditional action-driven mode.

[0016] In a possible implementation, during the execution of actions by the event execution module, when an execution condition is set for one of the actions, it is judged whether the execution condition is met: if so, the action continues to be executed; if not, the action is interrupted.

[0017] Compared with the prior art, adopting the above technical solution can endow the system with intelligent interruption ability based on the dynamic execution condition determination mechanism, which not only ensures the execution of necessary actions but also allows invalid actions to be terminated in a timely manner when the conditions are not met, reducing the waste of system resources.

[0018] In a possible implementation, during the execution of an action by the event execution module, when all the pre-action representations configured for one of the actions are completed before execution, the action waits for all the actions connected to the action to be executed and succeed, and then continues to execute the subsequent action of the action; when one of the pre-action representations configured for one of the actions is completed before execution, the action waits for any one of the actions connected to the action to be executed and succeed, and then continues to execute the subsequent action of the action; when one of the pre-action representations configured for one of the actions fails before execution, it is determined whether the previous action connected to the action has been successfully executed: if so, the action is interrupted; if not, the subsequent action of the action is executed.

[0019] Compared with the prior art, the above technical solution can achieve precise process control through a multi-mode dependency processing mechanism. The all-dependency completion mode ensures the integrity of the critical link. The single-dependency completion mode can improve the system response speed. The failure-dependency mode can enhance the system fault tolerance. The three modes work together to enable the system to adaptively process different business scenarios and improve the efficiency of handling complex dependency relationships.

[0020] In a possible implementation, during the execution of an action by the event execution module, when one of the actions is configured with the delay event, the action waits for the delay time corresponding to the delay event to arrive and then continues to execute.

[0021] Compared with the prior art, the above technical solution can expand the timing control dimension of the system through a delayed execution mechanism. By configuring accurate delay time parameters, the system can simulate the waiting state in a real business scenario, support special business requirements such as timed tasks and polling checks, and enhance the system's ability to handle asynchronous events.

[0022] In a possible implementation, during the execution of an action by the event execution module, when one of the actions is configured with the loop event, the action and the subsequent actions connected to the action are executed in a loop.

[0023] Compared with the prior art, the above technical solution can endow the system with an automated iteration ability. By setting the loop event, the system can perform periodic operations autonomously and reduce resource consumption.

[0024] In a possible implementation, the editor side further includes a data packet export module, connected to the action flow orchestration module, for encrypting and compressing each of the menu components, the connections between each of the menu components, the execution conditions configured for each of the menu components, the pre-actions, the delay events, and the loop events to generate a compressed file in a custom file format with the suffix of MTX as the low-code data packet.

[0025] Compared with the prior art, after adopting the above technical solution, encryption and compression are carried out in the MTX special format, which not only ensures the security of the configuration data, but also reduces the network transmission volume through the compression algorithm. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 is the structural schematic diagram of the present invention; Figure 2 is the schematic diagram of the project menu tree of the present invention; Figure 3 is the schematic diagram of the menu component of the present invention; Figure 4 is the schematic diagram of the action flow choreography of the present invention; Figure 5 is the schematic diagram of the pre-action configuration of the menu component of the present invention; Figure 6 is the schematic diagram of the low-code package upload of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0027] First of all, those skilled in the art should understand that these embodiments are only used to explain the technical principles of the embodiments of the present application, and are not intended to limit the protection scope of the embodiments of the present application. Those skilled in the art can adjust them as needed to adapt to specific application scenarios.

[0028] The following further describes the present application in detail with reference to the drawings and specific embodiments.

[0029] See Figure 1 and Figure 2 , the embodiments of the present application disclose a front-end logic execution system based on a canvas process, including: An editor side, which includes: A project switching module, which is used to provide a project menu tree to the user. There are multiple menu branches under the project menu tree, and each menu branch is respectively linked to a visual page, so that when the user clicks any one of the menu branches, it can be switched to the visual page corresponding to the menu branch; A page building module, connected to the project switching module, which is used to store multiple menu components for the user so that the user can drag and drop each menu component into the visual page; An action flow choreography module, connected to the page building module, which is used to arrange the menu components in series and in parallel by connecting them in the running order, and configure the execution conditions, pre-actions, delay events, and loop events for each menu component, and save the configuration to form a low-code data packet; A runner side, connected to the editor side, includes: A data packet parsing module, configured to load the low-code data packet into a network and perform decompression, decryption, and restoration to a JSON configuration; A rendering module, connected to the data packet parsing module, configured to convert the JSON configuration into HTML elements and JS code, and render the HTML elements to a browser, so that each of the menu components is converted into an action for execution; An event execution module, connected to the rendering module, configured to convert the JS code into action flow data, and serially and parallelly execute each of the actions according to the action flow data after a user clicks to trigger a browser component set on the browser.

[0030] In an embodiment of the present application, a project switching module supports completing the layout of all menu components in a visual page corresponding to a menu branch in a drag-and-drop manner, and configuring attributes, styles, data, events, etc. of the menu components.

[0031] In an embodiment of the present application, each of the menu components in the page building module includes a first component having only a lower endpoint, a plurality of second components having both an upper endpoint and a lower endpoint, and a third component having only an upper endpoint. The first component serves as a starting node, each of the second components serves as an intermediate node, and the third component serves as an ending node.

[0032] See Figures 3 - 5 , various operation behaviors and event processing logics of a service in a visual page are constructed by an action flow choreography module. By dragging and dropping various action flow components such as data, services (tool classes), interactions (UI interactions), messages, forms, pages, services, etc. of menu components to a canvas of the visual page, the menu components dragged and dropped to the canvas are connected to each other through upper and lower endpoints (some menu components have only one upper endpoint, such as a page jump, a page back, etc.) to achieve serial and parallel arrangements (the starting node is the lower endpoint of the start menu component, and the upper endpoint of an intermediate node can be connected to the lower endpoints of multiple other intermediate nodes). Combining basic configurations such as execution conditions, pre-actions, delayed events, loop events, etc. of the menu components, a required logic processing flow is implemented. When the pre-actions of the basic configurations of the menu components are set to execute after all are completed, execute after one is completed, or execute after one fails, the connection lines connected to the upper endpoint of the menu component will be displayed as solid gray arrows, dashed gray arrows, and dashed red arrows in sequence to visually and clearly distinguish the displayed logical relationships.

[0033] In an embodiment of the present application, taking the password modification page as an example, the business logic in the click event of the confirmation button in the password modification pop-up window on the visualization page consists of menu components such as form verification, network requests, variable updates, message prompts, and pop-up window closures, which are arranged serially and in parallel to form a logical process, and combined with pre-action logics such as execute after all are completed, execute after one is completed, and execute after one fails (AND, OR, NOT), constituting a complex business logic process.

[0034] In an embodiment of the present application, there is also a data packet export module connected to the action flow orchestration module, which is used to encrypt and compress each of the menu components, the connections between the menu components, the execution conditions configured for the menu components, the pre-actions, the delay events, and the loop events to generate a custom file format compressed file with the suffix of MTX as the low-code data packet. Specifically, it encrypts and compresses the JSON content of the common configurations (such as menus, routes, permissions) and page configurations (the menu component structure, its attribute styles, and corresponding event actions within the visualization page) in the editor-side configuration content into a custom file format compressed file with the suffix of MTX and outputs it to the local computer of the user.

[0035] In an embodiment of the present application, a secure transmission protocol can be added to the low-code data packet to extend the security mechanism of the data packet export module. A hybrid encryption scheme is adopted, using AES-256 to encrypt the JSON configuration content, exchanging keys through the RSA algorithm, and embedding a digital signature during compression. A version compatibility layer design is added to enable the runner side to recognize different versions of MTX files and automatically execute the configuration migration script to ensure backward compatibility.

[0036] In an embodiment of the present application, a dynamic tracking module for the dependency relationship between menu components can be added within the editor side, connected to the action flow orchestration module. When the user connects the menu components, a visual dependency relationship graph is automatically generated. The connection dependency risk is detected through the topological sorting algorithm and suggestions are provided. For menu components with data flow (such as form submission components and API request components), a type verification mechanism is implemented to ensure that the output data structure matches the input interface specification.

[0037] In an embodiment of the present application, an AI assistance function is integrated into the action flow orchestration module. Based on historical orchestration data, a recommendation model is trained. When the user drags a menu component into the canvas of the visualization page, highly correlated menu components are automatically recommended (such as recommending to place an "error prompt" menu component after placing a "form verification" menu component), and a common configuration template is generated. For parallel orchestration scenarios, the execution time consumption of each branch is estimated and the expected execution time sequence is visually displayed through a Gantt chart.

[0038] See Figure 6, upload the low-code data packet to the data packet parsing module on the runner side, and restore the content inside the low-code data packet to JSON configuration through decompression and decryption means, and pass it to the rendering module and the event execution module for processing.

[0039] In the embodiment of the present application, after the user's interface operation is processed by the event execution module, the logic execution is performed, and the choreographed action flow data is executed in sequence according to the serial and parallel order of the actions. The execution process of the process starts from the starting node and executes towards the subsequent actions according to the connection direction. When encountering a parallel fork, the actions of adjacent intermediate nodes will be executed simultaneously; when an execution condition is set for a certain action, it is judged whether the execution condition is met. If it is met, the subsequent actions of the action will continue to be executed, otherwise the execution of all actions in the subsequent branch of the action will be interrupted; when the pre-requisite actions of a certain action are all completed before execution, it is necessary to wait for all actions connected to the action to be executed and succeed before continuing to execute the subsequent actions; when the pre-requisite action of a certain action is to be executed after one is completed, it is only necessary for one of the actions connected to the action to be executed and succeed before continuing to execute the subsequent actions; when a certain action fails, if the subsequent actions connected to the action are configured with pre-requisite actions to be executed after the action fails, the subsequent action process will continue to be executed, otherwise the branch will terminate and stop executing backward; when a certain action is set with a delayed event execution configuration, the action will wait until the configured delay time arrives and then continue to be executed; when a certain action is set with a cyclic event interval execution configuration, the action and all subsequent actions connected to the action will be executed in a cycle according to the time configured in the cyclic event interval execution configuration.

[0040] In the embodiment of the present application, the virtual DOM comparison technology is introduced in the rendering module. When the JSON configuration changes, the changed nodes are identified through the Diff algorithm, and only the affected areas are updated. For the large data volume scenario, lazy loading of menu components and dynamic rendering of windows are implemented, and the scroll loading optimization is achieved by combining the Intersection Observer API.

[0041] In the embodiment of the present application, the main processing steps of the front-end logic execution system include: Implement the rendering of the hierarchical draggable menu components through the project switching module and the page building module, and store each configuration (including attributes, styles, data, etc.) added to the menu components by the user in the editor in the form of JSON key-value pairs in the browser IndexedDB; The operation of each menu component is abstracted as an event trigger, and the choreography of the action flow inside the event is realized in the form of a process canvas. In addition to the common configurations of actions such as execution conditions, pre-requisite actions, delayed events, and cyclic events, each menu component has its own independent configuration items; All configurations on the editor side will be temporarily saved in the browser's IndexedDB. When exporting the low-code data package, the data in the browser's IndexedDB will be encrypted and compressed into a file in MTX format using zip and saved locally; At runtime, the runner side provides a low-code data package upload page. After uploading, the file is unzipped and decrypted, and the low-code data package is split into public configurations and page configurations and loaded into the cache; The rendering module renders the public configurations into modules such as menus and routes. The page configurations will be dynamically rendered into corresponding browser HTML elements. After the user's operation, browser events of the HTML elements are triggered (such as left mouse click, etc.). The event execution module will match the corresponding event trigger action flow according to the browser event name in the page configuration (for example, the left button click event of a button is named "click"); The action flow completes the asynchronous execution of the serial and parallel chains through Promise. The serial actions on the action flow branch need to wait for the previous asynchronous action to complete before they can be executed. The parallel actions in the action flow do not affect each other and will be triggered simultaneously for asynchronous execution; When the action flow runs, it will first sort all actions according to the dependency relationship (the actions existing in the dependency relationship need to be ranked before the actions they depend on), and add a promiseFun method to each action, and add all actions to Promise.all to execute the corresponding promiseFun method. In the promiseFun method, find the dependent actions of this action. According to the dependency relationship configured for this action (that is, the previous action), when the dependency relationship is and (execute after all are completed), add the promiseFun methods of all dependent actions to Promise.all, and wait for all dependent action promiseFun methods to be executed successfully before executing the internal logic of this action itself; When the dependency relationship is or (execute after one is completed), add the promiseFun methods of all dependent actions to Promise.any, and when one of the promiseFun methods of all dependent actions is executed successfully, execute the internal logic of this action itself; When the dependency relationship is fail (execute after one fails), add the promiseFun methods of all dependent actions to Promise.all, and when one of all dependent actions fails, execute the internal logic of this action itself; When a delay event execution is set for a certain action, a setTimeout delay event will be set when executing this action; When a loop event interval is set for a certain action, this action and its subsequent action branches that depend on this action will be added to the timer and this action will be executed immediately once.

[0042] In the description of the present application, the descriptions with reference to terms such as "one embodiment", "some embodiments", "in this embodiment", "specific example", or "some examples", etc. mean that the specific features, mechanisms, materials, or characteristics described in connection with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic expressions of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, mechanisms, materials, or characteristics described can be combined in a suitable manner in any one or more embodiments or examples. In addition, without contradiction, those skilled in the art can combine and combine the different embodiments or examples described in this specification and the features of different embodiments or examples.

[0043] As described above, it is only the specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions that can be easily thought of by those skilled in the art within the technical scope disclosed in the present application should be covered by the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A front-end logic execution system based on a canvas process, characterized in that, Including: Editor side, which includes: Project switching module, used to provide a project menu tree to the user. There are multiple menu branches under the project menu tree, and each menu branch is respectively linked to a visualization page, so that when the user clicks on any one of the menu branches, it switches to the visualization page corresponding to the menu branch; Page building module, connected to the project switching module, used to store multiple menu components for the user to drag and drop each menu component into the visualization page; Action flow choreography module, connected to the page building module, used to arrange serial components and parallel components by connecting the menu components in the running order, and configure execution conditions, pre-actions, delay events, and loop events for each menu component, and save the configuration to form a low-code data packet; Runner side, connected to the editor side, including: Data packet parsing module, used to load the low-code data packet onto the network and decompress, decrypt, and restore it to JSON configuration; Rendering module, connected to the data packet parsing module, used to convert the JSON configuration into HTML elements and JS code, and render the HTML elements to the browser, so that each menu component is converted into an action for execution; Event execution module, connected to the rendering module, used to convert the action flow data according to the JS code, and serially and parallelly execute each action according to the action flow data after the user clicks and triggers the browser components set on the browser.

2. The front-end logic execution system based on a canvas process according to claim 1, characterized in that, The pre-actions configured by the action flow choreography module for each of the menu components include execute after all are completed, execute after one is completed, and execute after one fails.

3. The front-end logic execution system based on a canvas process according to claim 2, characterized in that, Each of the menu components in the page building module includes a first component with only a lower endpoint, multiple second components with both an upper endpoint and a lower endpoint, and a third component with only an upper endpoint. The first component serves as the starting node, each of the second components serves as an intermediate node, and the third component serves as the ending node.

4. The front-end logic execution system based on a canvas process according to claim 3, characterized in that, The connections between each of the menu components include solid gray arrow lines, dashed gray arrow lines, and dashed red arrow lines. For each of the second components and the third components, when the pre-action configured for the second component or the third component indicates execute after all are completed, the connection of the upper endpoint of the second component or the third component is the solid gray arrow line; when the pre-action configured for the second component or the third component indicates execute after one is completed, the connection of the upper endpoint of the second component or the third component is the dashed gray arrow line; When the pre-action configured for the second component or the third component indicates execute after one fails, the connection of the upper endpoint of the second component or the third component is the dashed red arrow line.

5. The front-end logic execution system based on a canvas process according to claim 3, characterized in that, After the browser component is triggered, the event execution module executes actions from the starting node to each subsequent intermediate node in the order of the connections and stops at the ending node.

6. The front-end logic execution system based on a canvas process according to claim 5, characterized in that, During the execution of actions by the event execution module, when one of the actions is set with an execution condition, it is judged whether the execution condition is met: if so, the action continues to be executed; if not, the action is interrupted.

7. The front-end logic execution system based on a canvas process according to claim 5, characterized in that, During the process of the event execution module executing an action, when the pre-actions configured for one of the actions are all completed before execution, the action waits for all actions connected to the action to be executed and succeed, and then continues to execute the subsequent actions of the action; when one of the pre-actions configured for one of the actions is completed before execution, the action waits for any one of the actions connected to the action to be executed and succeed, and then continues to execute the subsequent actions of the action; when one of the pre-actions configured for one of the actions fails before execution, it is determined whether the previous action connected to the action is successfully executed: if so, the action is interrupted; if not, the subsequent actions of the action are executed.

8. The front-end logic execution system based on a canvas process according to claim 5, characterized in that, During the process of the event execution module executing an action, when one of the actions is configured with the delay event, the action waits for the delay time corresponding to the delay condition to arrive and then continues to execute.

9. The front-end logic execution system based on a canvas process according to claim 5, characterized in that, During the process of the event execution module executing an action, when one of the actions is configured with the loop event, the action and the subsequent actions connected to the action are executed in a loop.

10. The front-end logic execution system based on a canvas process according to claim 1, characterized in that, The editor side further includes a data packet export module, which is connected to the action flow orchestration module and is used to encrypt and compress each of the menu components, the connections between the menu components, the execution conditions configured for each of the menu components, the pre-actions, the delay events, and the loop events to generate a compressed file in a custom file format with the suffix MTX as the low-code data packet.

Images