Page processing method and device, and electronic device

Abstract

The application provides a page processing method and device and electronic equipment, and relates to the technical field of micro front end, and comprises the following steps: when a first page corresponding to a main module is loaded, a server is requested to request a web data file of the micro front end system; wherein the web data file is generated by the server when the micro front end system is monitored to be online; if a selected command for the sub module is received, a target file path of a code file of the selected sub module is found from the web data file; the code file of the selected sub module is acquired through the target file path, so that a second page corresponding to the sub module is loaded according to the code file. In the application, when the server monitors that the micro front end system is online, a routing table of code files of all modules in the system is automatically generated, so that the routing table requested by the terminal is always the latest one, the risk of loading page errors caused by manual maintenance of the routing table is avoided, and the reliability of the project is improved.

Description

Technical Field

[0001] The present invention relates to the field of micro-front-end technology, and in particular to a page processing method, device and electronic device. Background Art

[0002] Microfrontends are a microservices-like architecture that applies the microservices concept to the browser side. This transforms single-page frontend applications from a single, monolithic application to one that aggregates multiple smaller frontend applications. Each frontend application can be developed and deployed independently. In practice, when a business-oriented (toB) project has an increasing number of modules, numerous customized features, and complex functionality, microfrontends are often considered. This approach divides the application into a main module and various business modules, with the main module aggregating the various business modules.

[0003] Currently, most micro-frontend implementations require the frontend to maintain a routing table in the project's main module to maintain different business names and the corresponding JS paths for each business, so that the corresponding JS files can be loaded when the business is used. Typically, the JS file names in this routing table are fixed, but this also introduces caching issues. For example, if the cache of the JS file corresponding to a certain business is not updated in a timely manner, outdated content will be displayed on the page. If the JS file name is not fixed, the routing table must be frequently modified manually to maintain it, which increases the risk of human error.

[0004] Overall, the existing micro-frontend implementation method increases the risk of front-end page errors and reduces the reliability of the project. Summary of the Invention

[0005] In view of this, an object of the present invention is to provide a page processing method, device and electronic device, which can reduce the risk of front-end page errors and improve the reliability of the project.

[0006] In a first aspect, an embodiment of the present application provides a page processing method applied to a terminal, the terminal being in communication connection with a preset server, a client of a preset micro-frontend system being run on the terminal, a server of the micro-frontend system being run on the server, the client of the micro-frontend system including a main module and at least one sub-module; the method includes: when a first page corresponding to the main module is loaded, requesting a web data file of the micro-frontend system from the server; wherein the web data file is generated by the server when it is monitored that the micro-frontend system is online, and the web data file includes file paths of code files of the main module and the sub-module; a function entry of the sub-module is set in the first page; if a selected command for the sub-module is received, a target file path of a code file of a selected sub-module is found from the web data file; the code file of the selected sub-module is acquired through the target file path, so as to load a second page corresponding to the sub-module according to the code file.

[0007] In an optional embodiment of the present application, the web data file is generated by the server in the following manner: if it is monitored that the micro-frontend system is online, a code packaging file of the micro-frontend system is acquired from a specified position; wherein the code packaging file includes a first code packaging file of a main module of the micro-frontend system, and a second code packaging file of a sub-module of the micro-frontend system; directories of the code packaging file are traversed to obtain a first module identifier of the main module, a first file path of code of the main module, and a second module identifier of the sub-module, and a second file path of code of the sub-module; and the web data file of the micro-frontend system is generated according to the first module identifier, the first file path, the second module identifier, and the second file path.

[0008] In an optional embodiment of the present application, the web data file is a routing table, and the step of generating the web data file of the micro-frontend system according to the first module identifier, the first file path, the second module identifier, and the second file path includes: taking the first module identifier and the second module identifier as keys, and taking the corresponding first file path and second file path as key values, to generate the routing table of the micro-frontend system.

[0009] In an optional embodiment of the present application, the step of traversing the directories of the code packaging file to obtain the first module identifier of the main module, the first file path of code of the main module, and the second module identifier of the sub-module, and the second file path of code of the sub-module includes: traversing the directories of the code packaging file by a preset shell script to obtain the first module identifier of the main module, the first file path of code of the main module, and the second module identifier of the sub-module, and the second file path of code of the sub-module.

[0010] In an optional embodiment of the present application, the method further comprises: if it is monitored that the code packaging file of the micro-frontend system is updated, regenerating the routing table of the micro-frontend system according to the updated code packaging file.

[0011] In an optional embodiment of the present application, the first code packaging file and the second code packaging file both include a webpage script file and a webpage style file.

[0012] In an optional embodiment of the present application, the webpage script file is a js file, and the webpage style file is a css file.

[0013] In a second aspect, the embodiments of the present application further provide a page processing apparatus applied to a terminal, the terminal being in communication connection with a preset server, a client of a preset micro-frontend system being run on the terminal, a server of the micro-frontend system being run on the server, the client of the micro-frontend system including a main module and at least one sub-module; the apparatus includes: a webpage data file request module, configured to request a webpage data file of the micro-frontend system from the server when a first page corresponding to the main module is loaded; wherein the webpage data file is generated by the server when it is monitored that the micro-frontend system is online, and the webpage data file includes file paths of code files of the main module and the sub-modules; a function entrance of the sub-module is set in the first page; a target file path finding module, configured to find a target file path of a code file of a selected sub-module from the webpage data file if a selection command for the sub-module is received; and a second page loading module, configured to acquire the code file of the selected sub-module through the target file path, so as to load a second page corresponding to the sub-module according to the code file.

[0014] In a third aspect, the embodiments of the present application further provide an electronic device, which includes a processor and a memory, the memory storing computer executable instructions capable of being executed by the processor, and the processor executes the computer executable instructions to implement the above-mentioned page processing method.

[0015] In a fourth aspect, the embodiments of the present application further provide a computer readable storage medium, which stores computer executable instructions, and the computer executable instructions, when called and executed by a processor, cause the processor to implement the above-mentioned page processing method.

[0016] The embodiments of the present application bring the following beneficial effects:

[0017] An embodiment of the present invention provides a page processing method, device and electronic device, which, when loading a first page corresponding to a main module, requests a web page data file of the micro-front-end system from a server; wherein the web page data file is generated by the server when monitoring the micro-front-end system to be online, and the web page data file includes the file path of the code files of the main module and the sub-module; a functional entry of the sub-module is provided in the first page; if a selection command for the sub-module is received, the target file path of the code file of the selected sub-module is searched from the web page data file; the code file of the selected sub-module is obtained through the target file path, so as to load the second page corresponding to the sub-module according to the code file. In this method, when the micro-front-end system is online, the server side of the micro-front-end system automatically generates an associated web page data file. The web page data file includes the file path of the code file of each module in the system. When the terminal loads the page corresponding to the main module, the web page data file is requested from the server side of the system in real time. When the target sub-module needs to be accessed, the code file corresponding to the target sub-module is obtained according to the web page data file, and then the page of the target sub-module is loaded according to the code file. This method does not require manual maintenance of a routing table on the front end. Instead, the server side of the micro-front-end system automatically generates a routing table according to the latest version of the code file of the online micro-front-end system, thereby ensuring that the routing table requested by the terminal is always the latest, avoiding the risk of page loading errors due to manual maintenance of the routing table (for example, errors in manual modification of the business name or untimely manual maintenance leading to loading of outdated pages), thereby improving the reliability of the project.

[0018] Other features and advantages of the present disclosure will be set forth in the following description, or some features and advantages may be inferred or unambiguously determined from the description, or may be learned by practicing the above-mentioned technology of the present disclosure.

[0019] In order to make the above-mentioned objectives, features and advantages of the present disclosure more obvious and easy to understand, preferred embodiments are given below and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the specific embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0021] Figure 1 A schematic diagram of a flow chart of a page processing method provided by an embodiment of the present invention;

[0022] Figure 2A flowchart of generating a webpage data file is provided for the embodiment of the present application.

[0023] Figure 3 A flowchart of automatically generating a routing table of a micro-frontend system is provided for the embodiment of the present application.

[0024] Figure 4 A flowchart of on-demand loading of sub-modules is provided for the embodiment of the present application.

[0025] Figure 5 A structural diagram of a page processing apparatus is provided for the embodiment of the present application.

[0026] Figure 6 A structural diagram of an electronic device is provided for the embodiment of the present application.

[0027] Icon: 51-webpage data file request module; 52-target file path searching module; 53-second page loading module; 61-processor; 62-memory; 63-bus; 64-communication interface. DETAILED DESCRIPTION

[0028] In order to make the purpose, technical scheme and advantages of the embodiments of the present application clearer, the technical scheme of the present application will be described clearly and completely below with reference to the drawings. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of protection of the present application.

[0029] In view of the problem that the existing micro-frontend implementation needs to manually maintain a routing table in the front end, resulting in a higher risk of front-end page errors, the present application provides a page processing method, apparatus and electronic device, which can be applied to various application micro-frontend use scenarios. In order to facilitate the understanding of the present embodiment, first, a page processing method disclosed by the present embodiment will be described in detail.

[0030] Referring to Figure 1 , a flowchart of a page processing method is shown, wherein the method is applied to a terminal, the terminal is in communication connection with a preset server, a client of a preset micro-frontend system is running on the terminal, a server of the micro-frontend system is running on the server, and the client of the micro-frontend system includes a main module and at least one sub-module. Figure 1 As can be seen, the method includes the following steps:

[0031] Step S102: When the first page corresponding to the main module is loaded, the web page data file of the micro-front-end system is requested from the server; wherein, the web page data file is generated by the server when monitoring the micro-front-end system to be online, and the web page data file includes the file path of the code file of the main module and the sub-module; the functional entrance of the sub-module is set in the first page.

[0032] Micro-frontends are an architectural design based on single-page applications (SPAs). As enterprise engineering projects (toB projects) grow in size, developing more features and more pages, they become increasingly bloated and difficult to maintain. For example, changing a logo or a small style often requires repackaging the entire project, making maintenance and deployment difficult.

[0033] Therefore, after drawing on the microservice architecture model of the backend, the frontend derived the micro-frontend architecture, converting a single-page application with many functions into a combination of multiple small single-page applications. These small applications often have the characteristics of independent development, independent operation, and independent deployment. In actual operation, a project is divided into a main module and sub-modules (also known as business modules) under the design model of the micro-frontend. The main function of the main module is to combine all the sub-modules to form a complete project. For example, in this embodiment, the first page corresponding to the main module is provided with a function entrance of each sub-module. The user can enter the page of the corresponding sub-module through the function entrance. In this way, the sub-modules are integrated through the main module.

[0034] In this embodiment, the server of the above-mentioned micro-front-end system runs on a server, and when the server detects that the micro-front-end system is online, it automatically generates a web page data file of the micro-front-end system, wherein the web page data file includes the file path of the code file of the main module and the sub-module. Usually, when a micro-front-end system is online, it indicates that the application code of each module of the system is determined and corresponds to a specific version; if any module of the system is updated, it means that another version of the micro-front-end system (that is, the micro-front-end system including the updated module) needs to be put back online. Therefore, when the micro-front-end system is monitored to be online, the web page data file of the micro-front-end system is generated immediately, which can ensure that the web page data file is obtained according to the latest version of the application code of each module in the system, and the code file corresponding to the file path contained in the web page data file is also the latest version.

[0035] Step S104: If a selection command for the submodule is received, the target file path of the code file of the selected submodule is searched from the webpage data file.

[0036] For example, a submodule function entry is provided on the first page corresponding to the main module. Assuming that the function entry is displayed on the first page in the form of a control, when the user triggers the control (click, touch, or long press, etc.), the submodule corresponding to the control is selected. At this time, the terminal receives the selection command for the submodule and searches the target file path of the code file of the selected submodule from the obtained web page data file.

[0037] Taking the "Meituan" app as an example, a Meituan client runs on a terminal, such as a mobile phone. The first page corresponding to the main module is the Meituan homepage, which contains tabs such as food, takeout, hotels, and movies. Each tab corresponds to the functional entry of a submodule. In this way, the main module combines the various submodules to form a micro-frontend system. When a user clicks any tab on the main page, the submodule corresponding to the tab is selected. The mobile terminal receives the selection command for the submodule and then obtains the target file path of the submodule's code file. Here, the target file path is obtained from the pre-acquired web data file of the micro-frontend system (i.e., the Meituan app).

[0038] Step S106: obtaining the code file of the selected submodule through the target file path, and loading the second page corresponding to the submodule according to the code file.

[0039] The file path refers to the location where the file is saved. Thus, based on the target file path found, the corresponding code file, that is, the code file of the selected submodule, can be obtained from the location corresponding to the target file path. Based on the code file of the submodule, the terminal loads the second page corresponding to the submodule. In one possible implementation, the code file may include a web script file and a web style file, wherein the web script file is used for the logical processing of the page, and the web style file is used for the beautification of the page interface.

[0040] Taking the above-mentioned Meituan application as an example, when the user clicks on the "Food" label on the main page, the mobile terminal finds the code file of the module based on the target file path of the "Food" sub-module obtained above, and then loads the page of the "Food" sub-module based on the code file.

[0041] The page processing method provided by this embodiment obtains a pre-generated web page data file from the server when processing a page loading request of a micro-front-end system, so as to determine the file path where the code of the module corresponding to the requested page is located based on the web page data file, and then obtain the code file based on the file path to load the corresponding page; since the web page data file is automatically generated by the server when monitoring the micro-front-end system to be online, it can be ensured that the code files corresponding to each file path in the generated web page data file are the latest version, so that the code files of each module requested by the terminal are also the latest version, thereby loading the latest content. Compared with the method of manually maintaining the routing table at the front end in the prior art, this method can avoid the risk of page loading errors caused by manual maintenance of the routing table, for example, loading outdated pages due to errors in manual modification of the business name or untimely manual maintenance.

[0042] An embodiment of the present invention provides a page processing method. When loading a first page corresponding to a main module, a webpage data file of the micro-frontend system is requested from a server. The webpage data file is generated by the server when monitoring the micro-frontend system to be online, and the webpage data file includes the file paths of the code files of the main module and the sub-module. The first page is provided with a function entry for the sub-module. If a selection command for the sub-module is received, the target file path of the code file of the selected sub-module is searched from the webpage data file. The code file of the selected sub-module is obtained through the target file path, and the second page corresponding to the sub-module is loaded according to the code file. This method can improve the accuracy of page loading on the terminal, avoid the risk of page loading errors caused by manual maintenance of routing tables at the front end, and improve the reliability of the project.

[0043] exist Figure 1 On the basis of the page processing method shown, this embodiment further introduces the specific process of how the server generates the above web page data file.

[0044] like Figure 2 As shown, it is a flow chart of generating a web page data file. Figure 2 It can be seen that the process includes the following steps:

[0045] Step S202: If the micro-frontend system is detected to be online, the code package file of the micro-frontend system is obtained from the specified location; wherein the code package file includes the first code package file of the main module of the micro-frontend system and the second code package file of the sub-module of the micro-frontend system.

[0046] In actual operation, the above-mentioned designated location can be a storage location on the Internet or a storage location on the server.

[0047] Typically, a micro-frontend system's main module and multiple submodules are developed and maintained by multiple developers. For example, a developer develops the code file for a module they're responsible for, such as submodule A, and then stores it in a Git repository. The code files for each module can be stored in a unified, agreed-upon storage location and then packaged. At the agreed-upon system launch time, the server retrieves the corresponding packaged code files from the code storage locations for each module. The main module corresponds to the first packaged code file, and the submodules correspond to the second packaged code file.

[0048] Step S204: traverse the directory of the code package file to obtain the first module identifier of the main module, the first file path of the code of the main module, the second module identifier of the submodule, and the second file path of the code of the submodule.

[0049] In at least one possible implementation, the aforementioned traversal step can be implemented using a pre-set shell script. Specifically, the server uses the shell script to traverse the directories of each code package file, thereby obtaining the first module identifier of the main module and the first file path of the main module's code, as well as the second module identifier of the submodule and the second file path of the submodule's code. It should be noted that a shell script is similar to batch processing under Windows / Dos; it is a program file that pre-places various commands into a file for easy one-time execution.

[0050] Step S206: Generate a webpage data file of the micro front-end system according to the first module identifier, the first file path, the second module identifier and the second file path.

[0051] In this embodiment, the web page data file includes the module identifier of each module and the file path corresponding to the location of the code file of the module. In one possible implementation, the web page data file can be a routing table, and the routing table of the micro front-end system is generated by using the first module identifier and the second module identifier as keys and the corresponding first file path and second file path as key values. Here, the key and the key value correspond to each other. For example, for any sub-module, the second file path (key value) of the location of its code file corresponds to the second module identifier (key) of the sub-module.

[0052] Here, the first and second code package files both include web script files and web style files. That is, for each module of the micro-frontend system, its code files include web script files and web style files. Here, the web script files are js files, and the web style files are CSS files. In addition, the routing table generated based on the above method is in json format.

[0053] See also Figure 3 , which shows a flow chart of automatically generating routing tables for micro front-end systems. Figure 3 In the illustrated embodiment, the micro-frontend system includes three sub-modules: Business A module, Business B module, and Business C module. Developers independently develop each business module and package the code files of the business modules (including web script files and web style files) and store them in an agreed-upon storage location. Taking Business A module as an example, its structure is as follows:

[0054] directory:A

[0055] file:a.css

[0056] a.js

[0057] Among them, "A" is the name of the business module, that is, the second module identifier; "a.css" is the web page style file, and "a.js" is the web page script file.

[0058] When the server detects that the system is online, it automatically obtains the code package file of the micro front-end system from the specified storage location through the shell script, and traverses the package directory of each business module, uses the business name as the key, and writes the web style file (*.css) and web script file (*.js) as the key value into the json file to obtain the routing table of the micro front-end system. Here, Figure 3 As shown in , the resulting routing table format is as follows:

[0059]

[0060] It can be seen that the generated routing table includes the module identifier of each business module and the file path of the corresponding code file.

[0061] In practice, see Figure 4 , which is a flow chart of on-demand loading of sub-modules, wherein the main frame of the micro-front-end system (that is, the first page corresponding to the main module) is displayed on the terminal. When the main frame page is loaded, the terminal requests and obtains the routing table of the front-end system from the server. When the user needs to access a certain business in the micro-front-end system, the file path of the code file of the corresponding business module is obtained based on the routing table, and then the business module is accessed, thereby realizing on-demand loading of different business modules.

[0062] In one scenario, the modules in the micro-frontend system may continue to be updated. For example, a developer updates the code file of a module to a new version. At this time, when the server detects that the code package file of the micro-frontend system has been updated, it regenerates the routing table of the micro-frontend system based on the updated code package file. This ensures that the path to the latest version of the code file of each module in the micro-frontend system is reflected in the routing table, thereby ensuring that the page content loaded by the terminal based on the obtained code file is the latest content.

[0063] The page processing method that the present embodiment provides, the file path after each business module is packaged is organized and output as a routing table by the server through shell script, and then this routing table is requested when the page is loaded, so that the developer only needs to focus on the module for which he is responsible, and does not need to care about the impact brought by the file name change after each packaging, thereby reducing the developer's workload. Meanwhile, for the project leader of the entire R&D project, for the addition and deletion of any business module, the server can respond in seconds, and updates the routing table of the system in real time, thereby ensuring that the page content loaded by the terminal is the latest. In addition, the routing table is automatically generated by the server, which avoids the finiteness constraint (manual maintenance capability has an upper limit) of manually maintaining the routing table, and the mode also does not need to consider the quantity of submodules, supports any increase or reduction of submodules, and all submodule information can be accurately reflected in the routing table, effectively improving the reliability and scalability of the project.

[0064] Corresponding to Figure 1 The page processing method shown in , the embodiment of the present invention also provides a page processing device, such as Figure 5 As shown, it is a structural diagram of a page processing device, wherein the device is applied to a terminal, the terminal is connected to a preset server, a client of a preset micro-frontend system is running on the terminal, and a server of the micro-frontend system is running on the server. The client of the micro-frontend system includes a main module and at least one submodule. Figure 5 It can be seen that the device includes a web page data file request module 51, a target file path search module 52, and a second page loading module 53 connected in sequence, wherein the functions of each module are as follows:

[0065] The webpage data file request module 51 is configured to request the webpage data file of the micro-frontend system from the server when the first page corresponding to the main module is loaded; wherein the webpage data file is generated by the server when the micro-frontend system is detected to be online, and the webpage data file includes the file path of the code file of the main module and the sub-module; the function entry of the sub-module is provided in the first page;

[0066] The target file path search module 52 is used to search the target file path of the code file of the selected submodule from the web page data file if a selection command for the submodule is received;

[0067] The second page loading module 53 is configured to obtain the code file of the selected submodule through the target file path, and load the second page corresponding to the submodule according to the code file.

[0068] In one possible implementation manner, the web page data file is generated by the server in the following manner: if the micro-front-end system is detected to be online, the code package file of the micro-front-end system is obtained from a specified location; wherein the code package file includes a first code package file of the main module of the micro-front-end system and a second code package file of the sub-module of the micro-front-end system; the directory of the code package file is traversed to obtain the first module identifier of the main module, the first file path of the code of the main module, the second module identifier of the sub-module, and the second file path of the code of the sub-module; the web page data file of the micro-front-end system is generated according to the first module identifier, the first file path, the second module identifier and the second file path.

[0069] In another possible implementation, the web page data file is a routing table, and the step of generating the web page data file of the micro front-end system according to the first module identifier, the first file path, the second module identifier and the second file path includes: using the first module identifier and the second module identifier as keys and the corresponding first file path and second file path as key values ​​to generate the routing table of the micro front-end system.

[0070] In another possible embodiment, the step of traversing the directory of the code packaging file to obtain the first module identifier of the main module, the first file path of the code of the main module, and the second module identifier of the sub-module and the second file path of the code of the sub-module includes: traversing the directory of the code packaging file through a preset shell script to obtain the first module identifier of the main module, the first file path of the code of the main module, and the second module identifier of the sub-module and the second file path of the code of the sub-module.

[0071] In another possible implementation, the apparatus further includes a routing table update module configured to regenerate the routing table of the micro front-end system according to the updated code package file if an update of the code package file of the micro front-end system is detected.

[0072] In another possible implementation, both the first code package file and the second code package file include a web page script file and a web page style file.

[0073] In another possible implementation, the web page script file is a js file, and the web page style file is a css file.

[0074] The page processing device provided in the embodiment of the present invention has the same implementation principle and technical effects as those in the aforementioned page processing method embodiment. For the sake of brief description, for matters not mentioned in the embodiment of the page processing device, reference may be made to the corresponding content in the aforementioned page processing method embodiment.

[0075] The embodiment of the present invention further provides an electronic device, such as Figure 6 As shown, it is a structural diagram of the electronic device, wherein the electronic device includes a processor 61 and a memory 62, the memory 62 stores machine executable instructions that can be executed by the processor 61, and the processor 61 executes the machine executable instructions to implement the above-mentioned page processing method.

[0076] exist Figure 6 In the illustrated embodiment, the electronic device further includes a bus 63 and a communication interface 64 , wherein the processor 61 , the communication interface 64 and the memory 62 are connected via the bus.

[0077] The memory 62 may include a high-speed random access memory (RAM) and may also include a non-volatile memory, such as at least one disk storage. The communication connection between the system network element and at least one other network element is achieved through at least one communication interface 64 (which may be wired or wireless), and the Internet, wide area network, local area network, metropolitan area network, etc. may be used. The bus may be an ISA bus, a PCI bus, or an EISA bus. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 6 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or one type of bus.

[0078] Processor 61 may be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above method may be completed by hardware integrated logic circuits or software instructions within processor 61. The processor 61 may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It may implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present invention. A general-purpose processor may be a microprocessor or any conventional processor. The steps of the method disclosed in conjunction with the embodiments of the present invention may be directly executed by a hardware decoding processor, or by a combination of hardware and software modules within the decoding processor. The software modules may be located in storage media well-known in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or the like. The storage medium is located in the memory, and the processor 61 reads the information in the memory 62 and completes the steps of the page processing method of the above embodiment in combination with its hardware.

[0079] An embodiment of the present invention further provides a machine-readable storage medium, which stores machine-executable instructions. When the machine-executable instructions are called and executed by a processor, the machine-executable instructions prompt the processor to implement the above-mentioned page processing method. The specific implementation can be found in the above-mentioned method embodiment and will not be repeated here.

[0080] The page processing method, page processing device, and computer program product of an electronic device provided in the embodiments of the present invention include a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the page processing method described in the previous method embodiments. The specific implementation can be found in the method embodiments and will not be repeated here.

[0081] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium that is executable by a processor. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0082] In addition, in the description of the embodiments of the present invention, unless otherwise expressly specified or limited, the terms "mounted," "connected," and "connected" should be understood in a broad sense. For example, they may refer to fixed connections, detachable connections, or integral connections; they may refer to mechanical connections or electrical connections; they may refer to direct connections or indirect connections through an intermediate medium; and they may refer to internal communication between two components. Those skilled in the art will understand the specific meanings of the above terms in the present invention based on the specific circumstances.

[0083] In the description of the present invention, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicating orientations or positional relationships, are based on the orientations or positional relationships shown in the accompanying drawings and are intended solely to facilitate and simplify the description of the present invention. They are not intended to indicate or imply that the devices or components referred to must have, be constructed, or operate in a specific orientation, and therefore should not be construed as limitations on the present invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0084] Finally, it should be noted that the above-described embodiments are only specific implementations of the present invention, which are used to illustrate the technical solutions of the present invention, rather than to limit them. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the above-described embodiments, those skilled in the art should understand that any person skilled in the art can modify or easily conceive of changes to the technical solutions described in the above-described embodiments within the technical scope disclosed by the present invention, or replace some of the technical features therein with equivalents. Such modifications, changes, or replacements do not deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should be included in the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be based on the scope of protection of the claims.

Claims

1. A page processing method, characterized in that: Applied to a terminal, the terminal is communicatively connected to a preset server, a client of a preset micro-frontend system runs on the terminal, a server of the micro-frontend system runs on the server, and the client of the micro-frontend system includes a main module and at least one sub-module; The method comprises: When the first page corresponding to the main module is loaded, a webpage data file of the micro-frontend system is requested from the server; wherein the webpage data file is generated by the server when monitoring the micro-frontend system to be online, and the webpage data file includes the file path of the code file of the main module and the sub-module; the first page is provided with a function entry of the sub-module; If a selection command for the submodule is received, searching the webpage data file for a target file path of a code file of the selected submodule; Obtaining the code file of the selected submodule through the target file path, so as to load the second page corresponding to the submodule according to the code file; The web page data file is generated by the server in the following manner: if the micro-front-end system is detected to be online, the code packaging file of the micro-front-end system is obtained from a specified location; wherein, the code packaging file includes a first code packaging file of the main module of the micro-front-end system, and a second code packaging file of the sub-module of the micro-front-end system; traverse the directory of the code packaging file to obtain the first module identifier of the main module, the first file path of the code of the main module, and the second module identifier of the sub-module, and the second file path of the code of the sub-module; generate the web page data file of the micro-front-end system according to the first module identifier, the first file path, the second module identifier and the second file path.

2. The method according to claim 1, characterized in that The webpage data file is a routing table, and the step of generating the webpage data file of the micro front-end system according to the first module identifier, the first file path, the second module identifier, and the second file path includes: A routing table of the micro front-end system is generated using the first module identifier and the second module identifier as keys and the corresponding first file path and the second file path as key values.

3. The method according to claim 1, characterized in that The step of traversing the directory of the code packaging file to obtain the first module identifier of the main module, the first file path of the code of the main module, the second module identifier of the submodule, and the second file path of the code of the submodule includes: The directory of the code packaging file is traversed through a preset shell script to obtain the first module identifier of the main module, the first file path of the code of the main module, the second module identifier of the submodule, and the second file path of the code of the submodule.

4. The method according to claim 1, wherein The method further comprises: If it is detected that the code packaging file of the micro front-end system is updated, the routing table of the micro front-end system is regenerated according to the updated code packaging file.

5. The method according to claim 1, wherein The first code package file and the second code package file both include a web page script file and a web page style file.

6. The method according to claim 5, characterized in that The web page script file is a js file, and the web page style file is a css file.

7. A page processing device, characterized in that: Applied to a terminal, the terminal is communicatively connected to a preset server, a client of a preset micro-frontend system runs on the terminal, a server of the micro-frontend system runs on the server, and the client of the micro-frontend system includes a main module and at least one sub-module; The device comprises: a web page data file request module, configured to request the web page data file of the micro front-end system from the server when loading the first page corresponding to the main module; wherein the web page data file is generated by the server when monitoring the micro front-end system to be online, and includes the file paths of the code files of the main module and the sub-module; and the function entry of the sub-module is provided in the first page; a target file path search module, configured to search the target file path of the code file of the selected submodule from the webpage data file if a selection command for the submodule is received; A second page loading module is used to obtain the code file of the selected submodule through the target file path, so as to load the second page corresponding to the submodule according to the code file; The web page data file is generated by the server in the following manner: if the micro-front-end system is detected to be online, the code packaging file of the micro-front-end system is obtained from a specified location; wherein, the code packaging file includes a first code packaging file of the main module of the micro-front-end system, and a second code packaging file of the sub-module of the micro-front-end system; traverse the directory of the code packaging file to obtain the first module identifier of the main module, the first file path of the code of the main module, and the second module identifier of the sub-module, and the second file path of the code of the sub-module; generate the web page data file of the micro-front-end system according to the first module identifier, the first file path, the second module identifier and the second file path.

8. An electronic device, characterized in that: The electronic device includes a processor and a memory, wherein the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the page processing method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer-executable instructions. When the computer-executable instructions are called and executed by a processor, the computer-executable instructions prompt the processor to implement the page processing method according to any one of claims 1 to 6.

Images