Low-code platform development method and low-code platform system

Abstract

The invention discloses a low-code platform development method and a low-code platform system, and belongs to the technical field of software development, the overall architecture design of a low-code platform is carried out based on Vue2 and TypeScript, and the method comprises the combination of modularization, data management and visual editing function modules; the system comprises a component management module which comprises a component library and user-defined component management; the visual editor is used for realizing real-time layout adjustment and attribute configuration; the user previews the modification effect in real time by dragging and adjusting the position, the size and the hierarchical relationship of the component; the data management module is used for realizing data binding, API integration and dynamic data management; and the performance optimization module comprises a virtual DOM (Document Object Model) optimization and on-demand loading mechanism. The invention provides a development environment which is high in expandability and easy to use. A complex coding process is simplified into visual operation, and cooperation between developers and non-technical users is promoted.

Description

Technical Field

[0001] The present invention relates to the field of software development technology, and specifically to a low-code platform development method and a low-code platform system. Background Art

[0002] With the rapid development of information technology, software development is facing more and more challenges. Traditional development methods require a lot of programming knowledge, which often leads to long development cycles, high costs, and strong dependence on developers. In order to solve these problems, low-code platforms came into being. By providing visual development tools, non-technical personnel can also participate in application development, thereby improving development efficiency and flexibility.

[0003] Low-code development platforms can simplify the software development process, allowing companies to respond to market changes more quickly and iterate products quickly. Such platforms usually support functions such as drag-and-drop interface design, automatic code generation, and multiple integration interfaces. Although existing low-code platforms have made innovations in functionality and user experience, they still have deficiencies in scalability, performance, and user-friendliness. Summary of the invention

[0004] The technical task of the present invention is to address the above shortcomings and provide a low-code platform development method and a low-code platform system, which provides a highly scalable and easy-to-use development environment. The complex coding process is simplified into visual operations, which promotes the collaboration between developers and non-technical users.

[0005] The technical solution adopted by the present invention to solve its technical problem is:

[0006] A low-code platform development method, based on Vue2 and TypeScript, designs the overall architecture of the low-code platform, including the combination of componentization, data management, and visual editing functional modules; its implementation includes:

[0007] Component management module, including component library and custom component management;

[0008] Visual editor for real-time layout adjustment and property configuration. Users can adjust the position, size and hierarchical relationship of components by dragging and dropping, and preview the modification effects in real time to improve design efficiency.

[0009] Data management module, used to implement data binding, API integration and dynamic data management;

[0010] Performance optimization module, including virtual DOM optimization and on-demand loading mechanism.

[0011] This method designs a flexible component library, allowing users to create and save custom components, supporting component reuse and sharing. In addition, the open plug-in mechanism allows users to extend functions as needed.

[0012] Users can view the effects of modifications in real time during the design process, providing instant feedback. At the same time, the simplified data binding function makes it easy to connect front-end components with back-end data, improving the user experience.

[0013] Furthermore, for the component management module,

[0014] The component library has multiple built-in UI components. Users can add components to the workspace by dragging and dropping, and customize the style and behavior as needed.

[0015] The custom component allows the user to create a custom component based on the atomic component according to specific requirements, and save it to the component library for reuse and sharing; it also supports automatically reading files through the configuration file path to create a custom component.

[0016] Furthermore, for the visual editor, the property configuration, each component has a corresponding property panel, and the user can configure various parameters of the component in the property panel, including data binding, event processing, style, etc., without manually writing code.

[0017] Furthermore, for the data management module,

[0018] The data binding: supports seamless connection between front-end components and back-end data sources, and users can easily implement two-way data binding;

[0019] The API integration provides a simple interface integration method, where users can add and configure API requests, obtain and display data through visual operations;

[0020] The dynamic data: supports data binding between different components and can achieve dynamic response.

[0021] Furthermore, for the performance optimization module,

[0022] The virtual DOM optimization uses Vue2's virtual DOM technology to ensure efficient interface updates during user operations, reduce unnecessary DOM operations, and improve application response speed;

[0023] The on-demand loading mechanism dynamically loads resources according to the page or function visited by the user, thereby reducing the initial loading time and improving the overall user experience.

[0024] The present invention also claims protection for a low-code platform system, which is built based on Vue2 and TypeScript, and implements platform system design through the above-mentioned low-code platform development method.

[0025] Furthermore, the system specifically includes:

[0026] Component manager, including registering components and obtaining all components;

[0027] Instance manager, including adding component instances by type, getting component instances by ID, moving or deleting component instances, and compressing / decompressing page JSON;

[0028] A data manager is used to obtain corresponding data according to the data type;

[0029] Page renderer, using virtual DOM technology for dynamic rendering;

[0030] The page editor includes a component library, a content editing area, and a property panel. The component library contains all components in the component manager; the property panel is used to configure component properties.

[0031] Furthermore, the component manager obtains all components, including built-in components, logical components (i.e., atomic components), and supports scanning components in a specified directory;

[0032] The page editor and the content editing area include components in the drag component library, and the generated instances are added to the content editing area; and vue-grid-layout is used as the drag framework.

[0033] The present invention also claims a low-code platform implementation device, comprising: at least one memory and at least one processor;

[0034] The at least one memory is used to store a machine-readable program;

[0035] The at least one processor is used to call the machine-readable program to implement the above method.

[0036] The present invention also claims protection for a computer-readable medium having computer instructions stored thereon, which implement the above method when executed by a processor.

[0037] Compared with the prior art, the low-code platform development method and low-code platform system of the present invention have the following beneficial effects:

[0038] 1. Improve development efficiency: Through visual editors and component-based design, developers can quickly build applications, significantly reducing the time required for traditional coding. Users can participate in application development without having to master in-depth programming knowledge, which greatly improves the team's development efficiency.

[0039] 2. Lowering the technical threshold: This platform is aimed at users from different backgrounds, especially non-technical personnel. Through the drag-and-drop interface and intuitive operation method, more users can participate in application development, lowering the technical threshold and promoting cross-departmental collaboration.

[0040] 3. Enhance the scalability of applications: The open plug-in mechanism and custom component functions enable the platform to have good scalability. Users and developers can flexibly add functions according to actual needs, meet the requirements of specific business scenarios, and adapt to the rapidly changing market environment.

[0041] 4. Convenient data management. It supports simple data binding and API integration, and users can easily connect front-end components with back-end data sources. This design makes data display and update simple and intuitive, improving the user's operating experience.

[0042] 5. Rapid iteration and deployment: This platform supports real-time preview and testing functions, allowing developers to find and correct problems in a timely manner, shortening the time cycle for application launch. Users can quickly publish and iterate applications and respond to market demand and user feedback in a timely manner.

[0043] 6. Improve code quality and maintainability. Using the static type feature of TypeScript makes the code more readable and maintainable, and reduces the probability of runtime errors. This is of great significance for the maintenance and upgrade of long-term projects. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] Figure 1 It is a schematic diagram of the principle of a low-code platform development method provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0045] The present invention will be further described below in conjunction with specific embodiments.

[0046] The embodiment of the present invention provides a low-code platform development method, which designs the overall architecture of the low-code platform based on Vue2 and TypeScript, including the combination of functional modules such as componentization, data management and visual editing. Its implementation includes:

[0047] 1. Component management module, including component library and custom component management.

[0048] The component library has a variety of built-in UI components. Users can add components to the workspace by dragging and dropping, and can customize styles and behaviors as needed.

[0049] The custom component allows the user to create a custom component based on the atomic component according to specific requirements, and save it to the component library for reuse and sharing; it also supports automatically reading files through the configuration file path to create a custom component.

[0050] 2. Visual editor for real-time layout adjustment and property configuration.

[0051] The real-time layout adjustment allows users to adjust the position, size, and hierarchical relationship of components by dragging and dropping, and preview the modification effects in real time to improve design efficiency.

[0052] For the property configuration, each component has a corresponding property panel, and the user can configure various parameters of the component in the property panel, including data binding, event processing, style, etc., without manually writing code.

[0053] 3. Data management module, used to implement data binding, API integration and dynamic data management.

[0054] The data binding supports seamless connection between front-end components and back-end data sources, and users can easily achieve two-way binding of data.

[0055] The API integration provides a simple interface integration method, and users can add and configure API requests, obtain and display data through visual operations.

[0056] The dynamic data: supports data binding between different components and can achieve dynamic response.

[0057] 4. Performance optimization module, including virtual DOM optimization and on-demand loading mechanism.

[0058] The virtual DOM optimization uses Vue2's virtual DOM technology to ensure efficient interface updates during user operations, reduce unnecessary DOM operations, and improve application response speed;

[0059] The on-demand loading mechanism dynamically loads resources according to the page or function visited by the user, thereby reducing the initial loading time and improving the overall user experience.

[0060] Vue2 has become the foundation for many low-code platforms through its responsive data binding and component-based development. TypeScript provides static type checking and modern programming features, making the maintenance and expansion of large applications more controllable.

[0061] The platform designed by this method allows users to build applications through a graphical user interface and configuration rather than traditional manual coding, which speeds up the development process and lowers the technical threshold. Component-based design breaks down applications into reusable independent components, each of which encapsulates specific functions and UI, thereby improving development efficiency and maintainability. It allows developers to create pluggable functional modules and expand application functionality by adding or replacing plug-ins without changing the core code. Through a visual editor, users are allowed to design applications through a graphical interface, providing intuitive drag and drop and configuration capabilities. When users edit or configure an application, they can instantly view the effects of the changes made, enhancing the development experience and reducing errors. Through predefined application layouts and component collections, users can quickly select and customize these templates to speed up the development process.

[0062] An embodiment of the present invention also provides a low-code platform system, which is built based on Vue2 and TypeScript, and realizes platform system design through the low-code platform development method described in the above embodiment.

[0063] like Figure 1 As shown, the system specifically includes:

[0064] The component manager includes registering components and obtaining all components, including built-in components, logical components (i.e. atomic components), and supports scanning components in specified directories.

[0065] Instance manager, including adding component instances by type, getting component instances by ID, moving or deleting component instances, and compressing / decompressing page JSON.

[0066] The data manager is used to obtain corresponding data according to the data type.

[0067] Page renderer, using virtual DOM technology for dynamic rendering.

[0068] The page editor includes a component library, a content editing area, and a property panel. The component library includes all components in the component manager. The content editing area includes dragging components in the component library to generate instances and add them to the content editing area. Vue-grid-layout is used as the dragging framework. The property panel is used to configure component properties.

[0069] An embodiment of the present invention further provides a low-code platform implementation device, comprising: at least one memory and at least one processor;

[0070] The at least one memory is used to store a machine-readable program;

[0071] The at least one processor is used to call the machine-readable program to implement the low-code platform development method described in the above embodiment.

[0072] The embodiment of the present invention further provides a computer-readable medium, on which computer instructions are stored, and when the computer instructions are executed by a processor, the low-code platform development method described in the above embodiment is implemented. Specifically, a system or device equipped with a storage medium can be provided, on which a software program code that implements the functions of any of the above embodiments is stored, and a computer (or CPU or MPU) of the system or device is enabled to read and execute the program code stored in the storage medium.

[0073] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0074] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer by a communication network.

[0075] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0076] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or written to a memory provided in an expansion unit connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or the expansion unit is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0077] The present invention is shown and described in detail above through the accompanying drawings and preferred embodiments. However, the present invention is not limited to these disclosed embodiments. Based on the above multiple embodiments, those skilled in the art can know that the code review methods in the above different embodiments can be combined to obtain more embodiments of the present invention, and these embodiments are also within the protection scope of the present invention.

Claims

1. A low-code platform development method, characterized in that: Design the overall architecture of the low-code platform based on Vue2 and TypeScript, including the combination of componentization, data management and visual editing function modules; Its implementation includes: Component management module, including component library and custom component management; Visual editor for real-time layout adjustment and property configuration. Users can adjust the position, size and hierarchy of components by dragging and dropping, and preview the modification effects in real time. Data management module, used to implement data binding, API integration and dynamic data management; Performance optimization module, including virtual DOM optimization and on-demand loading mechanism.

2. A low-code platform development method according to claim 1, characterized in that: For the component management module, The component library has multiple built-in UI components. Users can add components to the workspace by dragging and dropping, and customize the style and behavior as needed. The custom component allows the user to create a custom component based on the atomic component according to specific requirements and save it to the component library; it also supports automatically reading files through the configuration file path to create a custom component.

3. A low-code platform development method according to claim 1, characterized in that: For the visual editor, the property configuration, each component has a corresponding property panel, and the user can configure various parameters of the component in the property panel, including data binding, event processing, and style.

4. A low-code platform development method according to claim 1, characterized in that: For the data management module, The data binding: supports seamless connection between front-end components and back-end data sources, and users can achieve two-way binding of data; The API integration provides a simple interface integration method, where users can add and configure API requests, obtain and display data through visual operations; The dynamic data: supports data binding between different components to achieve dynamic response.

5. A low-code platform development method according to claim 1, characterized in that: For performance optimization modules, The virtual DOM optimization uses Vue2's virtual DOM technology to ensure efficient interface updates during user operations and reduce unnecessary DOM operations. The on-demand loading mechanism dynamically loads resources according to the page or function visited by the user, thereby reducing the initial loading time.

6. A low-code platform system, characterized in that: The system is built based on Vue2 and TypeScript, and the platform system design is realized through the low-code platform development method described in any one of claims 1 to 5.

7. A low-code platform system according to claim 6, characterized in that: The system specifically includes: Component manager, including registering components and obtaining all components; Instance manager, including adding component instances by type, getting component instances by ID, moving or deleting component instances, and compressing / decompressing page JSON; A data manager is used to obtain corresponding data according to the data type; Page renderer, using virtual DOM technology for dynamic rendering; The page editor includes a component library, a content editing area, and a property panel. The component library contains all components in the component manager; the property panel is used to configure component properties.

8. A low-code platform system according to claim 7, characterized in that: The component manager obtains all components, including built-in components, logical components, and components that support scanning in a specified directory; The page editor and the content editing area include components in the drag component library, and the generated instances are added to the content editing area; and vue-grid-layout is used as the drag framework.

9. A low-code platform implementation device, characterized in that: include: at least one memory and at least one processor; The at least one memory is used to store a machine-readable program; The at least one processor is configured to call the machine-readable program to implement the method according to any one of claims 1 to 5.

10. A computer-readable medium, characterized in that The computer readable medium stores computer instructions, which, when executed by a processor, implement the method according to any one of claims 1 to 5.

Images