Page dynamic construction method based on component aggregation type recursive nesting, computer program product and system

Abstract

The invention relates to the technical field of computer software and Internet, and provides a dynamic page construction method based on component aggregation type recursive nesting, a computer program product and a system, and the method comprises the steps: obtaining page configuration data; the page configuration data is converted into a tree structure capable of freely defining a father-son relationship through a recursive analysis engine, so that page nesting information with flexibility is generated; generating a rendering instruction corresponding to the terminal type according to the page nesting information; and executing the rendering instruction on the terminal, and finally generating a page. According to the method, for the component with the dynamic attribute identifier in the page configuration data, the attribute marking the data source of the component is defined as the data monitoring channel object, and the information pointing to the data source path is acquired, so that the attribute is replaced with the data monitoring channel object, and the component attribute value is automatically updated according to the change of the data source; and the reusability of the assembly is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of computer software and Internet technology, and particularly relates to a page dynamic construction method based on component aggregation type recursive nesting, a computer program product and a page configuration system. BACKGROUND

[0002] With the deepening of the digital transformation of manufacturing industry, the industrial internet is developing towards platform iteration and continuous innovation. Under this background, enterprises have an increasing demand for high-performance development platforms, especially those solutions that can accelerate the application software development process and reduce costs. Low-code development platforms are favored due to their rapid development and cost-effectiveness. These platforms enable non-technical personnel to create applications through simple drag-and-drop and configuration, greatly shortening the cycle from concept to market. However, in the software development process, page configuration optimization is one of the key links, and the current market page configuration system has some problems. For example, existing page configuration systems usually only provide limited functions, lack a unified and flexible component library, and are difficult to support diverse page content and interaction requirements. Moreover, general components are often single and fixed, and cannot be dynamically reconstructed through attributes to adapt to different business scenarios, resulting in low component reuse rate. Although some page dynamic configuration systems use linear traversal algorithms to handle page nesting relationships to improve functional complexity, this method limits the maximum nesting depth and cannot meet the demand for unlimited nesting in complex business scenarios. In addition, nested pages need to be pre-defined parent-child relationships and cannot be dynamically expanded, further limiting the flexibility of the system. These limitations make it difficult for existing page dynamic configuration systems to meet the configuration requirements of highly customized and rapidly changing software business scenarios. SUMMARY

[0003] The purpose of the present application is to provide a page dynamic construction method based on component aggregation type recursive nesting and a computer program product and system that implement the method when executed, which can improve the reusability and flexibility of components when configuring pages.

[0004] The present application provides a page dynamic construction method based on component aggregation type recursive nesting, comprising the following steps: A component configuration step configures component attributes according to user selection operations on components performed on a terminal, identifies component metadata of configured components, and if a dynamic attribute identifier of a configured component is identified, marks data sources in the attributes of the component according to user selection operations, and generates page configuration data with multiple configured components; A configuration analysis step calls a preset recursive analysis engine to convert the page configuration data into a tree structure, thereby generating page nesting information; identifies the terminal type, and generates rendering instructions corresponding to the terminal type according to the page nesting information; For the component with the dynamic attribute identifier in the page configuration data, an attribute binding step is performed: defining the attribute of the markup data source of the component as a data listening channel object, the data listening channel object including information pointing to the data source path, so as to automatically update the attribute value according to the change of the data source; A terminal rendering step is performed, and the terminal executes the rendering instruction to generate a page.

[0005] Further, in the component configuration step, the selection operation of the component performed by the user on the terminal refers to: the user placing the component on the canvas through a drag action.

[0006] Further, the component placed on the canvas has a slot area, and if another component is placed in the slot area, the two components are configured in a parent-child relationship, and a corresponding relationship path is generated.

[0007] Further, in the component configuration step, the data source includes multiple types of API, database and static value.

[0008] Further, the component metadata includes multiple types of component type identifier, configurable attribute set, nested slot declaration and dynamic attribute identifier; the component type identifier is specifically a unique string identifier, used to distinguish different components; the configurable attribute set is used to define the configurable attributes of the component, and the configurable attributes include name, type and constraint condition; the nested slot declaration is used to describe the maximum number of sub-components that the component can accommodate and the type of the sub-component; and the dynamic attribute identifier is used to mark that this attribute of the component is updated in runtime following an external data source.

[0009] Further, the page configuration data is specifically a page description file in JSON format.

[0010] Further, in the configuration parsing step, the calling of the preset recursive parsing engine to convert the page configuration data into a tree structure refers to: converting the received page description file in JSON format into an abstract syntax tree; and using an iterative depth-first search algorithm to traverse the abstract syntax tree of the component to generate page nesting information.

[0011] Further, the iterative depth-first search algorithm is used to traverse the abstract syntax tree of the component, including the following steps: pushing the root node into the stack; taking the top element of the stack as the current processing node, and recording its state of being visited; identifying the attributes of the current processing node, if a dynamic attribute identifier is identified, pulling the real-time value of the node from the data source module, and establishing a responsive listening channel to support runtime update; identifying the child nodes of the current processing node, and pushing the child nodes into the top of the stack in reverse; if the current processing node has no child node, generating the corresponding rendering instruction fragment; and integrating the rendering instruction fragments of all nodes as page nesting information.

[0012] The application further provides a computer program product storing a computer program, which can realize the steps of the page dynamic construction method based on component aggregation recursive nesting when executed by a processor.

[0013] The application further provides a page configuration system comprising a processor and a terminal and a server connected with the processor, and further comprising the computer program product, and the computer program on the computer program product can be executed by the processor.

[0014] The page dynamic construction method based on component aggregation recursive nesting provided by the application, in the configuration parsing step, by performing the attribute binding step, i.e. identifying the attribute of the component with the dynamic attribute identifier marking the data source, defining it as a data listening channel object and obtaining the information of the data source path pointed by it, so as to replace the attribute with a data listening channel object, realizing automatic update of the component attribute value according to the change of the data source, and improving the reusability of the component; and by using the recursive parsing engine to convert the page configuration data into a tree structure, the page nesting information generated thereby can freely define the parent-child relationship, and the flexibility of the page nesting is improved. BRIEF DESCRIPTION OF DRAWINGS

[0015] Figure 1 is a flowchart of the page dynamic construction method based on component aggregation recursive nesting provided by the application.

[0016] Figure 2 is a signal flow diagram of the page dynamic construction method based on component aggregation recursive nesting provided by the application. DETAILED DESCRIPTION

[0017] The application will be further described in detail below in combination with the specific embodiments.

[0018] The page configuration system of the embodiment comprises a processor and a terminal and a server connected with the processor, and the embodiment adopts computer code for programming to obtain a computer program product, which, when executed by the processor of the page configuration system, realizes the steps of the page dynamic construction method based on component aggregation recursive nesting as described above. Figure 1The page dynamic construction method based on component aggregation recursive nested is shown. The implementation process of the method on the page configuration system is shown in the signal flow diagram of Figure 2 The user first selects and configures the components of the page on the terminal of the page configuration system, the terminal generates page configuration data and transmits the server, the configuration management module and the recursive parsing engine of the server generate rendering instructions according to the page configuration data and transmit the terminal, and the terminal generates the page according to the received rendering instructions. The execution process of the method is described in detail below by taking the dynamic nested configuration of the cultural information page as an example.

[0019] The component configuration step configures the component attributes according to the selection operation of the user on the terminal, and identifies the component metadata of the configured component.

[0020] The selection operation of the user in this embodiment is that the user places the component on the canvas through the drag action, so in the component configuration step, the user opens the visual configuration interface on the terminal, drags the component to the canvas, the terminal converts the drag action of the user into the specific position of the component on the canvas, and instantiates the component accordingly; the terminal submits a request for obtaining the list of available components to the component registration center, the component registration center returns the component metadata to the terminal, and the user sets the component attributes. Specifically, as an operator of the user, the user selects the "cultural information special area component" on the terminal, sets the title style to "horizontal center", and nests a "aggregated recommendation component", and specifies the data source as "this week's popular information API".

[0021] When the user starts the page configuration tool on the terminal, the tool automatically sends a standardized request to the component registration center, which is to obtain the list of all components that can be used to build or edit the page. This request contains necessary parameters to ensure that the returned component list meets the requirements of a specific version and platform. For example, if the target is a web platform and the required component version is 2.4, the request should explicitly indicate these two parameters: version=2.4 and platform=web.

[0022] The terminal of this embodiment is provided with a component selection and configuration center, which manages the standardized interface of the basic components including the title component, the aggregated recommendation component, etc., and defines the metadata specification of the components. The user drags the components to the canvas through the visual interface, configures the corresponding page effect, associates the data source and the jump page for the components, and real-time previews the page effect of the configuration.

[0023] In response, the component registry provides a structured dataset, component metadata, which lists detailed information of each available component. The data structure of each component includes at least component type (such as title component), attribute definition (such as text content is a required string, and style object can be dynamic), and slot information that may contain child elements, thereby clearly showing the structure and function of each component. The component metadata of the embodiment is pre-stored in the component registry, including component type identifier, configurable attribute set, nested slot declaration, and dynamic attribute identifier.

[0024] The component type identifier is a unique string identifier that distinguishes different components. The configurable attribute set is used to define the configurable attributes of the component, including name, type, and constraint condition. The nested slot declaration is used to describe the maximum number of sub-components that the component can accommodate and the type of the sub-components. The dynamic attribute identifier is used to mark that this attribute of the component follows an external data source for updating at runtime. If a certain attribute has a dynamic attribute identifier, it means that the component supports real-time updating, i.e., the component adjusts its appearance or behavior according to the changes of external data without reloading, realizing runtime morphing.

[0025] Among them, the component placed on the canvas has a slot area, and if another component is placed in the slot area, the two components are configured as a parent-child relationship, and a corresponding relationship path is generated. Specifically, when the user drags component A into the slot area of component B, the system creates a parent-child relationship in the background (such as B.children = [A]), and generates a relationship path (for example, root / B / A) for subsequent parsing and rendering.

[0026] Among them, if the dynamic attribute identifier of the configured component is identified, the data source is marked in the attribute of the component according to the user's selection operation, such as API, database, and static value. For non-dynamic attributes such as static values, the terminal's visualization window provides standard input controls for the user to directly edit.

[0027] The terminal judges whether the page configuration is completed after each component is configured. If not, the user continues to drag the component to the canvas for configuration. If yes, the page configuration data with multiple configured components is generated, i.e., the page description file in JSON format. The terminal of the embodiment converts the user configuration into a JSON format data structure: the top-level object contains version information, root node, and all dependent data source references; the node structure defines the unique hash value, type, attribute set, and child node array of each component.

[0028] The configuration parsing step calls a pre-set recursive parsing engine to convert the page configuration data into a tree structure, thereby generating page nesting information.

[0029] Specifically, the server comprises a configuration management module, a recursive parsing engine and a cross-terminal rendering adapter; the configuration management module receives page configuration data submitted by a terminal, performs version management and persistent storage, and implements configuration adding, deleting, modifying and querying operations; the recursive parsing engine: converts the JSON configuration into a tree structure, pulls real-time data from a data source management module, and records the parent-child group detection circular reference relationship; the cross-terminal rendering adapter generates interactive page element style self-adaptation according to the instructions issued by the processor of the server, and automatically converts units according to the terminal resolution. Figure 2 On the server side, after the configuration management module of the server receives the interactive page configuration data, the data is persisted to the database, and the recursive parsing engine is triggered to perform configuration parsing. The recursive parsing engine requests dynamic data from the data source management module, the data source management module returns the binding data to the recursive parsing engine to complete the parsing, generates an AST abstract syntax tree, performs depth-first traversal of the nodes, judges whether there are child nodes, if there are child nodes, dynamically binds the data source, detects circular nesting, judges whether it is legal, if not, returns an error code, if it is legal, continues to traverse the nodes until there are no child nodes; if there are no child nodes in the depth-first traversal of the nodes, the recursive parsing engine generates rendering instructions according to the parsing results and issues them to the cross-terminal rendering adapter.

[0030] The recursive parsing engine of the server of the embodiment converts the received JSON format page description file into an abstract syntax tree (AST), and in subsequent processing, an iterative depth-first search algorithm is used to traverse the abstract syntax tree of the component to generate page nesting information. Among them, the root node of the abstract syntax tree (AST) is determined by the root field in the JSON configuration, the node depth is defined as the length of the path from the root node to the current node, and the sibling node refers to the adjacent node under the same parent node. The embodiment uses an iterative depth-first search algorithm to traverse the component tree, realizes efficient processing of complex nested structures, and specifically includes the following steps: push the root node into the stack, as long as the stack is not empty, continue to execute the following operations; take the top element of the stack as the current processing node, and use WeakMap to record its visited state; identify the attributes of the current processing node, if a dynamic attribute identifier is identified, pull the real-time value of the node from the data source module, and establish a responsive listening channel to support runtime update; identify the child nodes of the current processing node, and reverse the child nodes into the top of the stack to ensure that the depth-first principle is followed; if the current processing node has no child nodes, generate the corresponding rendering instruction fragment; perform hierarchical verification to identify component tree abnormalities, including: mandatory attribute verification, error if missing; data type verification, error if type does not match; nested depth protection, error if the number of layers of a single branch exceeds the preset threshold, such as 200 layers; integrate the rendering instruction fragments of all nodes that pass the verification as page nesting information. Through the above iterative depth-first search algorithm to process the component tree, the performance and stability of the system are improved.

[0031] Among the components with dynamic attribute identification in the page configuration data, the attribute binding step is performed: the attribute definition of the mark data source of the component is defined as a data monitoring channel object, the data monitoring channel object includes information pointing to the data source path, so that the server monitors the changes of the data source and automatically updates the corresponding attribute value when the changes occur, thereby ensuring that the content displayed on the front end can also reflect the latest data state in real time when the data source changes, and automatically updating the attribute value according to the changes of the data source. Based on the listening channel, real-time preview of page configuration can be realized. Specifically, when the server parses the nested structure, it automatically pulls the latest information list from the API and binds it to the data attribute of the recommended component. In the preview state, only the part that has changed is refreshed locally, rather than reloading the entire page every time, improving the user experience.

[0032] In the configuration parsing step of the embodiment, the cross-end rendering adapter of the server identifies the terminal type and generates rendering instructions corresponding to the terminal type according to the page nesting information. Specifically, the cross-end rendering adapter receives the rendering instructions issued by the recursive parsing engine and returns executable code to the terminal to make the terminal render and generate the corresponding page. The embodiment defines a unified instruction format for cross-end dynamic rendering, which includes target component ID, operation type (create, update or delete) and payload information (including current attribute set and sub-instruction list). Through the explicit operation target component (specified by a unique identifier) and its operation type to be performed, as well as the parameter set to be passed to the component, the unified management of complex nested structures is achieved.

[0033] On the server side, after the recursive parsing engine issues rendering instructions to the cross-end rendering adapter, the cross-end rendering adapter first performs device type judgment. For Web type, it generates executable code for Vue.js DOM rendering, and for APP type, it generates executable code for ReactNative native rendering. Specifically, according to different terminal types, appropriate rendering strategies and style conversion methods are selected: If it is a Web type terminal, DOM differential update technology is used to minimize the page redraw area, thereby improving the page response speed. At the same time, the pixel unit (px) used in the design draft is converted to the viewport unit (vw / vh) to ensure good display effect on different screen sizes.

[0034] If it is an iOS or Android type terminal, use native view instructions for rendering, directly interact with the operating system to provide a smoother user experience. In addition, the pixel value in the design draft is converted to device-independent pixels (dip) to ensure consistent visual effects on devices with different resolutions.

[0035] If it is a small program type terminal, a code suitable for small program platform running is generated through template compilation, and an independent CSS namespace is created for each component to avoid style conflict and ensure style isolation.

[0036] The terminal rendering step is to execute the rendering instruction on the terminal to generate a page. In this embodiment, the terminal renders a page containing a title and a recommendation list. When the user clicks on a recommendation item, the recursive loading of a sub-page (such as a detail page) is triggered.

[0037] After the terminal of this embodiment receives the executable code, it executes the hierarchical rendering mechanism: in the first stage, the skeleton rendering stage, the creation of the placeholder DOM structure is completed within a very short time (not more than 5 milliseconds), and a loading animation is displayed to provide immediate feedback to the user; in the second stage, the asynchronous data filling stage, a WebSocket connection is established to listen to data updates from the server. Once new data is received, a local patch is applied to refresh the interface, rather than reloading the entire page, to improve efficiency; in the third stage, the nested component processing stage, when it is detected that a sub-page needs to be loaded, the system recursively initiates a loading request that carries the parent path context information to ensure the correct construction of the hierarchical relationship between components. Through the hierarchical rendering mechanism of terminal rendering, this embodiment realizes efficient, consistent and flexible dynamic rendering on different types of terminals.

[0038] Finally, it should be noted that: the page dynamic construction method based on component aggregation type recursive nesting disclosed in the embodiments of the present application is only the preferred embodiment of the present application, and is used to illustrate the technical solutions of the present application, but not to limit it; although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that; it can still modify the technical solutions recorded in the foregoing embodiments, or make equivalent replacement for part of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A dynamic page construction method based on component aggregation and recursive nesting, characterized by: Includes the following steps: The component configuration steps are as follows: configure component attributes according to the user's selection operation on the terminal, identify the component metadata of the configured components, and if the dynamic attribute identifier of the configured component is identified, mark the data source in the attribute of the component according to the user's selection operation, and generate page configuration data with multiple configured components. The configuration parsing step calls a preset recursive parsing engine to convert the page configuration data into a tree structure, thereby generating page nesting information; Identify the terminal type and generate rendering instructions corresponding to the terminal type based on the page nesting information; For components with dynamic attribute identifiers in the page configuration data, perform the attribute binding steps: define the attribute that marks the data source of the component as a data listening channel object. The data listening channel object includes information pointing to the data source path, so as to automatically update the attribute value according to changes in the data source. The terminal rendering step involves executing the rendering instructions on the terminal to generate a page.

2. The page dynamic construction method based on component aggregation and recursive nesting as described in claim 1, characterized in that, In the component configuration step, the component selection operation performed by the user on the terminal refers to the user placing the component on the canvas by dragging.

3. The page dynamic construction method based on component aggregation and recursive nesting as described in claim 2, characterized in that, The component placed on the canvas has a slot area. If another component is placed in the slot area, the two components are configured as parent and child, and a corresponding relationship path is generated.

4. The page dynamic construction method based on component aggregation and recursive nesting as described in claim 1, characterized in that, In the component configuration step, the data sources include multiple sources such as APIs, databases, and static values.

5. The page dynamic construction method based on component aggregation and recursive nesting as described in claim 1, characterized in that, The component metadata includes several of the following: component type identifier, configurable property set, nested slot declaration, and dynamic property identifier. The component type identifier is a unique string identifier used to distinguish different components. The configurable property set is used to define the component's configurable properties, which include name, type, and constraints. The nested slot declaration describes the maximum number of child components that the component can accommodate and the types of the child components. The dynamic property identifier is used to mark that this property of the component is updated at runtime with the external data source.

6. The page dynamic construction method based on component aggregation and recursive nesting as described in claim 1, characterized in that, The page configuration data is specifically a page description file in JSON format.

7. The page dynamic construction method based on component aggregation and recursive nesting as described in claim 6, characterized in that, In the configuration parsing step, calling the preset recursive parsing engine to convert the page configuration data into a tree structure means converting the received JSON format page description file into an abstract syntax tree. An iterative depth-first search algorithm is used to traverse the abstract syntax tree of components to generate page nesting information.

8. The page dynamic construction method based on component aggregation and recursive nesting as described in claim 7, characterized in that, The iterative depth-first search algorithm used to traverse the component's abstract syntax tree includes the following steps: push the root node onto the stack; remove the top element of the stack as the current processing node and record its visited state; identify the attributes of the current processing node, and if a dynamic attribute identifier is identified, pull the real-time value of the node from the data source module and establish a reactive listening channel to support runtime updates; identify the child nodes of the current processing node and push the child nodes onto the top of the stack in reverse order. If the currently processed node has no child nodes, a corresponding rendering instruction fragment is generated; the rendering instruction fragments of all nodes are integrated as page nesting information.

9. A computer program product storing a computer program, characterized in that, When the computer program is executed by the processor, it can implement the steps of the page dynamic construction method based on component aggregation recursive nesting as described in any one of claims 1 to 8.

10. A page configuration system, characterized in that, It includes a processor and a terminal and a server respectively connected to the processor, and also includes a computer program product as described in claim 9, wherein the computer program on the computer program product can be executed by the processor.

Images