Dynamic page display method and related equipment

Abstract

The embodiment of the invention discloses a dynamic page display method and related equipment, which are used for decoupling different modules in a micro-front-end application and improving the rendering efficiency. The method comprises the steps that operation of calling a target front-end sub-application in the running process of a target service application is received, the operation is used for indicating the target front-end sub-application to render and obtain a target page in the target service application, and the target front-end sub-application belongs to any front-end sub-application in micro-front-end applications; running the target front-end sub-application based on the page configuration information of the target page to obtain the target page; and displaying the target page.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of page rendering, and in particular to a dynamic page display method and related devices. Background Art

[0002] In the current low-code / no-code front-end architecture field, the single-page application (SPA, single-page web application) architecture solution is usually adopted.

[0003] SPA is a web application architecture in which the entire application loads a single HTML page and responds to user operations by dynamically updating the page content without reloading the entire page. However, as time goes by and application functions become richer, the single-page application architecture solution makes the various modules of the rendering page tightly coupled, and often changes in one place affect the entire application. As a result, the release cost is getting higher and higher, and the development and deployment efficiency is getting lower and lower. Summary of the invention

[0004] The embodiments of the present application provide a dynamic page display method and related devices for decoupling different modules in a micro-front-end application and improving rendering efficiency.

[0005] A first aspect of an embodiment of the present application provides a dynamic page display method, comprising:

[0006] Applied to the front-end device, the dynamic page display method includes:

[0007] Receive an operation of calling a target front-end sub-application during the operation of a target business application, wherein the operation is used to instruct the target front-end sub-application to render a target page in the target business application, and the target front-end sub-application belongs to any front-end sub-application in the micro-front-end application;

[0008] Running the target front-end sub-application based on the page configuration information of the target page to obtain the target page;

[0009] The target page is displayed.

[0010] In a specific implementation, the step of running the target front-end sub-application based on the page configuration information of the target page to obtain the target page includes:

[0011] Determine other sub-applications that the target front-end sub-application depends on;

[0012] The target front-end sub-application and the other sub-applications are run based on the page configuration information of the target page to obtain the target page.

[0013] In a specific implementation, determining other sub-applications that the target front-end sub-application depends on includes:

[0014] Acquire a sub-application entry file of the target front-end sub-application, wherein the sub-application entry file of the target front-end sub-application includes a first sub-application that the target front-end sub-application directly depends on;

[0015] For a first sub-application that the target front-end sub-application directly depends on, obtaining, from a sub-application entry file of the first sub-application, a second sub-application that the first sub-application directly depends on;

[0016] The first sub-application and the second sub-application are determined as other sub-applications that the target front-end sub-application depends on.

[0017] In a specific implementation, before receiving the operation of the target service application calling the target front-end sub-application during operation, the method further includes:

[0018] Receiving a page access request initiated by a business system deployed by the front-end device;

[0019] Determining the target business application to be accessed in the business system according to the access path indicated by the page access request;

[0020] Acquire a project entry file of the target business application, wherein the project entry file of the target business application includes a business code of the target business application;

[0021] The business code of the target business application is run, wherein the business code of the target business application includes a code module for calling the target front-end sub-application to render the target page.

[0022] In a specific implementation, the front-end sub-application in the micro-front-end application includes a sharing module, and the step of running the target front-end sub-application based on the page configuration information of the target page to obtain the target page includes:

[0023] Obtaining a sub-application entry file of the target front-end sub-application;

[0024] If the sub-application entry file of the target front-end sub-application includes a third-party dependency identifier, calling the shared module based on the third-party dependency identifier to obtain the third-party dependency corresponding to the third-party dependency identifier;

[0025] The target front-end sub-application is run based on the third-party dependency and the page configuration information of the target page to obtain the target page.

[0026] In a specific implementation, the front-end sub-application in the micro-front-end application includes at least one of a business center, a UI center, a rendering center, a page designer, a process designer, and a shared module.

[0027] A second aspect of an embodiment of the present application provides a front-end device, including:

[0028] A receiving unit, configured to receive an operation of a target business application calling a target front-end sub-application during operation, wherein the operation is used to instruct the target front-end sub-application to render a target page in the target business application, and the target front-end sub-application belongs to any front-end sub-application among multiple front-end sub-applications included in the micro-front-end application;

[0029] A rendering unit, configured to run the target front-end sub-application based on the page configuration information of the target page to obtain the target page;

[0030] The display unit is used to display the target page.

[0031] In a specific implementation, the rendering unit is specifically configured to determine other sub-applications that the target front-end sub-application depends on; and run the target front-end sub-application and the other sub-applications based on page configuration information of the target page to obtain the target page.

[0032] In a specific implementation, the rendering unit is specifically used to obtain a sub-application entry file of the target front-end sub-application, wherein the sub-application entry file of the target front-end sub-application includes a first sub-application that the target front-end sub-application directly depends on;

[0033] For a first sub-application that the target front-end sub-application directly depends on, obtaining, from a sub-application entry file of the first sub-application, a second sub-application that the first sub-application directly depends on;

[0034] The first sub-application and the second sub-application are determined as other sub-applications that the target front-end sub-application depends on.

[0035] In a specific implementation, before receiving the operation of the target service application calling the target front-end sub-application during operation, the front-end device further includes: a determination unit, an acquisition unit, and an operation unit;

[0036] The receiving unit is further configured to receive a page access request initiated by a business system deployed by the front-end device;

[0037] The determining unit is used to determine the target business application to be accessed in the business system according to the access path indicated by the page access request;

[0038] The acquisition unit is used to acquire a project entry file of the target business application, wherein the project entry file of the target business application includes a business code of the target business application;

[0039] The running unit is used to run the business code of the target business application, where the business code of the target business application includes a code module that calls the target front-end sub-application to render the target page.

[0040] In a specific implementation, the front-end sub-application in the micro-front-end application includes a shared module, and the rendering unit is specifically used to obtain the sub-application entry file of the target front-end sub-application; if the sub-application entry file of the target front-end sub-application includes a third-party dependency identifier, the shared module is called based on the third-party dependency identifier to obtain the third-party dependency corresponding to the third-party dependency identifier; the target front-end sub-application is run based on the third-party dependency and the page configuration information of the target page to obtain the target page.

[0041] In a specific implementation, the front-end sub-application in the micro-front-end application includes at least one of a business center, a UI center, a rendering center, a page designer, a process designer, and a shared module.

[0042] A third aspect of the embodiment of the present application provides a front-end device, including:

[0043] CPU, memory and input / output interface;

[0044] The memory is a short-term storage memory or a persistent storage memory;

[0045] The central processing unit is configured to communicate with the memory and execute instructions in the memory to perform the method described in the first aspect.

[0046] A fourth aspect of the embodiments of the present application provides a computer program product comprising instructions, and when the computer program product is run on a computer, the computer is caused to execute the method described in the first aspect.

[0047] A fifth aspect of an embodiment of the present application provides a computer storage medium, wherein the computer storage medium stores instructions, and when the instructions are executed on a computer, the computer executes the method described in the first aspect.

[0048] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages: In the embodiments of the present application, the micro-frontend application is split into multiple front-end sub-applications, and the target business application is allowed to call the corresponding target front-end sub-application in the micro-frontend application when it needs to render and display the target page. Compared with the existing technical solutions, the deployment method of the micro-frontend application in the embodiments of the present application splits the micro-frontend application into multiple independent callable front-end sub-applications, supports different front-end sub-applications to use different technology stacks, and improves the development and deployment efficiency of the front-end sub-applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] Figure 1 A system architecture diagram of a micro-frontend application for dynamic page display disclosed in an embodiment of the present application;

[0050] Figure 2 A schematic diagram of a flow chart of a dynamic page display method disclosed in an embodiment of the present application;

[0051] Figure 3 A schematic diagram of the structure of the front-end device disclosed in the embodiment of the present application;

[0052] Figure 4 Another structural schematic diagram of the front-end device disclosed in an embodiment of the present application. DETAILED DESCRIPTION

[0053] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0054] The embodiments of the present application provide a dynamic page display method and related devices for decoupling different modules in a micro-front-end application and improving rendering efficiency.

[0055] See also Figure 1 , the embodiment of the present application provides a micro-front-end application that dynamically displays different pages in a business system, and uses module federation technology to split the micro-front-end application into front-end sub-applications such as a business center, a UI center, a rendering center, a page designer, a process designer, and a shared module. The method of splitting the micro-front-end application in the embodiment of the present application is to split it according to the different business functions supported by the micro-front-end application. Each front-end sub-application can complete certain business functions relatively independently, reducing the number of front-end sub-applications that need to be run during the page rendering process and reducing the coupling between different front-end sub-applications.

[0056] The code of each front-end sub-application can be separated and packaged independently from the aforementioned micro-front-end application through technologies such as webpack and / or nodejs to achieve decoupling between different front-end sub-applications. At the same time, in order to achieve different functions of micro-front-end applications, the dependencies between multiple front-end sub-applications also need to be recorded. The following is an explanation of each of the above front-end sub-applications.

[0057] The UI center includes every display control required by all pages of the business system. Since different front-end devices are adapted to different display controls, the UI center can configure multiple sets of display controls for different front-end devices, and each set of display controls contains all the controls required for all pages of the business system to be displayed on the corresponding front-end device.

[0058] The rendering center is used to render pages according to the page configuration information of the corresponding page in the business system. In order to complete the rendering operation, different functional modules are set up in the rendering center, such as page module, communication module, service module, instruction module and data module. Among them, the communication module is used to provide an interface and perform data interaction and communication with other front-end sub-applications; the instruction module can generate and parse data for data interaction and communication; the data module is used to manage the page configuration information obtained and parsed by the communication module and the instruction module, as well as the data contained in the form in the page; the page module is used to verify and filter the data contained in the form based on the page configuration information provided by the data module and the data contained in the form in the page, and finally obtain the data that can be displayed in the page, and render the corresponding page based on this.

[0059] The business center is used to manage different business applications in the business system. From the perspective of page rendering, the pages in the business system can be divided into multiple levels for management, and the highest level of pages usually corresponds to different business functions. Then the applications that provide different business functions are business applications, such as portals, permission configuration, and data query. Furthermore, different business applications are used to render all the pages that need to be displayed in the corresponding business functions, so all the business codes of the corresponding business functions are included. If the business code contains other front-end sub-applications, it means that other front-end sub-applications need to be called in the process of rendering the corresponding page to fully realize the corresponding business function.

[0060] Based on the understanding and analysis of different business applications in the business system, it can be known that the business applications that implement different business functions in the embodiments of the present application will rely on the same or similar functional modules during the implementation process. For example, different business applications require portal pages, and the styles of portal pages are basically the same, so they can be implemented through the same or similar functional modules. Therefore, in order to reduce the redundant deployment of functional modules in multiple business applications in the business system, for such functional modules, the embodiments of the present application will be uniformly abstracted into a front-end sub-application, and different business applications are allowed to call them. For example, the page designer and process designer provided in the embodiments of the present application.

[0061] The page designer is used to manage the styles of different pages in the business system, the data allowed to be displayed, and the controls used, and encapsulates and stores the page configuration information of the corresponding pages for use by the rendering center.

[0062] The process designer is used to manage and store the flow nodes of the forms in the business system for reuse by different business applications. It should be noted that the pages required to be displayed in the front-end device in the page designer and the process designer can be configured in the implementation code of the page designer and the process designer, and other front-end sub-applications can be called during the specific implementation, which is not limited here.

[0063] The shared module stores the third-party dependencies required for the operation of different front-end sub-applications, which is equivalent to a collection of different third-party dependencies required by the micro-front-end application. Similar to the introduction of the two front-end sub-applications, page designer and process designer, in order to avoid redundant large amounts of identical third-party dependencies for different front-end sub-applications, the embodiment of the present application uniformly configures the third-party dependencies required by commonly used and different front-end sub-applications in the shared module. Among them, third-party dependencies can include but are not limited to Figure 1 Any content in the shared module shown.

[0064] In summary, the embodiment of the present application splits the micro-front-end application into multiple front-end sub-applications that can be independently developed, tested and deployed, decoupling the different functional modules in the micro-front-end application, reducing development and maintenance costs, and improving development efficiency. At the same time, multiple front-end sub-applications are called through interfaces to support the use of any technology stack in different front-end sub-applications, which makes it possible to use new technologies and upgrade old technologies. Finally, the independent deployment scheme adopted by the embodiment of the present application for different front-end sub-applications supports the introduction of new front-end sub-applications at a lower development cost to realize new business functions, and when realizing different business functions, the combination of multiple front-end sub-applications is realized through configured dependencies and interfaces, and front-end rendering with diverse functions can be realized quickly and at low cost.

[0065] Based on the aforementioned front-end framework, the present application embodiment provides the following Figure 2The dynamic page display method shown includes the following steps:

[0066] 201. Receive an operation of calling a target front-end sub-application during operation of a target business application, the operation being used to instruct the target front-end sub-application to render a target page in the target business application, the target front-end sub-application being any front-end sub-application in the micro-front-end application. The rendering of each page in the business system depends on the front-end sub-application included in the micro-front-end application.

[0067] Based on the above front-end framework, it can be known that each target page to be rendered comes from a business application in the business system. In other words, if the target business application initiates an operation to call the target front-end sub-application during its operation, it means that the target business application is running to the point where the target page needs to be displayed, and the rendering of the target page needs to be completed through the target front-end sub-application.

[0068] Among them, it can be seen that the micro-front-end application of the embodiment of the present application has been split into multiple front-end sub-applications as needed, where each front-end sub-application is used to implement different business functions in the page rendering process, and the specific configuration can be as needed.

[0069] 202. Run the target front-end sub-application based on the page configuration information of the target page to obtain the target page.

[0070] Each page in the business system can have a customized display style, customized business data and business fields that need to be displayed on the page. The information that determines the target page is different from other pages in the business system will be encapsulated as the page configuration information of the target page. Based on the page configuration information of the target page and the rendering logic in the target front-end sub-application, the target page can be rendered.

[0071] 203. Display the target page.

[0072] After obtaining the target page that the target business application needs to display, the target page can be directly displayed in the display interface of the target business application, or directly displayed in the display interface of the business system, and the embodiment of the present application does not make specific limitations.

[0073] In the embodiment of the present application, the micro-frontend application is split into multiple front-end sub-applications, and the target business application is allowed to call the corresponding target front-end sub-application in the micro-frontend application to render and display the target page. Compared with the existing technical solutions, the deployment method of the micro-frontend application in the embodiment of the present application splits the micro-frontend application into multiple independent front-end sub-applications, and allows different front-end sub-applications to use different technology stacks, which improves the development and deployment efficiency of the front-end sub-applications.

[0074] On the basis of the aforementioned embodiment, in addition to business applications calling different front-end sub-applications, different front-end sub-applications also need to call each other during the implementation process. Therefore, the aforementioned step 202 of the embodiment of the present application specifically includes the following steps: determining other front-end sub-applications that the target front-end sub-application depends on; running the target front-end sub-application and other front-end sub-applications based on the page configuration information of the target page to obtain the target page.

[0075] Specifically, if the target front-end sub-application depends on other front-end sub-applications, it means that the target front-end sub-application cannot independently complete the rendering of the target page, and can only be completed based on the joint operation of the target front-end sub-application and other front-end sub-applications.

[0076] The following is an example based on the description of the front-end sub-application in the front-end framework. For pages that need to provide diverse display content, simple styles and displayed business data cannot meet their display requirements. At this time, it is also necessary to introduce the controls used in the page configuration information. Then when the rendering center renders the corresponding page, it is also necessary to call the UI center to obtain the controls used in the page configuration information, such as drop-down boxes or input boxes, to complete the rendering of the target page.

[0077] Furthermore, in the process of rendering the target page, the required multiple front-end sub-applications may form a multi-level dependency relationship. The embodiment of the present application records these dependencies in the sub-application entry file. Specifically, "other front-end sub-applications that the target front-end sub-application depends on" can be determined in the following manner: obtain the sub-application entry file of the target front-end sub-application, and the sub-application entry file of the target front-end sub-application includes the first sub-application that the target front-end sub-application directly depends on; for the first sub-application that the target front-end sub-application directly depends on, obtain the second sub-application that the first sub-application directly depends on from the sub-application entry file of the first sub-application; determine the first sub-application and the second sub-application as other sub-applications that the target front-end sub-application depends on. Among them, the first sub-application and the second sub-application belong to any front-end sub-application.

[0078] Specifically, the embodiments of the present application can configure a corresponding sub-application entry file for each front-end sub-application, so that the other front-end sub-applications that each front-end sub-application depends on can be recorded in its corresponding sub-application entry file. In this way, after obtaining the sub-application entry file of the target front-end sub-application, the first sub-application that the target front-end sub-application directly depends on can be obtained therefrom, and the second sub-application that the first sub-application directly depends on can be further obtained through the sub-application entry file of the first sub-application, that is, the first sub-application that the target front-end sub-application indirectly depends on. Furthermore, the sub-application entry file of the second sub-application may also contain a front-end sub-application, and through such an iterative method, all other sub-applications that the target front-end sub-application directly and indirectly depends on can be found.

[0079] Among them, taking the first sub-application as an example, if the sub-application entry file of the first sub-application records other second sub-applications, it means that the second sub-application is the front-end sub-application that the first sub-application directly depends on. Specifically, the second sub-application can be recorded in the dependency mapping table in the sub-application entry file of the first sub-application, or recorded in the code of the first sub-application in the sub-application entry file of the first sub-application, which is not limited in the embodiment of the present application.

[0080] Based on the above content, it can be known that the embodiment of the present application can configure a corresponding sub-application entry file for each front-end sub-application, and the sub-application entry file of each front-end sub-application is used to support the operation of the front-end sub-application. Therefore, in addition to recording other front-end sub-applications that the corresponding front-end sub-application depends on in the sub-application entry file, the sub-application entry file of the embodiment of the present application can also record the implementation code of the corresponding front-end sub-application, so after obtaining the sub-application entry file, the operation of the front-end sub-application can be realized by running the implementation code of the front-end sub-application.

[0081] In addition, in the embodiment of the present application, the sub-application entry file of each front-end sub-application can be stored on the back-end device corresponding to the front-end device or in the front-end device to realize the dynamic resolution of the front-end sub-application dependency, which is not specifically limited here. Among them, the front-end device refers to the device used by the user to access the business system, and the back-end device refers to the device that provides the user with remote services of the business system.

[0082] Furthermore, before the aforementioned step 201, the embodiment of the present application also includes the following steps: receiving a page access request initiated by the business system deployed by the front-end device; determining the target business application to be accessed in the business system according to the access path indicated by the page access request; obtaining the project entry file of the target business application, the project entry file of the target business application includes the business code of the target business application; running the business code of the target business application, the business code of the target business application includes a code module that calls the target front-end sub-application to render the target page.

[0083] Specifically, similar to the front-end sub-application, different applications deployed in the business system of the embodiment of the present application can also be configured with corresponding project entry files to support the operation of the corresponding business applications. Therefore, the project entry file of the target business application includes the business code of the target business application. Finally, running the business code is equivalent to running the corresponding business application. Similarly, the project entry file of the target business application can be stored on the back-end device corresponding to the front-end device or stored in the front-end device, which is not limited by the embodiment of the present application.

[0084] In some specific implementations, based on the aforementioned front-end architecture, it can be known that the embodiments of the present application can also introduce a shared library collection to form a shared module to provide support for different micro-front-end applications. On this basis, the method of obtaining the target page also includes the following steps: obtaining the sub-application entry file of the target front-end sub-application; if the sub-application entry file of the target front-end sub-application includes a third-party dependency identifier, calling the shared module based on the third-party dependency identifier to obtain the third-party dependency corresponding to the third-party dependency identifier; running the target front-end sub-application based on the third-party dependency and the page configuration information of the target page to obtain the target page.

[0085] Specifically, third-party dependencies refer to third-party libraries or third-party methods that the front-end sub-application needs to call during operation, such as Figure 1 The third-party dependencies shown in the shared modules are react, react-dom, axios, immer, kdes ign, kdes ign-mobile, etc.

[0086] Similar to other front-end sub-applications that record dependencies, the third-party dependency identifier can be recorded in a third-party dependency table in the sub-application entry file, or in the code of the corresponding front-end sub-application in the sub-application entry file, which is not limited in the present embodiment.

[0087] In some specific implementations, in the process of developing front-end applications in the embodiments of this application, the code for implementing the front-end sub-applications described in the aforementioned embodiments of this application can be integrated into the same code repository for unified management through the Monorepo project code management method. In addition, when multiple front-end sub-applications are deployed online, technical means such as lerna and / or yarnworkspace can be used to enable multi-threaded packaging for all front-end sub-applications to shorten the time for deployment and online.

[0088] See also Figure 3 , the embodiment of the present application provides a front-end device, including:

[0089] A receiving unit 301 is used to receive an operation of calling a target front-end sub-application during operation of a target business application, the operation being used to instruct the target front-end sub-application to render a target page in the target business application, the target front-end sub-application being any front-end sub-application among multiple front-end sub-applications included in the micro front-end application;

[0090] A rendering unit 302 is used to run a target front-end sub-application based on the page configuration information of the target page to obtain the target page;

[0091] The display unit 303 is used to display the target page.

[0092] In a specific implementation, the rendering unit 302 is specifically configured to determine other sub-applications that the target front-end sub-application depends on; and run the target front-end sub-application and other sub-applications based on the page configuration information of the target page to obtain the target page.

[0093] In a specific implementation, the rendering unit 302 is specifically configured to obtain a sub-application entry file of a target front-end sub-application, wherein the sub-application entry file of the target front-end sub-application includes a first sub-application that the target front-end sub-application directly depends on;

[0094] For a first sub-application that the target front-end sub-application directly depends on, obtaining a second sub-application that the first sub-application directly depends on from a sub-application entry file of the first sub-application;

[0095] The first sub-application and the second sub-application are determined as other sub-applications that the target front-end sub-application depends on.

[0096] In a specific implementation, before receiving an operation of the target service application calling the target front-end sub-application during operation, the front-end device further includes: a determination unit, an acquisition unit, and an operation unit;

[0097] The receiving unit 301 is further configured to receive a page access request initiated by a business system deployed by the front-end device;

[0098] A determination unit, used to determine a target business application to be accessed in the business system according to an access path indicated by the page access request;

[0099] An acquisition unit, used to acquire a project entry file of a target business application, where the project entry file of the target business application includes a business code of the target business application;

[0100] The running unit is used to run the business code of the target business application, where the business code of the target business application includes a code module for calling the target front-end sub-application to render the target page.

[0101] In a specific implementation, the front-end sub-application in the micro-front-end application includes a shared module, a rendering unit 302, which is specifically used to obtain a sub-application entry file of a target front-end sub-application; if the sub-application entry file of the target front-end sub-application includes a third-party dependency identifier, the shared module is called based on the third-party dependency identifier to obtain the third-party dependency corresponding to the third-party dependency identifier; the target front-end sub-application is run based on the third-party dependency and the page configuration information of the target page to obtain the target page.

[0102] In a specific implementation, the front-end sub-application in the micro-front-end application includes at least one of a business center, a UI center, a rendering center, a page designer, a process designer, and a shared module.

[0103] Figure 4 It is a schematic diagram of the structure of a front-end device provided in an embodiment of the present application. The front-end device 400 may include one or more central processing units (CPU) 401 and a memory 405. The memory 405 stores one or more application programs or data.

[0104] The memory 405 may be a volatile storage or a persistent storage. The program stored in the memory 405 may include one or more modules, each of which may include a series of instruction operations on the front-end device. Furthermore, the central processor 401 may be configured to communicate with the memory 405 and execute a series of instruction operations in the memory 405 on the front-end device 400.

[0105] The front-end device 400 may also include one or more power supplies 402, one or more wired or wireless network interfaces 403, one or more input and output interfaces 404, and / or one or more operating systems, such as Windows ServerTM, Mac OS XTM, UnixTM, LinuxTM, FreeBSDTM, etc.

[0106] The CPU 401 can execute the aforementioned Figures 1 to 3 The operations performed by the front-end device in the illustrated embodiment will not be described in detail here.

[0107] It should be noted that, although the steps in the flowcharts involved in the embodiments are drawn in sequence according to the instructions of the arrows, unless otherwise clearly stated in this document, there is no strict order restriction on the execution of these steps, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the embodiments may include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0108] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0109] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0110] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0111] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0112] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, read-only memory), random access memory (RAM, random access memory), disk or optical disk and other media that can store program code.

[0113] The embodiment of the present application also provides a computer program product including instructions, and when the computer program product is run on a computer, the computer executes the dynamic page display method as described above.

Claims

1. A dynamic page display method, characterized in that: Applied to the front-end device, the dynamic page display method includes: Receive an operation of calling a target front-end sub-application during the operation of a target business application, wherein the operation is used to instruct the target front-end sub-application to render a target page in the target business application, and the target front-end sub-application belongs to any front-end sub-application in the micro-front-end application; Running the target front-end sub-application based on the page configuration information of the target page to obtain the target page; The target page is displayed.

2. The method according to claim 1, characterized in that: The step of running the target front-end sub-application based on the page configuration information of the target page to obtain the target page includes: Determine other sub-applications that the target front-end sub-application depends on; The target front-end sub-application and the other sub-applications are run based on the page configuration information of the target page to obtain the target page.

3. The method according to claim 2, characterized in that The determining of other sub-applications that the target front-end sub-application depends on includes: Acquire a sub-application entry file of the target front-end sub-application, wherein the sub-application entry file of the target front-end sub-application includes a first sub-application that the target front-end sub-application directly depends on; For a first sub-application that the target front-end sub-application directly depends on, obtaining, from a sub-application entry file of the first sub-application, a second sub-application that the first sub-application directly depends on; The first sub-application and the second sub-application are determined as other sub-applications that the target front-end sub-application depends on.

4. The method according to any one of claims 1 to 3, characterized in that Before receiving the operation of the target service application calling the target front-end sub-application during operation, the method further includes: Receiving a page access request initiated by a business system deployed by the front-end device; Determining the target business application to be accessed in the business system according to the access path indicated by the page access request; Acquire a project entry file of the target business application, wherein the project entry file of the target business application includes a business code of the target business application; The business code of the target business application is run, wherein the business code of the target business application includes a code module for calling the target front-end sub-application to render the target page.

5. The method according to claim 1, characterized in that The front-end sub-application in the micro-front-end application includes a shared module, and the target front-end sub-application is run based on the page configuration information of the target page to obtain the target page, including: Obtaining a sub-application entry file of the target front-end sub-application; If the sub-application entry file of the target front-end sub-application includes a third-party dependency identifier, calling the shared module based on the third-party dependency identifier to obtain the third-party dependency corresponding to the third-party dependency identifier; The target front-end sub-application is run based on the third-party dependency and the page configuration information of the target page to obtain the target page.

6. The method according to claim 1, characterized in that The front-end sub-application in the micro-front-end application includes at least one of a business center, a UI center, a rendering center, a page designer, a process designer, and a shared module.

7. A front-end device, characterized in that: include A receiving unit, configured to receive an operation of a target business application calling a target front-end sub-application during operation, wherein the operation is used to instruct the target front-end sub-application to render a target page in the target business application, and the target front-end sub-application belongs to any front-end sub-application among multiple front-end sub-applications included in the micro-front-end application; A rendering unit, configured to run the target front-end sub-application based on the page configuration information of the target page to obtain the target page; The display unit is used to display the target page.

8. A computer device, characterized in that: include: CPU, memory and input / output interface; The memory is a short-term storage memory or a persistent storage memory; The central processing unit is configured to communicate with the memory and execute instructions in the memory to perform the method according to any one of claims 1 to 6.

9. A computer program product comprising instructions, characterized in that When the computer program product is run on a computer, the computer is caused to execute the method according to any one of claims 1 to 6.

10. A computer storage medium, characterized in that: The computer storage medium stores instructions, and when the instructions are executed on a computer, the computer is caused to execute the method according to any one of claims 1 to 6.

Images