Low-code platform based on component library and form engine

Abstract

The invention discloses a low-code platform based on a component library and a form engine, and relates to the field of data processing. The platform comprises a design system, an application system and a service system. The design system is provided with a form designer and a template manager, the form designer can configure a form component to generate a description file, and the template manager supports separate storage of a page template; the application system comprises a form analysis engine, a UI rendering engine and a reusable resource management component, the analysis engine analyzes configuration generation logic, the rendering engine loads a resource rendering page, and the reusable resource management component stores resources and generates configuration; the service system comprises a metadata analysis engine and an SQL assembler, the metadata analysis engine analyzes business rules to generate SQL and filtering strategies, and the SQL assembler generates operation statements adaptive to multiple data sources. Through the modular architecture design and the dynamic analysis mechanism, the problem that a low-code platform is insufficient in flexibility and usability is solved.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing, and in particular to a low-code platform based on a component library and a form engine. Background Art

[0002] A low-code platform (Low Code Platform, LCP) is a software development platform that allows developers to quickly build application programs in a low-code way such as dragging and configuring through a visual interface and preset component modules. It can reduce the coding volume and professional skill requirements for traditional software development, enabling even those without a deep programming background to participate in the application development process, thereby accelerating the development speed and improving the development efficiency.

[0003] In related technologies, a low-code platform usually pre-sets a component library containing general basic components. Developers can use these components to build a business system and generate a configuration file through a form designer, and finally the form engine parses and restores it into a page.

[0004] However, the attributes and methods of the basic components in these low-code platforms are usually fixed, making it difficult to meet the customization requirements in complex business scenarios. As a result, once differential requirements are encountered, customized development has to be carried out. At the same time, its form engine is inefficient in parsing configuration files containing a large amount of display information, style information, and data information, affecting the overall development and usage experience. Therefore, the low-code platforms in related technologies have deficiencies in flexibility and usability. Summary of the Invention

[0005] Aiming at the above technical problems and deficiencies, the purpose of the present invention is to provide a low-code platform based on a component library and a form engine, which can alleviate the problems of insufficient flexibility and usability of the low-code platform.

[0006] To achieve the above object, the present invention provides a low-code platform based on a component library and a form engine, including a design system, an application system, and a service system; the design system includes a form designer and a template manager; the form designer is used to configure form components through drag-and-drop operations to generate a form description file containing UI structure, data binding rules, and verification logic; the template manager is used to manage predefined page templates, support the storage of templates, version control, and separate storage of UI models and data models; the application system includes a form parsing engine, a UI rendering engine, and a reusable resource management component; the form parsing engine is used to parse the configuration information in the form description file to generate executable page logic and dynamic data binding relationships; the UI rendering engine is used to load template library resources and components in the component library according to the parsing results, render the page in combination with style files, and implement communication between components through an event bus; the reusable resource management component is used to centrally store reusable data models, business components, and page templates, and schedule and dynamically combine the above resources through a unified interface to generate application configurations; the service system includes a metadata parsing engine and an SQL assembler; the metadata parsing engine is used to parse business rules and data models in the form to generate dynamic SQL statements and field-level permission filtering policies; the SQL assembler is used to generate add, delete, modify, and query operation statements adapted to multiple data sources according to dynamic SQL templates and business parameters, and support the splicing of complex query conditions.

[0007] Through the modular architecture design and dynamic parsing mechanism, the present invention alleviates the problems of insufficient flexibility and usability of the low-code platform. The form designer of the design system provides drag-and-drop visualization configuration, converting traditional coding into a structured description file, enabling non-technical personnel to quickly build form interfaces and reducing the operation threshold; the template manager realizes cross-scenario reuse of templates through separate storage and version control of UI models and data models, reducing repeated configuration. The form parsing engine and the UI rendering engine of the application system cooperate with each other. The former parses the configuration to generate dynamic data binding logic, and the latter loads component and template resources as needed, combines with the event bus to implement communication between components, supporting both dynamic rendering of complex pages and avoiding the performance bottleneck of full-page parsing by the browser. The metadata parsing engine and the SQL assembler of the service system convert business rules into dynamic SQL, adapt to the syntax differences of multiple data sources, realize automatic splicing of complex queries, and ensure data security through field-level permission control. The reusable resource management component centrally manages basic components, business components, and templates, and realizes dynamic combined invocation of resources through a standardized interface, enabling developers to not only flexibly expand component functions but also quickly generate pages based on preset templates. This full-link design of "visualization configuration - dynamic parsing - resource reuse" not only reduces the usage difficulty through standardized modules but also meets the ever-changing business needs through dynamic mechanisms, ultimately achieving an efficient balance between flexibility and usability.

[0008] Optionally, in some embodiments, the design system further includes a process designer and a business component configuration tool; the process designer is used to define the node logic, approval path, and data flow rules of the business process through a visual interface, realizing the automated configuration and execution of the business process; the business component configuration tool is used to combine multiple basic components to generate business components, and define their attributes, event interfaces, and data interaction logic through a declarative Schema file.

[0009] Adopting the technical solution of the above embodiment, by introducing a process designer and a business component configuration tool, the platform's support ability for complex business processes is enhanced. The process designer provides a visual interface to configure node logic and approval paths, converting the process jumps and data flow rules that traditionally require code implementation into drag-and-drop graphical operations, reducing the threshold of process management; the business component configuration tool allows basic components to be combined into highly reusable business units (such as an order screening panel), and defines interface rules through a Schema file, realizing the decoupling of business logic and UI, enabling non-technical personnel to quickly build domain-specific function modules and improving the platform's business adaptability.

[0010] Optionally, in some embodiments, the service system further includes a form storage engine and a multi-data source connection pool; the form storage engine is used to persistently store form configuration information and associated data models, supporting version management, historical record backtracking, and secure access to configuration information. The multi-data source connection pool is used to manage the connection resources of heterogeneous databases, supporting connection reuse, transaction control, and execution performance monitoring, and adapting to the operation requirements of multi-data sources.

[0011] Adopting the technical solution of the above embodiment, a form storage engine and a multi-data source connection pool are supplemented, strengthening the security of data management and the scalability of the system. The form storage engine ensures that configuration changes are traceable and do not affect historical data through version management and a separation storage mechanism (storing UI configuration in F_FORM_DATA and data models in F_TABLE_DATA); the multi-data source connection pool supports mixed operations of heterogeneous databases such as MySQL and Oracle, improving performance in high-concurrency scenarios through connection reuse and transaction control, enabling the platform to seamlessly connect to the enterprise's existing IT architecture and meet the cross-system data integration requirements.

[0012] Optionally, in some embodiments, the reusable resource management component includes a basic component library, a business component library, and a template library; the basic component library is used to provide extensible atomic-level UI components, supporting custom extensions of attributes, events, and styles; the business component library is used to store business function units formed by combining multiple basic components, and define input and output interfaces through a declarative Schema file; the template library is used to store predefined standardized page structure templates, including form, list, and tree table templates, supporting quick page generation through data model association.

[0013] Adopting the technical solution of the above embodiment, a three-layer system of reusable resources (basic component library, business component library, template library) is constructed, forming a progressive development mode of "atomic function → business module → complete page". The basic component library provides standardized UI units, the business component library encapsulates domain logic (such as approval components), and the template library pre-sets page structures (such as Tab layouts). Developers can quickly build the system by combining and calling, reducing more than 60% of the repetitive configuration work, while ensuring cross-project interaction consistency and significantly improving the delivery efficiency. Optionally, in some embodiments, the basic component library includes an extended interface module, a logic encapsulation module, an event communication module, and a component integration module; the extended interface module is used to support developers to extend the attributes and methods of components according to platform standards; the logic encapsulation module is used to encapsulate reusable business logic during the component life cycle through the built-in Hooks interface, enhancing the flexibility and scalability of the components; the event communication module is used to implement the event publishing and subscribing mechanism across components based on the event bus, responding to trigger events and updating the states of associated components; the component integration module is used to re-package the components of the third-party UI framework and dynamically integrate them into the basic component library.

[0014] Adopting the technical solution of the above embodiment, the capabilities of the basic components are extended through modular design, solving the problem of insufficient flexibility of components in traditional low-code platforms. The extended interface supports custom injection of attributes, events, and styles; the logic encapsulation module uses Hooks to reuse common logic (such as data loading); the event bus enables cross-component communication; the component integration module is compatible with third-party UI frameworks (such as Ant Design), enabling the platform to not only quickly absorb the capabilities of the open-source ecosystem but also ensure component interaction specifications, taking into account both development efficiency and system controllability.

[0015] Optionally, in some embodiments, the extended interface module includes a verification rule extension interface, a script event extension interface, and a style extension interface; the verification rule extension interface is used to pre-set logical verification rules and business verification rules and support users to customize verification functions; the script event extension interface is used to bind events during the component life cycle through pre-set hook functions; the style extension interface is used to support customizing component styles through CSS and Class.

[0016] Adopting the technical solution of the above embodiment, the functions of the extended interface are refined to cover the requirements of the entire life cycle of component development. The verification interface builds in common rules (required, format verification) and supports custom functions, reducing the intrusion of business code; the script event interface flexibly injects interaction logic through hook functions (such as onChange, onBlur); the style interface supports dual-path adaptation of CSS and Class, meeting both fast theme switching and allowing fine style overrides. The combination of the three enables the components to be deeply adapted to business scenarios while maintaining UI consistency.

[0017] Optionally, in some embodiments, the business component library includes a component combination module, a Schema definition module, a business logic adaptation module, and a domain component preset module; the component combination module is used to generate business components by combining at least two basic components, and the business components are used to encapsulate the interaction logic and data processing functions of specific business scenarios and support reuse within the domain; the Schema definition module is used to generate Vue-format Schema files for each business component; the business logic adaptation module is used to dynamically parse the interaction logic of the business component based on the Schema file, implement binding with the data model, and cross-component communication; the domain component preset module is used to provide pre-configured standardized business components; the standardized business components include filtering rule components with configurable complex condition filtering functions, and the filtering rule components are composed of a drop-down selection component, a text box component, and a button component, and support dynamically generating query conditions and triggering data filtering operations.

[0018] Adopting the technical solution of the above embodiment, a standardized construction process for business components is defined. The component combination module aggregates basic components into business units (such as a filtering panel); the Schema file describes attributes, events, and data rules to achieve decoupling of logic and UI; the business logic adaptation module parses the Schema and binds the data model, enabling the same component to be reused across scenarios (such as financial / supply chain sharing an approval component); presetting domain components (such as filtering rule components) provides out-of-the-box capabilities, reduces the development volume of similar functions by 70%, and accelerates the implementation of the business system.

[0019] Optionally, in some embodiments, the Schema file includes: property definition (Property) data, which is used to describe the input parameters and configuration rules of the business component; style definition (Style) data, which is used to define the layout, theme, and dynamic style binding rules of the component; event definition (Event) data, which is used to declare the input (Input) and output (Output) event interfaces of the component.

[0020] Adopting the technical solution of the above embodiment, the structured definition rules of the Schema file are clarified to ensure cross-platform compatibility of business components. The property definition standardizes the input parameter constraints (such as data type, enumeration range), the style definition separates the layout and theme configuration, and the event definition standardizes the component communication protocol. This contract-based description enables the component to be parsed by different rendering engines (Web / mobile) and supports automated document generation, reducing the collaboration cost and improving the maintainability and transparency of the component library.

[0021] Optionally, in some embodiments, the template library includes a model separation module, a template type module, an association configuration module, and an interface adaptation module; the model separation module is used to separately store the UI model and the data model of the template; the UI model is stored in the F_FORM_DATA field, including the page structure, component layout, style information, and the association relationship between components; the data model is stored in the F_TABLE_DATA field, and is used to define the business data structure, verification rules, and permission policies; the template type module is used to provide form templates and combined form templates; the form template is used to generate a standardized page based on a single form configuration, and supports dynamic management of page elements through variable abstraction; the combined form template is used to generate a complex page structure by aggregating multiple forms and configuring the association relationship, including master-slave tables, Tab label groups, and tree table structures; the association configuration module is used to define the data linkage rules between multiple forms in the combined form template, including: the cascading update logic of the master form and the sub-form, and the layout binding and event response rules across forms; the interface adaptation module is used to implement the interaction between the template and the database through the server-side general interface, and the interface stipulates the data specification to perform table structure operations and data addition, deletion, modification, and query operations.

[0022] Adopting the technical solution of the above embodiment, page-level reuse innovation is realized through the template library. The model separation module (storing UI in F_FORM_DATA and data in F_TABLE_DATA) enables the same template to be adapted to multiple business table structures; the combined template defines data cascading and event linkage rules through the association configuration module, reducing a large number of complex page configuration steps; the interface adaptation module standardizes data operations, enabling the template to not only quickly generate pages but also seamlessly connect to the enterprise database, balancing the configuration efficiency and system integration capabilities.

[0023] Optionally, in some embodiments, the form parsing engine includes a backend metadata parsing engine and a frontend UI rendering engine; the backend metadata parsing engine is used to: locate the target data source according to the application identifier, and obtain the form configuration information based on the form model identifier; parse the master-slave table relationship, query fields, and filtering rules in the form configuration, and generate an operation instruction set containing dynamic SQL statements; execute the dynamic SQL statements in the target data source, and perform structured processing on the returned data, including data grouping and conversion from list to tree structure; the frontend UI rendering engine is used to: load the page template and component library resources in the template library through the configuration parser, and render the page structure as needed; dynamically bind the structured data returned by the backend to the UI components in the template through the form assembler to generate an interactive page; implement cross-component communication based on the event bus, respond to data changes, and trigger the update of associated components.

[0024] Adopt the technical solution of the above embodiment to optimize the collaboration mechanism of the form parsing engine. The backend metadata parsing engine focuses on data processing: generating dynamic SQL (JOIN query, permission filtering) according to business rules and performing structured transformation (list to tree data); the front-end UI rendering engine loads resources on demand and synchronizes component states through the event bus. The division of labor between the front and back ends reduces the browser load, and at the same time supports real-time data linkage (such as automatically refreshing the sub-table when the main table is updated), improving the response speed and user experience of complex pages.

[0025] One or more technical solutions provided by the present invention have at least the following technical effects or advantages: 1. High-efficiency visualization development and reuse capabilities: Through the drag-and-drop form designer, process designer, and template manager, users can quickly configure business forms, processes, and page templates without coding, and the development efficiency is increased by more than 60%. The reuse mechanism of templates and components (such as the basic component library, preset business components) reduces repetitive development. Non-technical personnel can build complex systems by combining preset modules (such as master-sub table templates, filtering rule components), reducing the technical threshold. The separate storage of the UI model and the data model (F_FORM_DATA / F_TABLE_DATA) supports the reuse of the same template across business scenarios. For example, the "customer information template" can be associated with different database tables to adapt to the needs of multiple departments.

[0026] 2. Dynamic expansion and flexible adaptation capabilities: Based on the component description system (such as business component Schema files) and dynamic loading mechanism of declarative Schema, the platform can seamlessly integrate third-party components (such as Ant Design) and domain-specific modules (NPM extension packages). The metadata parsing engine and SQL assembler of the service system dynamically generate SQL for multiple data sources (such as MySQL paging, Oracle tree query), automatically adapting to heterogeneous database operations; field-level permission control and event bus communication (EventBus) ensure data security and interaction consistency when functions are flexibly expanded, meeting the needs of enterprise-level complex business scenarios.

[0027] 3. High performance and stable operation guarantee: The division of labor mechanism between the front and back ends (the backend processes SQL generation and permission filtering, and the front end focuses on rendering on demand) reduces the browser load, and the measured page rendering speed is increased by 30%. The multi-data source connection pool ensures the stability of database operations under high concurrency (such as the transaction success rate of thousands of TPS is 99.9%) through connection reuse, transaction control, and exception monitoring. The dynamic resource loading strategy (such as on-demand loading of business components, Redis caching of high-frequency configurations) reduces the volume of the main application resources by more than 50%, and at the same time supports smooth interaction with large-scale data (such as million-level lists), ensuring the efficient and reliable operation of the system in diverse deployment environments. Description of the Drawings

[0028] The accompanying drawings here are incorporated into the specification and form a part of this specification, showing embodiments consistent with the present invention, and are used together with the specification to explain the principles of the present invention. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention, and for those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings. In the drawings: Figure 1 is the main functional architecture diagram of a low-code platform based on a component library and a form engine according to an embodiment of the present invention; Figure 2 is the overall architecture schematic diagram of a low-code platform based on a component library and a form engine according to an embodiment of the present invention; Figure 3 is the overall architecture schematic diagram of another low-code platform based on a component library and a form engine according to an embodiment of the present invention; Figure 4 is the schematic diagram of the hierarchical construction relationship between the basic component library and the business component library in an embodiment of the present invention; Figure 5 is the schematic diagram of the process of accumulating and standardizing iterations through the component library in an embodiment of the present invention. Detailed implementation manners

[0029] The terms used in the following embodiments of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention. As used in the specification of the present invention, the singular forms "a", "an", "above-mentioned", "the" and "this" are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term "and / or" used in the present invention refers to any or all possible combinations including one or more of the listed items.

[0030] Hereinafter, the terms "first" and "second" are only used for descriptive purposes and cannot be understood as implying relative importance or implicitly indicating the quantity of the indicated technical features. Thus, the features defined with "first" and "second" may explicitly or implicitly include one or more of such features. In the description of the embodiments of the present invention, unless otherwise specified, the meaning of "a plurality" is two or more.

[0031] It should also be noted that, unless otherwise clearly specified and limited, in the embodiments of the present invention, terms such as "set" and "connect" should be understood in a broad sense. For example, "connect" can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection or an indirect connection through an intermediate medium, and it can be the communication inside two components; it can be a wired communication connection or a wireless communication connection. For those of ordinary skill in the art, the specific meanings of the above terms in the present invention can be understood according to specific situations. The embodiments of the present invention will be specifically described below.

[0032] The embodiments of the present invention provide a low-code platform based on a component library and a form engine, as Figure 1 shown, including a design system, an application system, and a service system; wherein, The design system includes a form designer and a template manager; the form designer is used to configure form components through drag-and-drop operations to generate a form description file including a UI structure, data binding rules, and verification logic; the template manager is used to manage predefined page templates, support the storage of templates, version control, and the separate storage of UI models and data models; The application system includes a form parsing engine, a UI rendering engine, and a reusable resource management component; the form parsing engine is used to parse the configuration information in the form description file to generate executable page logic and dynamic data binding relationships; the UI rendering engine is used to load template library resources and components in the component library according to the parsing results, render the page in combination with the style file, and implement communication between components through an event bus; the reusable resource management component is used to centrally store reusable data models, business components, and page templates, and schedule and dynamically combine the above resources through a unified interface to generate an application configuration; The service system includes a metadata parsing engine and an SQL (Structured Query Language) assembler; the metadata parsing engine is used to parse the business rules and data models in the form to generate dynamic SQL statements and field-level permission filtering policies; the SQL assembler is used to generate add, delete, modify, and query operation statements adapted to multiple data sources according to the dynamic SQL template and business parameters, and support the splicing of complex query conditions.

[0033] In this embodiment, the above low-code platform is adopted, and through the modular collaborative architecture of the design system, the application system, and the service system, the bottleneck of the low-code platform in flexibility and usability in the related art is systematically solved.

[0034] The design system adopts a visual drag-and-drop form designer and a template manager, allowing users to configure form components through intuitive operations and generate standardized description files (including UI structure, data binding rules, and verification logic). At the same time, it supports the separate storage and version control of the UI model and the data model, which not only reduces the operation threshold for non-technical users but also realizes the independent maintenance of the interface and business logic, significantly improving the configuration efficiency.

[0035] The core innovation of the application system lies in the functional splitting and collaborative optimization of the traditional form engine: the backend metadata parsing engine focuses on parsing business rules and data models in form configurations, dynamically generating SQL statements adapted to multiple data sources and implementing field-level permission filtering, and converting complex data operations into standardized instruction sets through preprocessing (such as master-slave table JOIN association, tree structure conversion, and paging logic generation); the front-end UI rendering engine loads template library and component library resources on demand based on the configuration parser, and realizes cross-component communication and data linkage through the event bus mechanism (a communication mechanism based on the publish-subscribe mode, which allows components or modules at different levels to achieve loose-coupled interactions through event triggering and listening, simplifying the cross-component communication process), and dynamically binds structured data to page elements through the form assembler, forming a closed-loop process of "configuration parsing - resource scheduling - data assembly - event response", which not only avoids the performance pressure of the browser processing form configurations in full volume but also supports the efficient rendering of complex pages (such as master-child tables and tree tables).

[0036] The service system decouples business parameters from the syntax differences of multiple data sources through the dynamic template engine of the SQL assembler, realizes the automatic splicing of complex query conditions (such as multi-level filtering and grouping aggregation), and at the same time relies on the unified interface scheduling mechanism of the reusable resource management component, enabling the data model, business components, and page templates to be freely combined across scenarios. Users can directly call pre-set domain components (such as filtering rule components) or reuse standardized templates (such as the master-child table of project application), reducing a large amount of repetitive configuration work.

[0037] The platform of this embodiment adopts a front-end and back-end division of labor mechanism (the back-end processes data modeling and permission control, and the front-end focuses on dynamic rendering) and a resource dynamic loading strategy, which not only ensures flexible scalability (supporting the integration of third-party component libraries and custom Schema extension, where Schema is a declarative configuration file) but also improves the page rendering speed, finally forming an efficient mode of "configuration is development, template is function", enabling non-technical personnel to quickly build complex business systems, and technical personnel can extend custom logic based on standardized interfaces to achieve the balance between controllability and usability in the entire low-code development link.

[0038] The following combines Figure 2 to further illustrate the low-code platform of this embodiment. Figure 2It shows the three-layer structure of the low-code platform in this embodiment. From the front-end design to the server-side processing and then to the database storage, the division of labor among each layer is clear and the collaboration is close.

[0039] The front-end part includes a design system and an application system. The design system provides a form / process designer. Users can configure the form layout, process nodes, and interaction rules by dragging and dropping, generating a structured configuration file. The business component / template configuration tool is used to combine basic components (such as input boxes, buttons) into reusable business function units (such as data filtering components) and manage predefined page templates (such as master-detail tables, tree structures). The system configuration tool supports global parameter settings (such as permission policies, data source connection rules) to ensure that the platform adapts to different business environments. The form parsing engine of the application system is responsible for parsing the configuration information generated by the design system, extracting business rules, data models, and permission policies, and converting them into executable logical instructions. The UI rendering engine then dynamically loads the basic component library (providing atomic UI elements), business component library (encapsulating domain functions), and page template library (standardizing page structures) according to the parsing results, renders a complete page in combination with the style file, and realizes the linkage between components through the event mechanism.

[0040] The server-side (service system) part undertakes data processing and resource scheduling. The form storage engine persists the form configurations (such as UI structures, data binding rules) generated by the front-end, supporting version control and audit tracking. The metadata parsing engine extracts business rules (such as data validation conditions, field permissions) and data structures from the configurations, generating dynamic SQL statements (such as join queries, paging logic) and data operation instructions. The SQL assembler further combines the metadata with business parameters, splicing CRUD statements (such as complex WHERE conditions, JOIN associations) that are adapted to multiple data sources, shielding the syntax differences of different databases. The multi-data source connection pool (pool1 to pooln) manages the connections to heterogeneous databases such as MySQL and Oracle, realizing connection reuse, transaction control, and performance monitoring to ensure stable access in high-concurrency scenarios.

[0041] The database part includes a Redis cache and a meta-database. The Redis cache stores frequently accessed metadata (such as permission information, template configurations), reducing the direct queries of the server-side to the meta-database and improving the response speed. The meta-database stores the core configurations of the platform (such as form definitions, component Schemas, template structures) and system parameters, providing a structured data source for the server-side parsing engine. External applications (app1 to appn) interact with the platform through the connection pool. For example, app1 may connect to the business tables of the ERP system, and app2 connects to the customer data of the CRM system to achieve cross-system data integration.

[0042] The data flow and collaboration are divided into the design stage and the operation stage. In the design stage, the user configures forms and components through the front-end design tool. The configuration information is stored in the meta-database by the form storage engine and cached in Redis at the same time. In the operation stage, the form parsing engine of the application system reads the configuration from Redis or the meta-database. The metadata parsing engine generates dynamic SQL and operates on the target database (such as the business tables corresponding to app1) through the connection pool. The front-end UI rendering engine loads components and templates, dynamically binds the structured data returned by the server to page elements. User operations (such as submitting a form) trigger events, and the database is updated through the server. The entire process realizes efficient collaboration through the division of labor between the front and back ends (front-end rendering, server-side logic processing) and resource optimization (connection pool reuse, caching strategy), which not only reduces the browser load but also ensures the flexibility and stability of complex business scenarios.

[0043] In some embodiments, as Figure 3 shown, the design system further includes a process designer and a business component configuration tool. The process designer is used to define the node logic, approval path, and data flow rules of the business process through a visual interface, realizing the automated configuration and execution of the business process. The business component configuration tool is used to combine multiple basic components to generate business components and define their attributes, event interfaces, and data interaction logic through a declarative Schema file.

[0044] Specifically, the design system further enhances the flexibility and business adaptation ability of the low-code platform through the process designer and the business component configuration tool. As the core module of visual configuration, the process designer allows users to define each node of the business process (such as approval links, data entry steps, or external service call nodes) in a graphical interface in a drag-and-drop manner and configure the logical flow rules between nodes. For example, in the procurement approval process, the user can define the node path of "submit application → department approval → financial review → archiving". Each node supports independent configuration of data input / output rules (such as the department approval node needs to be associated with the "budget amount" field and set the approval person's role permissions). The process designer is implemented based on the BPMN 2.0 (Business Process Model and Notation 2.0) standard, supports dynamic conditional branches (such as triggering an additional approval level when the amount exceeds the threshold), parallel task processing, and timeout automatic jump strategies, and is deeply integrated with the form designer - process nodes can be bound to specific form fields (such as the approval opinion input box) to ensure the automatic flow of business data with the process status.

[0045] After the process configuration is completed, the design system converts it into a structured description file (such as JSON or XML format) and stores it in the form storage engine for the metadata parsing engine on the server side to call. When the process instance runs, the metadata parsing engine generates dynamic SQL according to the process rules (such as filtering operable data according to the permissions of the current node), and executes operations through the multi-data source connection pool to achieve process-driven data automation processing.

[0046] The business component configuration tool focuses on improving the component reusability and business logic encapsulation ability. The business component configuration tool provides a visual canvas that allows developers to drag and combine multiple basic components (such as dropdown select boxes, text boxes, buttons) into higher-granularity business components (such as "customer information screening panel"). During the combination process, the business component configuration tool defines the properties (Property), events (Event), and data interaction rules of the business component through a declarative Schema file.

[0047] Using the process designer and the business component configuration tool, through visual configuration and standardized encapsulation, the complex logic that needs to be manually coded in the traditional low-code platform (such as process jump rules, component interaction) is transformed into drag-and-drop and reusable modules, which not only reduces the usage threshold for non-technical personnel but also provides flexible expansion underlying interfaces for developers, achieving a double improvement in usability and flexibility.

[0048] In some embodiments, as Figure 3 shown, the service system further includes a form storage engine and a multi-data source connection pool; the form storage engine is used to persistently store form configuration information and associated data models, supporting version management, historical record backtracking, and secure access to configuration information. The multi-data source connection pool is used to manage the connection resources of heterogeneous databases, supporting connection reuse, transaction control, and execution performance monitoring, and adapting to the operation requirements of multiple data sources.

[0049] Specifically, the form storage engine is responsible for persistently storing the form configuration information (including UI structure description, data binding rules, verification logic) generated in the design system and the associated data models (such as form field types, association relationships) in a structured database.

[0050] The core capabilities of the form storage engine are reflected in three aspects: First, the version management mechanism. Each modification of the form configuration generates an independent version number and records the change content (such as field addition / deletion, rule adjustment). Users can trace back to historical versions at any time to avoid configuration loss caused by misoperations. Second, secure access control. Through field-level encrypted storage (such as sensitive field desensitization) and permission hierarchical verification (such as administrators can edit, ordinary users can only read), it ensures the security of configuration information during storage and transmission. Third, data model association mapping. The UI elements in the form configuration (such as the drag-and-drop components in the form designer) and the data model (such as database table fields) are dynamically bound through a unique identifier (such as field_id). When the data model changes (such as the field type changes from string to enumeration), the form storage engine automatically detects and prompts for configuration synchronization and update to avoid front-end and back-end data parsing conflicts. For example, after the user adjusts the field type of the "Customer Information Table" in the designer, the engine will update the association relationship between F_FORM_DATA (storing UI configuration) and F_TABLE_DATA (storing the data model) to ensure the consistency of data and UI during rendering.

[0051] The multi-data source connection pool can solve the problem of collaborative operation of heterogeneous databases. Traditional low-code platforms usually only support a single data source, while in this embodiment, the connection pool dynamically manages the connection resources of heterogeneous databases such as MySQL, Oracle, and MongoDB, achieving three core functions: First, connection reuse. For data sources with high-frequency access (such as the MySQL library of the core business system), the connection pool pre-establishes and maintains a fixed number of active connections. When an application request arrives, an available connection is directly allocated, avoiding the overhead of frequent connection establishment / disconnection. It is measured that the database operation time consumption is reduced by more than 40%. Second, transaction control. For write operations across data sources (such as simultaneously updating the MySQL order table and the Oracle inventory table), the connection pool ensures the atomicity of the transaction through the two-phase commit protocol (2PC). When any database operation fails, it automatically rolls back to ensure data consistency. Third, performance monitoring and dynamic optimization. The connection pool real-time statistics the response time, error rate, and throughput of each database connection. Based on policies (such as response timeout threshold, maximum concurrency), it automatically expands or shrinks the number of connections, and forcibly reclaims resources when detecting abnormal connections (such as deadlocks, long-time unreleased) to prevent system-level avalanches. For example, in the scenario of simultaneously operating App1 (connected to MySQL) and App2 (connected to Oracle), the connection pool automatically adapts to the corresponding database driver according to the differentiated statements generated by the SQL assembler (such as the LIMIT syntax of MySQL and the ROWNUM syntax of Oracle), and allocates read-only connections or transactional connections through connection tags (such as read_only, transactional) to ensure the efficient execution of complex queries and write operations.

[0052] In this embodiment, a form storage engine and a multi-data source connection pool are utilized. By decoupling configuration management and data operations and uniformly scheduling multi-source database resources, the platform can not only meet the high-security and high-availability requirements of enterprise-level systems but also be flexibly extended to complex environments such as hybrid clouds and cross-regional deployments.

[0053] In some embodiments, as Figure 3 shown, the reusable resource management component includes a basic component library, a business component library, and a template library. The basic component library is used to provide extensible atomic-level UI components, supporting custom extensions of properties, events, and styles. The business component library is used to store business function units formed by combining multiple basic components and defines input and output interfaces through declarative Schema files. The template library is used to store predefined standardized page structure templates, including form, list, and tree table templates, supporting the rapid generation of pages through data model association.

[0054] Specifically, the reusable resource management component realizes the efficient reuse and flexible extension of the low-code platform from atomic functions to complex pages through the hierarchical design of the basic component library, the business component library, and the template library. The basic component library, as the bottommost building unit, provides atomic-level UI components such as input boxes, buttons, and tables. Each component exposes extension interfaces for properties, events, and styles. For example, the input box component allows developers to customize validation rules (such as validating the mobile phone number format with a regular expression) through the property interface, bind callback functions when data changes (such as real-time search and association) through the event interface, and override the default layout (such as rounded borders and floating shadows) through the style interface. This extensibility enables the basic components to adapt to the interaction requirements of different business scenarios without modifying the component source code.

[0055] The business component library, based on the combination and logical encapsulation of basic components, forms functional units with business semantics. Developers drag and combine multiple basic components through a visual configuration tool (such as combining a dropdown selection box, a text box, and a button into an "advanced search panel") and define the input and output rules of the components through declarative Schema files. Taking the "order status filter" business component as an example, its Schema file contains the following definitions: Properties: Receive an externally passed "optional status list" parameter (such as pending payment, shipped, completed); Events: Trigger the onFilter event when the user clicks the "filter" button and output the selected status value; Data mapping: Dynamically bind the filtering conditions to the query statement generated by the SQL assembler (such as WHERE status IN (:selectedValues)); Style: Supports customizing the font, background color, and arrangement mode (horizontal / vertical) of the panel title.

[0056] The Schema file of the business component is parsed by the front-end UI rendering engine, realizing the decoupling of the implementation logic from the UI. For example, the same "data chart component" can dynamically render line charts or pie charts based on different data sources (MySQL aggregation results or MongoDB nested documents) without modifying the component code.

[0057] The template library further improves the reuse granularity to the page level, providing predefined standardized templates such as forms, lists, and tree tables. Each template realizes dynamic adaptation by separating the UI model and the data model: UI model: Stores the page structure (such as two-column layout), component arrangement rules (such as the position of the list pager), and style theme; Data model: Defines the structure of the bound data table (such as field types, association relationships) and permission policies (such as field visibility). For example, the "customer information management" template is associated with the fields (name, contact information, address) of the customer data table. Developers only need to associate the actual business data table (such as app1_customer) in the template manager to automatically generate a complete CRUD page without dragging and configuring from scratch. For complex pages (such as the master-slave table structure of the "order details" page), the template library provides combined templates. By configuring the foreign key association relationship between the master table (order basic information) and the slave table (order item list), data cascade loading and synchronous update are realized. Actual measurements show that page development efficiency can be increased by more than 60% through template reuse, while ensuring the interaction consistency across business modules.

[0058] In this embodiment, through these three-layer reuse mechanisms, a progressive development ecosystem of "atomic components → business functions → complete pages" is formed, which not only reduces the configuration complexity for non-technical users but also provides developers with deep customization capabilities. It is the core design of the low-code platform to balance efficiency and flexibility.

[0059] In some embodiments, the basic component library includes an extended interface module, a logic encapsulation module, an event communication module, and a component integration module; the extended interface module is used to support developers to extend the attributes and methods of components according to platform standards; the logic encapsulation module is used to encapsulate reusable business logic during the component life cycle through the built-in Hooks interface, enhancing the flexibility and scalability of the components; the event communication module is used to implement the event publishing and subscription mechanism across components based on the event bus, responding to trigger events and updating the states of associated components; the component integration module is used to repackage the components of the third-party UI framework and dynamically integrate them into the basic component library.

[0060] Specifically, the extension interface module provides developers with a standardized interface specification, allowing them to extend component properties and methods without modifying the component source code. For example, developers can add custom validation rules (such as ID card format validation) or dynamic placeholder prompts to the input box component through JSON configuration. These extended properties are dynamically injected during component rendering to ensure that the component functions can be flexibly adjusted according to business requirements. This module also supports method extension - for example, adding an "Export to Excel" method to the table component and implementing the interaction logic with the backend service through interface injection.

[0061] The logic encapsulation module realizes the logical reuse of the component lifecycle based on the built-in Hooks interface. Hooks provide hook functions for component initialization, data loading, state update, and destruction phases. Developers can encapsulate common business logic by combining Hooks. For example, use the useFetchData Hook to encapsulate data request logic (including error handling and loading state management). When the table component is rendered, this Hook is automatically called to load data, avoiding repeated writing of request code in each component. Hooks also support cross-component logical sharing. For example, form submission validation logic can be reused by multiple business components, significantly reducing the amount of redundant code.

[0062] The event communication module establishes a loosely coupled inter-component communication mechanism through the EventBus. Components publish events (Publish) during specific actions (such as button clicks, data changes), and associated components listen for events through subscription (Subscribe) and trigger responses. For example, when the "Filter Condition Component" publishes the FILTER_CHANGE event, the associated "Data Table Component" automatically receives the event parameters (such as filter values) and reloads the data. This mechanism avoids direct dependencies between components, especially suitable for dynamically generated pages (such as form groups combined through templates), ensuring state synchronization of cross-level components.

[0063] The component integration module is responsible for seamlessly integrating components of third-party UI frameworks (such as Ant Design, ElementUI) into the platform ecosystem. This module re-packages third-party components through the adapter pattern: Standardized interface conversion: Map the native APIs of third-party components to the platform's unified interfaces (such as converting the onChange event of AntD to the valueChange event of the platform); Style isolation and theme adaptation: Isolate the styles of third-party components through CSS scoping (Scoped CSS) and dynamically override the default styles according to the platform theme configuration; Dynamic loading mechanism: Load third-party component resources on demand (e.g., load moment.js only when using the date picker) to avoid resource redundancy. For example, after the table component of ElementUI is encapsulated, the column definitions and sorting rules can be directly configured through the platform Schema file, and at the same time, event interaction with platform native components (such as custom filters) is supported.

[0064] In this embodiment, through the collaborative work of these modules, the basic component library can not only meet the rapid customization of atomic-level functions (such as extending validation rules), but also support the flexible combination of complex business scenarios (such as linking multiple components through the event bus), realizing the high scalability and dynamic collaboration ability of the components.

[0065] In some embodiments, the extension interface module includes a validation rule extension interface, a script event extension interface, and a style extension interface; the validation rule extension interface is used to preset logical validation rules and business validation rules, and support users to customize validation functions; the script event extension interface is used to bind events within the component life cycle through preset hook functions; the style extension interface is used to support customizing component styles through CSS and Class.

[0066] Specifically, the validation rule extension interface solves the differentiated requirements of data verification in different business scenarios by presetting general validation rules and opening custom validation functions. The preset rules include basic logical validations (such as field required, numerical range limit, uniqueness check) and common business rules (such as mobile phone number format, ID card legality, amount decimal precision), which developers can directly call through configuration. For example, in the "user registration form", the mobile phone number field is bound to the preset regular expression validation rule of " / ^1[3-9]\d{9}$ / " to ensure that the input value conforms to the standard format. For special scenarios (such as industry-specific coding rules), developers can extend the function through custom validation functions: for example, define a "project number validation function" to check whether the input value meets the combination rule of "letter prefix + 6-digit number", and register this function in the validation rule library for reuse by other forms. The validation result will be immediately feedback to the UI component (such as the input box border turns red and an error message is displayed), and at the same time, the submission of illegal data will be blocked.

[0067] The script event extension interface realizes event binding and logic injection during the component lifecycle through preset hook functions (HookFunction), enhancing the component's interaction control ability. This interface exposes hooks at key nodes such as component initialization (onMount), data change (onChange), focus out (onBlur), and destruction (onDestroy). Developers can inject custom logic through configuration scripts (such as JavaScript). For example, bind a function to the onChange event of a "search input box" to initiate a search request to the backend in real-time when the user enters text and display the associated results; or bind an auto-saving function to the onBlur event of a "data table" to ensure that the edited content is immediately persisted when the focus moves out. The hook functions support asynchronous operations (such as waiting for an API response) and context state management (such as obtaining the current form data), and also allow cross-component calls (such as triggering a chart component refresh when the table data changes), thus realizing complex interaction links.

[0068] The style extension interface provides the ability to customize styles through both CSS and Class paths, taking into account flexibility and standardization. Developers can directly override the default styles of components through inline CSS (such as modifying the button background color, adjusting the rounded corner size of the input box), or bind predefined style themes through Class names (such as "primary-button", "danger-alert"). The platform uses CSS-in-JS technology to achieve dynamic style injection, ensuring style scope isolation and avoiding global pollution. For example, in an "enterprise portal template", developers bind the enterprise brand theme (such as the primary color, font family) to all form components through Class to achieve one-click skinning; at the same time, use CSS to fine-tune the shadow effect and hover animation for specific components (such as the submit button on the login page). Style extension also supports responsive design (such as dynamically adjusting the layout according to the screen width) and conditional styles (such as displaying different colors according to the data status), enabling the UI to adapt to multi-terminal display and business state changes.

[0069] In this embodiment, these three types of interfaces use a standardized extension mechanism to decouple the function, interaction, and display layers of components, enabling non-technical personnel to quickly meet common requirements through configuration, while developers can handle complex scenarios through code extension, thus reducing the usage threshold while retaining the ability for in-depth customization. It provides multi-dimensional flexible extension capabilities for the basic components of the low-code platform.

[0070] In some embodiments, the business component library includes a component combination module, a Schema definition module, a business logic adaptation module, and a domain component preset module; the component combination module is used to generate business components by combining at least two basic components, and the business components are used to encapsulate the interaction logic and data processing functions of specific business scenarios and support reuse within the domain; the Schema definition module is used to generate Vue-format Schema files for each business component; the business logic adaptation module is used to dynamically parse the interaction logic of business components based on the Schema files to achieve binding with the data model and cross-component communication; the domain component preset module is used to provide pre-configured standardized business components; the standardized business components include a filtering rule component with a configurable complex condition filtering function, and the filtering rule component is composed of a drop-down selection component, a text box component, and a button component, and supports dynamically generating query conditions and triggering data filtering operations.

[0071] Specifically, the component combination module provides a visual canvas that allows developers to combine at least two basic components into high-granularity business components by dragging and dropping, encapsulating the interaction logic and data processing functions of specific business scenarios. For example, the "filtering rule component" is composed of a drop-down selection component (filtering field), a text box component (input condition value), and a button component (triggering query). Users can define the layout of the components (such as the horizontal arrangement of the drop-down box and the input box) and interaction rules (such as triggering data query after clicking the button) through the canvas. The combined business components are registered in the business component library with a unique identifier, supporting cross-domain reuse - the same filtering component can be applied to different modules such as order management and customer information query, and only the bound data fields need to be adjusted to adapt to business requirements.

[0072] The Schema definition module generates Vue-format Schema files for each business component to define the attributes, event interfaces, and style rules of the components in declarative syntax.

[0073] In some embodiments, the Schema file includes attribute definition data, style definition data, and event definition data. The attribute definition data is used to describe the input parameters and configuration rules of the business component; the style definition data is used to define the layout, theme, and dynamic style binding rules of the component; the event definition data is used to declare the input (Input) and output (Output) event interfaces of the component.

[0074] For example, the Schema file of the filtering rule component contains: Attribute definition data: fields (list of filterable fields, such as order number, customer name), dataSource (associated data table identifier); Event definition data: onFilter(output filtering condition object, e.g., {field: "orderId", value: "2024001"}); Style definition data: layout (horizontal / vertical arrangement), theme (theme color matching rules); Data binding rule: map the input condition value to the query parameter of the SQL assembler (e.g., generate WHERE ${field}=${value}).

[0075] The Schema file describes the functional contract of business components through a JSON structure, realizing the decoupling of logic and UI, enabling the same business component to adapt to different rendering engines (such as the Web side and the mobile side).

[0076] The business logic adaptation module dynamically parses the interaction logic of components based on the Schema file, realizing coordination with the data model and other components. This module performs the following operations at runtime: Data binding: associate the dataSource defined in the Schema with the table structure in the meta database, and automatically generate field type verification logic (e.g., numeric fields are prohibited from entering text); Event communication: when the onFilter event of the filtering rule component is triggered, notify associated components (such as data tables, charts) to reload data through the event bus (EventBus); Cross-component state synchronization: for example, when the "customer ID" in the main form changes, automatically update the fields list of the filtering rule component to only display the filterable fields related to that customer.

[0077] The domain component preset module provides out-of-the-box standardized business components, covering common business scenarios and reducing repetitive configuration work. Taking the "filtering rule component" as an example, its preset functions include: Support for complex conditions: support multi-field combined filtering (AND / OR logic), fuzzy matching (LIKE syntax), and range query (BETWEEN); Dynamic query generation: concatenate the SQL WHERE clause in real time according to the condition value entered by the user and trigger the data table refresh; Interaction optimization: the input box supports auto-completion (e.g., caching of historical filtering values), and the drop-down selection supports cascading linkage (e.g., dynamically loading the "city" list after selecting the "province").

[0078] Developers can directly call the preset components or extend and customize the logic based on the Schema file (such as adding an "amount range verification" rule for the financial scenario).

[0079] Through the collaboration of the above-mentioned modules, the business component library transforms complex business logics that need to be hard-coded in traditional low-code platforms (such as multi-condition filtering and data linkage) into configurable and reusable standardized units, achieving efficient encapsulation of business functions and dynamic adaptation capabilities.

[0080] As Figure 4 shown, it demonstrates the hierarchical construction relationship between the basic component library and the business component library in the low-code platform.

[0081] In Figure 4 , on the left, the basic component library contains atomic-level UI components (component1 to componentn), such as basic units like input boxes and buttons. Each component has independent Property, Style, and Event interfaces. The business component library on the right is composed of basic components. For example, businessComp1 is constructed by combining component1, component2, and component3, and its structure (such as field mapping rules), properties (such as input parameter constraints), styles (such as layout themes), and events (such as data filtering trigger logic) are defined through a Schema file; businessComp2 is composed of component4, component5, and component6, also following the Schema-driven configuration mode. The arrows in the figure indicate that basic components are called by business components through methods such as property inheritance, event binding, and style reuse. For example, component1 participates in the construction of both businessComp1 (as a filtering field selector) and businessComp2 (as a data input unit). Sub-components within business components (such as "2.style" marked by component2) further refine the style rules to achieve decoupling of UI and logic. This design forms a progressive architecture of "basic components → business components → scenario-based pages", which not only ensures the flexibility of underlying functions but also improves the development efficiency of complex business components through pre-set Schema templates.

[0082] In some embodiments, the template library includes a model separation module, a template type module, an association configuration module, and an interface adaptation module; the model separation module is used to separately store the UI model and the data model of the template; the UI model is stored in the F_FORM_DATA field, including page structure, component layout, style information, and the association relationship between components; the data model is stored in the F_TABLE_DATA field, which is used to define business data structures, verification rules, and permission policies; the template type module is used to provide form templates and combined form templates; the form template is used to generate a standardized page based on a single form configuration, and supports dynamic management of page elements through variable abstraction; the combined form template is used to generate a complex page structure by aggregating multiple forms and configuring the association relationship, including master-sub table, Tab label group, and tree table structure; the association configuration module is used to define the data linkage rules between multiple forms in the combined form template, including: the cascading update logic of the master form and the sub form, and the layout binding and event response rules across forms; the interface adaptation module is used to implement the interaction between the template and the database through a server-side general interface, and the interface stipulates data specifications to execute DDL (table structure operation) and DML (data addition, deletion, modification, and query) operations.

[0083] Specifically, by separately storing the UI model and the data model of the template, the model separation module solves the problems of high coupling degree and difficulty in adapting to multiple business scenarios of traditional templates. The UI model is stored in the F_FORM_DATA field, including page structure (such as two-column layout, Tab label group), component arrangement rules (such as the position of the list pager), style information (such as font, margin), and the association relationship between components (such as the foreign key binding between the master table and the sub table). The data model is stored in the F_TABLE_DATA field, which defines business data structures (such as field types, association relationships), verification rules (such as non-negative amount fields), and permission policies (such as field visibility control). For example, the F_FORM_DATA of a "customer information management" template stores the form layout and component styles, while the F_TABLE_DATA defines the field structure (name, contact information) of the customer table, and the two are dynamically associated through a unique identifier, enabling the same template to adapt to different business data tables (such as the customer_vip table and the customer_normal table).

[0084] The template type module provides two types of templates to cover simple to complex business requirements: The form template generates a standardized page (such as a data entry form, a detail display page) based on a single form configuration, and realizes dynamic element management through variable abstraction. For example, the text of the "submit button" in the form template can be dynamically bound through the variable {{submitText}}, and is automatically replaced with "save draft" or "submit for review" when associating different data models.

[0085] The combined form template generates a complex page structure by aggregating multiple forms and configuring association rules. For example, the "project establishment application" combined template includes a main table (basic project information) and sub-tables (project risks, budget details), and its association rules include: Data cascading: The main table ID is used as the foreign key of the sub-table, and the sub-table data is dynamically loaded as the main table is selected. Event linkage: When the main table is submitted, it triggers data verification of the sub-table. If any sub-table verification fails, the submission of the main table is blocked. Layout binding: The sub-table is embedded below the main table in the form of a Tab page, supporting dynamic switching and parallel editing.

[0086] The association configuration module defines the interaction logic of multiple forms in the combined template to ensure data consistency. Taking the main and sub-tables as an example: Cascading update: When the status of the main table "project establishment application" changes to "passed", it automatically calls the interface to load the historical data of the sub-table "project risks". Permission synchronization: The editing permission of the main table fields controls the sub-table operations (for example, when the main table is in the "read-only" state, the editing function of the sub-table is locked). Cross-form event: The data change of the sub-table "quality requirement library" triggers the real-time calculation of the fields of the main table "project scoring".

[0087] The interface adaptation module realizes seamless interaction between the template and the database through a standardized interface protocol. The server provides two types of general interfaces: DDL interface: Dynamically generate and execute table structure operations according to the F_TABLE_DATA of the template (such as creating the main table project_apply and the sub-table project_risk). DML interface: Based on the CRUD operation rules configured in the template (such as cascading deletion, transaction submission), perform data addition, deletion, modification, and query. For example, when the user submits data through the combined template, the interface performs the following operations in sequence: Insert data into the main table project_apply and obtain the generated primary key. Insert the primary key as a foreign key into the sub-table project_risk. If any insertion fails, roll back the transaction and return an error message.

[0088] Embodiments These modules enable the template to flexibly configure and efficiently reuse page templates by separating concerns (decoupling UI from data), pre-setting complex interaction logics (cascading and event linkage), and standardizing data operation interfaces, so that the template can not only quickly generate standardized pages (e.g., the form template reduces the configuration time by 60%), but also support enterprise-level complex business scenarios (e.g., the combined template realizes cross-table transaction control). Developers can meet the full-scenario requirements from simple data entry to multi-table collaborative management by calling pre-set templates or fine-tuning association rules in the template library, significantly reducing development and maintenance costs.

[0089] In some embodiments, the form parsing engine includes a backend metadata parsing engine and a frontend UI rendering engine; The backend metadata parsing engine is used to: locate the target data source according to the application identifier (appid), and obtain the form configuration information based on the form model identifier (modelid); parse the master-slave table relationship, query fields, and filtering rules in the form configuration to generate an operation instruction set containing dynamic SQL statements; execute the dynamic SQL statements in the target data source and perform structured processing on the returned data, including data grouping and list-to-tree structure conversion; The frontend UI rendering engine is used to: load the page templates and component library resources in the template library through a configuration parser and render the page structure as needed; dynamically bind the structured data returned by the backend to the UI components in the template through a form assembler to generate an interactive page; realize cross-component communication based on the Event Bus, respond to data changes, and trigger the update of associated components.

[0090] In this embodiment, the form parsing engine realizes the efficient conversion from configuration to page and dynamic interaction through the division of labor and cooperation between the backend metadata parsing engine and the frontend UI rendering engine.

[0091] As the core of data processing, the backend metadata parsing engine first locates the target data source according to the application identifier (appid) (such as the app1_order table in MySQL or the app2_inventory table in Oracle), and obtains the form configuration information (including UI structure, field association rules, and permission policies) from the metadata database through the form model identifier (modelid). Subsequently, the engine parses the business rules in the configuration: for example, if the form contains a master-slave table relationship (such as the order master table and the order item sub-table), the foreign key of the master table (order_id) and the associated field of the sub-table (item_order_id) are extracted to generate a dynamic JOIN query statement; if a filtering rule is configured (such as "only display orders with the status of 'to be shipped'"), the WHERE condition clause is concatenated; at the same time, the LIMIT / OFFSET or ROWNUM syntax is added according to the paging parameters (to adapt to different databases), and finally a complete set of dynamic SQL operation instructions is generated. In the execution stage, the engine calls the target database through a multi-data source connection pool, and after the query is executed, the result set is structured - for example, the flat list data of order items is grouped by order_id and converted into a tree-like nested structure (the sub-item list is mounted under the main order node), or the statistical values are aggregated according to the configured chart rules (such as summarizing the sales amount by month). The structured data is returned to the front end through an interface, avoiding the direct exposure of the original data and enhancing security.

[0092] The front-end UI rendering engine focuses on page generation and interaction response. The configuration parser first loads the target page template (such as the "order management list page") from the template library, parses the UI structure in the template (such as the top search bar, the middle table, and the bottom pager), and dynamically loads the resources of the basic component library (input box, button) and the business component library (advanced filtering panel). The form assembler binds the structured data returned by the backend to the UI components: for example, the table component dynamically renders the column headers according to the columns field in the data and fills the rows data into the table rows; the tree structure data drives the generation of hierarchical nodes in the left navigation bar. The Event Bus runs through the entire rendering process to achieve cross-component communication: for example, when the user clicks the search button, the input box component publishes a SEARCH event and carries the keyword parameter, and the table component listens to this event and triggers a data refresh; if a row is selected in the master table, the Event Bus notifies the sub-table component to load the associated data according to the master table ID. The engine adopts an on-demand loading strategy, only rendering the components in the current visible area (such as the current page data of the paged table), and optimizing the performance in the scenario of a large amount of data through virtual scrolling technology to ensure that the rendering of tens of thousands of data is not stuck.

[0093] The front-end and back-end engines work together through a standardized protocol: the back-end processes complex data operations and permission filtering (such as field-level read and write control), and the front-end is only responsible for lightweight rendering and event response. For example, in the "project management" form, the back-end parsing engine dynamically generates SQL according to the user role (such as ordinary employees can only query the projects they are responsible for), and the front-end rendering engine hides the "delete" button and disables the editable fields according to the permission filtering results. This division of labor mechanism reduces the browser-side computing load by about 40%, and at the same time supports the flexible adaptation of complex business scenarios (such as mixed queries of multiple data sources, real-time data linkage). Finally, it realizes the low-code development experience of "configuration is the page, data is the interaction", taking into account both efficiency and performance.

[0094] As Figure 5 shown, it describes the core logic of the low-code platform to quickly build business systems through the continuous accumulation and standardized iteration of the component library. The specific process analysis is as follows: 1. Process starting point and business requirement drive: The process starts from "business requirements", that is, the business systems that need to be developed in the actual scenarios of enterprises (such as supply chain management systems, customer relationship management systems). The platform needs to judge whether the existing component libraries (basic, business, templates) can cover the required scenarios according to the requirements. For example, if a system with "order management" and "inventory warning" functions needs to be developed, it is necessary to check whether there are relevant business components (such as order forms, inventory charts) and templates (such as master-slave table structures) in the component library.

[0095] 2. Classification and functions of the component library: Basic component library: Based on open-source UI frameworks (such as Ant Design, ElementUI), atomic-level components (input boxes, buttons, tables) are encapsulated. As the framework iterates, the platform continuously expands component attributes (such as tables supporting virtual scrolling), styles (theme adaptation), and events (such as asynchronous loading), providing reliable support for upper-layer business components.

[0096] Business component library: In the development process of specific fields (such as finance, e-commerce), repetitive business logics are encapsulated into reusable units. For example, when developing a "risk assessment system", the "risk score calculator" is encapsulated as a business component, which includes the interaction logics of dropdown selection (risk type), numerical input (indicator weights), and chart display (score results).

[0097] Template component library: Preset standardized page structures (such as list pages with filtering conditions, Tab tab group layouts), and quickly generate pages by configuring data models. For example, the "order details template" associates the main table (order information) and the sub-table (order items), and data linkage can be achieved by configuring foreign keys.

[0098] 3. Requirement satisfaction judgment and closed-loop iteration: Meeting requirements: If the existing component library can cover the requirements (such as generating a system through basic component combination + template configuration), then directly "generate the business system" without coding. For example, by using a "form template" to configure data fields and adding query conditions with a "filter rule component", the construction of the data management page can be completed.

[0099] Not meeting requirements: Enter the "custom development" stage to develop new components or templates for the missing functions. After development, it is necessary to determine whether it is "standardizable": Standardizable: Extract the metadata of the component. For example, define attributes (such as the index weight range of the "risk scoring component"), events (triggering a notification when the scoring is completed), and data binding rules through a Schema file, and convert it into a standard component and store it in the library for subsequent reuse.

[0100] Not standardizable: Retain it as customized code and only use it in the current system (such as a highly specific internal approval process).

[0101] 4. Key closed-loop: Accumulation - reuse - re-accumulation: Improving basic components: As the open-source framework is upgraded, continuously encapsulate new functions (such as responsive layout components) or optimize performance (such as lazy loading components) to strengthen the underlying capabilities.

[0102] Accumulating business and template components: In domain applications, standardize the reusable parts of custom development. For example, a certain e-commerce system customized a "promotion rule engine". If its logic can be abstracted into a "condition - action" model, a general business component can be generated through metadata extraction, and subsequent other e-commerce systems can directly configure and use it.

[0103] Efficiency improvement: The higher the component library coverage rate, the greater the proportion of systems generated through configuration, and the fewer custom development requirements, forming a positive cycle of "decreasing development requirements → resource tilting towards component accumulation → stronger platform capabilities".

[0104] 5. Technical implementation example, taking the development of an "inventory warning system" as an example: Requirement analysis: It is necessary to achieve real-time monitoring of inventory levels, threshold warnings, and data visualization.

[0105] Component matching: Basic components: Table (displaying the inventory list), input box (setting thresholds), line chart (showing inventory changes); Business components: There is no ready-made "inventory warning rule component"; Template components: There is a "monitoring dashboard template" (supporting multi-chart layout).

[0106] Custom development: Develop an "inventory warning rule component" that includes threshold setting and warning notification logic.

[0107] Standardization judgment: This component can be abstracted as a "general component for threshold monitoring". Metadata (such as threshold field type, notification method configuration) is extracted and stored in the business component library.

[0108] Subsequent reuse: When developing a "server resource monitoring system", this component can be directly called, and only the CPU usage rate field needs to be bound.

[0109] The low-code platform of this implementation follows an iterative path of "requirement-driven development → component standardization → configuration-based reuse". Its core is to convert custom development into configurable standard capabilities through the continuous enrichment of three types of component libraries, and ultimately achieve an efficient development mode of "a small amount of customization + a large amount of configuration", enabling the platform to quickly respond to diverse business needs while reducing long-term maintenance costs.

[0110] In some embodiments, the implementation solution of the business components given in this embodiment is an aggregation behavior of multiple basic components, accompanied by a description document. The business components exist in a more abstract form of "view components". The engine assembles and parses the components according to the component descriptions in the document.

[0111] This embodiment can achieve dynamic loading and modular management: Business components can be classified and managed by domain, and each type of business component can be independently packaged into an NPM extension package. The NPM extension package is a reusable code module that independently encapsulates business components by domain, supports dynamic import and on-demand loading, thereby expanding the functions of the low-code platform and reducing the initial resource volume of the main application.

[0112] By importing NPM packages to expand the functions of the low-code platform, it can be suitable for complex business scenarios. At the same time, through dynamic loading, on-demand loading according to business scenarios reduces the initial resource volume of the main application. Specifically as follows: On-demand loading: The main application initially only loads the core component library. When the user enters a specific business module (such as inventory management), the corresponding NPM package (such as @lowcode / inventory-components) is dynamically imported, reducing the resource volume of the first screen (measured to be reduced by more than 50%); Version isolation: Component packages in different domains are independently maintained in versions, avoiding compatibility issues caused by global upgrades (such as financial component v1.2 and supply chain component v2.1 can coexist); Hot plug-in mechanism: When a new component package is added or updated, it takes effect without restarting the main application. For example, after deploying a new "data analysis component package", the user can call the new component in the template library by refreshing the page.

[0113] The low-code platform provided by the embodiments of the present invention solves the problems of insufficient flexibility, single component form, poor scalability, cumbersome configuration, and low efficiency of the parsing engine in traditional low-code platforms. Starting from two directions, namely the component library and the form engine, this embodiment enhances the platform's capabilities to adapt to more complex business scenarios, reduces hard coding, and improves the usability and efficiency of the system. The specific beneficial effects include: 1) Improve development efficiency: By building in a rich library of basic components, business components, and business templates, the present invention enables developers to directly select and modify existing components and form templates, further reducing repetitive development work.

[0114] 2) Enhance flexibility: The basic components are extensible and can be combined into new business components, and rich event-driven functions are provided, allowing developers to add complex interaction logics to the form.

[0115] 3) Improve scalability: Developers are allowed to freely expand component attributes and methods and build new business components in an aggregated form. This mechanism enables the form engine to adapt to changing business requirements.

[0116] 4) Improve system performance: The addition of a metadata parsing engine on the server side can initially parse form data, relieve the pressure of front-end form rendering, and significantly improve the platform performance.

[0117] As described above, the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them. Although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments or perform equivalent replacements for some of the technical features. However, such modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A low-code platform based on a component library and a form engine, characterized in that, It includes a design system, an application system, and a service system; The design system includes: A form designer for configuring form components through drag-and-drop operations to generate a form description file containing UI structure, data binding rules, and verification logic; A template manager for managing predefined page templates, supporting storage of templates, version control, and separate storage of UI models and data models; The application system includes: A form parsing engine for parsing configuration information in the form description file to generate executable page logic and dynamic data binding relationships; A UI rendering engine for loading template library resources and components in the component library according to the parsing results, rendering the page in combination with style files, and implementing communication between components through an event bus; A reusable resource management component for centrally storing reusable data models, business components, and page templates, and scheduling and dynamically combining the above resources through a unified interface to generate application configurations; The service system includes: A metadata parsing engine for parsing business rules and data models in the form to generate dynamic SQL statements and field-level permission filtering policies; An SQL assembler for generating insert, update, delete, and query operation statements adapted to multiple data sources according to dynamic SQL templates and business parameters, supporting splicing of complex query conditions.

2. The platform according to claim 1, wherein The design system also includes a process designer and a business component configuration tool; The process designer is used to define the node logic, approval path, and data flow rules of the business process through a visual interface to achieve automated configuration and execution of the business process; The business component configuration tool is used to combine multiple basic components to generate business components, and define their attributes, event interfaces, and data interaction logic through a declarative Schema file.

3. The platform according to claim 1, characterized in that, The service system also includes a form storage engine and a multi-data source connection pool; The form storage engine is used to persistently store form configuration information and associated data models, supporting version management, historical record backtracking, and secure access to configuration information; The multi-data source connection pool is used to manage connection resources of heterogeneous databases, supporting connection reuse, transaction control, and execution performance monitoring, and adapting to the operation requirements of multiple data sources.

4. The platform according to any one of claims 1 to 3, characterized in that, The reusable resource management component includes a basic component library, a business component library, and a template library; The basic component library is used to provide extensible atomic-level UI components, supporting custom extensions of attributes, events, and styles; The business component library is used to store business function units formed by combining multiple basic components, and define input and output interfaces through a declarative Schema file; The template library is used to store predefined standardized page structure templates, including form, list, and tree table templates, supporting rapid generation of pages through data model association.

5. The platform according to claim 4, characterized in that, The basic component library includes an extension interface module, a logic encapsulation module, an event communication module, and a component integration module; The extension interface module is used to support developers to extend the attributes and methods of components according to platform standards; The logic encapsulation module is used to encapsulate reusable business logic during the component lifecycle through a built-in Hooks interface to enhance the flexibility and extensibility of the component; The event communication module is used to implement an event publishing and subscribing mechanism across components based on the event bus, respond to trigger events, and update the states of associated components. The component integration module is used to re-package components of a third-party UI framework and dynamically integrate them into the basic component library.

6. The platform according to claim 5, characterized in that, The extension interface module includes a verification rule extension interface, a script event extension interface, and a style extension interface. The verification rule extension interface is used to preset logical verification rules and business verification rules, and support user-defined verification functions. The script event extension interface is used to bind events within the component life cycle through preset hook functions. The style extension interface is used to support customizing component styles through CSS and Class.

7. The platform according to claim 4, wherein The business component library includes a component combination module, a Schema definition module, a business logic adaptation module, and a domain component preset module. The component combination module is used to generate business components by combining at least two basic components. The business components are used to encapsulate the interaction logic and data processing functions of specific business scenarios and support reuse within the domain. The Schema definition module is used to generate Vue-format Schema files for each business component. The business logic adaptation module is used to dynamically parse the interaction logic of business components based on the Schema files, realize the binding with the data model, and cross-component communication. The domain component preset module is used to provide pre-configured standardized business components. The standardized business components include a filtering rule component with a configurable complex condition filtering function. The filtering rule component is composed of a drop-down selection component, a text box component, and a button component, and supports dynamically generating query conditions and triggering data screening operations.

8. The platform according to claim 7, wherein The Schema file includes: Attribute definition data, which is used to describe the input parameters and configuration rules of business components. Style definition data, which is used to define the layout, theme, and dynamic style binding rules of components. Event definition data, which is used to declare the input and output event interfaces of components.

9. The platform according to claim 4, characterized in that, The template library includes a model separation module, a template type module, an association configuration module, and an interface adaptation module. The model separation module is used to store the UI model and data model of the template separately. The UI model is stored in the F_FORM_DATA field, including the page structure, component layout, style information, and the association relationship between components. The data model is stored in the F_TABLE_DATA field, which is used to define the business data structure, verification rules, and permission policies. The template type module is used to provide form templates and combined form templates. The form template is used to generate a standardized page based on a single form configuration, and supports dynamic management of page elements through variable abstraction. The combined form template is used to generate a complex page structure by aggregating multiple forms and configuring the association relationship, including master-slave tables, Tab label groups, and tree table structures. The association configuration module is used to define the data linkage rules between multiple forms in the combined form template, including: the cascading update logic between the main form and the sub-form, and the layout binding and event response rules across forms. The interface adaptation module is used to implement the interaction between the template and the database through the server-side general interface, and the interface stipulates the data specifications to perform table structure operations and data addition, deletion, modification, and query.

10. The platform according to claim 1, wherein The form parsing engine includes a backend metadata parsing engine and a frontend UI rendering engine; The backend metadata parsing engine is used to: locate the target data source according to the application identifier, and obtain the form configuration information based on the form model identifier; Parse the master-slave table relationship, query fields, and filtering rules in the form configuration, generate an operation instruction set containing dynamic SQL statements; execute the dynamic SQL statements in the target data source, and perform structured processing on the returned data, including data grouping and list-to-tree structure conversion; The frontend UI rendering engine is used to: load the page templates and component library resources in the template library through the configuration parser, and render the page structure as needed; dynamically bind the structured data returned by the backend to the UI components in the template through the form assembler to generate an interactive page; implement cross-component communication based on the event bus, respond to data changes, and trigger the update of associated components.

Images