Method and system for low-code construction of single-page application based on state driving

Abstract

The invention discloses a method and a system for constructing a single-page application with low codes based on state driving, and relates to the technical field of constructing the single-page application according to the low codes, and the method comprises the following steps: abiding by a state driving strategy, solving the single-page application into a plurality of mutually matched visual units, a data adapter and an interoperation device, defining a page initialization unit, a visualization unit, a data adapter and an interoperation device state space; realizing a visual unit, a data adapter and an interoperation device plug-in; a single-page application editor is realized, a user is guided to complete single-page configuration, complex service function arrangement is completed, and single-page applications are saved and generated; according to the method, the state layer and the view layer of the single-page application are separated, and the view, data and interaction are driven based on the unified state control logic, so that the constructed single-page application is richer in function, can face complex business scenes, and has relatively high applicability.

Description

Technical Field

[0001] The present invention relates to the technical field of building single-page applications based on low-code, and in particular to a method and system for building single-page applications based on low-code driven state. Background Art

[0002] The existing technology adopts the technical solution for building single-page applications with low code, which is to combine the limited functions provided by the low-code platform to build a single-page application by allowing users, i.e. page developers, to select components, layout components, bind data, handle events and other page layout processes. In the component selection stage, developers will select appropriate components from the component library provided by the low-code platform according to page requirements, and adjust the layout of the components. Developers then need to associate the components with the back-end data source to ensure that the components can display data correctly.

[0003] Event handling is the key to achieving user interaction. Developers set the event handling logic of components in a graphical way, such as performing an operation after clicking a button. This allows non-professional developers to easily implement user interaction logic.

[0004] In the above process, the low-code platform adopts a procedural programming strategy, that is, through the code implementation of each component, the data source and interaction type that the component can accept are determined, and developers can only arrange the page within the scope of the functions provided by the component.

[0005] The disadvantages of the existing technology include: (1) The procedural strategy causes the component to only provide limited rendering logic, data source interface and interaction logic interface that have been implemented by code to page developers. When these limited functions cannot meet the complex single-page application interaction logic, it will lead to the need for additional R&D and time costs for customized development, and it is impossible to give full play to the advantages of low-code architecture; (2) Data source and interaction logic control also face the problems faced by the above-mentioned component functions. Usually, the implementation and control logic of data source and interaction logic are different from those of components, which makes it difficult for page developers to understand or fully utilize and explore functions, so that they cannot compile pages that meet the needs of complex business scenarios; (3) When existing low-code architectures try to make up for the lack of flexibility brought about by the procedural underlying architecture, they all adopt the method of adding a way for page developers to write code, which increases the application threshold for page developers and increases the implementation cost.

[0006] The patent document with application number 202310024519.2 discloses a method for quickly building low-code applications, including the following steps: data preparation, application construction, application release, construction completion, and finally generating an application module; first, data preparation is performed to obtain the construction resource data required for application construction, compress and upload it to the construction module, and then the construction module decompresses the data and visually builds pages, business logic and data structures, and designs the page design application functions in a drag-and-drop manner. Through this method, non-professionals can also directly build the application modules they need, which improves the speed of application construction and user-friendliness. However, the method also has the problem that it adopts a procedural strategy and cannot give full play to the advantages of the low-code architecture. Summary of the invention

[0007] In response to the above-mentioned problems, the purpose of the present invention is to provide a method and system for building a single-page application based on state-driven low-code, and to build a single-page application with complex business functions based on a unified state control logic.

[0008] Embodiments of the present invention provide a method and system for building a single-page application based on state-driven low-code.

[0009] Aspect 1: A method for building a single-page application based on state-driven low-code, including:

[0010] S1. Follow the state-driven strategy to deconstruct the single-page application into multiple visualization units, data adapters, and interoperators that cooperate with each other, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperator state space in the state layer;

[0011] S2, implement visualization units, data adapters and interoperator plug-ins according to the state space defined in S1;

[0012] S3. Implement a single-page application editor to guide users to complete single-page configuration, add visualization units, data adapters, and interoperator plug-ins to the single-page application, complete the orchestration of complex business functions, and save the generated single-page application.

[0013] Furthermore, the state-driven strategy comprises the following steps:

[0014] S11, rendering a visualization unit, rendering the data in the current state space of the visualization unit to the page, and the user operating the visualization unit interface triggers parameter data changes;

[0015] S12, the interoperator monitors the data status change and updates the changed data to the status of the data adapter;

[0016] S13, after the data adapter monitors that its own state has changed, the data adapter executes the data request and updates the request result data to its own state;

[0017] S14, the interoperator monitors that the state of the data adapter has changed, and updates the changed result data to the state of the visualization unit;

[0018] S15. The state change of the visualization unit triggers re-rendering of the state to the view, and the result data state is passed to the page view as a rendering parameter.

[0019] Furthermore, the S1 defines page initialization, visualization unit, data adapter and interoperator state space in the state layer, including:

[0020] Define the state space of visualization units, including layout positioning, visibility status, style, data, errors, and events;

[0021] Define the state space of the data adapter, including request path, request path parameters, request parameters, data processing logic and parameters, data, request status, and request errors;

[0022] Define the state space of the interoperator, including the interoperability mode, source plug-in identifier, source state path, target plug-in identifier, target state path, instruction path, and data processing logic and parameters;

[0023] Defines the initial state space of the single-page application, including the visualization units, data adapters, and interactors contained on the page.

[0024] Furthermore, the state space is serialized and represented using a JSON data structure and is persistently stored in a database.

[0025] According to a method for building a single-page application based on state-driven low-code according to claim 1, it is characterized in that the visualization unit, data adapter and interoperator plug-in are implemented in S2, including:

[0026] Implement visualization unit plug-ins, including menus, buttons, text, tables, directory trees, and forms;

[0027] Implement data adapter plug-ins, including request adapter, routing adapter and cookie adapter;

[0028] Implement the interoperator plug-in to implement the interoperator to monitor the changes in the target state and update and replace the target state data with the converted data.

[0029] Furthermore, the application management page is implemented in the S3, including creating a single-page application, or editing and deleting a created application.

[0030] Furthermore, the S3 guides the user to complete the single page configuration, including the steps of:

[0031] S31. The user creates or modifies a single-page application using an application editor;

[0032] S32. The user adds various visualization units to the single-page application in the form of visual arrangement, and adds data adapters and interoperators;

[0033] S33. The user changes the rendering position, size and style of the visualization unit in the single-page application, modifies the data adapter, configures the interoperator, and composes a single-page application with complex business functions as required;

[0034] S34. After the single-page application is arranged, the application state is persistently stored in the database.

[0035] A second aspect: A system applied to the method of the first aspect, comprising:

[0036] The view layer is implemented as visualization units, data adapters, and interoperators for different applications and functions;

[0037] The state layer is implemented as a state space held by page initialization, visualization units, data adapters, and interoperators;

[0038] Low-code layer: Use the application editor to create or modify single-page applications, add visualization units, data adapters, and interoperators of the view layer, and compose single-page applications with complex business functions according to needs;

[0039] The application layer provides single-page applications.

[0040] A third aspect: An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the method provided in the first aspect when executing the program.

[0041] A fourth aspect: A non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the method provided in the first aspect.

[0042] Beneficial effects of the present invention:

[0043] 1. The present invention separates the state layer and view layer of the single-page application, drives the view, data and interaction based on a unified state control logic, and constructs a single-page application with richer functions, which can cope with complex business scenarios and has strong applicability.

[0044] 2. The present invention is based on a state-driven low-code view control method and plug-in structure, has good scalability and completeness, and has a simple system structure with low barriers to understanding and use. With only a small amount of basic plug-in knowledge, complex business applications can be built through visual orchestration, which has the advantages of low customization cost and high implementation efficiency.

[0045] 3. The present invention is based on a state-driven low-code view control method and plug-in structure for single-page applications. It can customize the development of plug-ins for special business scenarios, thereby greatly simplifying the complexity of page layout and has strong scalability. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] Figure 1 A flowchart of a method for building a single-page application based on state-driven low-code in the present invention;

[0047] Figure 2 A schematic diagram of the structure of a system for building a single-page application based on state-driven low-code according to the present invention;

[0048] Figure 3 It is the principle diagram of the state driving strategy of the present invention;

[0049] Figure 4 It is a schematic diagram of the structure of the electronic device of the present invention. DETAILED DESCRIPTION

[0050] Embodiments of the present invention are described in detail below, examples of which are shown in the accompanying drawings, wherein the same or similar symbols throughout represent the same or similar elements or elements with the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present invention, and cannot be understood as limiting the present invention.

[0051] Existing solutions for building single-page applications using low-code use a procedural strategy, which results in components only providing limited rendering logic, data source interfaces, and interaction logic interfaces that have been implemented by code to page developers. When these limited functions cannot meet the complex interaction logic of single-page applications, it will require additional R&D and time costs for customized development, which cannot fully utilize the advantages of the low-code architecture, increases the application threshold for page developers, and increases implementation costs.

[0052] In view of the above problems, the present invention provides a method for building a single-page application based on state-driven low-code. Figure 1 A flow chart of a method for building a single-page application based on state-driven low-code provided in an embodiment of the present invention, the method comprising:

[0053] S1. Follow the state-driven strategy, deconstruct the single-page application into multiple visualization units, data adapters, and interoperators that cooperate with each other, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperator state space in the state layer.

[0054] like Figure 3 As shown, the state-driven strategy implementation includes:

[0055] First, a visualization unit is rendered. The visualization unit renders the data in the current state space into the page. User operations on the visualization unit interface parameters can trigger state changes, for example, changing the filtering parameters or paging parameters of a list. At this time, the interoperator listens for parameter state changes, and the interoperator updates the changed parameters to the state of the data adapter, and sets the data validity state of the data adapter to invalid. After the data adapter listens for changes in its own state, the data adapter starts to execute the data request logic. After the data request ends, the data adapter updates the result data to its own state space. At this time, when the interoperator listens to changes in the state of the data adapter, it updates the changed data to the state space of the visualization unit. The state change of the visualization unit triggers the re-rendering of the state to the page view, and the state is passed to the page view component as a rendering parameter, forming a complete state migration process based on a state-driven strategy.

[0056] Following the above state-driven strategy, a single-page application is deconstructed into a compilation of multiple visual units, data adapters, and interoperators that cooperate with each other. Visual units, data adapters, and interoperators are called plug-ins.

[0057] The state layer defines page initialization, visualization units, data adapters, and interactive operator state spaces, where:

[0058] Define the state space of the visualization unit, including layout positioning, visibility status, style, data, errors and events, etc. The visualization unit renders the state onto the page.

[0059] Define the state space of the data adapter, including request path, request path parameters, request parameters, data processing logic and parameters, data, request status and request errors, etc. The implementation of the data adapter is responsible for executing data requests and processing data according to the status.

[0060] Define the state space of the interoperator, including the interoperability mode, source plug-in identifier, source state path, target plug-in identifier, target state path, instruction path, data processing logic and parameters, etc. The interoperator monitors the specified state of the target plug-in according to the state in the state space. When the state changes, it will trigger the update of the target plug-in state or execute the target plug-in's instructions.

[0061] Define the initial state space of a single-page application, including the visualization units, data adapters, and interoperators contained on the page. The initial state completely describes the initial view of a page application and the page's interaction logic with the browser, external interface, and user.

[0062] Then, the state space is serialized using the JSON data structure so that the single-page application can be visually orchestrated and persistently stored in the database.

[0063] S2. Implement visualization unit, data adapter and interoperator plug-in according to the state space defined above.

[0064] Among them, the visualization unit, data adapter and interoperator plug-in are implemented, including:

[0065] Implement visualization unit plug-ins, including menus, buttons, texts, tables, directory trees, and forms, and define the data state space of each visualization unit. For example, the data state space of a table needs to include table data, paging parameters, currently selected rows, checked rows, etc.

[0066] Visual unit plug-ins can declare states that can be monitored and changed by interoperators, as well as commands that can be executed by interoperators. Commands can implement complex visual unit state changes, and view components can change rendering styles in real time based on style states in the state space.

[0067] Implement data adapter plug-ins, including request adapters, routing adapters, and cookie adapters; data adapters are responsible for initiating process calls, which can initiate data requests, obtain data from external environments such as browsers, communicate with external systems, or simply process and convert internal system data.

[0068] Implement the interoperator plug-in to enable the interoperator to update and replace the target state data with the converted data based on the changes in the target state; the interoperator is responsible for monitoring the changes in any state in the system, converting the changed data, and finally updating and replacing the target state data with the converted data.

[0069] The interoperator can be used to update the data obtained from the data adapter to the state space of the visualization unit, or it can respond to the event state change of the visualization unit to trigger the execution of the data adapter or the change of the style state of another visualization unit.

[0070] S3. Implement a single-page application editor to guide users to complete single-page configuration, add visualization units, data adapters, and interoperator plug-ins to single-page applications. At the same time, it allows users to add various low-code components (such as charts, forms, business panels, etc.) to single-page applications, complete the orchestration of complex business functions, and save and generate single-page applications.

[0071] Implement application management page, including creating single-page application, or editing and deleting created applications, etc.

[0072] Users use the application editor to create or modify single-page applications. Users add various visualization units to the single-page application through visual orchestration, and simultaneously add data adapters and interoperators. Users change the rendering position, size and style of the visualization unit in the single-page application, modify the interface address and parameters of the data adapter, configure the interoperator, change the state path that needs to be monitored and changed, and orchestrate single-page applications with complex business functions as required; after the single-page application is orchestrated, it can be saved to persist the application state in the database.

[0073] The present invention also discloses a system applied to the above method, such as Figure 2 As shown, the system includes:

[0074] The view layer is implemented as visualization units, data adapters, and interoperators with different applications and functions; the visualization unit is responsible for rendering the data and layout information managed by the state layer onto the page.

[0075] The state layer is implemented as the state space held by page initialization, visualization unit, data adapter and interoperator; the state layer is a collection of the states of various plug-ins themselves. The visualization unit, data adapter and interoperator all have their own states.

[0076] Low-code layer: The low-code layer uses the application editor to create or modify single-page applications, add visualization units, data adapters, and interoperators of the view layer, and orchestrate single-page applications with complex business functions according to needs.

[0077] The application layer is used to provide single-page applications.

[0078] Through the above-mentioned structural setting and method application, the state layer and view layer of the single-page application can be separated. The view, data and interaction are driven based on a unified state control logic. The constructed single-page application has the advantages of rich functions and strong applicability to complex business scenarios.

[0079] The present invention also provides an electronic device, Figure 4 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention, such as Figure 4As shown, the electronic device may include: a processor, a communications interface, a memory, and a communications bus, wherein the processor, the communications interface, and the memory communicate with each other via the communications bus. The processor may call the logic instructions in the memory, for example, to execute the following method:

[0080] S1. Follow the state-driven strategy to deconstruct the single-page application into multiple visualization units, data adapters, and interoperators that cooperate with each other, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperator state space in the state layer;

[0081] S2, implement visualization units, data adapters and interoperator plug-ins according to the state space defined in S1;

[0082] S3. Implement a single-page application editor to guide users to complete single-page configuration, add visualization units, data adapters, and interoperator plug-ins to the single-page application, complete the orchestration of complex business functions, and save the generated single-page application.

[0083] In addition, the logic instructions in the above-mentioned memory can be implemented in the form of software functional units and can be stored in a computer-readable storage medium when sold or used as an independent product. Based on such an understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0084] An embodiment of the present invention further provides a non-transitory computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the method provided in each of the above embodiments is implemented, for example, including:

[0085] S1. Follow the state-driven strategy to deconstruct the single-page application into multiple visualization units, data adapters, and interoperators that cooperate with each other, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperator state space in the state layer;

[0086] S2, implement visualization units, data adapters and interoperator plug-ins according to the state space defined in S1;

[0087] S3. Implement a single-page application editor to guide users to complete single-page configuration, add visualization units, data adapters, and interoperator plug-ins to the single-page application, complete the orchestration of complex business functions, and save the generated single-page application.

[0088] The system embodiment described above is merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art may understand and implement it without creative work.

[0089] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0090] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for building a single-page application based on state-driven low-code, characterized in that: include: S1. Follow the state-driven strategy to deconstruct the single-page application into multiple visualization units, data adapters, and interoperators that cooperate with each other, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperator state space in the state layer; S2, implement visualization units, data adapters and interoperator plug-ins according to the state space defined in S1; S3. Implement a single-page application editor to guide users to complete single-page configuration, add visualization units, data adapters, and interoperator plug-ins to the single-page application, complete the orchestration of complex business functions, and save the generated single-page application.

2. According to claim 1, the method for building a single-page application based on state-driven low-code is characterized in that: The state-driven strategy includes the following steps: S11, rendering a visualization unit, rendering the data in the current state space of the visualization unit to the page, and the user operating the visualization unit interface triggers parameter data changes; S12, the interoperator monitors the data status change and updates the changed data to the status of the data adapter; S13, after the data adapter monitors that its own state has changed, the data adapter executes the data request and updates the request result data to its own state; S14, the interoperator monitors that the state of the data adapter has changed, and updates the changed result data to the state of the visualization unit; S15. The state change of the visualization unit triggers re-rendering of the state to the view, and the result data state is passed to the page view as a rendering parameter.

3. The method for building a single-page application based on state-driven low-code according to claim 1 is characterized in that: The S1 defines page initialization, visualization unit, data adapter and interoperator state space in the state layer, including: Define the state space of visualization units, including layout positioning, visibility status, style, data, errors, and events; Define the state space of the data adapter, including request path, request path parameters, request parameters, data processing logic and parameters, data, request status, and request errors; Define the state space of the interoperator, including the interoperability mode, source plug-in identifier, source state path, target plug-in identifier, target state path, instruction path, and data processing logic and parameters; Defines the initial state space of the single-page application, including the visualization units, data adapters, and interactors contained on the page.

4. The method for building a single-page application based on state-driven low-code according to claim 3 is characterized in that: The state space is serialized using a JSON data structure and is persistently stored in a database.

5. The method for building a single-page application based on state-driven low-code according to claim 1 is characterized in that: The visualization unit, data adapter and interoperator plug-in are implemented in S2, including: Implement visualization unit plug-ins, including menus, buttons, text, tables, directory trees, and forms; Implement data adapter plug-ins, including request adapter, routing adapter and cookie adapter; Implement the interoperator plug-in to implement the interoperator to monitor the changes in the target state and update and replace the target state data with the converted data.

6. The method for building a single-page application based on state-driven low-code according to claim 1 is characterized in that: The application management page is implemented in the S3, including creating a single-page application, or editing and deleting a created application.

7. The method for building a single-page application based on state-driven low-code according to claim 1 is characterized in that: The S3 guides the user to complete the single page configuration, including the following steps: S31. The user creates or modifies a single-page application using an application editor; S32. The user adds various visualization units to the single-page application in the form of visual arrangement, and adds data adapters and interoperators; S33. The user changes the rendering position, size and style of the visualization unit in the single-page application, modifies the data adapter, configures the interoperator, and composes a single-page application with complex business functions as required; S34. After the single-page application is arranged, the application state is persistently stored in the database.

8. A system based on the method according to any one of claims 1 to 7, characterized in that: include: The view layer is implemented as visualization units, data adapters, and interoperators for different applications and functions; The state layer is implemented as a state space held by page initialization, visualization units, data adapters, and interoperators; Low-code layer: Use the application editor to create or modify single-page applications, add visualization units, data adapters, and interoperators of the view layer, and compose single-page applications with complex business functions according to needs; The application layer provides single-page applications.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the steps of the method according to any one of claims 1 to 7 are implemented.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images