Page generation method and device, electronic equipment and storage medium

Abstract

The application relates to the technical field of artificial intelligence, and provides a page generation method and device, electronic equipment and a storage medium, the method comprises the following steps: acquiring a component configuration set of a micro-frontend application; traversing component configuration data of each component in the component configuration set, and acquiring a loading type of each component; loading component configuration data of a corresponding component based on the loading type of each component, and acquiring a first module component of each component; rendering the first module component of each component, and obtaining a second module component of each component; and in response to a micro-frontend page generation request, loading a corresponding second module component from a database based on a front-end page requirement, and generating a target page. According to the application, the component configuration data of each component is loaded based on the loading type of each component, and the second module component is obtained through rendering, the second module component can be independently encapsulated and run internally, and the flexibility and efficiency of target page generation are improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of artificial intelligence, and in particular to a page generation method and device, electronic equipment and storage medium. BACKGROUND

[0002] Micro front end is to split an application into independent development, testing and deployment of monolithic applications, which can be integrated in a main parent application and then presented to the user.

[0003] However, most of the existing solutions only perform a menu page level division on the management configuration website of the PC terminal, and none of them can realize the combination and presentation of multiple monolithic application blocks in one application page. Moreover, the way of loading monolithic application block components is relatively single, which cannot realize flexible page generation and leads to low page generation efficiency. SUMMARY

[0004] In view of the above, it is necessary to provide a page generation method and device, electronic equipment and storage medium, which loads component configuration data of each component based on the loading type of each component, and renders to obtain a second module component. The second module component can run independently in the internal encapsulation, improving the flexibility and efficiency of target page generation.

[0005] The first aspect of the present application provides a page generation method, which comprises:

[0006] Obtaining a component configuration set of a micro front-end application;

[0007] Traversing the component configuration data of each component in the component configuration set to obtain the loading type of each component;

[0008] Loading the component configuration data of the corresponding component based on the loading type of each component to obtain the first module component of each component;

[0009] Rendering the first module component of each component to obtain the second module component of each component;

[0010] In response to a micro front-end page generation request, the corresponding second module component is pulled from the database based on the front-end page requirement to load and generate a target page.

[0011] Optionally, the loading of the component configuration data of the corresponding component based on the loading type of each component to obtain the first module component of each component comprises:

[0012] When the loading type of each component is the first loading type, a URL module remote entry script in component configuration data of each component is asynchronously loaded, a scope module object is obtained; the scope module object is initialized by using a preset instruction, and the initialized scope module object is stored in a shared scope; a first module component of each component is obtained by globally searching for a module object in the shared scope;

[0013] When the loading type of each component is the second loading type, a resource package in the component configuration data of each component is loaded, and the resource package is parsed to obtain the first module component of each component.

[0014] Optionally, the rendering of the first module component of each component to obtain the second module component of each component comprises:

[0015] instantiating each first module component to obtain an instantiated first module component of each component;

[0016] The instantiated first module component of each component and the props dynamic variable data in the component configuration data of the corresponding component are transmitted into the corresponding DOM node for rendering to obtain the second module component of each component.

[0017] Optionally, the loading of the corresponding second module component from the database based on the front-end page requirement to generate the target page in response to the micro front-end page generation request comprises:

[0018] The message information of the micro front-end page generation request is parsed to obtain the front-end page requirement of the front-end page;

[0019] Based on the front-end page requirement, the loading address of each second module component is extracted from the database;

[0020] Based on the loading address of each second module component, each second module component is added to the DOM node corresponding to the initial DOM tree of the front-end page to obtain a target DOM tree, wherein each DOM node contains node information;

[0021] The target DOM tree is executed to sequentially load the node information in each DOM node in the target DOM tree to generate a target page.

[0022] Optionally, the sequentially loading of the node information in each DOM node in the target DOM tree to generate a target page comprises:

[0023] When each DOM node contains one second module component, the loading type of the second module component is extracted from the node information in each DOM node; the corresponding second module component is loaded and rendered based on the loading type to generate a target page.

[0024] When a plurality of second module components are contained in each DOM node, the plurality of second module components are subjected to logical operation according to logical operation information in the corresponding DOM node, to obtain a target module component; the target module component is subjected to loading rendering based on a loading type of the target module component, to generate a target page.

[0025] Optionally, the traversing of the component configuration data of each component in the component configuration set and the obtaining of the loading type of each component comprises:

[0026] identifying the loading type identification code in the component configuration data of the each component;

[0027] determining the loading type of the corresponding component based on the loading type identification code.

[0028] Optionally, the obtaining of the component configuration set of the micro-frontend application comprises:

[0029] identifying the micro-frontend application and obtaining the project identification code of a plurality of projects;

[0030] determining the project interface of each project according to the project identification code of each project;

[0031] calling the project interface of each project to obtain the component configuration of the corresponding project.

[0032] A second aspect of the present application provides a page generation device, the device comprising:

[0033] an obtaining module configured to obtain a component configuration set of a micro-frontend application;

[0034] a traversing module configured to traverse component configuration data of each component in the component configuration set and obtain a loading type of each component;

[0035] a loading module configured to load component configuration data of the corresponding component based on the loading type of each component and obtain a first module component of each component;

[0036] a rendering module configured to render the first module component of each component to obtain a second module component of each component;

[0037] a generating module configured to, in response to a micro-frontend page generation request, load the corresponding second module component based on a front-end page requirement from a database to generate a target page.

[0038] A third aspect of the present application provides an electronic device comprising a processor and a memory, wherein the processor is configured to implement the page generation method when executing a computer program stored in the memory.

[0039] The fourth aspect of the present application provides a computer readable storage medium, and the computer readable storage medium stores a computer program, and the computer program is executed by a processor to realize the page generation method.

[0040] In summary, the page generation method, device, electronic equipment and storage medium provided by the present application can promote the construction of smart cities and be applied to fields such as smart buildings, smart security, smart communities, smart life and the Internet of Things. By traversing the component configuration data of each component in the component configuration set, the loading type of each component is obtained, the component configuration data of the corresponding component is loaded based on the loading type of each component, the first module component of each component is obtained, and the obtained first module component can share resources with each other. The first module component of each component is rendered, the rendered second module component can be independently encapsulated and run internally and can independently complete its own function with the front-end page, becoming a centralized independent component that can be repeatedly output to other projects for use, thereby realizing a flexible micro-front-end access mode. In response to a micro-front-end page generation request, the corresponding second module component is pulled from the database based on the front-end page requirements to be loaded, and a target page is generated. Since the second module component is a centralized independent component, multiple second module components can be combined into a target module component to be presented in the front-end page, thereby solving the problem that multiple components cannot be combined into a component to be presented in a page in the prior art, and improving the flexibility of target page generation. BRIEF DESCRIPTION OF DRAWINGS

[0041] Figure 1 is a flowchart of the page generation method provided by the first embodiment of the present application.

[0042] Figure 2 is a structural diagram of the page generation device provided by the second embodiment of the present application.

[0043] Figure 3 is a structural diagram of the electronic equipment provided by the third embodiment of the present application. DETAILED DESCRIPTION

[0044] In order to more clearly understand the above-mentioned purposes, features and advantages of the present application, the present application will be described in detail below in combination with the drawings and specific embodiments. It should be noted that the embodiments of the present application and the features in the embodiments can be combined with each other without conflict.

[0045] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which the present application belongs. The terms used in the specification of the present application are only for the purpose of describing specific embodiments and are not intended to limit the present application.

[0046] Embodiment one

[0047] Figure 1 is a flowchart of the page generation method provided by an embodiment of the present application.

[0048] In this embodiment, the page generation method can be applied in an electronic device. For an electronic device that needs to generate a page, the function of generating a page provided by the method of the present application can be integrated directly on the electronic device, or run in the form of a software development kit (SDK) in the electronic device.

[0049] The embodiments of the present application can acquire and process related data based on artificial intelligence technology. Artificial intelligence (AI) is the use of digital computers or computer-controlled machines to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0050] The basic technology of artificial intelligence generally includes technologies such as sensors, special artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation / interaction system, mechatronics, etc. The software technology of artificial intelligence mainly includes computer vision technology, robot technology, biometric technology, speech processing technology, natural language processing technology, and machine learning, deep learning, etc.

[0051] As shown in Figure 1 The page generation method specifically includes the following steps, and the order of the steps in the flowchart can be changed, and some steps can be omitted according to different needs.

[0052] 101, acquire a component configuration set of a micro-frontend application.

[0053] In this embodiment, micro-frontend is an architecture similar to micro-service, which applies the concept of micro-service to the browser side and changes the single-page front-end application from a single monolithic application to an application that aggregates multiple small front-end applications.

[0054] In this embodiment, the component configuration contains resource descriptions required by micro-frontend loading components and props dynamic variable data required by component presentation of different effects, wherein the micro-frontend loading components can be components of different projects.

[0055] In an optional embodiment, the acquiring of the component configuration set of the micro-frontend application includes:

[0056] identifying the micro-frontend application and acquiring project identification codes of multiple projects;

[0057] Determine the project interface of each project according to the project identification code of each project;

[0058] Call the project interface of each project to obtain the component configuration of the corresponding project.

[0059] In this embodiment, the project identification code is used to uniquely identify each project, and the component configuration of each project can be obtained through the project interface of each project.

[0060] 102, traverse the component configuration data of each component in the component configuration set to obtain the loading type of each component.

[0061] In this embodiment, the component configuration set contains a plurality of components and component configuration data of each component, and the component configuration data contains resource description of the component and props dynamic variable data required for the component to present different effects.

[0062] In an optional embodiment, the step of traversing the component configuration data of each component in the component configuration set to obtain the loading type of each component comprises:

[0063] Identify the loading type identification code in the component configuration data of each component;

[0064] Determine the loading type of the corresponding component based on the loading type identification code.

[0065] In this embodiment, the loading type identification code is used to uniquely identify the loading type of each component.

[0066] 103, load the component configuration data of each component based on the loading type of each component to obtain the first module component of each component.

[0067] In this embodiment, the loading type contains a first loading type and a second loading type.

[0068] In this embodiment, the first loading type is to load a remote module through webpack Module Federation, which uses the Module Federation feature based on Webpack 5. The federation feature of the Module Federation module can output the first module component loaded remotely, and the common dependencies between modules will only be loaded once, achieving the ability of sharing.

[0069] In the embodiment, the second loading type is loading a UMD format script, a remote module is loaded through SystemJs, a first module component is output by using a weak type framework such as svelte, a cross-framework loading form of the component is implemented, that is, the first module component can be output to projects such as vue, react, jq and angular, and a remote modular loading component plug-in is implemented in combination with the systemjs framework. The method does not have other strong technical dependencies, and any project can be loaded.

[0070] In an optional embodiment, the component configuration data of the corresponding component is loaded based on the loading type of each component, and the first module component of each component is obtained by:

[0071] When the loading type of each component is the first loading type, the URL module remote entry script in the component configuration data of each component is loaded asynchronously, the scope module object is obtained, the scope module object is initialized by using a preset instruction, the initialized scope module object is stored in a shared scope, the module object in the shared scope is found globally, and the first module component of each component is obtained.

[0072] When the loading type of each component is the second loading type, the resource package in the component configuration data of each component is loaded, and the resource package is parsed, and the first module component of each component is obtained.

[0073] For example, when the loading type of each component is a preset first loading type, the URL module remote entry Js script in the component configuration data of each component is loaded, the scope object is obtained, the scope object is initialized by using webpack_init_sharing in webpack, the initialized scope module object is stored in a shared scope, the module object in the shared scope is found globally, the specific module component is extracted from the shared scope, and the specific module component is determined as the first module component.

[0074] For example, when the loading type of each component is a preset second loading type, the SystemJs library is imported, the tool object System in the SystemJs library is obtained, the umd.js resource package in the component configuration data of each component is loaded by using System.import, the Js script in the umd.js resource package is parsed, and the loaded first module component is obtained.

[0075] In the embodiment, the component configuration data of each component is loaded based on the loading type of each component, so that the obtained first module component can share resources with each other.

[0076] 104. rendering the first module component of each component to obtain a second module component of each component.

[0077] In this embodiment, the second module component of each component is obtained after rendering each first module component.

[0078] In an optional embodiment, the rendering the first module component of each component to obtain a second module component of each component comprises:

[0079] instantiating each first module component to obtain an instantiated first module component of each component;

[0080] transmitting the instantiated first module component of each component and the props dynamic variable data in the component configuration data of the corresponding component into the corresponding DOM node for rendering to obtain a second module component of each component.

[0081] In this embodiment, the second module component of each component comprises a loading address and component configuration data.

[0082] In this embodiment, by instantiating each first module component in the first component list, the component instance corresponding to each first module component has its own prop dynamic variable data and memory space, thereby realizing the reference to the DOM node and the component instance of the instantiated first module component of each component. The dynamic variable data attribute exists in the component configuration data of each component, which means that some custom attributes are registered on each component. When a value is passed to a prop attribute, it becomes a property of the corresponding component instance.

[0083] In this embodiment, by rendering the instantiated first module component, the rendered second module component can be independently encapsulated and run internally, and can independently complete its own function with the front-end page, becoming a centralized independent component that can be repeatedly output to other projects for use, thereby realizing a flexible micro-front-end access mode.

[0084] Further, after obtaining the second module component of each component, the method further comprises:

[0085] sorting the second module components of the plurality of components according to a preset sorting rule to obtain a component list, and storing the component list in a database.

[0086] In this embodiment, the sorting rule can be preset, and the sorting rule can be sorted according to the order of the page loading address of each second module component.

[0087] In the embodiment, the second module components are stored in the database after being sorted, and the micro front end can be quickly accessed according to the position relationship of the sorting.

[0088] 105, in response to the micro front end page generation request, the corresponding second module components are pulled from the database based on the front end page demand to load and generate the target page.

[0089] In the embodiment, the target page is generated by loading the component configuration data in the second module component. Since the second module component is a centralized independent component, multiple second module components can be combined into a target module component to be presented on the front end page, thereby solving the problem that multiple components cannot be combined into one component to be presented on one page in the prior art, and improving the flexibility of target page generation.

[0090] In an optional embodiment, the response to the micro front end page generation request, the corresponding second module components are pulled from the database based on the front end page demand to load and generate the target page, which includes:

[0091] Parsing the message information of the micro front end page generation request to obtain the front end page demand of the front end page;

[0092] Based on the front end page demand, the loading address of each second module component is extracted from the database;

[0093] Based on the loading address of each second module component, each second module component is added to the DOM node corresponding to the initial DOM tree of the front end page to obtain a target DOM tree, wherein each DOM node contains node information;

[0094] The target DOM tree is executed to sequentially load the node information in each DOM node in the target DOM tree to generate a target page.

[0095] In the embodiment, the database stores a component list, and the component list contains the second module components.

[0096] In the embodiment, the node information of each DON node contains the component configuration data and operation logic information of the second module component, and the operation logic information is used to operate multiple second module components, for example, to combine multiple second module components.

[0097] In the embodiment, each second module component is added to the DOM node corresponding to the initial DOM tree of the front end page to obtain a target DOM tree, wherein each DOM node can contain one or more second module components.

[0098] Further, the loading of the node information in each DOM node in the target DOM tree in sequence generates a target page, which includes:

[0099] When each DOM node contains a second module component, the loading type of the second module component is extracted from the node information in each DOM node; and the corresponding second module component is loaded and rendered based on the loading type, to generate a target page;

[0100] When each DOM node contains a plurality of second module components, the plurality of second module components are logically operated according to the logical operation information in the corresponding DOM node to obtain a target module component; and the target module component is loaded and rendered based on the loading type of the target module component, to generate a target page.

[0101] In the embodiment, by executing the target DOM tree, the phenomenon of missing components in the page generation process is avoided, and at the same time, a plurality of second module components can be combined into a target module component for loading and display in the same front-end page, thereby improving the flexibility of target page generation.

[0102] In summary, the page generation method provided in the embodiment includes the following steps: traversing the component configuration data of each component in the component configuration set, obtaining the loading type of each component, loading the component configuration data of the corresponding component based on the loading type of each component, obtaining the first module component of each component, so that the obtained first module components can share resources with each other. The first module component of each component is rendered, and the rendered second module component can be independently encapsulated and run internally, and can independently complete its own function with the front-end page, becoming a centralized independent component that can be repeatedly output to other projects for use, thereby realizing a flexible micro-front-end access mode. In response to a micro-front-end page generation request, the corresponding second module component is loaded based on the front-end page demand to generate a target page. Since the second module component is a centralized independent component, a plurality of second module components can be combined into a target module component for display in the front-end page, thereby solving the problem that a plurality of components cannot be combined into a component for display in a page in the prior art, and improving the flexibility of target page generation.

[0103] Embodiment Two

[0104] Figure 2 is a structural diagram of a page generation device provided in Embodiment Two of the present application.

[0105] In some embodiments, the page generation apparatus 20 can include a plurality of functional modules composed of program code segments. The program code of each program segment in the page generation apparatus 20 can be stored in the memory of the electronic device and executed by the at least one processor to perform the functions of page generation (see the detailed description) Figure 1 .

[0106] In this embodiment, the page generation apparatus 20 can be divided into a plurality of functional modules according to the functions it performs. The functional modules can include an acquisition module 201, a traversal module 202, a loading module 203, a rendering module 204, and a generation module 205. The module referred to in the present application refers to a series of computer-readable instruction segments that can be executed by at least one processor and can complete a fixed function, which is stored in the memory. In this embodiment, the functions of each module will be described in detail in subsequent embodiments.

[0107] The acquisition module 201 is configured to acquire a component configuration set of a micro-frontend application.

[0108] In this embodiment, micro-frontend is an architecture similar to micro-service, which applies the concept of micro-service to the browser side and changes the single-page front-end application from a single monolithic application to an application that aggregates multiple small front-end applications.

[0109] In this embodiment, the component configuration includes resource descriptions required by micro-frontend loading components and props dynamic variable data required for component presentation of different effects, wherein the micro-frontend loading components can be components of different projects.

[0110] In an optional embodiment, the acquisition module 201 acquiring the component configuration set of the micro-frontend application includes:

[0111] identifying the micro-frontend application and acquiring project identification codes of a plurality of projects;

[0112] determining a project interface of each project according to the project identification code of each project;

[0113] calling the project interface of each project to acquire the component configuration of the corresponding project.

[0114] In this embodiment, the project identification code is used to uniquely identify each project, and the component configuration of each project can be acquired through the project interface of each project.

[0115] The traversal module 202 is configured to traverse the component configuration data of each component in the component configuration set to acquire the loading type of each component.

[0116] In the embodiment, the component configuration set includes a plurality of components and component configuration data of each component, and the component configuration data includes resource description of the component and props dynamic variable data required for the component to present different effects.

[0117] In an optional embodiment, the traversal module 202 traverses the component configuration data of each component in the component configuration set, and the loading type of each component includes:

[0118] Identifying the loading type identifier in the component configuration data of each component;

[0119] Determining the loading type of the corresponding component based on the loading type identifier.

[0120] In the embodiment, the loading type identifier is used to uniquely identify the loading type of each component.

[0121] The loading module 203 is configured to load the component configuration data of each component based on the loading type of each component to obtain the first module component of each component.

[0122] In the embodiment, the loading type includes a first loading type and a second loading type.

[0123] In the embodiment, the first loading type is to load a remote module through webpack Module Federation, and the Module Federation feature based on Webpack 5 is used. The federation feature of the Module Federation module can output the first module component loaded remotely, and the common dependencies between modules will only be loaded once, achieving the ability of sharing.

[0124] In the embodiment, the second loading type is to load a UMD format script, and a remote module is loaded through SystemJs. The first module component is output by a weak type framework such as svelte to implement a cross-framework loading form of the component, that is, the first module component can be output to a vue, react, jq, angular, or other project. In combination with the systemjs framework, a remote modular loading component plug-in is implemented. This way has no other strong technical dependencies, and any project can be loaded.

[0125] In an optional embodiment, the loading module 203 loads the component configuration data of each component based on the loading type of each component to obtain the first module component of each component, including:

[0126] When the loading type of each component is the first loading type, the URL module remote entry script in the component configuration data of each component is asynchronously loaded, a scope module object is obtained, the scope module object is initialized by using a preset instruction, the initialized scope module object is stored in a shared scope, and each first module component of each component is obtained by globally searching the module object in the shared scope.

[0127] When the loading type of each component is the second loading type, the resource package in the component configuration data of each component is loaded, and the resource package is parsed to obtain each first module component of each component.

[0128] For example, when the loading type of each component is the preset first loading type, the URL module remote entry Js script in the component configuration data of each component is loaded to obtain a scope object, the scope object is initialized by using webpack_init_sharing in webpack, and the initialized scope module object is stored in a shared scope. The first module component can be obtained by globally searching the module object in the shared scope and extracting a specific module component from the shared scope.

[0129] For example, when the loading type of each component is the preset second loading type, the SystemJs library is imported, a tool object System in the SystemJs library is obtained, the umd.js resource package in the component configuration data of each component is loaded by using System.import, and the Js script in the umd.js resource package is parsed to obtain the loaded first module component.

[0130] In this embodiment, the component configuration data of each component is loaded based on the loading type of each component, so that the obtained first module components can share resources with each other.

[0131] The rendering module 204 is configured to render each first module component of each component to obtain a second module component of each component.

[0132] In this embodiment, the second module component of each component is obtained after each first module component is rendered.

[0133] In an optional embodiment, the rendering module 204 renders each first module component of each component to obtain a second module component of each component, including:

[0134] Each first module component is instantiated to obtain an instantiated first module component.

[0135] The instantiated each first module component and the prop dynamic variable data in the component configuration data of the corresponding component are transmitted into the corresponding DOM node for rendering, to obtain a second module component of each component.

[0136] In the embodiment, the second module component of each component contains a loading address and component configuration data.

[0137] In the embodiment, each first module component in the first component list is instantiated, so that the component instance corresponding to each first module component has its own prop dynamic variable data and memory space, thereby realizing the reference to the DOM node and the component instance of each first module component after instantiation, wherein the dynamic variable data attribute exists in the component configuration data of each component, which means that some custom attributes are registered on each component, and when a value is passed to a prop attribute, it becomes a property of the corresponding component instance.

[0138] In the embodiment, the rendered second module component can be independently encapsulated and run internally, and can independently complete its own function with the front-end page, becomes a centralized independent component, can be repeatedly output to other projects for use, and realizes a flexible micro-front-end access mode.

[0139] Further, after obtaining the second module component of each component, the second module components of the plurality of components are sorted according to a preset sorting rule, to obtain a component list, and the component list is stored in a database.

[0140] In the embodiment, the sorting rule can be preset, and the sorting rule can be sorted according to the order of the page loading address of each second module component.

[0141] In the embodiment, the second module component is stored in the database after sorting, and the micro-front-end can be quickly accessed according to the position relationship of the sorting.

[0142] The generating module 205 is configured to, in response to a micro-front-end page generation request, load a corresponding second module component from the database based on a front-end page requirement, and generate a target page.

[0143] In the embodiment, the target page is generated by loading the component configuration data in the second module component, and since the second module component is a centralized independent component, a plurality of second module components can be combined into a target module component and presented in the front-end page, thereby solving the problem that a plurality of components cannot be combined into a component and presented to a page in the prior art, and improving the flexibility of target page generation.

[0144] In an optional embodiment, the generation module 205, in response to a micro-frontend page generation request, loads corresponding second module components from a database based on a front-end page requirement, and generates a target page, including:

[0145] Parsing message information of the micro-frontend page generation request to obtain a front-end page requirement of the front-end page;

[0146] Based on the front-end page requirement, extracting a loading address of each second module component from the database;

[0147] Based on the loading address of each second module component, adding each second module component to a DOM node corresponding to an initial DOM tree of the front-end page to obtain a target DOM tree, wherein each DOM node contains node information;

[0148] Executing the target DOM tree, sequentially loading the node information in each DOM node in the target DOM tree to generate a target page.

[0149] In this embodiment, the database stores a component list, and the component list contains second module components.

[0150] In this embodiment, the node information of each DON node contains component configuration data and operation logic information of the second module component, and the operation logic information is used to perform operations on multiple second module components, for example, merging multiple second module components.

[0151] In this embodiment, by adding each second module component to a DOM node corresponding to an initial DOM tree of the front-end page, a target DOM tree is obtained, wherein each DOM node can contain one or more second module components.

[0152] Further, the sequentially loading the node information in each DOM node in the target DOM tree to generate a target page includes:

[0153] When each DOM node contains one second module component, extracting a loading type of the second module component from the node information in each DOM node; based on the loading type, loading and rendering the corresponding second module component to generate a target page;

[0154] When each DOM node contains multiple second module components, performing logical operations on the multiple second module components according to the logical operation information in the corresponding DOM node to obtain a target module component; based on the loading type of the target module component, loading and rendering the target module component to generate a target page.

[0155] In this embodiment, by executing the target DOM tree, the phenomenon of missing components in the page generation process is avoided, and at the same time, multiple second module components can be combined into one target module component for loading and display on the same front-end page, improving the flexibility of target page generation.

[0156] To sum up, the page generation device provided in the embodiment traverses the component configuration data of each component in the component configuration set, obtains the loading type of each component, loads the component configuration data of the corresponding component based on the loading type of each component, and obtains the first module component of each component, so that the obtained first module component can share resources with each other. The first module component of each component is rendered, and the rendered second module component can be independently encapsulated and run internally and can independently complete its own function with the front-end page, becoming a centralized independent component that can be repeatedly output to other projects for use, realizing a flexible micro-front-end access mode. In response to a micro-front-end page generation request, the corresponding second module component is pulled from the database based on the front-end page demand for loading, and a target page is generated. Since the second module component is a centralized independent component, multiple second module components can be combined into one target module component for presentation on the front-end page, solving the problem that multiple components cannot be combined into one component for presentation to a page in the prior art, and improving the flexibility of target page generation.

[0157] Embodiment three

[0158] Referring to Figure 3 The electronic device 3 includes a memory 31, at least one processor 32, at least one communication bus 33, and a transceiver 34.

[0159] Those skilled in the art should understand that Figure 3 The structure of the electronic device shown does not constitute a limitation of the embodiment of the present application, and can be a bus structure or a star structure. The electronic device 3 can also include more or fewer other hardware or software, or different component arrangements.

[0160] In some embodiments, the electronic device 3 is an electronic device capable of automatically performing numerical calculation and / or information processing according to pre-set or stored instructions. The hardware thereof includes but is not limited to microprocessors, application-specific integrated circuits, programmable gate arrays, digital processors, and embedded devices. The electronic device 3 can also include a client device, which includes but is not limited to any electronic product that can interact with a client through a keyboard, a mouse, a remote control, a touchpad, or a voice control device, such as a personal computer, a tablet computer, a smartphone, a digital camera, etc.

[0161] It should be noted that the electronic device 3 is only an example, and other existing or future electronic products can also be adapted to the present application and should be included in the protection scope of the present application by reference.

[0162] In some embodiments, the memory 31 is configured to store program codes and various data, such as the page generation apparatus 20 installed in the electronic device 3, and to realize high-speed and automatic access of programs or data during the operation of the electronic device 3. The memory 31 includes a Read-Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Programmable Read-Only Memory (EPROM), a One-time Programmable Read-Only Memory (OTPROM), an Electrically-Erasable Programmable Read-Only Memory (EEPROM), a Compact Disc Read-Only Memory (CD-ROM) or other optical disk memories, a magnetic disk memory, a magnetic tape memory, or any other computer-readable medium capable of carrying or storing data.

[0163] In some embodiments, the at least one processor 32 can be composed of integrated circuits, such as a single packaged integrated circuit, or a plurality of packaged integrated circuits with the same or different functions, including one or more combinations of a Central Processing unit (CPU), a microprocessor, a digital processing chip, a graphics processor, and various control chips. The at least one processor 32 is the control core of the electronic device 3, which connects various components of the entire electronic device 3 through various interfaces and lines, and executes or runs programs or modules stored in the memory 31 and calls data stored in the memory 31 to perform various functions and process data of the electronic device 3.

[0164] In some embodiments, the at least one communication bus 33 is configured to realize the connection and communication between the memory 31 and the at least one processor 32.

[0165] Although not shown, the electronic device 3 can further include a power supply (such as a battery) to supply power to the various components, and optionally, the power supply can be logically connected to the at least one processor 32 via a power management device, so that the power management device can perform functions such as managing charging, discharging, and power consumption management. The power supply can also include one or more DC or AC power sources, recharging means, power failure detection circuitry, power converters or inverters, power status indicators, and any other components. The electronic device 3 can also include various sensors, Bluetooth modules, Wi-Fi modules, and the like, which are not described here.

[0166] It should be understood that the embodiments are only for illustration and are not limited in scope by the structure.

[0167] The integrated units in the form of software function modules described above can be stored in a computer-readable storage medium. The software function modules described above are stored in a storage medium and include a number of instructions for causing a computer device (which can be a personal computer, an electronic device, or a network device, etc.) or a processor to execute part of the method described in each embodiment of the present application.

[0168] In further embodiments, in conjunction with Figure 2 , the at least one processor 32 can execute the operating means of the electronic device 3 and various installed application programs (such as the page generation means 20), program codes, etc., such as the various modules described above.

[0169] The memory 31 stores program codes, and the at least one processor 32 can call the program codes stored in the memory 31 to perform related functions. For example, Figure 2 The various modules described in the above are program codes stored in the memory 31 and executed by the at least one processor 32, so as to achieve the functions of the various modules to achieve the purpose of page generation.

[0170] For example, the program codes can be divided into one or more modules / units, which are stored in the memory 31 and executed by the processor 32 to complete the present application. The one or more modules / units can be a series of computer-readable instruction segments that can complete a specific function, which are used to describe the execution process of the program codes in the electronic device 3. For example, the program codes can be divided into an acquisition module 201, a traversal module 202, a loading module 203, a rendering module 204, and a generation module 205.

[0171] In one embodiment of the present application, the memory 31 stores a plurality of computer readable instructions which are executed by the at least one processor 32 to implement the function of page generation.

[0172] Specifically, the specific implementation method of the at least one processor 32 to the above instructions can refer to Figure 1 The description of the related steps in the corresponding embodiments will not be repeated here.

[0173] In several embodiments provided by the present application, it should be understood that the disclosed apparatus and method can be implemented by other means. For example, the apparatus embodiments described above are only illustrative, for example, the division of the modules is only a logical function division, and actual implementation can have another division manner.

[0174] The modules described as separate components can or can not be physically separated, and the components displayed as modules can or can not be physical units, which can be located in one place or distributed to multiple network units. Part or all of the modules can be selected according to actual needs to achieve the purpose of the embodiment scheme.

[0175] In addition, each functional module in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The above integrated unit can be realized in the form of hardware or in the form of hardware plus software functional module.

[0176] It is obvious for those skilled in the art that the present application is not limited to the details of the above exemplary embodiments, and the present application can be implemented in other specific forms without departing from the spirit or essential characteristics of the present application. Therefore, the embodiments should be regarded as exemplary and non-limiting, and the scope of the present application is defined by the appended claims rather than the above description, and all changes falling within the meaning and scope of the equivalent elements of the claims are intended to be included in the present application. Any reference signs in the claims should not be regarded as limiting the claims involved. In addition, it is obvious that the word "comprising" does not exclude other units or, singular does not exclude plural. The plurality of units or devices stated in the present application can also be realized by one unit or device through software or hardware. The words first, second, etc. are used to represent names, and do not represent any specific order.

[0177] Finally, it should be noted that the above examples are merely intended to illustrate the technical solutions of the present application and not to limit the present application. Although the present application has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present application can be modified or equivalently replaced without departing from the spirit and scope of the technical solutions of the present application.

Claims

1. A page generation method characterized by, The method comprises: obtaining a component configuration set of a micro-frontend application; traversing component configuration data of each component in the component configuration set to obtain a loading type of each component; loading component configuration data of the corresponding component based on the loading type of each component to obtain a first module component of each component, including: the loading type includes a first loading type and a second loading type, the first loading type is to load a remote module through webpack Module Federation, the second loading type is to load a UMD format script, and a remote module is loaded through SystemJs, when the loading type of each component is the first loading type, a URL module remote entry script in the component configuration data of each component is loaded asynchronously to obtain a scope module object; the scope module object is initialized by using a preset instruction, and the initialized scope module object is stored in a shared scope; the first module component of each component is obtained by globally searching the module object in the shared scope; when the loading type of each component is the second loading type, a resource package in the component configuration data of each component is loaded, and the resource package is parsed to obtain the first module component of each component; rendering the first module component of each component to obtain a second module component of each component; in response to a micro-frontend page generation request, loading the corresponding second module component from the database based on the front-end page requirement to generate a target page.

2. The page generation method of claim 1, wherein, The rendering of the first module component of each component to obtain the second module component of each component comprises: instantiating each first module component to obtain an instantiated first module component of each component; transmitting the instantiated first module component of each component and the props dynamic variable data in the component configuration data of the corresponding component into the corresponding DOM node for rendering to obtain the second module component of each component.

3. The page generation method of claim 1, wherein, The response to the micro-frontend page generation request, loading the corresponding second module component from the database based on the front-end page requirement to generate a target page comprises: parsing message information of the micro-frontend page generation request to obtain a front-end page requirement of a front-end page; based on the front-end page requirement, extracting a loading address of each second module component from the database; based on the loading address of each second module component, adding each second module component to a DOM node corresponding to an initial DOM tree of the front-end page to obtain a target DOM tree, wherein each DOM node contains node information; executing the target DOM tree to sequentially load the node information in each DOM node in the target DOM tree to generate a target page.

4. The page generation method of claim 3, wherein, The sequential loading of the node information in each DOM node in the target DOM tree to generate a target page comprises: when each DOM node contains a second module component, extracting the loading type of the second module component from the node information in each DOM node; based on the loading type, loading and rendering the corresponding second module component to generate a target page; When multiple second module components are contained in each DOM node, the multiple second module components are subjected to logical operation according to logical operation information in the corresponding DOM node, to obtain a target module component; the target module component is subjected to loading rendering based on a loading type of the target module component, to generate a target page.

5. The page generation method of claim 1, wherein, The component configuration data of each component in the component configuration set is traversed to obtain the loading type of each component, including: An identification code of the loading type in the component configuration data of each component is identified; The loading type of the corresponding component is determined based on the identification code of the loading type.

6. The page generation method of claim 1, wherein, The component configuration set of the micro-frontend application includes: The micro-frontend application is identified to obtain the project identification code of multiple projects; The project interface of each project is determined according to the project identification code of each project; The component configuration of the corresponding project is obtained by calling the project interface of each project.

7. A page generation apparatus characterized by comprising: The device includes: An obtaining module for obtaining a component configuration set of a micro-frontend application; A traversing module for traversing component configuration data of each component in the component configuration set to obtain a loading type of each component; A loading module for loading component configuration data of the corresponding component based on the loading type of each component to obtain a first module component of each component, including: the loading type includes a first loading type and a second loading type, the first loading type is to load a remote module through webpack Module Federation, the second loading type is to load a UMD format script and load a remote module through SystemJs, when the loading type of each component is the first loading type, a URL module remote entry script in the component configuration data of each component is asynchronously loaded to obtain a scope module object; the scope module object is initialized by using a preset instruction, and the initialized scope module object is stored in a shared scope; the first module component of each component is obtained by globally searching for a module object in the shared scope; when the loading type of each component is the second loading type, a resource package in the component configuration data of each component is loaded, and the resource package is parsed to obtain the first module component of each component; A rendering module for rendering the first module component of each component to obtain a second module component of each component; A generating module for generating a target page by loading the corresponding second module component from a database based on a front-end page requirement in response to a micro-frontend page generation request.

8. An electronic device, comprising: The electronic device includes a processor and a memory, and the processor is configured to implement the page generation method of any one of claims 1 to 6 when executing the computer program stored in the memory.

9. A computer-readable storage medium having stored thereon a computer program, characterized in that The computer program is executed by the processor to implement the page generation method of any one of claims 1 to 6.

Images