Visual front-end business logic arrangement method and system supporting multi-dimensional interaction control, storage medium and computing device

Abstract

This invention belongs to the field of Web front-end development and low-code platform technology, specifically involving a visual front-end business logic orchestration method, system, storage medium, and computing device that supports multi-dimensional interactive control. S1, based on a visual orchestration interface, users define execution flows by dragging and dropping standardized nodes. The control structure of the execution flow includes conditional branches, loops, and nested sub-flows, generating a flow configuration describing the front-end business logic based on expressions and control structures. S2, the interpretation and execution engine obtains the flow configuration from the database through a loader and directly parses the flow configuration into an internal instruction sequence. When the front-end runs, the interpretation and execution engine executes the internal instruction sequence in the browser environment according to the topological order, without generating any executable code during execution. The configuration takes effect immediately after configuration. Data is passed between standardized nodes through a global context object. This achieves code-free generation, pure interpretation execution, and hot updating of the front-end logic orchestration scheme.

Description

Technical Field

[0001] This invention belongs to the field of Web front-end development and low-code platform technology, specifically relating to a visual front-end business logic orchestration method, system, storage medium, and computing device that supports multi-dimensional interactive control. Background Technology

[0002] Web front-end development technology is a core technology for building user interfaces and is widely used in enterprise management systems, e-commerce platforms, mobile applications, and other fields. With rapidly changing business needs, traditional manual coding development methods face problems such as long development cycles and high maintenance costs. Low-code development platforms have emerged to address this, aiming to lower the development threshold and improve development efficiency through visual configuration.

[0003] Existing low-code development platforms primarily employ UI layout tools and code generation technologies. These tools allow users to build page structures by dragging and dropping components, enabling them to select buttons, forms, tables, and other components in a visual interface and set their positions and styles. While these tools can quickly generate static pages, their functionality is limited to the page layout level. For interactive logic such as form validation, data submission, and page navigation after a user clicks a button, developers still need to manually write JavaScript event callback functions, failing to achieve true low-code development. As for code generation platforms, converting visual configurations into JavaScript source code requires rebuilding or injecting scripts, preventing true "dynamic activation" and resulting in low development efficiency. Regarding front-end adaptation of rule engines, mapping backend rules like Drools to the front end struggles to handle fine-grained operations such as "closing pop-ups" and "form assignment," exhibiting weak expressive capabilities and failing to meet the needs of complex interactive scenarios in enterprise-level web applications.

[0004] For example, Chinese patent CN120469682A discloses an event orchestration method for a low-code development platform based on native JavaScript. This solution configures event nodes and event flow connections through a visual development interface, generates event flow configuration data, converts the configuration data into native JavaScript code, and calls a rendering engine to render page styles and execute event flows based on the generated code. While this code generation solution supports configuring business logic visually, it has significant technical drawbacks: after configuration changes, code generation, compilation, and building steps need to be re-executed, and the entire process typically takes 30 to 60 seconds to take effect in the browser, failing to meet the needs of rapid iteration and instant preview. Furthermore, there is a mapping relationship between the generated JavaScript code and the configuration data; when configuration errors occur, developers need to locate the problem in the generated code and then trace it back to the configuration interface, making debugging complex and maintenance difficult. Summary of the Invention

[0005] The technical problem to be solved by this invention is to provide a visual front-end business logic orchestration method, system, storage medium, and computing device that supports multi-dimensional interactive control, thereby addressing the technical problems existing in the background art. It achieves a front-end logic orchestration scheme that features no code generation, pure interpreted execution, and support for hot updates.

[0006] The technical solution adopted by this invention to solve its technical problem is: a visual front-end business logic orchestration method supporting multi-dimensional interactive control, including the following steps: S1, Front-end business configuration; Based on a visual orchestration interface, users define execution flows by dragging and dropping standardized nodes. The control structure of the execution flow includes conditional branches, loops, and nested sub-flows, generating flow configurations that describe the front-end business logic based on expressions and control structures. The flow configurations are stored in a database. Standardized nodes include navigation control nodes, UI component operation nodes, programming logic nodes, and remote call nodes. S2, parsing and execution; The interpreter engine obtains the process configuration from the database through the loader and directly parses the process configuration into an internal instruction sequence. When the front end runs, the interpreter engine executes the internal instruction sequence in the browser environment in topological order. No executable code is generated during the execution process, and the configuration takes effect immediately. Data is passed between various standardized nodes through a global context object.

[0007] Furthermore, the navigation control node is used to encapsulate front-end routing and view operations; the navigation control node includes functions for executing page navigation, returning, and closing the current pop-up window; The UI component operation node is used for atomic operations on dynamic forms and prompt components; the UI component operation node includes retrieving values ​​for specified form items, assigning values ​​to form items, modifying component properties, and controlling prompts; The programming logic node is used to provide class programming capabilities; the programming logic node includes configuration expressions, log output, encapsulation of reusable logic blocks, sub-process calls, and loop control; The remote call node is used to unify the external interaction interface; the remote call node includes initiating HTTP requests and calling pre-registered function points.

[0008] Furthermore, the global context object adopts a tree structure and supports access via path expressions. The execution results of standardized nodes are written into the global context object for subsequent nodes to read and use.

[0009] Furthermore, the interpretation and execution engine includes a built-in asynchronous scheduler. When the front end is running, the built-in asynchronous scheduler is used to wait for the HTTP request response before executing the update of the UI component operation node.

[0010] Furthermore, the UI component operation nodes access the component state through a unified interface, thus decoupling them from the underlying front-end framework.

[0011] Furthermore, the expression is executed in a security sandbox, prohibiting access to dangerous APIs.

[0012] A visual front-end business logic orchestration system that supports multi-dimensional interactive control adopts a visual front-end business logic orchestration method that supports multi-dimensional interactive control, including a front-end business configuration module and a parsing and execution module; The front-end business configuration module is used to allow users to define execution flows by dragging and dropping standardized nodes based on a visual orchestration interface. The control structure of the execution flow includes conditional branches, loops, and nested sub-flows. It generates a flow configuration that describes the front-end business logic based on expressions and control structures. The flow configuration is stored in a database. The standardized nodes include navigation control nodes, UI component operation nodes, programming logic nodes, and remote call nodes. The parsing and execution module, the interpretation engine of the interpretation and execution engine obtains the process configuration from the database through the loader and directly parses the process configuration into an internal instruction sequence. When the front end runs, the interpretation and execution engine executes the internal instruction sequence in the browser environment according to the topological order. No executable code is generated during the execution process, and the configuration takes effect immediately. Data is passed between various standardized nodes through a global context object.

[0013] A storage medium on which a computer program is stored, which, when executed by a processor, implements a visual front-end business logic orchestration method that supports multi-dimensional interactive control.

[0014] A computing device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement a visual front-end business logic orchestration method that supports multi-dimensional interactive control.

[0015] Compared with existing technologies, the beneficial effects of this invention are as follows: This invention provides a visual front-end business logic orchestration method, system, storage medium, and computing device that supports multi-dimensional interactive control, thereby solving the technical problems existing in the background technology. It achieves code-free generation, pure interpreted execution, and hot updating of the front-end logic orchestration scheme. Specifically, it achieves the following: First, dynamic activation: configuration takes effect immediately, without building or injection; Second, zero code dependency: business personnel can independently complete complex interactive configurations; Third, high security: expressions run in a sandbox environment; Fourth, easy maintainability: the graphical process clearly displays the interactive logic, facilitating auditing and iteration.

[0016] Instruction manual illustrations

[0017] Figure 1 System architecture diagram; Figure 2 A visual layout diagram of the interface; Figure 3 A schematic diagram of the configuration panel for retrieving values ​​for specified form items and assigning values ​​to form items; Figure 4 A diagram of the configuration panel for modifying component properties; Figure 5 A flowchart to explain the operation of the engine. Detailed Implementation

[0018] The following is an explanation attached. Figure 1 , 2 The invention is further illustrated in sections 3, 4, and 5, as well as in the embodiments.

[0019] Figure 1 The system architecture of the present invention is shown.

[0020] Figure 2 It demonstrates all the nodes of the front-end business logic orchestration and a simple example (saving users) configuration, realizing multi-dimensional logic and interaction control.

[0021] Figure 3 This demonstrates how to retrieve and assign values ​​to specified form items using the configuration panel of UI component operation nodes.

[0022] Figure 4 This demonstrates how to modify component properties through the UI component operation node configuration panel.

[0023] Figure 5 It demonstrates how the runtime engine implements configuration parsing, logic execution, and context updates.

[0024] A visual front-end business logic orchestration method that supports multi-dimensional interactive control, including the following steps: S1, Front-end business configuration; Based on a visual orchestration interface, users define execution flows by dragging and dropping standardized nodes. The control structure of the execution flow includes conditional branches (IF nodes / ELSE nodes), loops (FOR nodes), and nested sub-flows, generating flow configurations that describe the front-end business logic based on expressions and control structures. The flow configurations are stored in a database. Standardized nodes include navigation control nodes, UI component operation nodes, programming logic nodes, and remote call nodes.

[0025] The database includes a local database and a remote configuration center database.

[0026] S2, parsing and execution; The interpreter engine in the interpreter runtime engine obtains the process configuration from the database through the loader and directly parses the process configuration into an internal instruction sequence. When the front end runs, the runtime engine in the interpreter runtime engine executes the internal instruction sequence in the browser environment according to the topological order. No executable code is generated during the execution process, and the configuration takes effect immediately. Data is passed between various standardized nodes through a global context object.

[0027] Preferably, the navigation control node is used to encapsulate front-end routing and view operations; the navigation control node includes functions for performing page navigation, returning, and closing the current pop-up window; The UI component operation node is used for atomic operations on dynamic forms and prompt components; the UI component operation node includes retrieving values ​​for specified form items, assigning values ​​to form items, modifying component properties (dynamically updating component properties (such as loading:true, visible:false)) and controlling prompts (including displaying success / error messages, loading indicators, etc.). The programming logic nodes are used to provide programming-like capabilities without writing code; the programming logic nodes include configuration expressions (configuring JavaScript-compatible expressions (such as a > b && c !== null)), log output (outputting debugging information to the browser console), encapsulating reusable logic blocks (such as getting the current date), sub-process calls (calling other orchestrated front-end processes), and loop control (traversing arrays and executing sub-operation sequences). The remote call node is used to unify the external interaction interface; the remote call node includes initiating HTTP requests (configuring RESTful API (including URL, method, headers and body template)) and calling pre-registered function points (calling pre-registered local service functions (such as authService.login()) to avoid hard coding).

[0028] Preferably, the global context object adopts a tree structure and supports access via path expressions (such as context.httpResponse.data.userId). The execution results of standardized nodes are written to the global context object for subsequent nodes to read and use.

[0029] Preferably, the interpretation and execution engine includes a built-in asynchronous scheduler. When the front end is running, the built-in asynchronous scheduler is used to wait for the HTTP request response before executing the update of the UI component operation node.

[0030] Preferably, the UI component operation node accesses the component state through a unified interface, thus decoupling it from the underlying front-end framework.

[0031] Preferably, the expression is executed in a security sandbox, where access to dangerous APIs is prohibited.

[0032] A visual front-end business logic orchestration system that supports multi-dimensional interactive control adopts a visual front-end business logic orchestration method that supports multi-dimensional interactive control, including a front-end business configuration module and a parsing and execution module.

[0033] The front-end business configuration module is used to define the execution flow by dragging and dropping standardized nodes based on a visual orchestration interface. The control structure of the execution flow includes conditional branches, loops, and nested sub-flows. It generates a flow configuration based on expressions and control structures that describes the front-end business logic. The flow configuration is stored in a database. The standardized nodes include navigation control nodes, UI component operation nodes, programming logic nodes, and remote call nodes.

[0034] The parsing and execution module, the interpretation engine of the interpretation and execution engine obtains the process configuration from the database through the loader and directly parses the process configuration into an internal instruction sequence. When the front end runs, the interpretation and execution engine executes the internal instruction sequence in the browser environment according to the topological order. No executable code is generated during the execution process, and the configuration takes effect immediately. Data is passed between various standardized nodes through a global context object.

[0035] A storage medium on which a computer program is stored, which, when executed by a processor, implements a visual front-end business logic orchestration method that supports multi-dimensional interactive control.

[0036] A computing device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement a visual front-end business logic orchestration method that supports multi-dimensional interactive control.

[0037] Example: Dynamic validation of user login form.

[0038] S1, Front-end business configuration; Based on a visual orchestration interface, users define execution flows by dragging and dropping standardized nodes. The control structure of the execution flow includes conditional branches, loops, and nested sub-flows, generating flow configurations that describe the front-end business logic based on expressions and control structures. The flow configurations are stored in a database. Standardized nodes include navigation control nodes, UI component operation nodes, programming logic nodes, and remote call nodes.

[0039] Specifically, the system first obtains the username through a dynamic form, then determines whether the username length is greater than 3 through routing. If the username length is greater than 3, it initiates an HTTP request to call the interface to save the user, and then prompts the user that the saving was successful through a notification panel. If the username length is less than or equal to 3, it prompts the user that the length is incorrect through a notification panel.

[0040] Retrieve values ​​for specified form items by manipulating nodes through UI components (e.g., retrieve the value of the username input box). Configure expressions (e.g., configure username.length >= 3); IF nodes include True and False branches; True branch: Remote call node (initiates HTTP request: POST / api / check-user); False branch: UI component operation node (displays error: "Username must be at least 3 characters"); After the True branch: UI component operation node (assignment: set "Login button" to clickable).

[0041] S2, parsing and execution; The interpreter engine obtains the process configuration from the database through the loader and directly parses the process configuration into an internal instruction sequence. When the front end runs, the interpreter engine executes the internal instruction sequence in the browser environment in topological order. No executable code is generated during the execution process, and the configuration takes effect immediately. Data is passed between various standardized nodes through a global context object.

[0042] The process is triggered after the user enters their username; Explanation of the runtime engine: Retrieve the value username = "abc" from the form; The expression evaluates to true; Initiate an HTTP request to / api / check-user; Update the button state after receiving the response.

[0043] No JavaScript code is generated throughout the process; all operations are performed by the interpreter engine.

[0044] The specific embodiments described are preferred embodiments of the present invention and are not intended to limit the scope of protection of the present invention. All equivalent changes made to the structure, shape, and principle of the present invention should be covered within the scope of protection of the present invention.

Claims

1. A visual front-end business logic orchestration method supporting multi-dimensional interactive control, characterized in that, Including the following steps: S1, Front-end business configuration; Based on a visual orchestration interface, users can define execution flow by dragging and dropping standardized nodes. The control structure of the execution flow includes conditional branches, loops, and nested sub-flows, generating a flow configuration that describes the front-end business logic based on expressions and control structures. The flow configuration is stored in a database. Standardized nodes include navigation control nodes, UI component operation nodes, programming logic nodes, and remote call nodes; S2, parsing and execution; The interpreter engine obtains the process configuration from the database through the loader and directly parses the process configuration into an internal instruction sequence. When the front end runs, the interpreter engine executes the internal instruction sequence in the browser environment according to the topological order. No executable code is generated during the execution process, and the configuration takes effect immediately after configuration. Data is passed between standardized nodes through a global context object.

2. The visual front-end business logic orchestration method supporting multi-dimensional interactive control as described in claim 1, characterized in that: The navigation control node is used to encapsulate front-end routing and view operations; the navigation control node includes functions for executing page navigation, returning, and closing the current pop-up window. The UI component operation node is used for atomic operations on dynamic forms and prompt components; the UI component operation node includes retrieving values ​​for specified form items, assigning values ​​to form items, modifying component properties, and controlling prompts; The programming logic node is used to provide class programming capabilities; The programming logic nodes include configuration expressions, log output, encapsulation of reusable logic blocks, sub-process calls, and loop control; The remote call node is used to unify the external interaction interface; the remote call node includes initiating HTTP requests and calling pre-registered function points.

3. The visual front-end business logic orchestration method supporting multi-dimensional interactive control as described in claim 1, characterized in that: The global context object adopts a tree structure and supports access via path expressions. The execution results of standardized nodes are written to the global context object for subsequent nodes to read and use.

4. The visual front-end business logic orchestration method supporting multi-dimensional interactive control as described in claim 1, characterized in that: The interpretation and execution engine includes a built-in asynchronous scheduler. When the front end is running, the built-in asynchronous scheduler is used to wait for the HTTP request response before executing the update of the UI component operation node.

5. The visual front-end business logic orchestration method supporting multi-dimensional interactive control as described in claim 1, characterized in that: The UI component operation nodes access the component state through a unified interface, thus decoupling them from the underlying front-end framework.

6. The visual front-end business logic orchestration method supporting multi-dimensional interactive control as described in claim 1, characterized in that: The expression is executed in a security sandbox, where access to dangerous APIs is prohibited.

7. A visual front-end business logic orchestration system supporting multi-dimensional interactive control, employing the visual front-end business logic orchestration method supporting multi-dimensional interactive control as described in any one of claims 1-6, characterized in that: This includes a front-end business configuration module, as well as a parsing and execution module; The front-end business configuration module is used to define the execution flow by dragging and dropping standardized nodes based on a visual orchestration interface. The control structure of the execution flow includes conditional branches, loops, and nested sub-flows. It generates a process configuration based on expressions and control structures that describes the front-end business logic. The process configuration is stored in a database. Standardized nodes include navigation control nodes, UI component operation nodes, programming logic nodes, and remote call nodes; The parsing and execution module, the interpretation engine of the interpretation and execution engine obtains the process configuration from the database through the loader and directly parses the process configuration into an internal instruction sequence. When the front end runs, the interpretation and execution engine executes the internal instruction sequence in the browser environment according to the topological order; data is passed between various standardized nodes through a global context object.

8. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the visual front-end business logic orchestration method that supports multi-dimensional interactive control as described in any one of claims 1-6.

9. A computing device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, it implements the visual front-end business logic orchestration method that supports multi-dimensional interactive control as described in any one of claims 1-6.

Images