Ipagewebpage type low code development platform based on drag component framework

Abstract

The application discloses an ipage webpage type low-code development platform based on a drag-and-drop component framework and relates to the field of development platforms.At present, the development of the power industry is troublesome.The application comprises a data layer, an intelligent operation and maintenance layer, an integrated access layer and an application development framework layer; wherein, the application development framework layer divides the webpage development mode into a data asset module, a model driving module, an application development engine module and a component warehouse module; so that the user can realize the display and interactive operation of basic data through self-defined and personalized drag-and-drop configuration, form a low-code configuration platform supporting the visual configuration of the front-end interface, utilize cloud components, adopt operations including clicking and dragging to perform visual configuration and build a layer application.The technical scheme reduces the application building threshold, reduces the dependence on professional development engineers, enables the business department to build an application platform in a drag-and-drop and superposition manner, meets the personalized needs of the business department and reduces the labor cost.

Description

Technical Field

[0001] This invention relates to the field of development platforms, and more particularly to the iPage web-based low-code development platform based on a drag-and-drop component framework. Background Technology

[0002] There are many similar products both domestically and internationally. For example, kepler.gl is an open-source spatial data visualization tool developed by Uber. Through its Python-oriented interface package, kepler.gl allows users to input data in various formats by writing Python code in a Jupyter notebook. Its built-in rich spatial data visualization functions are available in an interactive window embedded in a personal computer, enabling data map visualization without any programming background. However, kepler.gl is heavily restricted by MapBox, limiting the selection of map sources other than MapBox, which is not very user-friendly for domestic developers. Meanwhile, Xindehui, a subsidiary of Meiya Pico, has wrapped OpenLayers based on Vue and launched xdh-map3. xdh-map provides 20 components including text, graphics, and heatmaps. Developers do not need to understand map-related professional knowledge or even write additional code to implement general map functions, but its functionality is not comprehensive; for example, it only supports tile layers and GeoJSON vector layers, which is quite limited. Currently, both domestic and international vendors are considering both general-purpose and vertically specific products when developing multi-layer applications. However, general-purpose products are much more complex than those for vertical industries, yet no single vertical product is specifically designed for the power sector. This is because the power industry demands highly customized business data configurations, and it's unlikely that layer-based development tools suitable for the power industry will emerge in the next few years. Summary of the Invention

[0003] The technical problem to be solved and the technical task proposed by this invention is to improve and refine existing technical solutions, and to provide an iPage web-based low-code development platform based on a drag-and-drop component framework, so as to efficiently realize the layer development purpose in the power industry. To this end, this invention adopts the following technical solution.

[0004] iPage is a web-based low-code development platform based on a drag-and-drop component framework. The development platform includes a data layer, an intelligent operation and maintenance layer, an integration and access layer, and an application development framework layer.

[0005] Data layer: Used to record data, including databases, personnel information, and basic metadata information of the interface in each stage of project development;

[0006] Intelligent Operation and Maintenance Layer: Provides an independent and open platform for historical / real-time data collection and algorithm analysis, integrating IT data and business metrics; dynamically resolves dependencies on different team component libraries to ensure each team's own unique component repository; monitors the performance metrics of various system interfaces, and collects interface error messages, service health status, and usage activity through event tracking.

[0007] Integrated access layer: used for access control, access to business middleware services, and access to third-party private services;

[0008] Application Development Framework Layer: This layer divides the web development model into a data asset module, a model-driven module, an application development engine module, and a component repository module. It enables users to customize and personalize configurations through drag-and-drop, allowing for the display of basic data and interactive operations, forming a low-code configuration platform that supports visual configuration of the front-end interface. Based on this low-code configuration platform, an editor adds markers to component files in the component repository module, allowing the browser to render components as required. The combined atomic components in the component repository module are uploaded to form cloud components for diverse business scenarios. These cloud components are then used for visual configuration via click and drag-and-drop operations to build layered applications.

[0009] This invention addresses numerous issues such as heavy reliance on the skill level and time investment of page developers, the increasing complexity and difficulty in choosing front-end technologies, and the growing learning curve. It proposes a method that utilizes a low-code platform to create freely configurable and expandable components, thereby reducing resource waste caused by redundant builds and improving the efficiency of requirement delivery.

[0010] As a preferred technical approach, the data asset module is used for integrated collaboration of service interface documentation, interface debugging, interface test cases, interface automated testing, data modeling, and dictionary management; it solves the data synchronization problem between multiple systems through a single system and a single set of data.

[0011] As a preferred technical approach: following the standard data platform construction model, it is divided into two main parts: standard setting and model design. Both standard setting and model design can be carried out online, eliminating the need for offline maintenance of separate data standard documents and data model documents. After ordinary developers complete the model design, they submit it to the administrator for review. Once the model is approved, it is allowed to go online or be modified. Among them, the data warehouse level, specification design, and model elements are defined at the table level, while the data thesaurus, root words, and code table are defined at the field level. Service security is ensured through strategies including high-availability service deployment and regular data backup. The underlying layer can integrate data security components, supporting row and column permission control, multiple authentication methods, and national cryptographic encryption features to ensure user data security.

[0012] As a preferred technical approach, the model-driven module helps users complete the design and management of data models and logical tables by using model data, including power grid construction models, business scenarios, and measurement information. This enables users to manage the hierarchical structure of the data model and design logical table fields. Under the constraints of data standards, field design uses standard data element definitions referenced during the model design process to set relevant standard quality rules for logical tables, ensuring that different logical table designers operate according to a unified standard.

[0013] As a preferred technical approach, the application development engine module provides custom component and component library management capabilities based on its own component extension protocol. By customizing the functions, attributes, and styles of components, it can meet the customized needs of business operations.

[0014] As a preferred technical approach, the component repository module provides one-click generation of component metadata. By dividing business into segments, it assembles multiple atomic components and maintains events, thereby generating scenario-based components required by various businesses. Furthermore, relying on the back-end material asset package protocol, it builds a diversified component material center to help developers quickly build business modules and optimize application scenarios.

[0015] As a preferred technical approach: the platform divides workspace management, data management, and project management into corresponding core functions through role-based permission allocation; the workspace management function configures different workspaces and manages configuration services including projects, data, and interfaces through these spaces; the data management function enables bidirectional data adaptation, processing and transforming basic data as needed for interface use; the project management function's interface configuration uses user-defined, personalized drag-and-drop configuration to display basic data and enable interactive operations; abstract data is bidirectionally bound to interface elements, providing rich interactive support and achieving display effects, thus forming a low-code configuration platform that supports visual configuration of the front-end interface.

[0016] As a preferred technical approach: the platform adopts a visual configuration system that is used in conjunction with the layer rendering component, so that users can customize the layer page using a visual interface;

[0017] Based on the standard programming interface for processing Extensible Markup Language, when building the component rendering engine, the document object model is referenced to add the component's category, attribute set, and influence factor to the rendering tree, thereby expanding its semantics;

[0018] The effective content of the entire interface is stored in the metadata leaf node, while the remaining nodes store component positions, content chunks, appearance characteristics, and extended events. Component tags and attributes are used to emphasize rendering information and describe the line chart coordinate system. The component impact factor is used to represent the relative degree of influence of the component on the interface content. The component impact factor comprehensively considers the component's category and tag-emphasized attributes. Categories include containers, data displays, forms, charts, maps, and business logic. The impact factor is propagated, passing down from container components to other components. The DSL model adds mouse events to component objects, component cache traversal, and style support. Users can drag and drop components, adjust attributes, and configure events.

[0019] The Component Definition Structure (DSL) defines the corresponding field information for each component. It consists of three parts: 1. BaseComponent: The unique tag body of the component, which is based on HTML text markup language rules for browser recognition identifiers; 2. BaseConfig: Component configuration items, which define the component's type, appearance, and attribute configuration items; 3. DefaultConfig: Component initial values, which define the component's initial rendering information.

[0020] The DSL layer defines the data protocol for components, including editable attributes, editable types, and initial values, facilitating later component expansion and aiding backend language development and data storage. For component configuration items, if three or more common configuration attributes exist, they are uniformly maintained under `component / bas`, and used as needed by maintaining common components. Regarding component application, if a component needs to be displayed and used in the grid editor and layer editor, the current version of the component must be maintained at the corresponding path.

[0021] As a preferred technical means: the visual configuration system has an assembly interface, which includes a navigation area and a workspace area;

[0022] The workspace area is where team members collaborate on development. In the workspace, team members work together according to their different roles to create and modify data sources, datasets, forms / charts, dashboards, frameworks, and components.

[0023] As a preferred technical approach: When the project management module is triggered by clicking on the workspace to configure the page, the configuration interface is displayed. The configuration interface is divided into three areas: the left area is the component bar, in which functional components are placed; the middle area is the editing area, in which grids are used for layout and typesetting, and functional components are placed in the grid by dragging and dropping; the right area is the attribute configuration area, in which component attributes are configured, and after clicking on a component in the editing area, the specific content items of the corresponding component are displayed.

[0024] Beneficial effects: This technical solution lowers the barrier to application development, reduces reliance on professional development engineers, and allows business departments to build application platforms themselves using drag-and-drop and layering methods. This meets the personalized needs of business departments, reduces labor costs, minimizes repeated communication with the R&D department, and shortens the overall project development cycle. In terms of later-stage operation and maintenance, iPage-based solutions offer faster iteration speeds and greater flexibility. Furthermore, they support cross-platform application deployment, providing significant advantages over traditional software development and enabling a wider range of application scenarios. Attached Figure Description

[0025] Figure 1 This is a block diagram illustrating the assembly interface principle of the present invention.

[0026] Figure 2 This is a flowchart of the present invention.

[0027] Figure 3 This is the interface assembly diagram of the present invention.

[0028] Figure 4 This is the system architecture diagram of the present invention.

[0029] Figure 5 This is the data asset logic diagram of the present invention.

[0030] Figure 6 This is the interface engine driving logic diagram of the present invention.

[0031] Figures 7(a) and 7(b) are diagrams of the component DSL rendering mechanism of the present invention.

[0032] Figure 8 This is the component material design drawing of the present invention.

[0033] Figure 9 This is the interface assembly logic diagram of the present invention. Detailed Implementation

[0034] First, let's explain some technical terms:

[0035] Python: An object-oriented computer programming language commonly used in scientific computing and statistics, artificial intelligence, software development, and other fields.

[0036] OpenLayers is a library package specifically designed for developing web-based GIS clients, used to access map data published in standard formats.

[0037] DSL (Domain Specific Language) is a computer programming language that is specific to a particular domain and has limited expressiveness. It is often used to focus on a specific domain or problem.

[0038] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings.

[0039] like Figure 4 As shown, the iPage web-based low-code development platform, based on a drag-and-drop component framework, includes a data layer, an intelligent operation and maintenance layer, an integration and access layer, and an application development framework layer.

[0040] Data layer: Used to record data, including databases, personnel information, and basic metadata information of the interface in each stage of project development;

[0041] Intelligent Operation and Maintenance Layer: Provides an independent and open platform for historical / real-time data collection and algorithm analysis, integrating IT data and business metrics; dynamically resolves dependencies on different team component libraries to ensure each team's own unique component repository; monitors the performance metrics of various system interfaces, and collects interface error messages, service health status, and usage activity through event tracking.

[0042] Integrated access layer: used for access control, access to business middleware services, and access to third-party private services;

[0043] Application Development Framework Layer: This layer divides the web development model into a data asset module, a model-driven module, an application development engine module, and a component repository module. It enables users to customize and personalize configurations through drag-and-drop, allowing for the display of basic data and interactive operations, forming a low-code configuration platform that supports visual configuration of the front-end interface. Based on this low-code configuration platform, an editor adds markers to component files in the component repository module, allowing the browser to render components as required. The combined atomic components in the component repository module are uploaded to form cloud components for diverse business scenarios. These cloud components are then used for visual configuration via click and drag-and-drop operations to build layered applications.

[0044] like Figure 5As shown, the data asset aims to provide integrated collaboration for service interface documentation, interface debugging, interface test cases, interface automated testing, data modeling, and dictionary management. It solves the data synchronization problem between multiple systems through a single system and a single set of data. Following the standard data platform construction model, it is divided into two main parts: "Standard Formulation" and "Model Design." Standard formulation and model design can both be done online, eliminating the need for offline maintenance of separate data standard documents and data model documents. After completing the model design, ordinary developers need to submit it for administrator review. Once approved, the model is allowed to go live or be modified. The data warehouse layer, specification design, and model elements are defined at the table level, while the data dictionary, root words, and code table are defined at the field level. Service security is ensured through strategies such as high-availability deployment and regular data backups. The underlying layer can integrate data security components, supporting features such as row and column permission control, multiple authentication methods, and national cryptographic encryption to ensure user data security.

[0045] Model-driven approaches help users design and manage data models and logical tables by building power grid models, business scenarios, and measurement information. Users can manage the hierarchical structure of the data model and design logical table fields. Field design must be constrained by data standards. By referencing standard data element definitions during the model design process, relevant standard quality rules for logical tables are set to ensure that different logical table designers operate according to a consistent standard.

[0046] like Figure 6 and Figure 7(a) , 7(b) As shown, the application development engine module provides custom component and component library management capabilities based on its own component extension protocol. By customizing the functions, attributes and styles of components, business customization needs can be realized more conveniently.

[0047] like Figure 8 As shown, the component repository module provides one-click generation of component DSL schema metadata. By dividing business functions, it can assemble multiple atomic components and maintain events to generate scenario-specific components required by various businesses. Furthermore, relying on the back-end material asset package protocol, it builds a diversified component material center to help developers quickly build business modules and optimize application scenarios.

[0048] The platform construction of this technical solution includes the following steps:

[0049] 1. By combining the actual requirements of the business, operating habits, project construction methods, and other practical situations, and based on the support of underlying services, quickly build backend software tools to meet the needs of frontend applications;

[0050] Second: The platform divides core functions such as workspace management, data management, and project management through role-based permission allocation. The workspace management function configures different workspaces and manages project, data, interface, and other configuration services through these spaces. The data management function is used to achieve two-way data adaptation, processing and transforming basic data as needed for use in the interface. The project management function uses user-defined, personalized drag-and-drop configurations to display basic data and enable interactive operations.

[0051] Third, by binding abstract data with interface elements in two directions, providing rich interactive support and achieving beautiful display effects, a low-code configuration platform is formed to support the visual configuration of the front-end interface. The editor based on the low-code configuration platform drives the template engine to render components through the basic definition of components, forming cloud components for diverse business scenarios and meeting the needs of various businesses.

[0052] IV. Develop a layer rendering engine that allows the already developed cloud components to be visually configured using simple click and drag operations, enabling the construction of layer applications;

[0053] This invention targets visual development and designs a visual configuration system to be used in conjunction with layer rendering components. It allows users to customize and build layer pages using a visual interface even without any experience in interface development or programming, providing valuable reference for subsequent development and applications.

[0054] like Figure 1 As shown, steps three and four above are described in detail:

[0055] Based on the standard programming interface for processing Extensible Markup Language recommended by the W3C, the component rendering engine is built with reference to the Document Object Model, adding the component's category, attribute set, and influence factor to the rendering tree to extend its semantics.

[0056] The entire effective content of the interface is stored in the metadata leaf node, while the remaining nodes store component positions, content chunks, appearance characteristics, and extended events. Component tags and attributes are used to emphasize rendering information, such as... <gline>The `axis` property of the line chart component clearly describes the line chart's coordinate system. Furthermore, different types of nodes have different effects on the content blocks of their descendant nodes.

[0057] The component influence factor represents the relative degree of influence a component has on the interface content. I(component) ∈ [0, 1], with a larger value indicating a higher degree of influence. The component influence factor comprehensively considers the component's category (container, data display, form, chart, map, business, etc.) and the construction of tag-emphasized attributes. Furthermore, the influence factor is propagated; it should be passed down from container component to component. That is, I(component) = ∑ni = Influence(P); where P is the container node and n is the container node tree.

[0058] The DSL model adds mouse events to component objects, component cache traversal, and style support, allowing users to drag and drop components, adjust properties, and configure events.

[0059] Front-end components are a crucial component of this technical solution. The component definition structure defines the corresponding field information for each component. The component design structure includes three parts: the BaseButton component body, BaseButtonConfig which defines the component's type, appearance, and attribute configuration items, and the component's DSL in default.config.js, the structural protocol layer, and the component's initial values ​​in default.config.js. The DSL layer mainly defines the component's data protocol, including editable attributes, editable types, and initial values, facilitating future component expansion and aiding backend language development and data storage. Regarding component configuration items, if three or more components share common configuration attributes, they are uniformly maintained under component / bas, and used as needed based on common components. In terms of component application, if the component needs to be displayed and used in the grid editor and layer editor, the current version of the component must be maintained in the corresponding path location.

[0060] This technical solution enables users with no prior experience in interface development and programming to quickly build visual layer pages, solving the problem of complex and tedious program modifications and laying the foundation for future development.

[0061] like Figure 2 As shown, the platform process is based on the agile development model and is divided into five modules: requirements design, data modeling, interface development, program testing, and deployment and maintenance.

[0062] After registering and logging into the platform through the usual process, users are first assigned to the project team under their corresponding project manager, who then assigns roles to the project personnel.

[0063] Data modeling phase: After the requirements personnel release the requirements document, the data modeling personnel design the physical tables of the model and build the business model required by the requirements based on the power grid model specifications; after the requirements change, the platform stipulates that the requirements of the project are frozen during the requirement change notification phase and must wait for the revised requirements document to be uploaded before they can be restarted.

[0064] Interface development phase: This can begin after the requirements document is released. Service configuration personnel configure the service address definition, input parameter format definition, and output parameter format definition on the platform, and combine multiple interfaces through service orchestration; interface assembly personnel upload design drafts and image material files to the platform.

[0065] Please see Figure 3 Users can complete the configuration and development of the interface by following these steps on the platform.

[0066] Users can select or drag components from the component library on the left. Through front-end component registration, external materials, such as a vast array of front-end components, are described according to the "Material Description Agreement," generating a specification document. This document includes basic information and attribute descriptions, used for displaying the settings panel.

[0067] In the middle, the platform uses a component rendering engine (see S03) to transform the specification file into a view. The view is for end users and needs to handle internal data flow, lifecycle, event binding, component interaction, etc. Then, all the materials in the editor are converted into description data of the service interface building protocol through layout settings, component settings, interaction settings, logic orchestration, etc. Finally, the interface is exported through online publishing, offline publishing, and component-based publishing.

[0068] Requirements testing phase: Interface administrators and UI builder personnel initiate interface test cases and UI test cases respectively. Testers add test cases on the platform and generate test results to provide feedback to the development team. Once all tests pass, the testers confirm the release version, and the platform notifies the project operations team.

[0069] Deployment and maintenance phase: Deployment and maintenance personnel will release the confirmed project version to various environments; maintenance personnel also need to collect and report problems in the project process to the platform for the next test release.

[0070] Please see Figure 9 This embodiment proposes a method for creating a freely configurable system using a low-code platform, including the following steps:

[0071] S1: By combining the actual requirements of the business, operating habits, project construction methods, and other practical situations, and based on the support of underlying services, quickly build backend software tools to meet the needs of frontend applications; this part will not be elaborated further, and a freely configurable low-code platform can be formed through the construction of the backend;

[0072] S2: The low-code platform operates on a workspace-based model, allowing for isolated aggregation of work content. Workspaces are completely isolated from each other, sharing basic configuration information within the same space. A project space must be set up first. After users are assigned interface configuration permissions, they need to be assigned to different teams. The team serves as the smallest unit for initiating projects, used to maintain system projects for different specialties. Within a project space, users can freely add project modules and folder-based interface functionality. Interface types include grid-based forms, layer-based free canvases, and module-based micro-applications.

[0073] S3: The entire configuration process, from creating a data source to creating a dataset, creating a project, configuring the page, and publishing / exporting, follows these steps:

[0074] S301: After selecting the workspace, specify the data source (including database, file, etc.), configure / import data structure, define data exchange interface parameter format and result data filtering / conversion processing. Currently, "interface data interface" is supported.

[0075] S302: Create file and directory definitions for the project, select referenced datasets, and specify page association processes. Manage project status and export project deliverables (html / js / css).

[0076] S303: Page configuration includes layout, configuration components, associated models, configuration of required and fillable fields, adding page (initialization) events, adding operation logic events (page logic, interface logic); finally, export the output files by project.

[0077] The detailed steps for configuring the S303 page are as follows:

[0078] S303-1: Determine the layout method and call the grid layer from the component library for typesetting and layout. The grid supports custom layout with 1-24 rows divided into equal parts, placing functional components within the grid. Configure component settings, including attributes, styles, events, and models, through the configuration area, and adjust them according to the actual page requirements.

[0079] S303-2: Configure component style attributes. Select the corresponding style according to the page requirements, including basic settings such as color and font; Configure component attributes. After clicking on the component in the compilation area, refer to the specific content items of the corresponding component; Set the event state of the component in the event attributes, including click, input, clear and reset, etc.; Associate the component with the model attributes in the model attributes: 1. Select the component, 2. Select the model and model table, 3. Click on the model attributes to complete the association.

[0080] S303-3: Event attribute settings can be divided into three types of events: logical events, interface events, and aggregate interfaces. Logical events define the UI operations (such as hiding, disabling, and custom scripts) required when the "master component" sends a specified type of event. Multiple controlled components and scripts can be added. Interface events can call the dataset interface to perform data query, save, and other operations.

[0081] S4: Allows for grid-assisted alignment, repositioning, and scaling of layers. It also allows adding background images and colors to layers. Layers can be activated, moved, scaled, copied, and deleted to achieve the desired layout.

[0082] Finally, the layer page is constructed through page configuration, and the corresponding page styles are rendered and exported.

[0083] The iPage web-based low-code development platform based on a drag-and-drop component framework shown above is a specific embodiment of the present invention, demonstrating the substantial features and progress of the present invention. Based on actual usage needs and under the guidance of the present invention, equivalent modifications in shape, structure, etc., can be made to it, all of which are within the scope of protection of this solution.< / gline>

Claims

1. An iPage web-based low-code development platform based on a drag-and-drop component framework, characterized by: The development platform includes a data layer, an intelligent operation and maintenance layer, an integration and access layer, and an application development framework layer. Data layer: Used to record data, including databases, personnel information, and basic metadata information of the interface in each stage of project development; Intelligent Operation and Maintenance Layer: Provides an independent and open platform for historical / real-time data collection and algorithm analysis, integrating IT data and business metrics; dynamically resolves dependencies on different team component libraries to ensure each team's own unique component repository; monitors the performance metrics of various system interfaces, and collects interface error messages, service health status, and usage activity through event tracking. Integrated access layer: used for access control, access to business middleware services, and access to third-party private services; Application development framework layer: This layer divides the web development model into a data asset module, a model-driven module, an application development engine module, and a component repository module. This enables users to display basic data and perform interactive operations through customizable and personalized drag-and-drop configurations, forming a low-code configuration platform that supports visual configuration of the front-end interface. The editor, based on a low-code configuration platform, enables the browser to render components as required by adding markers to component files in the component repository module. After being uploaded, the combined atomic components in the component repository module form cloud components for diverse business scenarios. Using cloud components, visual configuration is performed through operations including click and drag, and layer applications are built.

2. The iPage web-based low-code development platform based on a drag-and-drop component framework as described in claim 1, characterized in that: The data asset module is used for integrated collaboration of service interface documentation, interface debugging, interface test cases, interface automated testing, data modeling, and dictionary management; it solves the data synchronization problem between multiple systems through a single system and a single set of data.

3. The iPage web-based low-code development platform based on a drag-and-drop component framework as described in claim 2, characterized in that: According to the standard data platform construction model, it is divided into two main parts: standard setting and model design. Both standard setting and model design can be carried out online, without the need to maintain separate data standard documents and data model documents offline. After the ordinary developers complete the model design, they submit it to the administrator for review. After the model is reviewed, it can be put into operation / modified. The data warehouse hierarchy, standardized design, and model elements are defined at the table level, while the data lexicon, root words, and code table are defined at the field level. Service security is ensured through strategies including high-availability service deployment and regular data backup. The underlying layer can integrate data security components, supporting row and column permission control, multiple authentication methods, and national cryptographic encryption features to ensure user data security.

4. The iPage web-based low-code development platform based on a drag-and-drop component framework as described in claim 1, characterized in that: The model-driven module helps users design and manage data models and logical tables by providing model data, including power grid construction models, business scenarios, and measurement information. It enables users to manage the hierarchical structure of the data model and design logical table fields. Field design is constrained by data standards. By referencing standard data element definitions during the model design process, relevant standard quality rules for logical tables are set to ensure that different logical table designers operate according to a unified standard.

5. The iPage web-based low-code development platform based on a drag-and-drop component framework as described in claim 1, characterized in that: The application development engine module is based on its own component extension protocol, providing the ability to manage custom components and component libraries. By customizing the functions, attributes and styles of components, it can realize the customized needs of business.

6. The iPage web-based low-code development platform based on a drag-and-drop component framework as described in claim 1, characterized in that: The component repository module provides one-click generation of component metadata. By dividing business into business segments, it assembles multiple atomic components and maintains events, thereby generating scenario-based components required by various businesses. Relying on the back-end material asset package protocol, it builds a diversified component material center to help developers quickly build business modules to optimize application scenarios.

7. The iPage web-based low-code development platform based on a drag-and-drop component framework as described in claim 1, characterized in that: The platform divides core functions into workspace management, data management, and project management through role-based permission allocation. The workspace management function configures different workspaces and manages configuration services for projects, data, and interfaces through these spaces. The data management function enables bidirectional data adaptation, processing and transforming basic data as needed for use in the interface. The project management function allows for user-defined, personalized drag-and-drop configuration, enabling the display of basic data and interactive operations. Abstract data is bidirectionally bound to interface elements, providing rich interactive support and achieving display effects, thus forming a low-code configuration platform that supports visual configuration of the front-end interface.

8. The iPage web-based low-code development platform based on a drag-and-drop component framework as described in claim 7, characterized in that: The platform employs a visual configuration system that works in conjunction with the layer rendering component, enabling users to customize layer pages using a visual interface. Based on the standard programming interface for processing Extensible Markup Language, when building the component rendering engine, the document object model is referenced to add the component's category, attribute set, and influence factor to the rendering tree, thereby expanding its semantics; The effective content of the entire interface is stored in the metadata leaf node, while the remaining nodes store component positions, content chunks, appearance characteristics, and extended events; the rendering information is emphasized using component tags and attributes, describing the line chart coordinate system; the component impact factor is used to represent the relative degree of influence of the component on the interface content, and the component impact factor is constructed by comprehensively considering the component's category and tag emphasis attributes; the categories include containers, data display, forms, charts, maps, and business; Influence factors are propagated, passing down from container components to components; the DSL model adds mouse events to component objects, component cache traversal, and style support, allowing users to drag and drop components, adjust properties, and configure events; The Component Definition Structure (DSL) defines the corresponding field information by defining each component. It consists of three parts:

1. BaseComponent: The unique tag body of the component, which is based on HTML text markup language rules and used by the browser to identify the identifier; 2. BaseConfig component configuration items define the component's type, appearance, and attribute configuration items; 3. The DefaultConfig component's initial values ​​define information related to the component's initial rendering. The DSL layer defines the data protocol for components, including editable attributes, editable types, and initial values, facilitating later component expansion and aiding backend language development and data storage. For component configuration items, if three or more common configuration attributes exist, they are uniformly maintained under `component / bas`, and used as needed by maintaining common components. Regarding component application, if a component needs to be displayed and used in the grid editor and layer editor, the current version of the component must be maintained at the corresponding path.

9. The iPage web-based low-code development platform based on a drag-and-drop component framework as described in claim 8, characterized in that: The visual configuration system has an assembly interface, which includes a navigation area and a workspace area. The workspace area is where team members collaborate on development. In the workspace, team members work together according to their different roles to create and modify data sources, datasets, forms / charts, dashboards, frameworks, and components.

10. The iPage web-based low-code development platform based on a drag-and-drop component framework according to claim 9, characterized in that: When you click on the workspace to trigger the project management module for page configuration, the configuration interface is displayed. The configuration interface is divided into three areas: the left area is the component bar, where functional components are placed; the middle area is the editing area, where grids are used for layout and typesetting, and functional components are placed in the grid by dragging and dropping; the right area is the attribute configuration area, where component attributes are configured. After clicking on a component in the editing area, the specific content items of the corresponding component are displayed.

Images