A low-code rapid development method and system

Abstract

This invention provides a low-code rapid development method and system, including a front-end visual designer, a metadata center, a permission control center, and a code generation engine. The front-end visual designer integrates Element Plus and Vant based on the Vue framework, encapsulating unified and general components for defining field types and names. The front-end visual designer includes a form designer, a page generator, a process binder, and a permission configurator. The form designer is used to customize form field prototypes, names, lengths, validation rules, default values, and display formats to form reusable field prototypes. The metadata center is used to customize form associations, configuring association operations between the main table and child tables, and establishing association relationships between forms based on multiple form metadata. It can customize form field prototypes and flexibly associate them, making it suitable for complex business scenarios.

Description

Technical Field

[0001] This invention relates to the field of new information technology service technology, specifically to a low-code rapid development method and system. Background Technology

[0002] Low-code platforms are development platforms that allow applications to be generated with minimal or no code. The main development process involves visual modeling, drag-and-drop components, and declarative configuration. In recent years, with the rapid growth of enterprise digital transformation needs, low-code platforms have been widely used in enterprise internal management systems or process automation applications. Existing low-code platforms typically have functions such as form designers, process editors, and visual page building, which can reduce the workload of writing code by hand to a certain extent.

[0003] However, existing low-code platforms still have many shortcomings. Traditional low-code platforms only support simple data CRUD operations and sequential workflow orchestration. For complex business logic scenarios, users often need to write a lot of custom scripts or backend code. At the same time, in terms of form design, only a limited number of field types are usually preset, and the prototypes of the fields are fixed inside the platform. Users cannot customize new field prototypes according to business needs. When a business scenario requires special fields or new field representations, the only way is often to replace the entire form component. This approach cannot configure complex nested relationships and forces users to turn to traditional development when facing complex business requirements, thus limiting the applicability of low-code platforms in complex scenarios.

[0004] For example, patent document with patent application number 201911065044.1 and publication date of February 21, 2020 discloses a low-code application software development system and method. The system includes a development platform, a runtime platform, and a cloud database. The development platform is connected to the cloud database and is used to build models required for application operation according to predefined functional modules, and to instantiate the built models and store them in the cloud database in the form of structured data. The runtime platform is connected to the cloud database and is used to obtain model instances stored in the cloud database, and to parse and run the structured modeling data in the model instances through a corresponding engine, render the application system pages and express business logic to obtain the application system.

[0005] The above literature implements model building through modules such as form designer and process designer, and achieves separation of business and code through modeling and engine. However, the form designer can only correspond to the conventional modeling of forms, such as data structure, business data and interface layout. At the same time, the relationship between forms is only limited to a simple mapping between the main table and the child table. It lacks the relationship configuration at the form level, and cannot realize the relationship display of fields in the main table and other tables for easy viewing. It also cannot display the corresponding code to facilitate code modification and adjustment, thereby realizing convenient display and quick adjustment between complex business processes. Summary of the Invention

[0006] This invention provides a low-code rapid development method and system that supports the association of form field prototypes with flexible forms, has strong business adaptability, and can meet complex business scenarios.

[0007] To achieve the above objectives, the technical solution provided by this invention is: a low-code rapid development method, comprising the following steps: S1 Pre-setting form data for two or more low-code table units, the form data including: field prototypes, and hierarchical relationships corresponding to two or more fields; S2 Identifying new creation instructions and determining the association mode; if it is a form association mode, importing the main table and the detail table, identifying and displaying the first identifier in the main table, searching for the hierarchical relationship content of the field corresponding to the first identifier in the detail table according to the first identifier, and displaying the field corresponding to the hierarchical relationship of the first identifier and the corresponding content in the field at the corresponding position of the first identifier; S3 Generating source code according to the form unit data and displaying the source code; when modifications are detected in the source code, modifying the displayed content of the form according to the modified content.

[0008] The above settings are based on low-code table unit-driven architecture, with preset field prototypes and corresponding hierarchical relationships. When a new command is detected, an association mode can be selected. In form association mode, when importing the main table and detail table, the hierarchical relationship and content corresponding to the identifier in the detail table are found based on the first identifier in the main table. Then, the key content and hierarchical relationship in the two tables are displayed. Thus, by importing only two tables, the association relationship and content in the two tables can be quickly displayed. When the source code needs to be viewed, the corresponding source code is retrieved and displayed, and modifications can be made in the source code interface. This fully utilizes the advantages of the low-code platform, making it convenient to implement association display through forms and meet complex business scenarios.

[0009] Furthermore, the form data in step S1 also includes: form structure, page permissions, operation permissions, field-level permissions, and the source code of the preset form data corresponding to different program categories.

[0010] The above settings, through preset multi-level permissions such as form data operation permissions and page permissions, can easily restrict form data, subsequent page display, and code data.

[0011] Furthermore, the association modes in step S2 include dictionary-level modes, form association modes, and custom association modes.

[0012] The above settings, through the configuration of various association modes, enable diverse settings for association modes.

[0013] Furthermore, step S2 includes: if the association mode is dictionary-level mode, set the first-level dictionary and determine the first-level attribute form data through the dictionary panel, add a second-level dictionary based on the first-level dictionary and enter the second-level form data, and directly select the dictionary of the corresponding level when defining the form fields to complete the association between the first-level and second-level and above form data. If the association mode is custom association, the original form data is displayed, and then a JS script is used to listen for changes in the form data. When the form data changes, the JS script triggers a data query to retrieve the corresponding business data content.

[0014] The above methods enable visualization and field binding of multi-level dictionaries by establishing dictionary-level associations, reducing the data association operation process. At the same time, if custom associations are performed, the need for dynamic data association in complex business scenarios can be determined by listening to field changes, increasing the applicable scenarios for form associations.

[0015] Furthermore, step S2 includes: after identifying the newly created instruction, identifying the trigger instruction, and then identifying the next process node corresponding to the trigger instruction.

[0016] The above settings allow you to proceed to the next workflow node after creation for subsequent workflow submission and approval processes, thus facilitating subsequent business operations.

[0017] Furthermore, step S3 includes retrieving the corresponding source code based on the form data and program type, displaying it on the page, identifying modifications to key identifiers in the source code, and modifying the corresponding form page based on the modifications to the key identifiers.

[0018] The above settings allow for easy modification via source code by retrieving the corresponding source code.

[0019] Furthermore, step S2 also includes: determining that the newly added display form data, permission data, scripts, and processes on the newly created original page are exported in the form of incremental packages; when it is necessary to display incremental packages, the exported incremental packages are imported and displayed.

[0020] The above settings allow for the import and export of new content added to the original new page via incremental packages, which are then displayed directly as incremental packages in subsequent updates.

[0021] Furthermore, after identifying and displaying the first identifier in the main table in step S2, the process also includes: dragging the component corresponding to the first identifier, forming a configuration file based on the drag position of the first identifier, parsing the configuration file, and determining the content to be displayed on the page based on the configuration file.

[0022] The above settings allow for dynamic page display by dragging the first identifier after it is recognized.

[0023] Another aspect of this invention provides a low-code rapid development system, comprising: a front-end visual designer, a metadata center, and a code generation engine. The front-end visual designer is based on the Vue framework and integrates Element Plus and Vant, encapsulating unified and universal components for pre-setting form data for two or more low-code table units. The form data includes: field prototypes and hierarchical relationships between two or more fields. The metadata center is used to identify association patterns and, in the form association pattern, import a main table and a detail table, identify and display a first identifier in the main table, and, based on the first identifier, search for the hierarchical relationship content of the field corresponding to the first identifier in the detail table, and display the corresponding field and its content at the corresponding position of the first identifier. The code generation engine is used to generate source code based on the form unit data and display the source code. When modifications are detected in the source code, the displayed form content is modified according to the modifications.

[0024] Furthermore, it also includes: a permission management center, a script engine center, a process engine center, a microservice architecture support and containerized deployment layer; the permission management center is used to define and validate page permissions, operation permissions and field-level permissions; The code generation engine is used to generate front-end pages, permission configurations, and report pages with one click based on metadata. The script engine center integrates JS engine, Java engine and Python engine to support the execution of scripts before and after CRUD operations; The process engine center is used to provide process definition, node, task and status management, and supports binding with pages; The microservice architecture support layer is based on Spring Boot and Spring Cloud, and includes a gateway, a registry center, and a configuration center; The containerized deployment layer is used to implement Docker image building, Kubernetes orchestration, service scheduling, load balancing, and high availability assurance.

[0025] The above settings, through the permission management center, can control the access results of different identities and increase the security of sensitive information; through the code generation engine, pages are generated based on metadata, reducing the workload of repetitive development; through the script engine, scripts can be executed normally before and after modification; through the process engine, business processes are bound to the user interface; and through the microservice architecture and containerized deployment layer, the system can achieve standardized distributed deployment.

[0026] Furthermore, it also includes a configuration migration module, which is used to compare changes, extract incremental forms, pages, permissions, scripts and process configurations, package them into incremental packages, and overwrite and update them after importing them into the target environment.

[0027] The above method, by setting up a configuration migration module, enables precise migration of incremental configurations, avoiding the risk of data overwriting caused by full import and export, and also reducing deployment costs. Attached Figure Description

[0028] Figure 1 This is a flowchart of the present invention.

[0029] Figure 2 This is a flowchart illustrating the execution of the script engine center in this invention.

[0030] Figure 3 This is a newly created interface diagram for the present invention.

[0031] Figure 4 This is a schematic diagram of the form association in this invention.

[0032] Figure 5 An online interface diagram is generated for this invention.

[0033] Figure 6 A source code interface diagram is generated for this invention. Detailed Implementation

[0034] The present invention will now be described in further detail with reference to the accompanying drawings and specific embodiments.

[0035] Example 1.

[0036] like Figures 1 to 6 As shown, a low-code rapid development system includes a front-end visual designer, a metadata center, an access control center, a code generation engine, a script engine center, a process engine center, a microservice architecture support layer, and a containerized deployment layer.

[0037] The front-end visual designer is based on the Vue framework and integrates the Element Plus component library and the Vant component library. Element Plus is used for PC page rendering, while Vant is used for mobile page rendering. The front-end visual designer encapsulates unified general components, enabling the same component code to call the corresponding component library for rendering in PC browsers and mobile devices respectively, without the need to write additional adaptation code for different terminals. The front-end visual designer includes a form designer, a page generator, a process binder, and a permission configurator. The form designer is used to customize form field prototypes, names, lengths, validation rules, default values, and display formats. It generates reusable field prototypes based on input information and stores these prototypes as structured field metadata. When users build other forms later, they can directly call the generated field prototypes without having to redefine the same field attributes.

[0038] The metadata center is used to identify association patterns, and in the form association pattern, import the main table and the detail table, identify and display the first identifier in the main table, find the hierarchical relationship content of the field corresponding to the first identifier in the detail table according to the first identifier, and display the field corresponding to the hierarchical relationship of the first identifier and the corresponding content in the field at the corresponding position of the first identifier.

[0039] In this embodiment, the metadata center receives the user's main table and sub-table identifiers and the mapping relationship between the main table and sub-table, and generates multi-form metadata based on the mapping relationship. The multi-form metadata includes field prototypes, form structure, form relationships and page layout, etc. The permission control center is used to define and validate page-level permissions, operation-level permissions, and field-level permissions. Page-level permissions control whether a user can access a certain page, operation-level permissions control whether a user can perform operations such as adding, deleting, modifying, and querying, and field-level permissions control whether a user can view or edit specific fields in a form. The code generation engine is used to generate source code based on the form unit data, display the source code, and when modifications are detected in the source code, modify the displayed content of the form according to the modifications. The script engine center integrates a JS engine, a Java engine, and a Python engine, which can execute scripts written in JS, Java, or Python respectively. The script engine center supports calling the corresponding scripts before and after executing CRUD operations on database records. The process engine center provides functions for process definition management, process node configuration, task allocation and process status management, and supports binding process definitions with front-end pages; The microservice architecture support layer is built on the Spring Boot and Spring Cloud frameworks and includes a service gateway, a service registry, and a service configuration center. The containerized deployment layer is used to implement Docker image building, Kubernetes orchestration, service scheduling, load balancing, and high availability assurance.

[0040] In this embodiment, the code generation engine is also used to generate page source code and support modifications to take effect. It is also used in conjunction with the permission control center to generate CRUD report pages with one click. The code generation engine outputs the complete front-end page source code to the online editor, allowing users to directly modify it and have it take effect in real time. The code generation engine reads the form and associated metadata, generates front-end pages, back-end interfaces, paginated lists, query and export functions, and generates page permissions, operation permissions and field-level permission configurations through the permission control center, outputting complete CRUD report pages and a three-level permission system; In this embodiment, the page binding process is implemented through a process engine. The process binding engine provides a visual interface. Users can select a button or submit event on the front-end page through the visual interface and select a process definition within the process engine. By binding the button click event with the process engine, the approval nodes in the process correspond to different approval status write-back events on the page. At the same time, the process engine calls the relevant process when the user clicks the page button according to the association relationship and synchronizes it to the page in real time. The page changes the corresponding display area according to the status.

[0041] In this embodiment, the custom query script and the custom export template are implemented through a query engine and an export engine. The query engine is used to parse the SQL query script written by the user and verify the legality of the SQL statement. During runtime, the query engine receives the parameter values ​​from the front end and performs query operations on them. Finally, the query engine constructs query conditions and result sets based on the query results. The export engine is used to read the result set returned by the query engine and generate Excel files and PDF files according to the template configuration.

[0042] like Figure 2 As shown, the script engine center is used to execute extended logic steps before and after adding, deleting, modifying, and querying. The script engine center also includes a script executor, which receives form or process approval requests submitted by users during runtime. When a user performs an add, modify, delete, or query operation on the form page, the system parses the form and process node corresponding to the current request and queries the script configuration associated with the form and process node. The script executor determines whether there is a configured script for the current operation based on the request type. If it is determined that there is a configured script, the script executor calls the corresponding script according to the script type. After the script is executed, the script engine center returns the execution result to the script executor.

[0043] In this embodiment, the containerized deployment layer is not limited to the combination of Docker and K8s. It can also use Docker combined with Docker Compose for container orchestration, or use Rancher as a container management platform, or use K3s as a container orchestration platform, making system deployment simple and storage flexible.

[0044] In this embodiment, the script engine is not limited to integrating JS, Java, and Python engines, but can also use Groovy, Lua, and Node.js engines, enabling the execution of custom extended logic before and after data CRUD operations, including data validation, processing, push, and third-party interface calls.

[0045] In this embodiment, the front-end visual designer is not limited to integrating Element Plus and Vant based on the Vue framework. It can also adopt the React framework and integrate Ant Design and Ant Design Mobile, where Ant Design is used on the PC and Ant Design Mobile is used on the mobile. Alternatively, it can adopt the Uniapp framework and combine it with its built-in component library to achieve multi-platform adaptation and unified component encapsulation.

[0046] Example 2.

[0047] This invention provides a low-code rapid development method, comprising the following steps: S1 Pre-setting form data for two or more low-code table units, the form data including: field prototypes, and hierarchical relationships corresponding to two or more fields; S2 Identifying a new creation command and determining the association mode. If it is a form association mode, importing a main table and a detail table, identifying and displaying a first identifier in the main table, searching for the hierarchical relationship content of the field corresponding to the first identifier in the detail table based on the first identifier, and displaying the field corresponding to the hierarchical relationship of the first identifier and the corresponding content in the field at the corresponding position of the first identifier; S3 Generating source code based on the form unit data and displaying the source code. When modifications are detected in the source code, modifying the displayed content of the form according to the modifications.

[0048] The form data in step S1 also includes: form structure, page permissions, operation permissions, field-level permissions, and the source code of the preset form data corresponding to different program categories.

[0049] like Figure 3-6 As shown, the association modes in step S2 include dictionary-level mode, form association mode, and custom association mode.

[0050] If the association mode is dictionary-level mode, set the first-level dictionary and determine the first-level attribute form data through the dictionary panel, add a second-level dictionary based on the first-level dictionary and enter the second-level form data, and directly select the dictionary of the corresponding level when defining the form fields to complete the association between the first-level and second-level and above form data. The following example of region management illustrates dictionary-level associations: Users create a first-level dictionary named "Province" in the dictionary panel, and enter "Guangdong" and "Hunan" as first-level attribute values. Then, based on the "Province" dictionary, they create a second-level dictionary named "City". For the first-level attribute value "Guangdong", they enter "Guangzhou" and "Foshan"; for "Hunan", they enter "Changsha" and "Zhuzhou". When defining the address field in the form designer, they select the "City" dictionary. At runtime, the system defines the field as an associated drop-down component. After the user selects a province, the city drop-down list automatically displays the corresponding city. The following example of a procurement business illustrates the form association mode: In this embodiment, the first identifier includes a sequence name in the main table, such as "purchase order". The first identifier can be determined by marking it with color in the main table. Then, it can be achieved by identifying the location of the color and reading the first identifier corresponding to the location of the color. Alternatively, the first identifier can be determined by pre-setting the key column in the main table as the column where the first identifier is located. For example, determining the first identifier by marking it with color makes it convenient for users to customize the determination.

[0051] In the business panel, users select "Purchase Order" as the main table and "Purchase Item Details" and "Purchase Plan" as detail modules. The system automatically creates the content of the purchase order and detail modules. After completing the relevant configuration, the generated prototype page will display the purchase item details list and the purchase plan list respectively. When users switch purchase order records, the two detail lists will automatically display the corresponding sub-table data. The custom association includes: displaying the form data of the original page, then listening for changes in the form data using JS script, and triggering a data query using JS script when the form data changes to obtain the corresponding business data content; The following example illustrates custom association using the concept of "associating a selected buyer with their purchase order": After a user selects a purchasing agent, the system will automatically load the corresponding purchasing agent's "purchase order". The user first writes a dynamic query statement through the online SQL query tool, saves the information about purchasing as query parameters, and then writes a JS script in the online prototype page editor to listen for changes in the purchasing agent selection box. For example, some option boxes can be added or deleted by dragging. When the user changes the purchasing agent selection, the purchase order list is automatically refreshed to the order data of the corresponding purchasing agent.

[0052] Step S2 includes: after recognizing the new instruction, recognizing the trigger instruction, and determining the next process node corresponding to the trigger instruction. Step S2 also includes: determining that the newly added display form data, permission data, scripts, and processes on the new original page are exported in the form of incremental packages; when incremental packages need to be displayed, importing and displaying the exported incremental packages.

[0053] After identifying and displaying the first identifier in the main table in step S2, the method further includes: dragging the component corresponding to the first identifier, forming a configuration file based on the drag position of the first identifier, parsing the configuration file, and determining the content to be displayed on the page based on the configuration file. In this embodiment, the component is the character content box corresponding to the first identifier.

[0054] like Figure 1 As shown, users log into the low-code system and enter the form prototype configuration interface. They add form fields through the form designer, configuring field types, names, lengths, validation rules, default values, and display formats, and storing standardized metadata. Then, users select the models to be associated through the metadata center, configure the relationship between the main table and the child table, and trigger the generation operation. The code generation engine reads the form and associated metadata and automatically generates the front-end page. Then, the permission control center automatically generates role authorization configurations, button permissions, and data permissions according to the preset model. After generation, users can access the CRUD report page with permission control by performing the publish operation.

[0055] Step S3 includes retrieving the corresponding source code based on the form data and program type, displaying it on the page, identifying changes to key identifiers in the source code, and modifying the corresponding form page based on the changes to the key identifiers. In this embodiment, key identifiers include key identifiers in the source code corresponding to each identifier box.

[0056] The working principle of this invention is as follows: Based on low-code table unit driving, it presets field prototypes and corresponding hierarchical relationships. When a new instruction is detected, an association mode can be selected. Through the form association mode, when importing the main table and the detail table, the hierarchical relationship and content corresponding to the identifier in the detail table are found based on the first identifier in the main table. Then, the key content and hierarchical relationship in the two tables are displayed. Thus, by importing only two tables, the association relationship and content in the two tables can be quickly displayed. When it is necessary to view the source code, the corresponding source code is retrieved and displayed, and modifications can be made in the source code interface. This fully utilizes the advantages of the low-code platform, facilitates the association display through forms, and meets the needs of complex business scenarios.

Claims

1. A low-code rapid development method, characterized in that: Includes the following steps: S1 pre-defines form data for two or more low-code table units. The form data includes: field prototypes and the hierarchical relationship between the two or more fields. S2 identifies the new creation command and determines the association mode. If it is a form association mode, it imports the main table and the detail table, identifies and displays the first identifier in the main table, searches for the hierarchical relationship of the field corresponding to the first identifier in the detail table based on the first identifier, and displays the corresponding field and its content at the corresponding position of the first identifier. S3 generates source code based on the form unit data and displays the source code. When modifications are detected in the source code, the form display content is modified accordingly.

2. The low-code rapid development method according to claim 1, characterized in that: The form data in step S1 also includes: form structure, page permissions, operation permissions, field-level permissions, and the source code of the preset form data corresponding to different program categories.

3. The low-code rapid development method according to claim 1, characterized in that: The association modes in step S2 include dictionary-level mode, form association mode, and custom association mode.

4. The low-code rapid development method according to claim 3, characterized in that: Step S2 includes: if the association mode is dictionary-level mode, set the first-level dictionary and determine the first-level attribute form data through the dictionary panel, add a second-level dictionary based on the first-level dictionary and enter the second-level form data, and directly select the dictionary of the corresponding level when defining the form fields to complete the association between the first-level and second-level and above form data. If the association mode is custom association, the form data is displayed by importing the form, and then the JS script listens for changes in the form data. When the form data changes, the JS script triggers a data query to retrieve the corresponding business data content.

5. The low-code rapid development method according to claim 1, characterized in that: Step S2 includes: after identifying the newly created instruction, identifying the trigger instruction, and then identifying the next process node corresponding to the trigger instruction.

6. The low-code rapid development method according to claim 1, characterized in that: Step S3 includes retrieving the corresponding source code based on the form data and program type, displaying it on the page, identifying changes to key identifiers in the source code, and modifying the corresponding form page based on the changes to the key identifiers.

7. The low-code rapid development method according to claim 1, characterized in that: Step S2 also includes: determining that the newly added display form data, permission data, scripts, and processes on the newly created original page are exported in the form of incremental packages, and importing and displaying the exported incremental packages when they need to be displayed.

8. The low-code rapid development method according to claim 1, characterized in that: After identifying and displaying the first identifier in the main table in step S2, the process also includes: dragging the component corresponding to the first identifier, forming a configuration file based on the drag position of the first identifier, parsing the configuration file, and determining the content to be displayed on the page based on the configuration file.

9. A low-code rapid development system for implementing the low-code rapid development method of any one of claims 1-8, characterized in that: include: The system comprises a front-end visual designer, a metadata center, and a code generation engine. The front-end visual designer, based on the Vue framework and integrating Element Plus and Vant, encapsulates unified and universal components for pre-setting form data for two or more low-code table units. The form data includes: field prototypes and the hierarchical relationship between two or more fields. The metadata center is used to identify association patterns and, within the form association patterns, import the main table and detail tables. It identifies and displays the first identifier in the main table, searches for the hierarchical relationship content of the fields corresponding to the first identifier in the detail tables based on the first identifier, and displays the corresponding fields and their contents at the corresponding positions. The code generation engine is used to generate source code based on the form unit data and display the source code. When modifications are detected in the source code, the displayed form content is modified accordingly.

10. A low-code rapid development system according to claim 9, characterized in that: Also includes: Permission management center, script engine center, process engine center, microservice architecture support and containerized deployment layer; The permission management center is used to define and validate page permissions, operation permissions, and field-level permissions. The code generation engine is used to generate front-end pages, permission configurations, and report pages with one click based on metadata. The script engine center integrates JS engine, Java engine and Python engine to support the execution of scripts before and after CRUD operations; The process engine center is used to provide process definition, node, task and status management, and supports binding with pages; The microservice architecture support layer is based on Spring Boot and Spring Cloud, and includes a gateway, a registry center, and a configuration center; The containerized deployment layer is used to implement Docker image building, Kubernetes orchestration, service scheduling, load balancing, and high availability assurance.

Images