Code editor of low-code platform and low-code platform

Abstract

The invention relates to a code editor of a low-code platform and the low-code platform. The code editor comprises a component event script writing module, a storage and storage module, an API object construction module, a user-defined API loading module and a component event execution script module. The component event script writing module provides a script writing interface for a developer to write component event scripts. And the API object construction module analyzes the configuration information when the page is loaded to generate an API object. And the user-defined API loading module obtains the module id set and stores the module id set in a cache for subsequent use. When an event is triggered, the component event execution script module reads script content, executes a script method and calls a method on an API object. The code editor is realized on the basis of an existing low-code platform project, and is used for a user to compile self-defined script event logic, so that logic definition of a complex business process is realized, a code compiling process is greatly simplified, and the code reuse capability is provided.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and particularly relates to a code editor for a low-code platform and a low-code platform. Background Art

[0002] With the rapid development of the Internet industry, enterprises have higher and higher requirements for the ability to quickly deliver software applications. The traditional development mode not only takes a long time but also requires high professional capabilities of developers. As a result, more and more low-code platform products have emerged. Through simple visual operations such as component dragging and property configuration combined with a small amount of code writing, the development of a page can be completed, forming a complete project, which improves efficiency and significantly reduces the development threshold. However, current low-code platforms basically have a relatively fixed set of interaction processes and interface display rules pre-set, which have certain limitations, are difficult to fully meet complex business scenarios, and lack an efficient code reuse mechanism. Summary of the Invention

[0003] The technical problem to be solved by the present invention is to provide a code editor for a low-code platform and a low-code platform. The code editor is implemented based on an existing low-code platform project, which is used for users to write custom script event logic, so as to realize the logical definition of complex business processes, greatly simplifies the code writing process, and provides the ability of code reuse.

[0004] In a first aspect, the present invention provides a code editor for a low-code platform, including:

[0005] A component event script writing module, which is used to provide a script writing interface for developers to write the event script content of components through component event entrances or newly added custom APIs;

[0006] A storage module for storing the completed event script content into the database. If the script is written through a component event entrance, it is stored according to the type of the event entrance spliced with the id of the configured component; if the script is written through a newly added custom API, it is stored according to the custom API name;

[0007] An API object construction module, which is used to obtain the configuration information of the page and parse it during the page loading stage to obtain page component information, filter out an API list that can operate component interaction behaviors from the built-in API list according to the component type of the page component information, and convert the API list into an API object. The key name of the API object is the API name, and the key value is the corresponding code content method;

[0008] A custom API loading module is used to obtain a set of component IDs according to the page component information, obtain a list of previously written event script contents according to the set of component IDs and the list of event entry points corresponding to the components, and store them in a cache for subsequent retrieval when component events are triggered; traverse the list of event script contents, obtain all custom API names and corresponding custom API information in the event script content, and convert the script content of the custom API information into a script method; then mount the custom API name and the corresponding script method onto the previously constructed API object; so that the methods on the entire API object include the API methods built into the platform and the developer-defined API methods.

[0009] A component event execution script module is used to, when a component event is triggered, splice the type of the event entry according to the component ID of the triggered action, read the corresponding event script content from the cache to generate a script method, parse the list of APIs used in the script content, and take out the methods on the API object according to the API name and pass them as parameters of the script method into the script method, so that when the script method is executed, the methods on the API object can be called in the execution environment, and then execute the script method.

[0010] In a second aspect, the present invention provides a low-code platform, including the code editor described in the first aspect.

[0011] The present invention has at least the following technical effects: The event logic of the code editor is implemented based on an existing low-code platform project. Define all component event entry points in the low-code platform, build in the script execution logic of built-in components in various triggering scenarios, and open an entry for writing corresponding event scripts. At the same time, provide a set of built-in APIs. Developers can write scripts through the code editor to call these APIs to define the event behaviors of all components in the platform, and finally customize a set of page element interaction logics, significantly improving the freedom of page configuration element interaction and allowing developers to flexibly create interaction effects according to actual needs. At the same time, developers can also add custom APIs for script writing, encapsulate a section of general script logic, and make it a custom API for subsequent calls, thereby greatly improving the code reuse degree, avoiding repeated writing of similar script logics in different scenarios, effectively reducing repetitive development work, and thus improving the efficiency of page development as a whole and making the development process more efficient and convenient.

[0012] The above description is only an overview of the technical solution of the present invention. In order to be able to understand the technical means of the present invention more clearly, it can be implemented according to the content of the specification. And in order to make the above and other purposes, features and advantages of the present invention more obvious and understandable, the following specifically gives the specific embodiments of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0014] Figure 1 It is a schematic diagram of the composition architecture of the low-code platform of the present invention;

[0015] Figure 2 It is a schematic diagram of the composition architecture of the code editor of the present invention;

[0016] Figure 3 It is a schematic diagram of the key process of the code editor of the present invention;

[0017] Figure 4 It is a process flow chart for writing component event scripts in the code editor of the present invention;

[0018] Figure 5 It is a process flow chart for the execution of the API object construction module of the code editor of the present invention;

[0019] Figure 6 It is a process flow chart for the execution of the custom API loading module of the code editor of the present invention;

[0020] Figure 7 It is a process flow chart for the execution of the component event execution script module of the code editor of the present invention; Specific embodiments

[0021] In the embodiments of the present application, by providing a code editor for a low-code platform and a low-code platform, the code editor is implemented based on an existing low-code platform project, and is used for users to write custom script event logics, so as to realize the logical definition of complex business processes, greatly simplify the code writing process, and provide the ability of code reuse.

[0022] The general idea of the technical solution in the embodiments of the present application is as follows: The low-code platform opens and provides the interaction event entrances of all components in the platform. Developers can utilize this event entrance and use the component event script writing module of the code editor to write custom script event logics, so as to realize the logical definition of complex business processes. It also supports adding custom APIs for script writing, enabling developers to save and upload a piece of written code logic to the platform to realize the ability of custom APIs. Moreover, the newly added custom APIs can be loaded together when the project is loaded, so as to provide subsequent writing and calling, which greatly simplifies the code writing process and provides the ability of code reuse. In addition, the code editor provides a large number of built-in component interaction APIs. Developers can insert the API name at a specified position (cursor position) by writing prompts through the listening module and clicking in the API list, thereby realizing the control of component interaction in the platform.

[0023] Before introducing the specific embodiments, the system framework corresponding to the method of the embodiments of the present application will be introduced first, as Figure 1 shown, the low-code platform of the present invention includes:

[0024] A project loading module, which is used for project loading. When a project is loaded, it will obtain the event entry list of all components provided inside. This event entry list is classified and stored according to the component types of the low-code platform. Usually, a component has multiple event entries. At the same time, it will also load the built-in API list provided by the low-code platform and the API list customized by developers. Among them, an API covers three pieces of information: specific code content, API name, and API description.

[0025] A code editor, that is, the code editor of the low-code platform of the present invention as Figure 2 shown. Developers can write custom script event logic by means of the event entries provided during project loading or by adding custom APIs, so as to realize the logical definition of complex business processes.

[0026] A code library, which is used to save the event script content of components.

[0027] Embodiment 1

[0028] As Figure 2 shown, this embodiment provides a preferred implementation manner of a code editor of a low-code platform, including a display module, a component event script writing module, a listening module, a saving and warehousing module, an API object construction module, a custom API loading module, and a component event execution script module.

[0029] As Figure 3 shown, the main processes of the code editor include:

[0030] (1) Write the component event script and store it in the warehouse;

[0031] (2) Analyze the page structure to generate an API object;

[0032] (3) Load custom APIs;

[0033] (4) Component event execution script.

[0034] A display module, which is used to obtain the corresponding event entry list according to the component type and display it when a developer drags and drops a component for configuration, so that the developer can trigger the component event script writing module by selecting an event entry. Since when the low-code platform loads a project, it will obtain the event entry list of all components provided inside it. At the same time, it will also load the built-in API list provided by the low-code platform and the API list customized by the developer. Therefore, when a developer drags and drops a component for configuration, the corresponding event entry list can be obtained according to the component type and displayed.

[0035] A component event script writing module, which is used to provide a script writing interface for the developer to write the event script content of the component through the component event entry or by adding a new custom API. For example, Figure 4 That is, the developer can either select an event entry to write the script or select to add a new custom API to write the script.

[0036] A monitoring module, which is used to monitor the characters input by the developer in the script writing interface in real time; when the developer inputs a segment of characters, if the characters are included in the API name in the API list or the text in the API description, all the included items will be assembled into a list and popped up, so that the developer can insert the complete API name at the cursor position of the event script content by clicking on the popped-up list item; and all the API names will also be listed in the API display area, so that the developer can insert the complete API name at the cursor position of the event script content by clicking on the API name. Furthermore, it realizes the control of the component interaction in the platform, such as the operation of setting data for a table control.

[0037] A storage module for storing the completed event script content into the database. If the script is written through the component event entry, it will be stored by splicing the type of the event entry according to the id of the configured component; if the script is written by adding a new custom API, it will be stored according to the custom API name; among them, when the storage module stores according to the custom API name, it will also verify the uniqueness of the custom API name, and give a prompt when the custom API name input by the developer is repeated.

[0038] An API object construction module, which is used in the page loading stage, such as Figure 5As shown in the figure, first obtain the configuration information of the page and parse it to obtain page component information. These components are the basic elements that make up the page functions and interactions, such as buttons, text boxes, tables, etc. Filter out the API list that can operate the interaction behaviors of these components from the built-in API list according to the type of the components, such as triggering the click of a button, querying a table, etc. Then filter out the API list that can operate the interaction behaviors of the components from the built-in API list according to the component type of the page component information, and convert the API list into an API object. The key name of the API object is the API name, and the key value is the corresponding code content method.

[0039] A custom API loading module, such as Figure 6 As shown in the figure, it is used to obtain the component ID set according to the page component information, obtain the list of previously written event script contents according to the component ID set and the list of event entry points corresponding to the components, and store them in the cache for subsequent acquisition when component events are triggered; traverse the list of event script contents, obtain all the custom API names in the event script content, and further obtain the specific custom API information corresponding to each custom API name according to the obtained custom API names, and convert the script content of the custom API information into a script method; then mount the custom API name and the corresponding script method to the previously constructed API object; make the methods on the entire API object include the platform-built-in API methods and the developer-defined API methods. A complete API resource library that can be conveniently called by the page during operation is formed, so that it is convenient to find and execute the corresponding API method when the subsequent event script is executed.

[0040] A component event execution script module, such as Figure 7 As shown in the figure, it is used to, when a component event is triggered, splice the type of the event entry according to the component ID of the triggered action, read the corresponding event script content from the cache to generate a script method, parse the API list used in the script content, and take out the methods on the API object according to the API name and pass them as parameters of the script method into the script method, so that the script method can call the methods on the API object in the execution environment when it is executed, and then execute the script method.

[0041] The low-code platform presets the event execution entry for all component actions, that is, the previous project loading module. When the project is loaded, obtain the list of event entry points of all components provided inside it. When the user operates a certain component on the page and triggers a specific action, such as button click, input box focus, etc., the corresponding event entry logic will be executed.

[0042] Among them, during the execution of the script method by the component event execution script module, if it executes to an API method built into the platform, it directly calls and executes the built-in method logic of the platform to affect the interaction behavior of the component; if it executes to a developer-defined API method, for the ordinary script part, it is directly executed, and when calling the part involving the built-in API method of the platform, the built-in method logic is executed.

[0043] In this way, developers can write event scripts with the help of a code editor and flexibly define various behaviors when users operate page elements.

[0044] Embodiment 2

[0045] As Figure 1 shown, in this embodiment, a low-code platform is provided, which includes the code editor described in Embodiment 1.

[0046] Among them, when the low-code platform of this embodiment loads a project, it will obtain the event entry list of all components provided inside it, and at the same time load the built-in API list and the developer-defined API list; the event entry list is classified and stored according to the component types of the low-code platform; the APIs cover specific code content, API names, and API descriptions.

[0047] Although the specific implementation manners of the present invention have been described above, those skilled in the art of this technology should understand that the specific embodiments we described are illustrative rather than used to limit the scope of the present invention. Equivalent modifications and changes made by those skilled in the art in accordance with the spirit of the present invention should all be covered within the scope protected by the claims of the present invention.

Claims

1. A code editor for a low-code platform, characterized by: include: The component event script writing module is used to provide a script writing interface for developers to write component event script content through the component event entry or a new custom API; The save module is used to store the completed event script content. If the script is written through the component event entry, it is stored according to the type of the event entry spliced ​​by the id of the configuration component; If the script is written by adding a custom API, it is stored according to the custom API name; The API object building module is used to obtain and parse the configuration information of the page during the page loading phase to obtain the page component information, filter out the API list that can operate the component interaction behavior from the built-in API list according to the component type of the page component information, and convert the API list into an API object. The key name of the API object is the API name, and the key value is the corresponding code content method; A custom API loading module is used to obtain a component ID set according to the page component information, obtain a previously written event script content list according to the component ID set and the event entry list corresponding to the component, and store it in a cache for subsequent acquisition when a component event is triggered; traverse the event script content list, obtain all custom API names and corresponding custom API information in the event script content, and convert the script content of the custom API information into a script method; and then mount it to the previously constructed API object according to the custom API name and the corresponding script method; The methods on the entire API object include the platform's built-in API methods and the developer's customized API methods; The component event execution script module is used to, when a component event is triggered, splice the type of event entry according to the component ID of the triggered action, read the corresponding event script content from the cache to generate a script method, parse the API list used in the script content, and extract the method on the API object according to the API name, and pass it into the script method as a parameter of the script method, so that when the script method is executed, the method on the API object can be called in the execution environment, and then the script method is executed.

2. A code editor for a low-code platform according to claim 1, characterized in that: Also includes: The display module is used to obtain and display the corresponding event entry list according to the component type when the developer drags in the component for configuration, so that the developer can trigger the component event script writing module by selecting the event entry.

3. A code editor for a low-code platform according to claim 1, characterized in that: Also includes: The monitoring module is used to monitor the characters input by the developer in the script writing interface in real time; When the developer inputs a segment of characters, if the characters are included in the API name in the API list or the text in the API description, all included items will be assembled into a list and popped up, allowing the developer to insert the complete API name at the cursor position of the event script content by clicking on the pop-up list item; and all API names will also be listed in the API display area, allowing the developer to insert the complete API name at the cursor position of the event script content by clicking on the API name.

4. The code editor of a low-code platform according to claim 1, characterized in that: During the process of executing the script method, if the component event execution script module executes the platform's built-in API method, it will directly call the platform's built-in method logic to affect the component's interactive behavior; if it executes the developer's customized API method, the ordinary script part will be directly executed, and when the part involving the platform's built-in API method is called, the platform's built-in method logic will be executed.

5. The code editor of a low-code platform according to claim 1, characterized in that: When storing according to the custom API name, the storage module will also verify the uniqueness of the custom API name, and prompt when the custom API name entered by the developer is repeated.

6. A low-code platform, characterized by: The invention comprises a code editor as claimed in any one of claims 1 to 5.

7. A low-code platform according to claim 6, characterized in that: When the project is loaded, the event entry list of all components provided inside it will be obtained, and the built-in API list and the developer's customized API list will also be loaded; the event entry list is classified and stored according to the component type of the low-code platform; the API covers specific code content, API name and API description.

Images