Integration method and device, electronic equipment and storage medium

Abstract

The invention discloses an integration method and device, electronic equipment and a storage medium, according to the embodiment of the invention, when a development instruction for a first sub-application is received, an online website corresponding to a main application is accessed, and loading of the first sub-application and an entry address corresponding to the first sub-application are determined; performing initialization processing through the main application, and replacing an entry address of the first sub-application with a source address of the development instruction; and based on the development instruction, obtaining components corresponding to the main application and the first sub-application from a component library, and performing integration processing on the obtained components to obtain a target application. According to the embodiment of the invention, the integration efficiency can be improved.

Description

Technical Field

[0001] The present application belongs to the field of software development technology, and specifically relates to an integration method, device, electronic device and storage medium. Background Art

[0002] With the vigorous development of the Internet industry, the integration solutions for large-scale mid- and back-end World Wide Web (Web) applications are becoming increasingly diversified. Among them, the integration solutions based on Node Package Manager (npm), the integration solutions based on inline frames (iframes), and the solutions based on specific central routing bases have occupied the mainstream. However, each solution has its inherent limitations. Although the integration solution based on npm is convenient, it requires the consistency of the technology stack and has obvious deficiencies in the style isolation between the JS sandbox and the sub-applications. Although the iframe-based integration solution provides an indestructible isolation environment for the sub-applications, it also sacrifices the user experience. Compared with the single page application (SPA), its rendering speed is slower and the interactive experience is greatly reduced. The specific central routing solution also has strict unified requirements for the technology stack and is often only applicable to new projects. For the integration of old projects, the transformation work is huge and the problem of JS sandbox is also not solved.

[0003] In today's complex and ever-changing medium and large-scale management backend application scenarios, the user interface styles and interactive experiences of each sub-application are uneven, which undoubtedly poses a considerable challenge to the overall user experience. The development and integration of front-end applications are full of difficulties, which not only increases the difficulty coefficient of development work, but also slows down the progress of integration to a certain extent, making the advancement of the entire project difficult, thereby reducing the efficiency of integration. Summary of the invention

[0004] The purpose of the embodiments of the present application is to provide an integration method, device, electronic device and storage medium, which can solve the problem of low integration efficiency in related technologies.

[0005] In a first aspect, an embodiment of the present application provides an integration method, which is applied to a first system, wherein the first system includes a mid-background application, and the mid-background application includes a main application and a sub-application, and the method includes:

[0006] Upon receiving a development instruction for the first sub-application, accessing an online URL corresponding to the main application to determine loading of the first sub-application and an entry address corresponding to the first sub-application;

[0007] Performing initialization processing through the main application, replacing the entry address of the first sub-application with the source address of the development instruction;

[0008] Based on the development instruction, components corresponding to the main application and the first sub-application are obtained from a component library, and the obtained components are integrated to obtain a target application.

[0009] In a second aspect, an embodiment of the present application provides an integrated device, the device comprising:

[0010] A first determination module is used to access the online website corresponding to the main application and determine to load the first sub-application and the entry address corresponding to the first sub-application when receiving a development instruction for the first sub-application;

[0011] A replacement module, used to perform initialization processing through the main application, and replace the entry address of the first sub-application with the source address of the development instruction;

[0012] A first acquisition module, configured to acquire components corresponding to the main application and the first sub-application from a component library based on the development instruction;

[0013] A module is obtained, which is used to integrate the obtained components to obtain a target application.

[0014] In a third aspect, an embodiment of the present application provides an electronic device, comprising a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface communicate with each other through the communication bus; the memory is used to store executable instructions, and the executable instructions enable the processor to execute the integration method as described in any one of the above items.

[0015] In a fourth aspect, an embodiment of the present application provides a readable storage medium, on which a program or instruction is stored, and when the program or instruction is executed by a processor, the integration method as described in any one of the above items is implemented.

[0016] In an embodiment of the present application, an integration method is provided, which is applied to a first system. The first system includes a mid-back-end application, and the mid-back-end application includes a main application and a sub-application. When a development instruction for the first sub-application is received, the online URL corresponding to the main application is accessed to determine the loading of the first sub-application and the entry address corresponding to the first sub-application; initialization processing is performed through the main application, and the entry address of the first sub-application is replaced with the source address of the development instruction; based on the development instruction, components corresponding to the main application and the first sub-application are obtained from a component library, and the obtained components are integrated to obtain a target application. During the integration process, when the development instruction for the first sub-application is received, it is determined to load the first sub-application and the entry address corresponding to the first sub-application, and then the entry address of the first sub-application is replaced with the source address of the development instruction, so that the process of development on the source address can be realized, thereby improving the development efficiency. Further, based on the development instruction, components corresponding to the main application and the first sub-application can be obtained from the component library, and the obtained components are integrated to obtain the target application, thereby improving the integration efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 This is a composition structure of a first system provided in an embodiment of the present application Figure 1 ;

[0018] Figure 2 This is a step flow of an integrated method provided in an embodiment of the present application Figure 1 ;

[0019] Figure 3 This is a composition structure of a first system provided in an embodiment of the present application Figure 2 ;

[0020] Figure 4 This is a step flow of an integrated method provided in an embodiment of the present application Figure 2 ;

[0021] Figure 5 This is a composition structure of a first system provided in an embodiment of the present application Figure 3 ;

[0022] Figure 6 This is a step flow of an integrated method provided in an embodiment of the present application Figure 3 ;

[0023] Figure 7 It is a flow chart of a system aggregation provided by an embodiment of the present application;

[0024] Figure 8 It is a schematic diagram of the architecture of an integrated system provided in an embodiment of the present application;

[0025] Fig. 9It is a flowchart of the steps of a local development method provided by an embodiment of the present application;

[0026] Fig.10 It is a logic block diagram of an integrated device provided in an embodiment of the present application;

[0027] Fig.11 It is a structural schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0028] The following will be combined with the drawings in the embodiments of the present application to clearly describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.

[0029] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.

[0030] Method Embodiment

[0031] The integration method provided in the embodiment of the present application is described in detail below through specific embodiments and their application scenarios in conjunction with the accompanying drawings.

[0032] Reference Figure 1 , showing the composition structure of a first system provided in an embodiment of the present application Figure 1 ,like Figure 1 As shown, the first system 10 includes a mid-background application 101 , and the mid-background application includes a main application 1011 and a sub-application 1012 .

[0033] Reference Figure 2 , showing the steps of an integrated method provided in an embodiment of the present application Figure 1 ,like Figure 2 As shown, the method specifically includes S101 to S103:

[0034] S101. Upon receiving a development instruction for a first sub-application, access an online URL corresponding to a main application to determine a loading location for the first sub-application and an entry address corresponding to the first sub-application.

[0035] In this step, during the integration process, the first system can access the online URL corresponding to the main application upon receiving the development instruction for the first sub-application, and determine to load the first sub-application and the entry address corresponding to the first sub-application.

[0036] In this step, the first sub-application may be any business system sub-application, and the first sub-application may be developed and processed.

[0037] In this step, the development instructions can be used to indicate the development processing of the first sub-application. For example, the development instructions can be to update the B column on the left side of the A page, or to make the layout of the B column more beautiful, etc., which is not limited in the embodiments of the present application.

[0038] Exemplarily, in this step, the online URL corresponding to the main application can be the URL of the main application deployed in the online environment. The main application may be a large single-page application (SPA) that serves as a container to load and display different sub-modules or sub-applications.

[0039] In this step, the first sub-application may be loaded according to the URL of the main application deployed in the online environment through the query parameters in the URL.

[0040] In this step, according to the URL of the main application deployed in the online environment, the entry address corresponding to the first sub-application can be loaded through the query parameters in the URL, that is, the entry point corresponding to the first sub-application can be loaded.

[0041] Further, in this step, when receiving the development instruction for the first sub-application, accessing the online website corresponding to the main application, and determining to load the first sub-application and the entry address corresponding to the first sub-application, the method may also include S1011 to S1013:

[0042] S1011. Based on the development instruction, access the online website corresponding to the main application.

[0043] In this step, in this step, when the development instructions for the first sub-application are received, the online URL corresponding to the main application is accessed, and in the process of determining the loading of the first sub-application and the entry address corresponding to the first sub-application, the first system can access the online URL corresponding to the main application based on the development instructions.

[0044] In this step, according to the development instructions corresponding to the first sub-application, the first system can access the URL of the main application deployed in the online environment.

[0045] S1012. Determine a key-value pair corresponding to the first sub-application based on the online URL.

[0046] In this step, after accessing the online URL corresponding to the main application based on the development instruction, the first system can determine the key-value pair corresponding to the first sub-application based on the online URL.

[0047] In this step, the key-value pairs corresponding to the first sub-application can be a set of key-value pairs in the URL of the main application, for example: it can be a set of key-value pairs that starts with the first symbol at the end of the URL and is separated by the second symbol, which is not limited in the embodiments of the present application.

[0048] S1013. Determine, based on the key-value pair, to load the first sub-application and an entry address corresponding to the first sub-application.

[0049] In this step, after determining the key-value pair corresponding to the first sub-application based on the online URL, the first system can determine to load the first sub-application and the entry address corresponding to the first sub-application based on the key-value pair.

[0050] S102: Perform initialization processing through the main application, and replace the entry address of the first sub-application with the source address of the development instruction.

[0051] In this step, when the development instruction for the first sub-application is received, the online URL corresponding to the main application is accessed, and after determining to load the first sub-application and the entry address corresponding to the first sub-application, the first system can perform initialization processing through the main application and replace the entry address of the first sub-application with the source address of the development instruction.

[0052] In this step, the initialization process may be to initialize the online environment deployed in the main application, that is, the process of environment configuration, which is not limited in the embodiments of the present application.

[0053] Exemplarily, in this step, the main application can be split from the mid-backend application, and the main application is mainly responsible for initializing and providing the micro-frontend runtime environment (based on qiankun). At the same time, it renders the basic page framework (including the top Header and the left Sidebar), obtains and manages user permissions (menu permissions, page resource permissions), and provides a personal center page (responsible for maintaining the personal information of the currently logged-in user).

[0054] In this step, the source address of the development instruction may be a local address. For example, during the development of a web page, a replacement address corresponding to web page A is stored locally. The replacement address may be a source address, which is not limited in the embodiments of the present application.

[0055] Exemplarily, in this step, during the local development of the sub-application, the first system can load the online main application and notify the main application to replace the entry of the local sub-application with the local address, so that local development in a permission-free manner can be achieved, which is not limited in the embodiments of the present application.

[0056] S103. Based on the development instruction, components corresponding to the main application and the first sub-application are obtained from the component library, and the obtained components are integrated to obtain a target application.

[0057] After initialization processing is performed through the main application and the entry address of the first sub-application is replaced with the source address of the development instruction, the first system can obtain components corresponding to the main application and the first sub-application from the component library based on the development instruction, and integrate the obtained components to obtain the target application.

[0058] In this step, the component library may include but is not limited to business components, user interface components, and graphical components.

[0059] In this step, the component corresponding to the main application may be any one of a business component, a user interface component and a graphical component, which is not limited in the embodiments of the present application.

[0060] In this step, the component corresponding to the first sub-application may be any one of a business component, a user interface component and a graphical component, which is not limited in the embodiments of the present application.

[0061] In this step, the integration process may be a process of aggregating components corresponding to the main application and the first sub-application.

[0062] Exemplarily, the process of integrating the first system needs to ensure good compatibility between the integrated components so as to provide a better experience for the user.

[0063] In this step, the target application may be an application obtained by integrating the components corresponding to the main application and the components corresponding to the first sub-application.

[0064] Further, in this step, the component library includes business components, user interface components and graphical components. In the process of obtaining components corresponding to the main application and the first sub-application from the component library based on the development instruction, and integrating the obtained components to obtain the target application, the method may also include S1031 to S1034:

[0065] S1031. Based on the development instruction, obtain from the component library a first component of the main application and a second component corresponding to the first sub-application.

[0066] In this step, based on the development instructions, components corresponding to the main application and the first sub-application are obtained from the component library, and the obtained components are integrated to obtain the target application. In this process, the first system can obtain the first component of the main application and the second component corresponding to the first sub-application from the component library based on the development instructions.

[0067] In this step, the first component of the main application may be any one of a business component, a user interface component, and a graphical component, which is not limited in the embodiments of the present application.

[0068] In this step, the second component corresponding to the first sub-application may be any one of a business component, a user interface component and a graphical component, which is not limited in the embodiments of the present application.

[0069] Exemplarily, the development instruction may be to unify the colors of the contents of different sections in a web page, to distinguish key points between sections, etc., which is not limited in the actual embodiments of the present application.

[0070] S1032. When the second component is a business component, the public business logic corresponding to the first sub-application is encapsulated using the second component to obtain a target application.

[0071] In this step, after obtaining the first component of the main application and the second component corresponding to the first sub-application from the component library based on the development instructions, the first system can also use the second component to encapsulate the public business logic corresponding to the first sub-application to obtain the target application when the second component is a business component.

[0072] Exemplarily, in this step, the business component is used to encapsulate the common business logic in each subsystem to avoid repeated development, which is not limited in the embodiments of the present application.

[0073] Exemplarily, in this step, the target application can be obtained by encapsulating the common business logic corresponding to the first sub-application through the second component.

[0074] S1033: When the second component is a user interface component, render the first component and the second component according to a preset interface style to obtain a target application.

[0075] In this step, after obtaining the first component of the main application and the second component corresponding to the first sub-application from the component library based on the development instructions, the first system can also render the first component and the second component according to a preset interface style to obtain the target application when the second component is a user interface component.

[0076] Exemplarily, in this step, the user interface component includes all UI components involved in managing background-type applications to achieve unified visual effects and interactive responses.

[0077] In this step, rendering the first component and the second component according to the preset interface style can obtain a visual effect of a unified style, providing a good experience for the user.

[0078] S1034: When the second component is a graphical component, use the second component to encapsulate the data view component corresponding to the first sub-application to obtain a target application.

[0079] In this step, after obtaining the first component of the main application and the second component corresponding to the first sub-application from the component library based on the development instructions, the first system can also use the second component to encapsulate the data view component corresponding to the first sub-application to obtain the target application when the second component is a graphical component.

[0080] Exemplarily, in this step, the graphical component can provide encapsulation of various data view components, such as bar charts, column charts, etc., to simplify development and configuration workload.

[0081] In this step, the target application can be obtained by encapsulating the digitized view component corresponding to the first sub-application using the second component.

[0082] Reference Figure 3 , showing the composition structure of a first system provided in an embodiment of the present application Figure 2 ,like Figure 3 As shown, the sub-application 1012 includes a business system sub-application 10121 and a management background sub-application 10122 .

[0083] Reference Figure 4 , showing the steps of an integrated method provided in an embodiment of the present application Figure 2 ,like Figure 4 As shown, the method further includes S201 to S205:

[0084] S201, initialization processing is performed through the main application to generate a personal center page.

[0085] In this step, during the integration process, the first system may also perform initialization processing through the main application to generate a personal center page.

[0086] In this step, the personal center page can be a user login interface, or a user's personal information interface, etc., which is not limited in the embodiments of the present application.

[0087] S202: Based on the permission management operation performed by the user in the personal center page, determine a second sub-application corresponding to the permission management operation.

[0088] In this step, after the main application is initialized and the personal center page is generated, the first system can determine the second sub-application corresponding to the permission management operation based on the permission management operation performed by the user in the personal center page.

[0089] In this step, the permission management operation can be used to indicate the configuration of the user's access rights after the user submits the corresponding user information. For example, the account and password permissions can be configured. The permission management operation provides user access rights based on the information submitted by the user, etc., which is not limited in the embodiments of the present application.

[0090] In this step, during the process of performing the permission management operation on any one of the business system sub-applications, a second sub-application corresponding to the permission management operation may be determined.

[0091] S203: Obtain management routing and configuration information corresponding to the second sub-application.

[0092] In this step, after determining the second sub-application corresponding to the permission management operation based on the permission management operation performed by the user in the personal center page, the first system can obtain the management route and configuration information corresponding to the second sub-application.

[0093] In this step, the configuration information corresponding to the second sub-application may include but is not limited to resource configuration, routing configuration, security configuration, environment configuration, etc., which is not limited in the embodiments of the present application.

[0094] In this step, the management route corresponding to the second sub-application may be a pre-agreed routing rule, which is not limited in the embodiments of the present application.

[0095] S204. Load the entry file corresponding to the second sub-application according to the management route and configuration information.

[0096] In this step, after obtaining the management route and configuration information corresponding to the second sub-application, the first system may also load the entry file corresponding to the second sub-application according to the management route and configuration information.

[0097] In this step, the process of loading the entry file corresponding to the second sub-application may include the file of the second sub-application startup and execution starting point, which is not limited in the embodiments of the present application.

[0098] S205. Perform access permission management on the second sub-application based on the entry file.

[0099] In this step, after loading the entry file corresponding to the second sub-application according to the management route and configuration information, the first system can also perform access permission management on the second sub-application based on the entry file.

[0100] In this step, the process of performing access permission management on the second sub-application may include access permission management on user information, or access permission management on account number and password, etc., which is not limited in the embodiments of the present application.

[0101] Reference Figure 5, showing the composition structure of a first system provided in an embodiment of the present application Figure 3 ,like Figure 5 As shown, the first system 10 also includes a unified gateway 102 , an access layer intranet server 103 and a background interface 104 .

[0102] Reference Figure 6 , showing the steps of an integrated method provided in an embodiment of the present application Figure 3 ,like Figure 6 As shown, the method further includes S301 to S304:

[0103] S301. Based on an access request, the unified gateway determines an access layer intranet server corresponding to the access request, and transmits the access request to the corresponding access layer intranet server.

[0104] In this step, during the integration process, the first system may also determine the access layer intranet server corresponding to the access request through the unified gateway based on the access request, and transmit the access request to the corresponding access layer intranet server.

[0105] In this step, the unified gateway can provide single sign-on function and user login status verification.

[0106] In this step, the access request may include but is not limited to a main application request, a sub-application request, and a backend interface request, which is not limited in the embodiments of the present application.

[0107] In this step, the access layer intranet server corresponding to the access request may include but is not limited to the access layer intranet server corresponding to the main application request, the access layer intranet server corresponding to the sub-application request and the access layer intranet server corresponding to the back-end interface request, which is not limited in the embodiments of the present application.

[0108] Further, in this step, in the process where the unified gateway determines the access layer intranet server corresponding to the access request based on the access request and transmits the access request to the corresponding access layer intranet server, the method may further include S3011 to S3013:

[0109] S3011. The unified gateway receives an access request from the client.

[0110] In the process where the unified gateway determines the access layer intranet server corresponding to the access request based on the access request and transmits the access request to the corresponding access layer intranet server, the first system may also receive the access request from the client through the unified gateway.

[0111] S3012. The unified gateway matches the corresponding third sub-application from the sub-applications according to the routing path of the access request.

[0112] After the unified gateway receives the access request from the client, the unified gateway may also match the corresponding third sub-application from the sub-applications according to the routing path of the access request.

[0113] In this step, the routing paths corresponding to different sub-applications can be obtained by adding identifiers to the common routing path, and then the routing path corresponding to the access request can be determined according to the access request.

[0114] In this step, the process of matching the corresponding third sub-application from the sub-application may include determining the third sub-application from a plurality of business system sub-applications according to a routing path.

[0115] S3013. The unified gateway loads the entry file of the third sub-application according to the configuration information, mounts the entry file to the target container corresponding to the main application, and transmits the access request to the corresponding access layer intranet server.

[0116] After the unified gateway matches the corresponding third sub-application from the sub-application according to the routing path of the access request, the unified gateway can also load the entry file of the third sub-application according to the configuration information, mount the entry file to the target container corresponding to the main application, and transmit the access request to the corresponding access layer intranet server.

[0117] In this step, the entry file loaded for the third sub-application may include a file for starting the startup and execution of the third sub-application, which is not limited in the embodiments of the present application.

[0118] Exemplarily, in this step, the unified gateway loads the entry file of the third sub-application according to the configuration information, and mounts the entry file to the target container corresponding to the main application. The process may include loading the entry file of the sub-application according to the configuration information and mounting it to the Dom container specified by the main application.

[0119] S302. The access layer intranet server sends the access request to the target object according to the request type of the access request; the target object includes at least one of the main application object, the sub-application object, and the background interface object.

[0120] Based on the access request, the unified gateway determines the access layer intranet server corresponding to the access request, and after transmitting the access request to the corresponding access layer intranet server, the access layer intranet server sends the access request to the target object according to the request type of the access request; the target object includes at least one of the main application object, the sub-application object, and the background interface object.

[0121] In this step, the request type of the access request may include but is not limited to a main application request, a sub-application request, and a backend interface request, etc., which is not limited in the embodiments of the present application.

[0122] In this step, the access layer intranet server can be a server responsible for processing network access requests from internal users or devices. These servers are usually deployed at the access layer of the network, that is, the network layer closest to the user or device, to provide network access services, authentication, authorization and related network management functions.

[0123] In this step, the target object may include but is not limited to a main application object, a sub-application object, and a background interface object.

[0124] In this step, the main application object may be an object for accessing the main application resources, which is not limited in the embodiments of the present application.

[0125] In this step, the sub-application object may be an object for accessing sub-application resources, which is not limited in the embodiments of the present application.

[0126] In this step, the background interface object may be an object for accessing a background interface gateway, which is not limited in the embodiments of the present application.

[0127] S303: The target object processes the access request, obtains a processing result, and feeds back the processing result to the access layer intranet server.

[0128] After the access layer intranet server sends the access request to the target object according to the request type of the access request, the target object may also process the access request, obtain a processing result, and feed the processing result back to the access layer intranet server.

[0129] In this step, the access request may include updating the page content of different sub-applications, etc., which is not limited in the embodiments of the present application.

[0130] In this step, the processing result may be a result after updating the page, or a result after unifying the page style, etc., which is not limited in the embodiments of the present application.

[0131] In this step, the process of feeding back the processing results to the access layer intranet server may include feeding back the results after the page update to the access layer intranet server, or feeding back the results after the page style is unified to the access layer intranet server, etc., which is not limited in the embodiments of the present application.

[0132] S304: The access layer intranet server performs integrated processing on the mid- and back-end applications based on the processing results.

[0133] In this step, after the target object processes the access request, obtains the processing result, and feeds back the processing result to the access layer intranet server, the access layer intranet server can integrate the mid- and back-end applications based on the processing result.

[0134] In summary, in an embodiment of the present application, an integration method is provided, which is applied to a first system. The first system includes a mid-back-end application, and the mid-back-end application includes a main application and a sub-application. When a development instruction for the first sub-application is received, the online URL corresponding to the main application is accessed to determine the loading of the first sub-application and the entry address corresponding to the first sub-application; initialization processing is performed through the main application, and the entry address of the first sub-application is replaced with the source address of the development instruction; based on the development instruction, components corresponding to the main application and the first sub-application are obtained from the component library, and the obtained components are integrated to obtain a target application. During the integration process, when a development instruction for the first sub-application is received, it is determined to load the first sub-application and the entry address corresponding to the first sub-application, and then the entry address of the first sub-application is replaced with the source address of the development instruction, so that the development process on the source address can be realized, thereby improving the development efficiency. Further, based on the development instruction, components corresponding to the main application and the first sub-application can be obtained from the component library, and the obtained components are integrated to obtain the target application, thereby improving the integration efficiency.

[0135] The following are the main integration solutions for large-scale mid- and back-end Web applications:

[0136] Integration solution based on npm. Split large front-end applications into main applications and multiple sub-modules. Through npm private packages, each development team maintains their own npm modules. After development and testing, they are published to private sources. The main application is responsible for providing the front-end running framework and introducing these npm modules to integrate into a complete front-end SPA application.

[0137] An iframe-based integration solution. Integrate each subpage of the front-end application through iframes, and control the loaded iframe frames and the switching between them in the main application. Similar to the npm method, each development team maintains its own subsystem module, and development, testing, and deployment can be carried out independently.

[0138] Based on a specific central routing base. Suitable for new project development, based on a unified front-end technology stack (such as React or Vue), the main application takes routing as the core. According to the agreement, the routing rules of each subsystem module are defined. Each subsystem module uses the routing file as the entry point. After being packaged by webpack, it is loaded on demand in the main application. The entire page is a large SPA application. Each team can also develop, test, and launch their own modules independently.

[0139] The integration solution based on npm requires a unified technology stack, does not support JS sandbox, and does not support style isolation between sub-applications. The integration solution based on iframe, although it provides strong isolation for sub-applications, leads to a poor user experience. Compared with SPA applications, it has the obvious characteristics of slow rendering and poor interactive experience. The method based on specific central routing also requires a unified technology stack and can usually only be applied in new projects. If old projects need to be integrated, the transformation cost is huge, and it also does not support JS sandbox.

[0140] The technical solution of this application absorbs the advantages of the above technologies and also solves their shortcomings in a targeted manner. This solution uses SPA as the basic rendering mode of the front-end application, providing a good user experience. It also provides a JS sandbox isolation mechanism, a convenient communication method between applications, and automatic isolation of sub-application styles. Old projects can also be integrated through simple transformation.

[0141] The advantages of this application compared with other solutions are shown in Table 1:

[0142] Table 1

[0143]

[0144] This application designs a micro-frontend integration solution for large-scale mid- and back-end Web applications. In complex mid- and back-end Web applications, they are usually divided into multiple subsystem modules, which are developed and maintained by different teams and deployed independently.

[0145] The main application is mainly responsible for initializing and providing the micro-frontend runtime environment (based on qiankun). At the same time, it renders the basic page framework (including the top Header and the left Sidebar), obtains and manages user permissions (menu permissions, page resource permissions), and provides a personal center page (responsible for maintaining the personal information of the currently logged-in user). The sub-application does not need to pay attention to changes in the entire outer frame, which facilitates independent development and maintenance.

[0146] Sub-applications are divided into two types: business system sub-applications and management backend sub-applications. Different sub-applications are identified by module_name, and their respective routing path rules are agreed upon after the common $root_path. After the main application is initialized, it matches the corresponding sub-application according to the current access path, loads the entry file of the sub-application according to the configuration, and mounts it to the Dom container specified by the main application. Management backend sub-applications uniformly add a layer of / admin routing to facilitate access permission management.

[0147] The main application and sub-application communicate in an agreed way. The main application injects props into the sub-application through the qiankun framework, which includes user information, permission data, interfaces provided by the main application framework, etc. At the same time, the main application maintains the global state global_state, and the sub-application can also listen to these global states to make corresponding business responses, such as hiding the header and sidebar of some pages.

[0148] To ensure a unified page style and user experience, the entire project relies on a public Npm private library, which mainly includes three parts: business components, user interface (UI) components, and graphical components. Business components mainly encapsulate the common business logic in each subsystem to avoid repeated development; the UI component library contains all UI components involved in management backend applications to achieve unified visual effects and interactive responses; the graphical component library provides encapsulation of various data view components, such as bar charts, column charts, etc., to simplify development and configuration workload.

[0149] To achieve the aggregation of the entire system, routing convention is an important part. From the perspective of front-end requests, routing conventions are divided into three types: main application requests, sub-application requests, and back-end interface requests.

[0150] Reference Figure 7 , which shows a flow chart of a system aggregation provided by an embodiment of the present application, such as Figure 7 As shown, the method specifically includes S401 to S405:

[0151] S401: The client browser receives a HyperText Transfer Protocol (http) request.

[0152] In the process of aggregating the systems, the integrated system can receive http requests through the client browser.

[0153] S402: Send the http request to the unified gateway.

[0154] After the client browser receives the http request, the integration system can send the http request to the unified gateway.

[0155] Exemplarily, the unified gateway is responsible for user authentication, request distribution, etc., which is not limited in the embodiments of the present application.

[0156] S403: Determine the intranet server at the access layer according to the configured request path and http request.

[0157] After sending the http request to the unified gateway, the integrated system can determine the access layer intranet server based on the configured request path and http request.

[0158] S404. The intranet access layer redistributes the http request through nginx.

[0159] After determining the intranet server at the access layer based on the configured request path and http request, the intranet access layer can redistribute the http request through nginx.

[0160] S405. According to the type of http request, the resource corresponding to the request type is returned or forwarded to the background interface gateway.

[0161] After the http request is redistributed through nginx at the intranet access layer, the integrated system can return the resources corresponding to the request type or forward it to the background interface gateway according to the type of the http request.

[0162] In summary, the unified gateway is responsible for user authentication, request distribution, etc., and will distribute requests to the corresponding access layer intranet server according to the configured $root_path. The intranet access layer distributes the request again through nginx, and according to the agreement, returns the main application or sub-application static resources, or forwards the request further to the backend API interface gateway.

[0163] This application solution solves the problems encountered in the development and integration of front-end applications in complex medium and large-scale management background applications. From the perspective of R&D, it enables each development team to be independent and autonomous, and each sub-application can be maintained and launched separately; from the perspective of front-end code, it is based on Qiankun and solves the problems of JS isolation and style isolation between applications; from the perspective of user experience, it provides a good experience of single-page applications and ensures the consistency of UI style and interactive experience of each sub-application; from the perspective of performance, it speeds up page loading speed and switching speed between sub-applications.

[0164] Based on the UI framework provided by the public component library, sub-applications can also run independently from the main application when necessary, without relying on the micro-frontend external framework.

[0165] Reference Figure 8 , shows a schematic diagram of the architecture of an integrated system provided by an embodiment of the present application, such as Figure 8As shown, from the front-end perspective, the entire complex mid- and back-end applications are divided into two types: the integrated system 400 includes the main application 401, the business subsystem 402 and the management back-end subsystem 403. The management back-end is used to manage the back-end subsystems. Each system in the integrated system can provide users with a unified page style and improve user experience by calling the public Npm private library, as well as business components, UI components, and graphical components.

[0166] Since a unified authentication gateway is used, which provides single sign-on function and user login status verification, it is also necessary to access the gateway's domain name during local development in order to carry the token issued in the cookie after the user logs in in the request. The usual practice is to use proxy software to forward requests to the local side, but this requires additional software installation steps and configuration. In order to simplify the development process and improve development efficiency, this solution loads the online main application when the sub-application is developed locally, and notifies the main application to replace the local sub-application entry with the local address, so that local development can be achieved without a proxy.

[0167] Reference Fig. 9 , showing a flow chart of the steps of a local development method provided by an embodiment of the present application, such as Fig. 9 As shown, the method specifically includes S501 to S504:

[0168] S501. Start a development server based on a development instruction.

[0169] During local development, the integrated system can start the development server based on development instructions.

[0170] S502: Open the corresponding website on the main application line, and determine the loading of the sub-application and the entry file corresponding to the sub-application through query parameters.

[0171] After starting the development server based on the development instructions, the integrated system can open the corresponding URL on the main application line, and determine the loading of the sub-application and the entry file corresponding to the sub-application through query parameters.

[0172] S503, initialize qiankun and replace the sub-application entry address.

[0173] After opening the corresponding URL on the main application line and confirming the loading of the sub-application and the entry file corresponding to the sub-application through query parameters, the integrated system can initialize qiankun and replace the sub-application entry address.

[0174] S504: Obtain components corresponding to the main application and the first sub-application from the component library, and integrate the components to obtain a target application.

[0175] After initializing qiankun and replacing the sub-application entry address, the integration system can obtain the components corresponding to the main application and the first sub-application from the component library, and integrate the components to obtain the target application.

[0176] In summary, this application takes improving the interactive experience of end users as its starting point. On the premise of maintaining the advantages of front-end single-page applications, it improves the front-end loading speed through qiankun, provides JS isolation and style isolation between sub-applications, and can support the integration of sub-applications with different technology stacks. At the same time, through the clever front-end entry design, front-end personnel do not need to install proxy tools during local development, thereby improving development efficiency. It is a complete front-end engineering solution that can be applied to large-scale mid- and back-end applications.

[0177] Device Embodiment

[0178] like Fig.10 As shown, Fig.10 A logic block diagram of an integrated device provided in an embodiment of the present application is shown, the device comprising:

[0179] A first determination module 1001 is used to access the online website corresponding to the main application and determine to load the first sub-application and the entry address corresponding to the first sub-application when receiving a development instruction for the first sub-application;

[0180] A replacement module 1002 is used to perform initialization processing through the main application and replace the entry address of the first sub-application with the source address of the development instruction;

[0181] A first acquisition module 1003, configured to acquire components corresponding to the main application and the first sub-application from a component library based on the development instruction;

[0182] The obtaining module 1004 is used to integrate the obtained components to obtain the target application.

[0183] Optionally, the device further comprises:

[0184] A generation module, used to perform initialization processing through the main application to generate a personal center page;

[0185] A second determination module, configured to determine, based on the permission management operation performed by the user in the personal center page, a second sub-application corresponding to the permission management operation;

[0186] A second acquisition module, used to acquire management routing and configuration information corresponding to the second sub-application;

[0187] A loading module, used to load an entry file corresponding to the second sub-application according to the management route and configuration information;

[0188] A management module is used to manage access rights of the second sub-application based on the entry file.

[0189] Optionally, the first determining module further includes:

[0190] An access submodule, used to access the online website corresponding to the main application based on the development instruction;

[0191] A determination submodule is used to determine a key-value pair corresponding to the first sub-application based on the online URL; based on the key-value pair, determine to load the first sub-application and an entry address corresponding to the first sub-application.

[0192] Optionally, the device further comprises:

[0193] An acquisition submodule, used to acquire the first component of the main application and the second component corresponding to the first sub-application from a component library based on the development instruction;

[0194] A first obtaining submodule is used to encapsulate the common business logic corresponding to the first sub-application using the second component to obtain a target application when the second component is the business component;

[0195] A second obtaining submodule is used for rendering the first component and the second component according to a preset interface style to obtain a target application when the second component is the user interface component;

[0196] The third obtaining submodule is used for encapsulating the data view component corresponding to the first sub-application using the second component to obtain the target application when the second component is the graphical component.

[0197] Optionally, the device further comprises:

[0198] A determination submodule, configured to determine, based on the access request, an access layer intranet server corresponding to the access request;

[0199] A transmission submodule, used for transmitting the access request to the corresponding access layer intranet server;

[0200] A sending submodule, used for sending the access request to a target object according to the request type of the access request; the target object includes at least one of a main application object, a sub-application object, and a background interface object;

[0201] Obtain a submodule, which is used to process the access request and obtain a processing result;

[0202] A feedback module, used for feeding back the processing result to the access layer intranet server;

[0203] The integration submodule is used to perform integration processing on the mid- and back-end applications based on the processing results.

[0204] Optionally, the feedback module further includes:

[0205] A receiving submodule, used for receiving an access request from a client;

[0206] A matching module, configured to match a corresponding third sub-application from the sub-application according to a routing path of the access request;

[0207] A loading submodule, used to load the entry file of the third sub-application according to the configuration information;

[0208] A mounting module, used to mount the entry file to the target container corresponding to the main application;

[0209] The transmission module is used to transmit the access request to the corresponding access layer intranet server.

[0210] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0211] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0212] The integrated device in the embodiment of the present application can be an electronic device, or a component in the electronic device, such as an integrated circuit or a chip. The electronic device can be a terminal, or it can be other devices other than a terminal. Exemplarily, the electronic device can be a GPU BOX, a mobile phone, a tablet computer, a laptop computer, a PDA, a vehicle-mounted electronic device, a mobile Internet device (Mobile Internet Device, MID), an augmented reality (augmentedreality, AR) / virtual reality (virtualreality, VR) device, a robot, a wearable device, an ultra-mobile personal computer (ultra-mobile personalcomputer, UMPC), a netbook or a personal digital assistant (personal digital assistant, PDA), etc., and can also be a server, a network attached storage (Network Attached Storage, NAS), a personal computer (personalcomputer, PC), a television (television, TV), a teller machine or a self-service machine, etc., which is not specifically limited in the embodiment of the present application.

[0213] The integrated device in the embodiment of the present application may be a device having an operating system. The operating system may be an Android operating system, a Linux operating system, a Windows operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.

[0214] The integrated device provided in the embodiment of the present application can achieve Figure 1 To avoid repetition, the various processes implemented by the method embodiment are not described here.

[0215] Alternatively, if Fig.11 As shown, an embodiment of the present application also provides an electronic device 1100, including a processor 1101 and a memory 1102, wherein the memory 1102 stores programs or instructions that can be executed on the processor 1101, and when the program or instructions are executed by the processor 1101, the various steps of the above-mentioned integrated method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, they are not described here.

[0216] In an embodiment of the present application, the memory 1102 may be used to store software programs and various data. The memory 1102 may mainly include a first storage area for storing programs or instructions and a second storage area for storing data, wherein the first storage area may store an operating system, an application program or instructions required for at least one function (such as a sound playback function, an image playback function, etc.), etc. In addition, the memory 1102 may include a volatile memory or a non-volatile memory, or the memory 1102 may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), a static random access memory (SRAM), a dynamic random access memory (DRAM), a synchronous dynamic random access memory (SDRAM), a double data rate synchronous dynamic random access memory (DDRSDRAM), an enhanced synchronous dynamic random access memory (ESDRAM), a synchronous link dynamic random access memory (SLDRAM) and a direct memory bus random access memory (DRRAM). The memory 1102 in the embodiment of the present application includes but is not limited to these and any other suitable types of memory.

[0217] The processor 1101 may include one or more processing units; optionally, the processor 1101 integrates an application processor and a modem processor, wherein the application processor mainly processes operations related to an operating system, a user interface, and application programs, and the modem processor mainly processes wireless communication signals, such as a baseband processor. It is understandable that the modem processor may not be integrated into the processor 1101.

[0218] An embodiment of the present application also provides an electronic device, which includes a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface communicate with each other through the communication bus; the memory is used to store executable instructions, and the executable instructions enable the processor to execute the various processes of the above-mentioned integrated method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0219] An embodiment of the present application also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the various processes of the above-mentioned integrated method embodiment are implemented and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0220] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.

[0221] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned integrated method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0222] It should be understood that the chip involved in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0223] An embodiment of the present application provides a computer program product, which is stored in a storage medium. The program product is executed by at least one processor to implement the various processes of the above-mentioned integrated method embodiment and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0224] It should be noted that, in this article, the terms "comprise", "include" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises one..." does not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out that the scope of the method and device in the embodiment of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved, for example, the described method may be performed in an order different from that described, and various steps may also be added, omitted or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0225] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the relevant technology, can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, a disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0226] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. An integration method, characterized in that: Applied to a first system, the first system includes a mid-background application, the mid-background application includes a main application and a sub-application, and the method includes: Upon receiving a development instruction for the first sub-application, accessing an online URL corresponding to the main application to determine loading of the first sub-application and an entry address corresponding to the first sub-application; Performing initialization processing through the main application, replacing the entry address of the first sub-application with the source address of the development instruction; Based on the development instruction, components corresponding to the main application and the first sub-application are obtained from a component library, and the obtained components are integrated to obtain a target application.

2. The method according to claim 1, characterized in that: The sub-application includes a business system sub-application and a management backend sub-application, and the method further includes: Performing initialization processing through the main application to generate a personal center page; Based on the permission management operation performed by the user in the personal center page, determining a second sub-application corresponding to the permission management operation; Obtaining management routing and configuration information corresponding to the second sub-application; Loading the entry file corresponding to the second sub-application according to the management route and configuration information; Access permission management is performed on the second sub-application based on the entry file.

3. The method according to claim 1, characterized in that The first system includes a unified gateway, an access layer intranet server and a background interface, and the method further includes: Based on the access request, the unified gateway determines the access layer intranet server corresponding to the access request, and transmits the access request to the corresponding access layer intranet server; The access layer intranet server sends the access request to a target object according to the request type of the access request; the target object includes at least one of a main application object, a sub-application object, and a background interface object; The target object processes the access request to obtain a processing result, and feeds the processing result back to the access layer intranet server; The access layer intranet server performs integrated processing on the mid- and back-end applications based on the processing results.

4. The method according to claim 3, characterized in that: Based on the access request, the unified gateway determines the access layer intranet server corresponding to the access request, and transmits the access request to the corresponding access layer intranet server, including: The unified gateway receives an access request from a client; The unified gateway matches the corresponding third sub-application from the sub-application according to the routing path of the access request; The unified gateway loads the entry file of the third sub-application according to the configuration information, mounts the entry file to the target container corresponding to the main application, and transmits the access request to the corresponding access layer intranet server.

5. The method according to claim 1, characterized in that: The step of, upon receiving a development instruction for the first sub-application, accessing an online website corresponding to the main application, and determining to load the first sub-application and an entry address corresponding to the first sub-application comprises: Based on the development instruction, access the online website corresponding to the main application; Based on the online URL, determining a key-value pair corresponding to the first sub-application; Based on the key-value pair, determine to load the first sub-application and an entry address corresponding to the first sub-application.

6. The method according to claim 1, characterized in that The component library includes business components, user interface components and graphical components. Based on the development instruction, components corresponding to the main application and the first sub-application are obtained from the component library, and the obtained components are integrated to obtain a target application, including: Based on the development instruction, obtaining, from a component library, a first component of the main application and a second component corresponding to the first sub-application; In the case where the second component is the business component, the public business logic corresponding to the first sub-application is encapsulated by using the second component to obtain a target application; In the case where the second component is the user interface component, rendering the first component and the second component according to a preset interface style to obtain a target application; In the case where the second component is the graphical component, the data view component corresponding to the first sub-application is encapsulated by using the second component to obtain a target application.

7. An integrated device, characterized in that: The device comprises: A first determination module is used to access the online website corresponding to the main application and determine to load the first sub-application and the entry address corresponding to the first sub-application when receiving a development instruction for the first sub-application; A replacement module, used to perform initialization processing through the main application, and replace the entry address of the first sub-application with the source address of the development instruction; A first acquisition module, configured to acquire components corresponding to the main application and the first sub-application from a component library based on the development instruction; A module is obtained, which is used to integrate the obtained components to obtain a target application.

8. An integrated device, characterized in that: The device also includes: A generation module, used to perform initialization processing through the main application to generate a personal center page; A second determination module, configured to determine, based on the permission management operation performed by the user in the personal center page, a second sub-application corresponding to the permission management operation; A second acquisition module, used to acquire management routing and configuration information corresponding to the second sub-application; A loading module, used to load an entry file corresponding to the second sub-application according to the management route and configuration information; A management module is used to manage access rights of the second sub-application based on the entry file.

9. An electronic device, characterized in that: The electronic device comprises a processor, a memory, a communication interface and a communication bus, and the processor, the memory and the communication interface communicate with each other via the communication bus; The memory is used to store executable instructions, and the executable instructions enable the processor to execute the integrated method according to any one of claims 1 to 6.

10. A readable storage medium, characterized in that: The readable storage medium stores programs or instructions, and when the programs or instructions are executed by the processor, the integrated method described in any one of claims 1 to 6 is implemented.

Images