A method for realizing compatibility between a unified front-end application foreground version and a background multi-version

Abstract

The application discloses a method for realizing unified front-end application foreground version and multi-version background, which comprises the following steps: a main application receives a user access request and puts user information into a cache of a browser; a sub-application acquires the user information in the cache, determines position information in the user information, and calls a background interface corresponding to the position to acquire a background version and a corresponding version number; the sub-application generates a route according to the version number, acquires a front-end page under a corresponding version file path, and displays the front-end page; and the front-end version of the sub-application is the latest version.

Description

Technical Field

[0001] This invention relates to the field of micro-frontends, and more particularly to a method for a micro-frontend sub-application with a unified front-end version that is compatible with multiple back-end versions. Background Technology

[0002] Micro-frontends are a technical approach and strategy for multiple teams to collaboratively build modern web applications by independently releasing features. The main application does not restrict the technology stack of the sub-applications it integrates, and the sub-applications have complete autonomy. The integrated sub-applications are also independent of each other, with no direct or indirect coupling in terms of technology stack, dependencies, or implementation. The ability to deploy independently is crucial in the micro-frontend architecture.

[0003] However, in the sub-applications, the front end is deployed centrally and uniformly, while the back end is deployed in different provinces. The software versions of each back end are controlled and upgraded by the respective provincial companies, which may lead to inconsistencies between the front end and the back end versions.

[0004] One existing solution to this problem is to deploy the sub-application frontend as multiple applications based on their versions. This requires the main application to retrieve the version information from the sub-application's backend to determine which sub-application to access. This solution contradicts the original intention of decoupling and independently developing the main application and its sub-applications. For example, if user information is also a sub-application in the user system and the payment system is another sub-application, after a user logs in, the main application needs to first retrieve the user's and province's version information from the user system's payment system, and then use this information to route access to the corresponding version of the payment sub-application. This results in a tightly coupled development of three systems, and the work related to multi-version deployment, upgrades, and maintenance becomes much more complex. Summary of the Invention

[0005] This invention provides a method for a unified front-end version of a micro-front-end sub-application that is compatible with multiple back-end versions, solving the problems of sub-applications being unable to deploy independently and the high coupling between the main application and sub-applications.

[0006] A method for ensuring compatibility between a unified front-end version and multiple back-end versions in a micro-front-end application includes:

[0007] The main application receives user access requests and stores user information in the browser's cache;

[0008] The sub-application retrieves user information from the cache, determines the location information in the user information, and calls the corresponding background interface to obtain the background version and the corresponding version number based on the location information.

[0009] The sub-application generates a route based on the version number and retrieves the front-end page under the corresponding version file path for display.

[0010] The front-end version of the sub-application is the latest version.

[0011] In one embodiment of the present invention, the method further includes: after the latest front-end version is developed, creating folders corresponding to the front-end pages of all front-end versions, and placing the files related to each front-end page into the corresponding folders; wherein, each front-end page of a front-end version is a front-end page version, and all front-end versions include all historical front-end versions and the latest front-end version; after completing the back-end version corresponding to the front-end page version, configuring the version number corresponding to the back-end version.

[0012] In one embodiment of the present invention, the method of calling the corresponding background interface to obtain the version number based on the location information specifically includes: when a user logs in to the page for the first time, the main application calls the user-related information interface to obtain the user's province information and stores it in the cache; the sub-application calls the corresponding background interface based on the user's location information and obtains the corresponding version number based on the user's province information.

[0013] In one embodiment of the present invention, the main application puts user information into the browser cache, and the sub-application retrieves the user information from the cache. Specifically, the main application encrypts the user information into a token string and puts it into the browser cookie cache. When the sub-application enters the browser, it first retrieves the token from the cache, decrypts it, and obtains the user's code and location information.

[0014] In one embodiment of the present invention, the step of creating folders corresponding to the front-end pages of all front-end versions and placing the files related to each front-end page into the corresponding folders specifically includes: after the development and testing of each front-end page version is completed, creating a folder corresponding to the front-end page version under the views file path; and copying the files related to the front-end page version and placing them into the folder.

[0015] In one embodiment of the present invention, the method further includes: determining whether a version number has been obtained; if obtained, adding the corresponding version number in the middle of the access path to generate a corresponding route; if not obtained, directly accessing the latest folder under the views folder.

[0016] In one embodiment of the present invention, the method further includes: adding relevant statements to the upgrade script to update the version number when a background version is released.

[0017] A device for a micro-frontend application with a unified frontend version compatible with multiple backend versions includes:

[0018] The main application module is used to receive user access requests and store user information in the browser's cache.

[0019] The sub-application module is used to obtain user information from the cache, determine the location information in the user information, call the corresponding backend interface to obtain the backend version and the corresponding version number based on the location information, generate a route based on the version number, and obtain the frontend page under the corresponding version file path for display; wherein, the frontend version of the sub-application is the latest version.

[0020] A device that provides a unified front-end version of a micro-front-end application and is compatible with multiple back-end versions includes:

[0021] At least one processor; and,

[0022] The memory is connected to the at least one processor via a bus; wherein,

[0023] The memory stores instructions executable by the at least one processor, which are executed to perform:

[0024] The main application receives user access requests and stores user information in the browser's cache;

[0025] The sub-application retrieves user information from the cache, determines the location information in the user information, and calls the corresponding background interface to obtain the background version and the corresponding version number based on the location information.

[0026] The sub-application generates a route based on the version number and retrieves the front-end page under the corresponding version file path for display.

[0027] The front-end version of the sub-application is the latest version.

[0028] A non-volatile storage medium storing computer-executable instructions, which are executed by a processor to perform the following steps:

[0029] The main application receives user access requests and stores user information in the browser's cache;

[0030] The sub-application retrieves user information from the cache, determines the location information in the user information, and calls the corresponding background interface to obtain the background version and the corresponding version number based on the location information.

[0031] The sub-application generates a route based on the version number and retrieves the front-end page under the corresponding version file path for display.

[0032] The front-end version of the sub-application is the latest version.

[0033] This invention provides a method for a micro-frontend sub-application with a unified frontend version that is compatible with multiple backend versions, which has at least the following advantages: the sub-application only needs to be configured with the main application to call the address, without the main application needing to add configuration to adapt to the sub-application version. This enables the sub-application to control the compatibility between the unified frontend version and multiple backend versions on its own, and the deployment is simple, achieving complete decoupling from the main application. Attached Figure Description

[0034] The accompanying drawings, which are included to provide a further understanding of the invention and form part of this invention, illustrate exemplary embodiments of the invention and are used to explain the invention, but do not constitute an undue limitation of the invention. In the drawings:

[0035] Figure 1 This is a schematic diagram illustrating the mismatch between the front-end version and the back-end versions of different provinces, provided as an embodiment of the present invention.

[0036] Figure 2 This is a schematic diagram illustrating the steps of a method for a micro-front-end application to be compatible with multiple back-end versions, provided by an embodiment of the present invention.

[0037] Figure 3 A schematic diagram of a device for a micro front-end application with a unified front-end version compatible with multiple back-end versions, provided in an embodiment of the present invention;

[0038] Figure 4 This is a schematic diagram of a device for a micro front-end application with a unified front-end version and compatible with multiple back-end versions, provided as an embodiment of the present invention. Detailed Implementation

[0039] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be described clearly and completely below in conjunction with specific embodiments. Obviously, the described embodiments are only a part of the embodiments of this invention, and not all of them. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0040] It should be noted that those skilled in the art will understand, explicitly and implicitly, that the embodiments described in this invention can be combined with other embodiments without conflict. Unless otherwise defined, the technical or scientific terms used in this invention should be understood in their ordinary sense by those skilled in the art. The terms "a," "an," "an," "the," etc., used in this invention do not indicate quantity limitation and can represent singular or plural. The terms "comprising," "including," "having," and any variations thereof used in this invention are intended to cover non-exclusive inclusion; the terms "first," "second," "third," etc., used in this invention are merely to distinguish similar objects and do not represent a specific ordering of objects.

[0041] To address the problem raised in this invention, one solution involves sub-applications handling compatibility issues for each interface during front-end and back-end interactions. New versions modifying these interfaces must consider potential problems in previous versions, achieving compatibility by adding conditional logic branches across multiple versions. This approach is complex to develop, requires testing across all versions, and is prone to errors. The core improvement of this invention lies in the fact that version issues are resolved independently by the sub-application itself. Furthermore, this invention is simpler to develop and easier to test than the aforementioned solutions. A detailed explanation follows.

[0042] The business system is a nationwide system, with subsidiaries operating and maintaining it in different provinces. To adapt to the different business needs of each province, the backend versions of each sub-application differ in each province. Sub-applications are divided into frontend and backend versions, and upgrades to the frontend and backend versions are often not synchronized. Figure 1 As shown, the front-end version of the sub-application is the latest version in all provinces. However, the back-end version in some provinces cannot match the latest front-end version before it is upgraded. Therefore, in order to ensure compatibility between the front-end version and the back-end version, it is necessary to route to the front-end page version corresponding to the back-end version through the version number of the back-end version, so as to achieve compatibility between the front-end version and different back-end versions.

[0043] For a sub-application that requires a backend version to modify its frontend page, the frontend page must have a corresponding version to be upgraded synchronously. The frontend version upgrade time must be earlier than the time when the first province upgrades its backend version. The frontend routing is dynamically configured to access different version pages to ensure backward compatibility with different backend versions.

[0044] In one embodiment of the present invention, after the latest front-end version is developed, folders corresponding to the front-end pages of all front-end versions are created, and files related to each front-end page are placed in the corresponding folders; wherein, each front-end page of a front-end version is a front-end page version, and all front-end versions include all historical front-end versions and the latest front-end version; after the back-end version corresponding to the front-end page version is completed, the version number corresponding to the back-end version is configured.

[0045] Specifically, taking the Vue framework as an example, all front-end page code for each front-end version is stored in the views file path, and page development is still carried out in the views file path. After the development and testing of each front-end page version is completed, a folder corresponding to the front-end page version is created, and the corresponding front-end page files are copied into that folder.

[0046] For example, after completing the development and testing of the old architecture 1470 official version, create a folder named views / 1470C00, copy all page code, release the test environment, select some test cases to verify the latest functions, and check that there are no differences between the version file and the outer file.

[0047] Specifically, after development and testing are completed, the backend version will be configured with the latest version number, and the interface will return the latest version number corresponding to the province of the calling user. Whenever a corresponding modified backend version exists, the relevant statements will be added to the upgrade script to update the version number when the backend version is released.

[0048] This approach minimizes development and testing difficulty. Developing each new front-end version eliminates the need to consider compatibility with previous back-end versions. Simply create a version folder and copy the page code from all front-end versions to achieve compatibility with previous back-end versions.

[0049] Figure 2 A schematic diagram illustrating the steps of a method for a micro-frontend application with a unified frontend version compatible with multiple backend versions, provided by an embodiment of the present invention, may include the following steps:

[0050] S210: The main application receives the user's access request and puts the user information into the browser's cache.

[0051] Specifically, when a user accesses the business system, the main application receives the user's login information, encrypts the user information into a token string, and puts it into the browser's cookie cache for use by sub-applications. When a sub-application enters the system, it first retrieves the token from the cache, decrypts it, and obtains the user's code and location information.

[0052] S220: The sub-application retrieves user information from the cache, determines the location information in the user information, and calls the corresponding backend interface to obtain the backend version and the corresponding version number based on the location information.

[0053] In one embodiment of the present invention, the version number is obtained by calling the corresponding location's backend interface based on location information. Specifically, this includes: when a user logs into the page for the first time, the main application calls the user-related information interface to obtain the user's province information and stores it in the cache; the sub-application calls the corresponding location's backend interface based on the user's location information and obtains the corresponding version number based on the user's province information. The naming rule for the version number is: regular version number + C00, patch version number + B0x. Version number naming principles: 1. Each version number uniquely represents this version and is not duplicated with other version numbers; 2. The named version number must be consistent with the name configured in the corresponding backend version database and the name of the folder created for the corresponding version on the page.

[0054] Specifically, when a user logs in for the first time, the main application encrypts the user information into a token string and stores it in the browser's cookie cache. The sub-application independently calls the corresponding backend interface based on the user's province information to obtain the relevant backend version and version number for that province. Based on the version number, it retrieves the corresponding frontend page version. When the user refreshes the page, the token still exists in the browser's cached cookie for the main application, so it doesn't call the interface again. The sub-application can directly retrieve the user information from the cache.

[0055] S230: The sub-application generates a route based on the version number and retrieves the front-end page under the corresponding version file path for display.

[0056] In one embodiment of the present invention, folders corresponding to the front-end pages of all front-end versions are created, and files related to each front-end page are placed in the corresponding folders. Specifically, this includes: after the development and testing of each front-end page version is completed, a folder corresponding to the front-end page version is created under the views file path; and the files related to the front-end page version are copied and placed into the folder.

[0057] In one embodiment of the present invention, it is determined whether the version number has been obtained. If it has been obtained, the corresponding version number is added to the middle of the access path to generate the corresponding route; if it has not been obtained, the latest folder under the views folder is accessed directly.

[0058] Specifically, the method for implementing dynamic routing configuration on the front end is as follows:

[0059] 1. In permission.js, when a user logs in for the first time or refreshes the page, the sub-application calls the corresponding backend interface of the province where the user is located to obtain the version number.

[0060] 2. The generated routes are dynamically generated by passing the obtained version number to the generateRoutes method.

[0061] 3. In the route configuration method, if the version number exists, the configured access path will add the version number to the next level below the views folder; otherwise, it will directly access the latest page in the views folder.

[0062] By using the above solution, sub-applications can achieve self-control, allowing users from different provinces to access files corresponding to their respective province's version even when browsing the same address path. The input and output parameters of the associated API calls can also be directly matched with the backend version. To control application size, when all backend versions are higher than a certain historical version, the folders of the frontend page versions that cannot be matched can be deleted.

[0063] The above describes a method for a micro-frontend application with a unified frontend version compatible with multiple backend versions, provided by an embodiment of the present invention. Based on the same inventive concept, this embodiment also provides a corresponding device for a micro-frontend application with a unified frontend version compatible with multiple backend versions, such as... Figure 3 As shown.

[0064] The main application module 302 is used to receive user access requests and put user information into the browser cache; the sub-application module 304 is used to obtain user information from the cache, determine the location information in the user information, call the corresponding backend interface to obtain the backend version and the corresponding version number based on the location information; generate a route based on the version number, and obtain the frontend page under the corresponding version file path for display; wherein, the frontend version of the sub-application is the latest version.

[0065] This invention also provides a corresponding device for a micro-front-end application with a unified front-end version compatible with multiple back-end versions, such as... Figure 4 As shown, it includes:

[0066] The system includes at least one processor 402, a communication interface 404, a memory 406, and a communication bus 408; wherein the processor 402, the communication interface 404, and the memory 406 communicate with each other through the communication bus 408; the processor 402 can call logical instructions stored in the memory 406 to cause at least one processor 402 to execute:

[0067] The main application receives user access requests and stores user information in the browser's cache. The sub-application retrieves the user information from the cache, determines the location information within the user information, and calls the corresponding backend interface to obtain the backend version and the corresponding version number. The sub-application generates routes based on the version number and retrieves the frontend page under the corresponding version file path for display. The frontend version of the sub-application is the latest version.

[0068] Based on the same idea, some embodiments of the present invention also provide media corresponding to the above methods.

[0069] Some embodiments of the present invention provide a storage medium storing computer-executable instructions, which are executed by a processor to perform the following steps:

[0070] The main application receives user access requests and stores user information in the browser's cache. The sub-application retrieves the user information from the cache, determines the location information within the user information, and calls the corresponding backend interface to obtain the backend version and the corresponding version number. The sub-application generates routes based on the version number and retrieves the frontend page under the corresponding version file path for display. The frontend version of the sub-application is the latest version.

[0071] The various embodiments in this invention are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device and medium embodiments are relatively simple in description because they are fundamentally similar to the method embodiments; relevant parts can be referred to the descriptions in the method embodiments.

[0072] The devices, media, and methods provided in the embodiments of the present invention are one-to-one correspondences. Therefore, the devices and media also have similar beneficial technical effects as their corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0073] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process method or product that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process method or product. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process method or product that includes that element.

[0074] The above are merely embodiments of the present invention and are not intended to limit the invention. Although the present invention has been described in detail above with general descriptions and specific embodiments, modifications or improvements can be made to it, which will be obvious to those skilled in the art. Therefore, all such modifications or improvements made without departing from the spirit of the present invention fall within the scope of protection claimed by the present invention.

Claims

1. A method for a micro-frontend application with a unified frontend version compatible with multiple backend versions, characterized in that, include: The main application receives user access requests and stores user information in the browser's cache; The sub-application retrieves user information from the cache, determines the location information in the user information, and calls the corresponding background interface to obtain the background version and the corresponding version number based on the location information. The sub-application generates a route based on the version number and retrieves the front-end page under the corresponding version file path for display. The front-end version of the sub-application is the latest front-end version; After the latest front-end version is developed, create folders corresponding to the front-end pages of all front-end versions, and put the files related to each front-end page into the corresponding folders; where each front-end page of a front-end version is a front-end page version, and all front-end versions include all historical front-end versions and the latest front-end version; after completing the back-end version corresponding to the front-end page version, configure the version number corresponding to the back-end version; The process involves calling the corresponding backend interface to obtain the version number based on the location information, including: when a user logs in for the first time, the main application calls the user-related information interface to obtain the user's province information and stores it in the cache; the sub-application calls the corresponding backend interface based on the user's location information to obtain the corresponding version number based on the user's province information; it then determines whether the version number has been obtained. If it has, the corresponding version number is added to the middle of the access path to generate the corresponding route; if it has not been obtained, the latest folder under the views folder is accessed directly.

2. The method according to claim 1, characterized in that, The main application stores user information in the browser's cache, and the sub-application retrieves the user information from the cache, specifically including: The main application encrypts user information into a token string and stores it in the browser's cookie cache. When the child application enters, it first retrieves the token from the cache, decrypts it, and obtains the user's code and location information.

3. The method according to claim 1, characterized in that, The step of creating folders corresponding to the front-end pages of all front-end versions involves placing the files related to each front-end page into the corresponding folders. Specifically, this includes: After each front-end page version has been developed and tested, create a folder corresponding to that front-end page version under the views file path; Copy the files related to the front-end page version and place them in the folder.

4. The method according to claim 1, characterized in that, The method further includes: When a version is released in the background, add the relevant statements to the upgrade script to update the version number.

5. A device for a micro-front-end application with a unified front-end version compatible with multiple back-end versions, characterized in that, include: The main application module is used to receive user access requests and store user information in the browser's cache. The sub-application module is used to obtain user information from the cache, determine the location information in the user information, call the corresponding backend interface to obtain the backend version and the corresponding version number based on the location information, generate a route based on the version number, and obtain the frontend page under the corresponding version file path for display; wherein, the frontend version of the sub-application is the latest version; After the latest front-end version is developed, create folders corresponding to the front-end pages of all front-end versions, and put the files related to each front-end page into the corresponding folders; where each front-end page of a front-end version is a front-end page version, and all front-end versions include all historical front-end versions and the latest front-end version; after completing the back-end version corresponding to the front-end page version, configure the version number corresponding to the back-end version; The process of obtaining the version number by calling the corresponding backend interface based on the location information includes: when a user logs in to the page for the first time, the main application calls the user-related information interface to obtain the user's province information and stores it in the cache; the sub-application calls the corresponding backend interface based on the user's location information to obtain the corresponding version number based on the user's province information; it then determines whether the version number has been obtained. If it has been obtained, the corresponding version number is added to the middle of the access path to generate the corresponding route; if it has not been obtained, the latest folder under the views folder is accessed directly.

6. A device for micro-front-end applications with a unified front-end version compatible with multiple back-end versions, characterized in that, include: At least one processor; as well as, The memory is connected to the at least one processor via a bus; wherein, The memory stores instructions executable by the at least one processor, which are executed to perform: The main application receives user access requests and stores user information in the browser's cache; The sub-application retrieves user information from the cache, determines the location information in the user information, and calls the corresponding background interface to obtain the background version and the corresponding version number based on the location information. The sub-application generates a route based on the version number and retrieves the front-end page under the corresponding version file path for display. The front-end version of the sub-application is the latest version; After the latest front-end version is developed, create folders corresponding to the front-end pages of all front-end versions, and put the files related to each front-end page into the corresponding folders; where each front-end page of a front-end version is a front-end page version, and all front-end versions include all historical front-end versions and the latest front-end version; after completing the back-end version corresponding to the front-end page version, configure the version number corresponding to the back-end version; The process involves calling the corresponding backend interface to obtain the version number based on the location information, including: when a user logs in for the first time, the main application calls the user-related information interface to obtain the user's province information and stores it in the cache; the sub-application calls the corresponding backend interface based on the user's location information to obtain the corresponding version number based on the user's province information; it then determines whether the version number has been obtained. If it has, the corresponding version number is added to the middle of the access path to generate the corresponding route; if it has not been obtained, the latest folder under the views folder is accessed directly.

7. A non-volatile storage medium storing computer-executable instructions, characterized in that, The computer-executable instructions are executed by the processor to perform the following steps: The main application receives user access requests and stores user information in the browser's cache; The sub-application retrieves user information from the cache, determines the location information in the user information, and calls the corresponding background interface to obtain the background version and the corresponding version number based on the location information. The sub-application generates a route based on the version number and retrieves the front-end page under the corresponding version file path for display. The front-end version of the sub-application is the latest version; After the latest front-end version is developed, create folders corresponding to the front-end pages of all front-end versions, and put the files related to each front-end page into the corresponding folders; where each front-end page of a front-end version is a front-end page version, and all front-end versions include all historical front-end versions and the latest front-end version; after completing the back-end version corresponding to the front-end page version, configure the version number corresponding to the back-end version; The process involves calling the corresponding backend interface to obtain the version number based on the location information, including: when a user logs in for the first time, the main application calls the user-related information interface to obtain the user's province information and stores it in the cache; the sub-application calls the corresponding backend interface based on the user's location information to obtain the corresponding version number based on the user's province information; it then determines whether the version number has been obtained. If it has, the corresponding version number is added to the middle of the access path to generate the corresponding route; if it has not been obtained, the latest folder under the views folder is accessed directly.

Images