Method and system for realizing intra-application component data sharing in low-code platform

Abstract

The invention provides a method and system for realizing in-application component data sharing in a low-code platform, and relates to the field of low-code platform data sharing, the method comprises the following steps: constructing a data field meta-information description specification, and constructing a specification component library according to the data field meta-information description specification; dragging and generating an application page by utilizing a low-code designer; generating a data field for the components in the component library according to the page tree-shaped data structure, and generating a data chain according to the data field; recording an association relationship between the data field and the component when the component uses the data; according to the incidence relation between the data field and the component, when the component updates data in the data field of the component, the component with the incidence relation is updated in a response mode. According to the method, the data field is created for the container components, and all the components in the container have a data sharing method, so that the data utilization efficiency in the system is improved, the data request times are reduced, and the occupation of network IO is reduced.

Description

Technical Field

[0001] The present invention relates to the field of data sharing in a low-code platform. Specifically, it particularly relates to a method and system for implementing in-application component data sharing in a low-code platform. Background Art

[0002] A low-code platform is a tool that enables developers to quickly build application programs by dragging and dropping components through a graphical interface. The data obtained through network requests in existing low-code platforms is directly saved into the data domains of each component, and the data domains of the components are isolated from each other. If multiple components in an application need to use the same piece of data, each component will send the same network request and save the same piece of data into their respective data domains. In this way, the data cannot be effectively reused, resulting in an increase in network IO load and client memory occupancy. Improving the data utilization rate of applications developed using low-code platforms and effectively reducing the network IO load and client memory occupancy of applications are currently technical problems that need to be urgently solved.

[0003] To solve the above problems, existing low-code platforms implement in-application data sharing by providing a globally unique data domain. However, the globally unique data domain is too single. When using it, it is necessary to fully consider whether the data identifiers conflict. Once a conflict occurs, the previously stored data will be directly lost. And when the data is updated, the components using the data cannot automatically respond to the data change to update the view, resulting in the inability to use the global scope when the data needs to change dynamically.

[0004] Regarding the problems in the related art, no effective solutions have been proposed yet. Summary of the Invention

[0005] In view of this, the present invention provides a method and system for implementing in-application component data sharing in a low-code platform to solve the above-mentioned problems.

[0006] To solve the above problems, the specific technical solutions adopted by the present invention are as follows:

[0007] According to one aspect of the present invention, there is provided a method for implementing in-application component data sharing in a low-code platform, the method comprising the following steps:

[0008] S1. Construct a data domain meta-information description specification according to the data attributes of the meta-information, and construct a specification component library according to the data domain meta-information description specification;

[0009] S2. Based on the specification component library, use a low-code designer to drag and generate an application page to obtain a page tree data structure;

[0010] S3. Generate data domains for the components in the component library according to the page tree data structure, and generate data chains according to the data domains;

[0011] S4. Save and use data using data domains and data chains, and record the association relationship between the data domain and the component when the component uses the data;

[0012] S5. According to the association relationship between the data domain and the component, when the component updates the data in its own data domain, update the related components in a reactive manner.

[0013] Preferably, the meta-information includes a parent domain, a child domain, a component dependency relationship, a data acquisition method, and a data update method;

[0014] The specification component library includes container components and business components.

[0015] Preferably, based on the specification component library, using a low-code designer to drag and generate an application page, and obtaining the page tree data structure includes the following steps:

[0016] S21. Initialize the low-code designer, and load the specification component library and an empty page tree structure;

[0017] S22. Select any component in the component panel of the low-code designer, and drag it to a specified position on the canvas in the low-code designer, and create a new node for the component in the empty page tree structure;

[0018] S23. Configure the properties of the component dragged to the canvas using the property panel of the low-code designer, and update the configured properties to the property fields of the corresponding component node in the page tree structure;

[0019] S24. Traverse the page tree structure using depth-first search, and adjust the hierarchical relationship of the components according to the drag operation of the components;

[0020] S25. After adjusting the hierarchical relationship of the components and updating the page tree structure, re-render the components on the canvas to obtain the page tree data structure.

[0021] Preferably, traversing the page tree structure using depth-first search and adjusting the hierarchical relationship of the components according to the drag operation of the components includes the following steps:

[0022] S241. In the low-code designer, configure an event listener for capturing the drag operation of the component;

[0023] S242. Use the event listener to monitor the drag operation of the component, and determine the target position of the component and its parent node to obtain the drag result of the component;

[0024] S243. According to the drag result of the component, traverse the page tree structure in a depth-first search manner and adjust the hierarchical relationship of the components.

[0025] Preferably, according to the dragging result of the component, traversing the page tree structure in a depth-first search manner and adjusting the hierarchical relationship of the components includes the following steps:

[0026] S2431. Traverse the page tree structure in a depth-first search manner and determine the current node of the dragged component;

[0027] S2432. Remove the current node of the dragged component from the page tree structure, and create a new node of the dragged component under the new parent node of the page tree structure according to the result of the dragging operation;

[0028] S2433. Update the page tree structure and readjust the hierarchical relationship of the components.

[0029] Preferably, generating a data domain for the components in the component library according to the page tree data structure and generating a data chain according to the data domain includes the following steps:

[0030] S31. Use the root component node of the page tree data structure as the initial point, create a new data domain instance for the root component node, and pass the current data domain instance as a parameter to the child components;

[0031] S32. During the passing process, check whether the current child component is a leaf node. If so, stop initializing the data domain. Otherwise, execute step S33;

[0032] S33. Check whether the current child component is a container component. If so, execute step S34. Otherwise, execute step S35;

[0033] S34. For the container component, create a data domain instance for the current child component and repeat step S32;

[0034] S35. For the non-container component, use the data domain instance of the parent component of the child component as its own data domain instance and repeat step S32;

[0035] S36. Generate a data chain according to the data domain instances of the root component and the child components.

[0036] Preferably, using the data domain and the data chain to save and use data, and recording the association relationship between the data domain and the component when the component uses data includes the following steps:

[0037] S41. By calling the method of obtaining values, obtain the data variable that the component needs to use, and use the data variable that the component needs to use as the target variable;

[0038] S42. Traverse and search for the target variable in the current data domain. If the target variable is found in the current data domain, execute step S43. Otherwise, execute step S44;

[0039] S43. Establish a dependency relationship between the target variable in the current data domain and the component that uses the target variable, record the dependency relationship in the dependent components of the current data domain, and return the value of the target variable to complete the component rendering;

[0040] S44. If the target variable is not found in the current data domain, traverse and search upward through the parent attributes until the target variable is found or the top of the data chain is reached. If not found, return.

[0041] Preferably, establishing a dependency relationship between the target variable in the current data domain and the component that uses the target variable, recording the dependency relationship in the dependent components of the current data domain, and returning the value of the target variable to complete the component rendering includes the following steps:

[0042] S431. Locate the target variable in the current data domain and establish a dependency relationship between the target variable and the component by constructing a dependency graph;

[0043] S432. Record the dependency relationship in the dependency component management structure of the current data domain and configure a change listening mechanism for the target variable to notify the dependent components when the value of the target variable changes;

[0044] S433. Obtain the current value of the target variable from the data domain according to the dependency relationship and pass the current value of the target variable to the component for rendering.

[0045] Preferably, according to the association relationship between the data domain and the component, when the component updates the data in its own data domain, updating the associated components in a reactive manner includes the following steps:

[0046] S51. Update the target data variable by calling the set value method in the component and traversing and searching for the target variable in the current data domain;

[0047] S52. In the dependent components of the current data domain, check whether there is a dependency relationship for the target variable. If so, according to the dependency relationship recorded in the dependent components, update the view by calling the rendering methods of all dependent components. Otherwise, there is no need to call the rendering methods of all dependent components to update the view and directly end.

[0048] According to another aspect of the present invention, there is provided a system for implementing in-application component data sharing in a low-code platform, the system including: a specification component library construction module, an application page generation module, a data domain and data chain generation module, an association relationship recording module, and a component update module;

[0049] The specification component library construction module is used to construct a data domain meta-information description specification according to the data attributes of the meta-information and construct a specification component library according to the data domain meta-information description specification;

[0050] An application page generation module, which is used to generate an application page by dragging and dropping using a low-code designer based on a specification component library, and obtain a page tree data structure;

[0051] A data domain and data chain generation module, which is used to generate a data domain for components in the component library according to the page tree data structure, and generate a data chain according to the data domain;

[0052] An association relationship recording module, which is used to save and use data by using the data domain and data chain, and record the association relationship between the data domain and the component when the component uses the data;

[0053] A component update module, which is used to update related components in a reactive manner according to the association relationship between the data domain and the component when the component updates the data in its own data domain.

[0054] The beneficial effects of the present invention are as follows:

[0055] By creating a data domain for the container component in the present invention, all components in the container have a data sharing method, which improves the efficiency of data utilization in the system, reduces the number of data requests, and reduces the occupation of network I / O; business developers can freely create data chains through the container component according to the needs of the business, that is, the flexibility and compatibility of development are retained; associating the data domain with the container component avoids the risk of data conflict in the globally unique data domain and also avoids the redundancy of creating a data domain for each component, achieving a balance between system performance and flexibility. Description of the Drawings

[0056] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the embodiments. Obviously, the drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings. In the drawings:

[0057] Figure 1 is a flowchart of a method for realizing data sharing among components in an application in a low-code platform according to an embodiment of the present invention;

[0058] Figure 2 is a schematic diagram of a page structure in a method for realizing data sharing among components in an application in a low-code platform according to an embodiment of the present invention;

[0059] Figure 3 is a schematic diagram of a data domain in a method for realizing data sharing among components in an application in a low-code platform according to an embodiment of the present invention;

[0060] Figure 4It is a flowchart for generating a data domain and forming a data chain in a method for implementing in-application component data sharing in a low-code platform according to an embodiment of the present invention;

[0061] Figure 5 It is a flowchart for using the data in the data domain and recording the association relationship between the data domain and the component in a method for implementing in-application component data sharing in a low-code platform according to an embodiment of the present invention;

[0062] Figure 6 It is a flowchart for using the association relationship to reactively update the associated components when the data changes in a method for implementing in-application component data sharing in a low-code platform according to an embodiment of the present invention;

[0063] Figure 7 It is a schematic block diagram of a system for implementing in-application component data sharing in a low-code platform according to an embodiment of the present invention.

[0064] In the figure:

[0065] 1. Specification component library construction module; 2. Application page generation module; 3. Data domain and data chain generation module; 4. Association relationship recording module; 5. Component update module. Specific implementation mode

[0066] In order to enable those skilled in the art to better understand the technical solutions in this application, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of this application. Obviously, the described embodiments are only a part of the embodiments of this application, rather than all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of this application.

[0067] According to an embodiment of the present invention, a method and a system for implementing in-application component data sharing in a low-code platform are provided.

[0068] Now, the present invention will be further described in conjunction with the accompanying drawings and specific implementation modes. As Figure 1 shown, according to an embodiment of the present invention, a method for implementing in-application component data sharing in a low-code platform is provided. The method includes the following steps:

[0069] S1. Construct a data domain meta-information description specification according to the data attributes of the meta-information, and construct a specification component library according to the data domain meta-information description specification;

[0070] As a preferred embodiment, the meta-information includes a parent domain, children domains, component dependencies (dependCom), a data acquisition method (getValue), and a data update method (setValue).

[0071] Based on the standard specification for data domain meta-information description, a set of standardized component libraries are established. Some of these components need to implement data domains, and these components are called container components (such as page and service components). The remaining components in the component library are called business components (such as tpl components).

[0072] Container components are responsible for creating and managing data domains and providing interfaces for data domains for business components to use.

[0073] Business components obtain the required data through the data domain interfaces of container components and notify the container components to update the data domain through the interfaces when the data changes.

[0074] Based on the dependency relationships of data domains, container components automatically update the components that depend on the data domains to achieve reactive data updates.

[0075] S2. Based on the standardized component library, use a low-code designer to drag and generate an application page to obtain a page tree data structure;

[0076] As a preferred embodiment, as Figure 2 shown, based on the standardized component library, using a low-code designer to drag and generate an application page to obtain a page tree data structure includes the following steps:

[0077] S21. Initialize the low-code designer and load the standardized component library and an empty page tree structure;

[0078] Specifically, by starting the low-code designer application and loading the standardized component library, the designer can identify and use the components in the library. Initialize an empty page tree structure to store and manage the components in the page and their hierarchical relationships.

[0079] S22. Select any component in the component panel of the low-code designer and drag it to a specified position on the canvas in the low-code designer to create a new node for the component in the empty page tree structure;

[0080] It should be noted that selecting any component in the component panel of the low-code designer and dragging it to a specified position on the canvas in the low-code designer includes the following steps:

[0081] The user selects a component in the component panel. Each component has a unique definition in the component library, and its meta-information (such as type, default properties, etc.) will be bound;

[0082] When the user clicks on a component and drags it, the designer captures this operation and generates an event stream for the drag (such as mouse position, target position, etc.);

[0083] The user drags the component to a specified position on the designer's canvas and releases the drag operation.

[0084] Among them, after the component is dragged to the specified position on the canvas, the designer needs to dynamically create a new node in the page tree structure to represent this component. The steps for node creation include:

[0085] Read component meta-information: Read the default properties, type, and other meta-information of the dragged component from the component library.

[0086] Initialize the basic information of the component node, including:

[0087] Component type (such as Page, Tpl);

[0088] Initial properties (such as text: "Default" or style: {});

[0089] The list of child nodes is empty;

[0090] Locate the insertion position: Based on the target position of the drag, find the parent node in the page tree (i.e., the parent component to which it is dragged). If it is dragged to a blank area of the canvas, the node is inserted as the root node.

[0091] If it is dragged inside a container component, the container becomes the parent node and the new node is inserted as its child node.

[0092] Generate the node structure: Generate a new node in the page tree, containing the following information:

[0093] Node ID: A string that uniquely identifies the new node;

[0094] Component type: Represents the component type corresponding to this node (such as Tpl);

[0095] Attribute fields: Store the initial property values of the component, waiting for the user to configure;

[0096] Parent node reference: Points to the parent node, used to maintain the tree hierarchy;

[0097] List of child nodes: Initially empty, waiting for subsequent nested components;

[0098] Update the page tree structure: Insert the new node into the page tree, update the children list of the parent node, and if it is the root node, directly mount it to the top layer of the page tree.

[0099] S23. Configure the properties of the component dragged onto the canvas using the property panel of the low-code designer, and update the configured properties to the property fields of the corresponding component node in the page tree structure.

[0100] It should be noted that when the user drags and drops a component from the component panel onto the canvas and places it, the component will be selected and become the current active component; the low-code designer will highlight the selected component so that the user knows which component is being configured.

[0101] The low-code designer will automatically display the property panel, or the user can manually open the property panel by clicking a button or menu item; the property panel is usually located on the side or bottom of the designer for easy access and configuration by the user.

[0102] In the property panel, the user can see all the configurable properties of the currently selected component; these properties may include the size of the component (such as width, height), color, font, border, event handlers, etc.

[0103] S24. Traverse the page tree structure using depth-first search and adjust the hierarchical relationship of the components according to the drag-and-drop operations of the components.

[0104] As a preferred implementation, traversing the page tree structure using depth-first search and adjusting the hierarchical relationship of the components according to the drag-and-drop operations of the components includes the following steps:

[0105] S241. In the low-code designer, configure an event listener for capturing the drag-and-drop operations of the components.

[0106] It should be noted that capturing the drag behavior of the component includes the start, process, and end of the drag.

[0107] Record the key information of the drag event, such as: the identifier of the dragged component (such as node ID), the target position (such as the placement area on the canvas or the parent component), and whether the drag behavior is valid (such as whether it is placed in an acceptable area).

[0108] S242. Use the event listener to monitor the drag-and-drop operations of the components and determine the target position of the component and its parent node to obtain the drag result of the component.

[0109] It should be noted that after the drag is completed, obtain through the event listener: the unique identifier of the dragged component (such as node ID), and the parent node ID of the drag target position (new parent node).

[0110] For example: the component being dragged is button1, and the target position is container2, that is, the component needs to be moved under container2.

[0111] S243. Traverse the page tree structure in a depth - first search manner according to the dragging result of the component and adjust the hierarchical relationship of the components.

[0112] As a preferred embodiment, traversing the page tree structure in a depth - first search manner according to the dragging result of the component and adjusting the hierarchical relationship of the components includes the following steps:

[0113] S2431. Traverse the page tree structure in a depth - first search manner and determine the current node of the dragged component.

[0114] S2432. Remove the current node of the dragged component from the page tree structure and create a new node of the dragged component under the new parent node of the page tree structure according to the result of the dragging operation.

[0115] S2433. Update the page tree structure and readjust the hierarchical relationship of the components.

[0116] Specifically, after creating the new node, update the page tree structure to ensure that the hierarchical relationship of all nodes is correct. Traverse the page tree structure, check and adjust any hierarchical relationship that may be affected by the dragging operation to ensure that the page tree structure is consistent with the component layout on the canvas.

[0117] S25. After adjusting the hierarchical relationship of the components and updating the page tree structure, re - render the components on the canvas to obtain the page tree - like data structure.

[0118] Specifically, the core logic of re - rendering the canvas is to map each node in the page tree structure to a component instance on the canvas and recursively render its child nodes. The rendering steps include:

[0119] Root node rendering: Start from the root node (root) of the page tree and use it as the root container of the page.

[0120] Recursive rendering of child nodes: Traverse the children list of each parent node, generate corresponding component instances for each child node, and the rendering process is recursive until all child nodes are rendered on the canvas.

[0121] Component property binding: According to the props field of each node in the page tree, bind properties (such as styles, content, events, etc.) to the component instance to ensure that the property configuration is reflected in the appearance and behavior of the canvas component.

[0122] Position and hierarchy mapping: The hierarchical relationship of each component is determined by the parent - child relationship of the page tree structure. During rendering, according to the page tree hierarchy, determine the nested structure of the components.

[0123] S3. Generate a data domain for the components in the component library according to the page tree - like data structure and generate a data chain according to the data domain.

[0124] As a preferred embodiment, as Figure 4 shown, generating a data domain for the components in the component library according to the page tree data structure, and generating a data chain according to the data domain includes the following steps:

[0125] S31. Take the root component node of the page tree data structure as the initial point, create a new data domain instance for the root component node, and pass the current data domain instance as a parameter to the child components;

[0126] S32. During the passing process, check whether the current child component is a leaf node. If so, stop initializing the data domain. Otherwise, execute step S33;

[0127] S33. Check whether the current child component is a container component. If so, execute step S34. Otherwise, execute step S35;

[0128] S34. For the container component, create a data domain instance for the current child component, and repeat step S32;

[0129] S35. For non-container components, use the data domain instance of the parent component of the child component as its own data domain instance, and repeat step S32;

[0130] S36. Generate a data chain according to the data domain instances of the root component and the child components.

[0131] Specifically, as Figure 3 shown, generating a data domain for the components according to the page tree data structure, and forming a data chain. Based on the page structure schematic diagram, a data domain schematic diagram can be generated.

[0132] Among them, the generated data chain structure is as follows:

[0133]

[0134] Among them, page_store is the data storage domain (data domain) at the page level.

[0135] page_store is the top-level data domain of the entire page, responsible for managing global data or public data that needs to be shared across the entire page. The data domains of other child components (service1_store and service2_store) will depend on page_store, thus achieving global sharing.

[0136] In this way, the data domain of the business component can be shared with the data domain of the nearest upstream container component, thus achieving the purpose of data sharing.

[0137] S4. Save and use data using data domains and data chains, and record the association relationship between the data domain and the component when the component uses the data;

[0138] As a preferred implementation, as Figure 5 shown, saving and using data using data domains and data chains, and recording the association relationship between the data domain and the component when the component uses the data includes the following steps:

[0139] S41. By calling the getValue method, obtain the data variable that the component needs to use, and use the data variable that the component needs to use as the target variable;

[0140] S42. Traverse and search for the target variable in the current data domain. If the target variable is found in the current data domain, execute step S43; otherwise, execute step S44;

[0141] Specifically, starting from the data domain to which the current component belongs, by traversing all variables in the data domain, comparing each variable with the name or identifier of the target variable, if a match is found, execute step S43; otherwise, execute step S44.

[0142] S43. Establish a dependency relationship between the target variable in the current data domain and the component using the target variable, record the dependency relationship in the dependCom (dependent component) of the current data domain, and return the value of the target variable to complete component rendering;

[0143] As a preferred implementation, establishing a dependency relationship between the target variable in the current data domain and the component using the target variable, recording the dependency relationship in the dependent component of the current data domain, and returning the value of the target variable to complete component rendering includes the following steps:

[0144] S431. Based on the target variable found in the current data domain, establish a dependency relationship between the target variable and the component by constructing a dependency graph;

[0145] It should be noted that a dependency graph is a data structure used to record the dependency relationship between variables and components. Generally, it is a graph structure, where nodes represent variables or components, and edges represent dependency relationships. The establishment of the dependency relationship includes:

[0146] When a component requests the value of a certain variable, the system needs to add the component to the dependency list of the variable. Specifically, when implementing, an object or map can be used to record the dependency relationship, where the key is the identifier of the variable (such as the path), and the value is a set containing all components that depend on the variable.

[0147] S432. Record the dependency relationship into the dependency component management structure of the current data domain, and configure a change listening mechanism for the target variable to notify the dependent components when the value of the target variable changes;

[0148] Specifically, when a component requests to use a certain variable, add this component to the dependent component list of the variable to ensure that each variable has a corresponding set of dependent components for storing all components that depend on the variable. During the life cycle of a component, dependencies on a certain variable may be dynamically added or removed. Therefore, the dependency component management structure needs to support dynamic updates to ensure the accuracy of the dependency relationship.

[0149] Among them, common listening mechanisms include the publish-subscribe pattern, the observer pattern, or using language features (such as Proxy in JavaScript).

[0150] Configure a listener for each target variable to monitor changes in the value of the variable. When the value of the variable changes, the listener will be triggered to execute the corresponding notification logic.

[0151] Once the listener detects a change in the value of the variable, it fetches all components that depend on the variable from the dependency component management structure; then, it notifies these components that the value of the variable has changed, and the components can be updated or rendered according to the new value.

[0152] S433. According to the dependency relationship, obtain the current value of the target variable from the data domain and pass the current value of the target variable to the component for rendering.

[0153] It should be noted that the dependency management structure records which variables each component depends on, as well as the paths or identifiers of these variables, and queries the target variables depended on by the component through the dependency management structure. This is usually done during the component initialization or configuration phase;

[0154] According to the path or identifier of the target variable, access and obtain the current value of the variable from the data domain, and pass the obtained variable value to the interface or property of the component, which can be achieved by directly setting the properties of the component, calling the methods of the component, or triggering the events of the component.

[0155] After receiving the new variable value, the component triggers its rendering logic, and the rendering logic may involve updating DOM elements, recalculating the layout, applying new styles, or triggering other visual changes.

[0156] S44. If the target variable is not found in the current data domain, traverse upward through the parent attributes until the target variable is found or the top of the data chain is reached. If not found, return.

[0157] Note that if the target variable is not found in the current data domain, check whether there is a reference or property pointing to the parent data domain. Through the parent property, enter the parent data domain and repeat the search process, recursively traversing upward until the target variable is found or the top of the data chain is reached (i.e., there are no more parent data domains); once the target variable is found in a data domain, stop traversing and use the value of the variable.

[0158] If the target variable is still not found after traversing to the top of the data chain, return a default value or execute specific error handling logic. Possible return values include null, undefined, or a custom error message.

[0159] S5. According to the association relationship between the data domain and the component, when the component updates the data in its own data domain, update the related components in a reactive manner.

[0160] As a preferred embodiment, as Figure 6 shown, according to the association relationship between the data domain and the component, when the component updates the data in its own data domain, updating the related components in a reactive manner includes the following steps:

[0161] S51. By calling the setValue method in the component and traversing to find the target variable in the current data domain, perform an update operation on the target data variable;

[0162] Specifically, the setValue method is an interface provided by the component for updating the data in the data domain. This method usually accepts two parameters: one is the identifier of the target data variable (such as the variable name or path), and the other is the new value to be set.

[0163] When the component needs to update a certain data variable in its data domain, it will call this setValue method. For example, when the user enters new data in a form component, the component will internally call setValue to update the corresponding data variable.

[0164] S52. In the dependent components in the current data domain, check whether there is a dependency relationship of the target variable. If so, according to the dependency relationship recorded in the dependent component (dependCom), update the view by calling the rendering methods of all dependent components; otherwise, there is no need to call the rendering methods of all dependent components to update the view, and directly end.

[0165] Specifically, in the record of the dependent components of the data domain, find the dependency list of the target variable. If the dependency list is not empty, call the rendering methods of the dependent components one by one; if the dependency list is empty, there is no need to call the rendering method and directly end.

[0166] AsFigure 7 As shown in Figure 7 , according to an embodiment of the present invention, a system for implementing in-application component data sharing in a low-code platform is provided. The system includes: a specification component library construction module 1, an application page generation module 2, a data domain and data chain generation module 3, an association relationship recording module 4, and a component update module 5;

[0167] The specification component library construction module 1 is used to construct a data domain meta-information description specification according to the data attributes of the meta-information, and construct a specification component library according to the data domain meta-information description specification;

[0168] The application page generation module 2 is used to generate an application page by dragging and dropping using a low-code designer based on the specification component library, and obtain a page tree data structure;

[0169] The data domain and data chain generation module 3 is used to generate a data domain for the components in the component library according to the page tree data structure, and generate a data chain according to the data domain;

[0170] The association relationship recording module 4 is used to save and use data by using the data domain and the data chain, and record the association relationship between the data domain and the component when the component uses the data;

[0171] The component update module 5 is used to update the related components in a reactive manner according to the association relationship between the data domain and the component when the component updates the data in its own data domain.

[0172] In summary, by means of the above technical solution of the present invention, the present invention creates a data domain for the container component, and all components in the container have a data sharing method, which improves the efficiency of data utilization in the system, reduces the number of data requests, and reduces the occupancy of network IO; business developers can freely create data chains through the container component according to the needs of the business, that is, it retains the flexibility and compatibility of development; associating the data domain with the container component avoids the risk of data conflict in the globally unique data domain and the redundancy of creating a data domain for each component, achieving a balance between system performance and flexibility.

[0173] Those skilled in the art should understand that the embodiments of the present invention can be provided as a method, a system, or a computer program product. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present invention can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, optical storage, etc.) containing computer-usable program code.

[0174] In the above specific embodiments, the object, technical solution and beneficial effects of the present invention have been further described in detail. It should be understood that the above are only specific embodiments of the present invention and are not used to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for implementing data sharing of components within an application in a low-code platform, characterized in that: Including, the method comprises the following steps: S1. According to the data attributes of the meta-information, a data domain meta-information description specification is constructed, and a specification component library is constructed according to the data domain meta-information description specification; S2. Based on the standard component library, use the low-code designer to drag and drop to generate the application page and obtain the page tree data structure; S3, generating data domains for components in the component library according to the page tree data structure, and generating data links according to the data domains; S4. Use data domains and data links to save and use data, and record the association between data domains and components when components use data; S5. According to the association relationship between the data domain and the component, when the component updates the data in its own data domain, the associated components are updated in a responsive manner.

2. According to a method for implementing data sharing of components within an application in a low-code platform according to claim 1, it is characterized in that: The meta information includes parent domain, child domain, component dependency, data acquisition method and data update method; The standard component library includes container components and business components.

3. According to a method for implementing data sharing of components within an application in a low-code platform according to claim 1, it is characterized in that: The method of generating an application page by dragging and dropping using a low-code designer based on a standard component library to obtain a page tree data structure includes the following steps: S21. Initialize the low-code designer and load the standard component library and the empty page tree structure; S22. Select any component in the component panel of the low-code designer and drag it to a specified position on the canvas in the low-code designer to create a new node for the component in the empty page tree structure; S23. Use the property panel of the low-code designer to configure the properties of the component dragged onto the canvas, and update the configured properties to the property fields of the corresponding component nodes in the page tree structure; S24, traversing the page tree structure using depth-first search, and adjusting the hierarchical relationship of the components according to the dragging operation of the components; S25. After adjusting the component hierarchy and updating the page tree structure, re-render the components on the canvas to obtain the page tree data structure.

4. According to a method for implementing data sharing of components within an application in a low-code platform according to claim 3, it is characterized in that: The method of traversing the page tree structure by using depth-first search and adjusting the hierarchical relationship of components according to the dragging operation of the components includes the following steps: S241. In the low-code designer, configure an event listener for capturing the drag operation of the component; S242, using an event listener to monitor the drag operation of the component, and determining the target position of the component and its parent node, to obtain the drag result of the component; S243. According to the dragging result of the component, a depth-first search method is used to traverse the page tree structure and adjust the hierarchical relationship of the components.

5. According to a method for implementing data sharing of components within an application in a low-code platform according to claim 4, it is characterized in that: The method of traversing the page tree structure and adjusting the hierarchical relationship of the components by using a depth-first search method according to the dragging result of the components includes the following steps: S2431, traversing the page tree structure by using a depth-first search method, and determining the current node of the dragged component; S2432, removing the current node of the dragged component from the page tree structure, and creating a new node of the dragged component under the new parent node of the page tree structure according to the result of the drag operation; S2433. Update the page tree structure and readjust the hierarchical relationship of components.

6. According to a method for implementing data sharing of components within an application in a low-code platform according to claim 1, it is characterized in that: The step of generating a data domain for a component in a component library according to a page tree data structure and generating a data link according to the data domain comprises the following steps: S31, taking the root component node of the page tree data structure as the initial point, creating a new data domain instance for the root component node, and passing the current data domain instance as a parameter to the subcomponent; S32, during the transfer process, check whether the current subcomponent is a leaf node, if so, stop initializing the data domain, otherwise, execute step S33; S33, check whether the current subcomponent is a container component, if so, execute step S34, otherwise, execute step S35; S34, for the container component, create a data domain implementation example for the current subcomponent, and repeat step S32; S35, for a non-container component, use the data domain instance of the parent component of the child component as its own data domain instance, and repeat step S32; S36. Generate a data chain based on the data domain instances of the root component and the subcomponent.

7. According to a method for implementing data sharing of components within an application in a low-code platform according to claim 1, it is characterized in that: The method of using the data domain and the data link to store and use data, and recording the association between the data domain and the component when the component uses the data, includes the following steps: S41. Obtain the data variable that the component needs to use by calling a method for obtaining a value, and use the data variable that the component needs to use as a target variable; S42, traverse and search for the target variable in the current data domain, if the target variable is found in the current data domain, execute step S43, otherwise, execute step S44; S43, establishing a dependency relationship between the target variable in the current data domain and the component using the target variable, recording the dependency relationship in the dependent component of the current data domain, and returning the value of the target variable to complete component rendering; S44. If the target variable is not found in the current data domain, the search is traversed upward through the parent attribute until the target variable is found or the top of the data chain is reached. If not found, return.

8. According to a method for implementing data sharing of components within an application in a low-code platform according to claim 7, it is characterized in that: The step of establishing a dependency relationship between the target variable in the current data domain and the component using the target variable, recording the dependency relationship in the dependent component of the current data domain, and returning the value of the target variable to complete component rendering includes the following steps: S431, find the target variable according to the current data domain, and establish a dependency relationship between the target variable and the component by constructing a dependency graph; S432, recording the dependency relationship into the dependency component management structure of the current data domain, and configuring a change monitoring mechanism for the target variable to notify the dependent component when the target variable value changes; S433. According to the dependency relationship, obtain the current value of the target variable from the data domain, and pass the current value of the target variable to the component for rendering.

9. According to a method for implementing data sharing of components within an application in a low-code platform according to claim 1, it is characterized in that: According to the association relationship between the data domain and the component, when the component updates the data in its own data domain, updating the associated component in a responsive manner includes the following steps: S51, by calling the set value method in the component and traversing the current data domain to find the target variable, the target data variable is updated; S52. In the dependent components in the current data domain, search whether there is a dependency relationship with the target variable. If so, update the view by calling the rendering methods of all dependent components according to the dependency relationship recorded in the dependent components. Otherwise, there is no need to call the rendering methods of all dependent components to update the view, and the process ends directly.

10. A system for implementing data sharing of components within an application in a low-code platform, used to implement the method for implementing data sharing of components within an application in a low-code platform as described in any one of claims 1 to 9, characterized in that: The system includes: a standard component library construction module, an application page generation module, a data domain and data link generation module, an association relationship recording module and a component update module; The specification component library construction module is used to construct a data domain meta information description specification according to the data attributes of the meta information, and to construct a specification component library according to the data domain meta information description specification; The application page generation module is used to generate application pages based on the standard component library by dragging and dropping with the low-code designer to obtain a page tree data structure; The data domain and data link generation module is used to generate data domains for components in the component library according to the page tree data structure, and to generate data links according to the data domains; The association relationship recording module is used to save and use data using the data domain and the data link, and record the association relationship between the data domain and the component when the component uses the data; The component update module is used to update the associated components in a responsive manner according to the association relationship between the data domain and the component when the component updates the data in its own data domain.

Images