CN115757268B

CN115757268B - Method and equipment for supporting low-code quick docking of various operating systems by unified portal

Info

Publication number: CN115757268B
Application number: CN202211476997.9A
Authority: CN
Inventors: 李朔; 何新宇
Original assignee: Peoples Insurance Company of China
Current assignee: Peoples Insurance Company of China
Priority date: 2022-11-23
Filing date: 2022-11-23
Publication date: 2025-01-14
Anticipated expiration: 2042-11-23
Also published as: CN115757268A

Abstract

The invention discloses a method and equipment for supporting low-code quick docking of various operating systems by a unified portal, wherein the method comprises the steps of configuring each sub-application, and matching corresponding pages of each sub-application according to the configuration of the sub-application through a main application; the method comprises the steps of adding monitoring events of sub-applications and corresponding pages through a main application, isolating JavaScript patterns of the sub-applications, displaying a loading page after the dynamic pages are successfully matched according to sub-application routes and the JavaScript patterns, calling sub-application resources, closing the loading page if the sub-application resources are successfully called, and displaying an abnormal interface if the sub-application resources are failed to call.

Description

Method and equipment for supporting low-code quick docking of various operating systems by unified portal

Technical Field

The invention relates to the field of front-end architecture, in particular to a method and equipment for supporting low-code quick docking of various operating systems by a unified portal.

Background

Unified job portals are simply referred to as unified portals. The login and interface styles of all application systems are unified, and the scheme of the existing integrated unified portal is as follows:

1. integrating public components such as login, menu bar, top bar and the like of a portal;

2. through the configuration of the load-balanced nginx proxy, the ginx is used for proxy applications, and the same domain name, the same port and the same IP are realized.

However, the existing solutions have the following drawbacks:

1. Each docking application needs to refer to the component codes provided by the unified portal in the codes and perform adaptation adjustment, so as to dock components such as login, menu bar, top bar and the like; the integrated code has low utilization rate, and the problem of pattern conflict needs to be solved in the pattern.

2. In the existing integration scheme, all application developers cannot integrate in a local environment, and can succeed only in a test environment, so that the problem is not easy to check, and the joint debugging cost is high.

3. Only vue frames are supported and the assembly does not correspond to other frames.

Disclosure of Invention

The invention provides a method and equipment for supporting low-code quick docking of various operating systems by a unified portal, which solve the technical problem of the.

A method for supporting low-code quick docking of various operating systems by a unified portal comprises the following steps:

configuring each sub-application, and matching corresponding pages through the main application according to the configuration of the sub-application;

adding a monitoring event to the sub-application and the page corresponding to the sub-application through the main application;

Carrying out isolation processing on JavaScript patterns of the sub-applications;

And displaying a loading page after the dynamic page is successfully matched according to the sub-application route and the JavaScript style, calling sub-application resources, closing the loading page if the sub-application resources are successfully called, and displaying an abnormal interface if the sub-application resources are failed to call.

In one embodiment of the present invention, the configuring each sub-application specifically includes configuring forwarding of each sub-application through a configurable logic module clb, and synchronously adjusting route configuration of the sub-application, performing independent processing on authority of the sub-application route through a main application according to a page corresponding to the sub-application route matching, performing independent processing on related resources of the main application, and performing skip-mode rewriting on route hops of the micro front end framework qiankun after performing independent processing on the authority of the sub-application route.

In one embodiment of the invention, the adding of the monitoring event to the sub-application and the page corresponding to the sub-application through the main application specifically comprises adding a registration rule data format initiated by the main application through the main application and transmitting registered data to the sub-application, and adding anomaly monitoring to the global through the main application to monitor the anomaly condition in the butt joint process, the call service process or the page loading process.

In one embodiment of the invention, the isolation processing of the JavaScript style of each sub-application specifically comprises adding the original style isolation configuration on the basis of qiankun, and adding a unique identifier and style region setting for each sub-application style.

In one embodiment of the invention, the method further comprises the steps of obtaining the resource address corresponding to the sub application of the sub application in the main application configuration table, obtaining the resource according to the resource address, and judging whether the resource information is correct according to the resource format of the resource so as to ensure that the file is forwarded correctly.

In one embodiment of the invention, each sub-application is configured, which comprises the steps of adjusting program entry files of the sub-application, adding public-path.js files of public paths js under a source code src directory, judging whether the sub-application is qiankun butt-jointed or not, if yes, assigning a base uniform resource locator (baseURL) of the sub-application to path paths of packaged webpack files.

In one embodiment of the invention, the adjustment of the program entry file of the sub-application specifically comprises obtaining the container field data in the main application props by qiankun mounting an initialization function, re-copying a copy of the route data, assigning the route data to the route by defining vue instance, and binding the vue instance to the node.

In one embodiment of the invention, each sub-application is configured, and the method specifically comprises the steps of configuring a domain allowing cross-domain, a method allowing cross-domain execution and header information allowing cross-domain setting for a foreground environment agent.

The unified portal supports the low-code rapid docking of various types of operating system equipment, including:

at least one processor, and

A memory communicatively coupled to the at least one processor via a bus, wherein,

The memory stores instructions executable by the at least one processor to implement:

A non-volatile storage medium storing computer executable instructions for execution by a processor to perform the steps of:

The invention provides a method and equipment for supporting low-code quick docking of various operating systems by a unified portal, which at least comprise the following beneficial effects:

1. The method and the device greatly save the workload of the sub-application, wherein the existing docking scheme is relatively complex for the code use of the sub-application developer, is not easy to understand, has large code quantity, needs multiple times of communication between applications, has higher joint debugging cost, is easy to understand by using the qiankun configuration scheme, has very simple and easy configuration content, and does not need to find the architecture for Nginx configuration.

2. The method solves the problem of forwarding abnormality caused by packaging configuration errors, the existing docking scheme deployment needs to consider the uncomfortableness of the packaging configuration of the main application and the sub-application, and the packaging problem can not occur any more by using the qiankun configuration scheme, so long as the sub-application can be normally started on own service and has no code abnormality, the sub-application can be normally called.

3. The problem of page style compatibility is solved, the existing docking scheme can relate to code transformation of the sub-application, style conflict can be caused in the component referencing process, original layout of the referencing portal component can be needed to be transformed, for example, the head requirement needs to be fixed at the top, the sub-application is generally needed to adjust the layout by itself, and the sub-application only needs to initialize and package configuration by using the qiankun configuration scheme, so that page style conflict can not be caused.

4. The frequent version process of the main application is saved, the main application is matched with the sub-application to carry out upgrading release in the existing docking scheme, and the qiankun configuration scheme only needs personalized configuration.

5. Rewriting the jump mode provided by qiankun to solve the forwarding problem between sub-applications;

6. The qiankun technology is optimized, and the problem that the resource forwarding is unsuccessful is solved.

Drawings

The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the invention and do not constitute a limitation on the invention. In the drawings:

FIG. 1 is a schematic diagram of method steps for supporting low-code quick docking of various operating systems by a unified portal provided by an embodiment of the present invention;

FIG. 2 is a schematic diagram of a configuration function design according to an embodiment of the present invention;

FIG. 3 is a reference diagram of an entry code of an adjustment program according to an embodiment of the present invention;

FIG. 4 is a code reference diagram of adding public-path. Js under the src directory provided by the embodiment of the present invention;

FIG. 5 is a reference diagram of a vue.config.js configuration code provided by an embodiment of the present invention;

FIG. 6 is a reference diagram of a vue.config.js configuration code provided by an embodiment of the present invention;

FIG. 7 is a reference diagram of foreground environment agent configuration codes according to an embodiment of the present invention;

FIG. 8 is a schematic diagram of a system case according to an embodiment of the present invention;

FIG. 9 is a schematic diagram of a device for supporting low-code quick interfacing with various operating systems by a unified portal provided by an embodiment of the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be clearly and completely described in connection with the following specific embodiments of the present invention. It will be apparent that the described embodiments are only some, but not all, embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

It should be noted that those skilled in the art explicitly and implicitly understand that the described embodiments of the invention can be combined with other embodiments without conflict. Unless defined otherwise, technical or scientific terms used herein should be given the ordinary meaning as understood by one of ordinary skill in the art to which this invention belongs. The terms "a," "an," "the," and similar referents in the context of the invention are not to be construed as limiting the quantity, but rather as singular or plural. The terms "comprising," "including," "having," and any variations thereof, are intended to cover a non-exclusive inclusion, and the terms "first," "second," "third," etc. as used herein, are merely distinguishing between similar objects and not representing a particular ordering of objects.

The invention provides a method and equipment for supporting low-code quick docking of various operating systems by a unified portal. The method comprises the steps of disassembling a megastone application into a plurality of autonomous loosely coupled micro-applications, utilizing a front-end plug-in unit to combine with a vue-router middleware, realizing the technology of supporting quick butt joint of various operating systems with high-adaptation of low code quantity by a sub-application configuration integration mode, adding a filter layer to solve the problem that qiankun is unsuccessful in forwarding individual files, and rewriting a jump mode routing rule provided by qiankun to solve the problem of network protocol conflict. The following is a detailed description.

Fig. 1 is a schematic diagram of steps of a method for supporting low-code quick docking of various operating systems by a unified portal according to an embodiment of the present invention, which may include the following steps:

and S110, configuring each sub-application, and matching the corresponding page through the main application according to the configuration of the sub-application.

In one embodiment of the invention, each sub-application is configured, specifically comprising configuring forwarding of each sub-application through a configurable logic module clb, synchronously adjusting route configuration of the sub-application, independently processing authority of the sub-application route through a main application according to a page corresponding to sub-application route matching, processing related resources of the main application, and rewriting a micro front end framework qiankun route jump in a jump mode after independently processing the authority of the sub-application route.

Specifically, by adjusting the subsystem route, the processing of the route abnormality between the applications is realized, and the conflict of the routing rules built in the main application, the sub-application and the front-end micro-service qiankun is prevented;

(1) First, forwarding of each sub-application is configured by clb. For example, a certain business application is forwarded to/cbzx.

(2) The sub-applications need to adjust the routing configuration synchronously. For example, a certain service application original route is/cbzx, and is adjusted to be/sub/cbzx in order to avoid conflict with qiankun mode (application is distinguished by baseURL and is processed by single node).

(3) The main application matches the corresponding page according to the sub-application route, and the dynamic route displayed by the sub-application is realized on the basis of dynamic sub-application configuration by processing the route authority because the authority is required to be processed independently in a compatible existing mode. For example, the sub-application registration list is processed in its entirety and the individual sub-applications are integrated (for example, two sub-applications are switched on the same page).

(4) Master application related resource processing (js, cs, pictures, etc.). For example, the processing mode of the/cbzx in the related resource processing is to remove the/sub.

(5) After the previous three steps are finished, the problem that the switching page skip does not go through exists, so that the main application rewrites the skip mode of qiankun route skip, and the normal skip of all the route skip modes is ensured.

And S120, adding a monitoring event to the sub-application and the corresponding page thereof through the main application.

In one embodiment of the invention, the method for adding the monitoring event to the sub-application and the page corresponding to the sub-application through the main application specifically comprises the steps of adding a registration rule data format initiated by the main application through the main application and transmitting registered data to the sub-application, and adding exception monitoring to the global through the main application to monitor the exception condition in the butt joint process, the call service process or the page loading process.

Specifically, various listening events are added. Such as a parameter reception event, an anomaly monitoring event, etc.

(1) The transmission and reception events comprise that a main application adds a registration rule data format and must be initiated by the main application to transmit registered data to sub-applications, wherein the number of the events is 5, 3 (one registration definition, one reception and one modification) of the main application and 2 (one reception and one modification) of the sub-applications are shared among the main application and the sub-applications of the data.

(2) And the main application adds an abnormality monitor to the global, and gives an error prompt when an abnormality occurs in the conditions of docking, calling service, page loading and the like.

S130, carrying out isolation processing on JavaScript patterns of each sub-application.

In one embodiment of the invention, the JavaScript style isolation processing of each sub-application specifically comprises the steps of adding original style isolation configuration on the basis of qiankun, and adding unique identification and style area setting for each sub-application style.

Specifically, js style isolation processing is added to prevent style conflict problems.

(1) Adding and setting original style isolation configuration on the basis of qiankun;

(2) Unique identification and style region settings are added to each sub-application style. For example, the sub-application adds a qiankunXXXid to the outermost layer of the main application area.

And S140, displaying a loading page after the dynamic page is successfully matched according to the sub-application route and the JavaScript style, calling sub-application resources, closing the loading page if the sub-application resources are successfully called, and displaying an abnormal interface if the sub-application resources are failed to call.

Specifically, the sub-applications and the content rendering portion are processed, increasing the way in which rendering locations are processed. After the dynamic page matching is successful in loading the sub-application rendering area, loading is carried out before the sub-application resource is called, if successful, the loading page is closed, and if unsuccessful, the abnormal page is thrown out.

In one embodiment of the invention, the resource address corresponding to the sub application of the sub application in the main application configuration table is obtained, the resource is obtained according to the resource address, and whether the resource information is correct or not is judged according to the resource format of the resource so as to ensure that the file is forwarded correctly.

Specifically, a filter layer is added to solve the problem that qiankun is unsuccessful in forwarding individual files, and the method comprises the steps of acquiring resource addresses corresponding to sub-applications of sub-applications in a main application configuration table by using cross-network asynchronous acquisition resources fetch, and judging resource information (including website source codes, pictures, documents, icon and the like) according to a resource format (such as folders, suffix names and the like) by re-corresponding to js native methods, so that the purpose of correctly forwarding files is achieved.

Aiming at the network protocol conflict problem existing in qiankun and the forwarding problem between sub-applications, such as the jump from the sub-application A to the sub-application B, the improvement is that the jump mode provided by qiankun is rewritten into the route processing rule (such as push, replace, ensureURL, restore) and the path of the base for rewriting, thereby solving the network protocol conflict problem.

The following is a specific code implemented by the rerouting rule:

(1) Rewriting push-jump rules

(2) Replace-redirection

(3) EnsureURL-determining uniform resource locator

(4) Resolve-return route address

In one embodiment of the invention, each sub-application is configured by adjusting a program entry file of the sub-application, adding public-path.js of a public path js file under a source code src directory, judging whether the sub-application is qiankun butt-jointed or not, if yes, assigning a base uniform resource locator (baseURL) of the sub-application to a path of a packaged webpack file.

In one embodiment of the invention, the program entry file of the sub-application is adjusted by installing an initialization function through qiankun to obtain the container field data in the main application props, copying a copy of the route data again, assigning the route data to the route through defining vue examples, and binding vue examples to nodes.

Specifically, a configuration function design prototype diagram is shown in fig. 2.

A sub-application configuration step:

the first step is to run initialization configuration:

1. The tuning program entry file main. Js, tuning code refers to fig. 3.

(1) The micro-service mounts the initialization function to obtain the container field data in the main application props.

(2) A copy of the routing data is replicated.

(3) Define vue instances and assign route routers, vuex cache store, internationalized stylized il8n, page render.

(4) Vue instance binding nodes.

(5) And when the method runs independently, the following qiankun state judges whether the method is qiankun mode docking, calls a render function and runs items.

(6) Initializing, namely calling a function.

(7) First load-first load function.

(8) Updating the function and emptying the data.

Adding public-path js under the src directory, and realizing codes shown in figure 4;

And judging whether the application is qiankun to be docked, if so, assigning the base URL of the sub-application to the path of the packaged file.

And step two, packing configuration:

The configuration in vue.config.js, as shown in fig. 5, defines the package name and the format configuration of the resource file in the current package, etc. The name of the package is unique and cannot be repeated (can be the system code-baseurl).

As shown in FIG. 6, a configuration header is added, and after the configuration, cross-domain resources are not intercepted.

Third step, foreground environment agent configuration:

under the Nginx.conf file in the foreground environment, as shown in fig. 7, a header is added.

(1) Here, a domain that allows cross-domain is configured, representing that all domains are received;

(2) A method is configured herein that allows cross-domain execution;

(3) Here header information allowing cross-domain setting is configured.

As shown in FIG. 8, after clicking the function menu, only the local refresh page in the box in FIG. 8 is not globally loaded.

The scheme provided by the invention can realize low code quantity integration, ensure that patterns among sub-applications are not interfered with each other and global variables/events are not conflicted on the premise of not changing core codes of the sub-applications, is irrelevant to a technical stack, can support multiple technical frameworks, can realize local refreshing of switching of multiple sub-applications, and solves the problems of unsuccessful resource forwarding and forwarding among the sub-applications by adding a filter layer and rewriting of a skip mode aiming at the defect of qiankun.

The method for supporting low-code quick docking of various operating systems by the unified portal provided by the embodiment of the invention is based on the same inventive thought, and the embodiment of the invention also provides corresponding equipment for supporting low-code quick docking of various operating systems by the unified portal, as shown in fig. 9.

The embodiment provides a device for supporting low-code quick docking of various operating systems by a unified portal, which comprises:

At least one processor 901; and a memory 902 communicatively coupled to the at least one processor 901 via a bus 903, wherein the memory 902 stores instructions executable by the at least one processor, the instructions being executable by the at least one processor 901 to enable the at least one processor 901 to perform:

The method comprises the steps of configuring each sub-application, matching corresponding pages according to the configuration of the sub-application through a main application, adding monitoring events of the sub-application and the corresponding pages through the main application, isolating JavaScript patterns of each sub-application, displaying a loading page after the dynamic pages are successfully matched according to sub-application routing and JavaScript patterns, calling sub-application resources, closing the loading page if the sub-application resources are successfully called, and displaying an abnormal interface if the sub-application resources are failed to call.

Based on the same thought, some embodiments of the present invention also provide a medium corresponding to the above method.

Some embodiments of the invention provide a storage medium storing computer executable instructions for execution by a processor to perform the steps of:

The embodiments of the present invention are described in a progressive manner, and the same and similar parts of the embodiments are all referred to each other, and each embodiment is mainly described in the differences from the other embodiments. In particular, for the apparatus and medium embodiments, the description is relatively simple, as it is substantially similar to the method embodiments, with reference to the section of the method embodiments being relevant.

The devices and media provided in the embodiments of the present invention are in one-to-one correspondence with the methods, so that the devices and media also have similar beneficial technical effects as the corresponding methods, and since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media are not repeated here.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process article or method that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process article or method. Without further limitation, an element defined by the phrase "comprising one does not exclude the presence of additional like elements in a process method article or method that comprises the element.

The foregoing is merely exemplary of the present invention and is not intended to limit the present invention. While the invention has been described in detail in the foregoing general description and with reference to specific embodiments thereof, it will be apparent to one skilled in the art that modifications and improvements can be made thereto. Accordingly, such modifications or improvements may be made without departing from the spirit of the invention and are intended to be within the scope of the invention as claimed.

Claims

1. A method for a unified portal to support low-code rapid docking with various operating systems, characterized by including:

Configure each sub-application, and use the main application to match its corresponding page according to the configuration of the sub-application;

Adding monitoring events for the sub-application and its corresponding page through the main application;

Isolate the JavaScript styles of each of the sub-applications;

After the dynamic page is successfully matched according to the sub-application route and the JavaScript style, a loading page is displayed, and the sub-application resource is called. If the sub-application resource call is successful, the loading page is closed. If the sub-application resource call fails, an abnormal interface is displayed;

The configuration of each sub-application specifically includes: configuring the forwarding of each sub-application through the configurable logic module clb, and synchronously adjusting the routing configuration of the sub-application; matching the corresponding page according to the sub-application routing through the main application, and processing the permissions of the sub-application routing separately; processing the main application related resources; after processing the permissions of the sub-application routing separately, rewriting the jump mode of the micro front-end framework qiankun routing jump;

The adding of monitoring events to the sub-application and its corresponding page through the main application specifically includes: adding a registration rule data format initiated by the main application through the main application, and transmitting the registered data to the sub-application; adding global exception monitoring through the main application to monitor abnormal situations during the docking process, service calling process or page loading process.

2. The method according to claim 1, characterized in that the isolating processing of the JavaScript styles of each of the sub-applications specifically comprises:

Add the original style isolation configuration based on qiankun;

Add a unique identifier and style locale to each sub-application style.

3. The method according to claim 1, characterized in that the method further comprises:

Get the resource address corresponding to the sub-application in the main application configuration table;

The resource is acquired according to the resource address, and whether the resource information is correct is determined according to the resource format of the resource to ensure that the file is forwarded correctly.

4. The method according to claim 1, characterized in that configuring each sub-application specifically comprises:

Adjust the program entry file of the sub-application;

Add the public path js file public-path.js in the source code src directory to determine whether it is a qiankun docking application. If so, assign the base URL of the sub-application to the path path of the packaged webpack file.

5. The method according to claim 4, characterized in that the adjusting the program entry file of the sub-application specifically comprises:

Use qiankun to mount the initialization function and obtain the container field data in the main application props;

Re-copy the routing data;

By defining a vue instance, the routing data is assigned to the route;

Bind the vue instance to a node.

6. The method according to claim 1, characterized in that configuring each sub-application specifically comprises:

For the front-end environment proxy, configure the domains that allow cross-domain execution, the methods that allow cross-domain execution, and the header information that allows cross-domain settings.

7. The unified portal supports low-code rapid docking with devices of various operating systems, including:

at least one processor; and,

A memory connected to the at least one processor via a bus; wherein,

The memory stores instructions executable by the at least one processor, and the instructions are executed to implement:

Isolate the JavaScript styles of each of the sub-applications;

8. A non-volatile storage medium storing computer executable instructions, wherein the computer executable instructions are executed by a processor to implement the following steps:

Configure each sub-application, and match its corresponding page according to the configuration of the sub-application through the main application;

Isolate the JavaScript styles of each of the sub-applications;