Multi-application integration method and device based on function menu and medium

Abstract

The invention discloses a multi-application integration method and device based on a function menu and a medium, and aims at solving the technical problem that the loading speed is too low due to the fact that multiple pages need to be loaded in an existing application integration method. The method comprises the following steps: performing nested integration on a plurality of applications to generate a function menu integrated with the plurality of applications; wherein the function menu comprises a plurality of menu items, and each menu item corresponds to one application; in response to a click operation of a user for the specified menu item, determining routing information corresponding to the specified application based on a function loading mode of the specified application corresponding to the specified menu item; wherein the function loading mode comprises an SPA single page mode and an iframe mode; and loading an application page corresponding to the specified application according to the routing information.

Description

Technical Field

[0001] The present application relates to the field of front-end application technology, and in particular to a multi-application integration method, device and medium based on a function menu. Background Art

[0002] With the deepening of enterprise informatization and digital transformation, the number of applications within and between enterprises has increased dramatically. In order to achieve data sharing, functional collaboration and business process optimization among these applications, application integration technology is particularly important.

[0003] The current application integration method usually uses page nesting provided by iframe to integrate multiple front-end applications. However, iframe essentially loads one page. If there are many iframes, multiple pages need to be loaded, which may cause the entire application to load too slowly and reduce system performance. Summary of the invention

[0004] In order to solve the above problems, this application proposes a multi-application integration method based on function menu, including:

[0005] Nesting and integrating multiple applications to generate a function menu integrating the multiple applications; wherein the function menu includes multiple menu items, each menu item corresponding to an application;

[0006] In response to a user's click operation on a designated menu item, determining routing information corresponding to the designated application based on a function loading mode of the designated application corresponding to the designated menu item; wherein the function loading mode includes a SPA single page mode and an iframe mode;

[0007] According to the routing information, an application page corresponding to the specified application is loaded.

[0008] In one implementation of the present application, 2. before obtaining routing information corresponding to the function menu according to the function loading mode of the specified application corresponding to the specified menu item, the method further includes:

[0009] Acquire function registration information of the specified application corresponding to the specified menu item; wherein the function registration information at least includes a function identifier, a function number, a function name, a function operation, routing information and a function loading mode;

[0010] Determine a function loading mode corresponding to the specified application according to the function registration information.

[0011] In one implementation of the present application, based on the function loading mode of the specified application corresponding to the specified menu item, obtaining the routing information corresponding to the specified application specifically includes:

[0012] When the function loading mode is the SPA single-page mode, obtaining a routing path and a routing name corresponding to the specified application; wherein the routing path is used to locate the application page where the specified application is located;

[0013] When the function loading mode is the iframe mode, the full path information associated with the specified application is obtained; wherein the full path information is a uniform resource locator pointing to the application page.

[0014] In one implementation of the present application, loading the application page corresponding to the specified application according to the routing information specifically includes:

[0015] When the function loading mode is the SPA single-page mode, obtaining a function script matching the function name corresponding to the specified menu item according to the routing name;

[0016] Based on the pre-registered loading interface, when routing to the application page according to the routing path, rendering to obtain the application page corresponding to the specified application by executing the function script;

[0017] When the function loading mode is the iframe mode, the full path information is added to the directory attribute of the iframe component, and the application page corresponding to the full path information is loaded through the directory attribute.

[0018] In one implementation of the present application, multiple applications are nested and integrated to generate a function menu integrating the multiple applications, specifically including:

[0019] Based on a preset function registration page, determine a hierarchical architecture corresponding to a plurality of applications, and perform nested integration of the plurality of applications according to the hierarchical architecture;

[0020] The function registration information of the multiple applications is configured in sequence, and menu items corresponding to the multiple applications are generated based on the configured function registration information to obtain corresponding function menus.

[0021] In one implementation of the present application, the hierarchical architecture is arranged in the order of menu grouping, module, and application type.

[0022] In one implementation of the present application, 7. in response to a user clicking operation on a designated menu item, determining routing information corresponding to the designated application based on a function loading mode of a designated application corresponding to the designated menu item, specifically includes:

[0023] Dividing the function menu into a navigation bar for displaying the menu group and the module, and a page display area for displaying menu items corresponding to different applications under the application type;

[0024] In response to a user clicking operation on a designated menu group and a designated module in the navigation bar, displaying each application type contained in the designated module and the applications under the application type in the page display area;

[0025] In response to a click operation of the user on a designated menu item in the page display area, routing information corresponding to the designated application is acquired based on a function loading mode of a designated application corresponding to the designated menu item.

[0026] In one implementation of the present application, the method further includes:

[0027] When the application needs to communicate with other applications, data sharing between the application and the other applications is achieved through shared variables between different applications, or corresponding response operations are performed through event notifications monitored by the other applications.

[0028] The embodiment of the present application provides a multi-application integration device based on a function menu, the device comprising:

[0029] at least one processor;

[0030] and, a memory communicatively coupled to the at least one processor;

[0031] The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute a multi-application integration method based on a function menu as described in any one of the above items.

[0032] The embodiment of the present application provides a non-volatile computer storage medium storing computer executable instructions, wherein the computer executable instructions are configured as follows:

[0033] A multi-application integration method based on a function menu as described in any of the above items.

[0034] The multi-application integration method based on function menu proposed in this application can bring the following beneficial effects:

[0035] SPA will dynamically replace the page content after the initial loading, instead of reloading the entire page. By introducing the SPA mode, when users interact with the interface, they do not need to reload the entire page or multiple iframes, which can reduce the number of page refreshes, thereby significantly improving the loading speed and system responsiveness. Combining the advantages of SPA single-page mode and iframe mode, selecting the application function loading mode according to specific needs can significantly improve the efficiency and performance of application integration and improve user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0037] Figure 1 A flowchart of a multi-application integration method based on a function menu provided in an embodiment of the present application;

[0038] Figure 2 A schematic diagram of a function registration page provided in an embodiment of the present application;

[0039] Figure 3 A schematic diagram of a function menu provided in an embodiment of the present application;

[0040] Figure 4 A schematic diagram of the structure of a multi-application integration device based on a function menu provided in an embodiment of the present application. DETAILED DESCRIPTION

[0041] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.

[0042] The technical solutions provided by various embodiments of the present application are described in detail below in conjunction with the accompanying drawings.

[0043] like Figure 1 As shown, a multi-application integration method based on a function menu is provided in an embodiment of the present application, comprising:

[0044] S101: nesting and integrating multiple applications to generate a function menu integrating multiple applications; wherein the function menu includes multiple menu items, and each menu item corresponds to an application.

[0045] Because there is a hierarchical relationship between different applications, multiple applications are nested and integrated to generate a function menu integrated with multiple applications, which can improve user experience, simplify operating procedures, and promote collaborative work between different applications. In this integrated mode, the function menu is designed as a hierarchical structure, allowing a parent-child relationship between menu items to form a nested structure. Each top-level menu item can represent a main menu grouping and functional module, and its sub-menu items correspond to specific applications. For the convenience of subsequent description, the menu items involved in the embodiments of the present application refer to the sub-menu items corresponding to the application.

[0046] In one embodiment, the hierarchical architecture corresponding to multiple applications can be determined based on a preset function registration page, and the applications can be nested and integrated according to the hierarchical architecture. The function registration page allows developers or administrators to configure the basic information, function description, hierarchical relationship, etc. of each application. The page provides corresponding configuration forms and options to accurately capture the details of each application and its functions. Based on the function registration page, specify the position of each application in the hierarchical architecture. In an embodiment of the present application, the hierarchical architecture between different applications is divided into three levels, which are arranged in the order of menu grouping, module, and application type. Figure 2 The schematic diagram of a function registration page shown in the figure defines the top-level menu items of the function menu, i.e., menu groups, based on the function registration page. For each top-level menu group, the specific function modules under it can be further specified, which will appear in the function menu as sub-menu items of the top-level menu items. There are multiple application types under each function module, which are added to the function menu as menu items in the next level of the function module. According to the determined hierarchical structure, multiple applications are nested and integrated to form the organizational structure of menu groups, function modules, application types, and applications.

[0047] In the function registration page, the function registration information of multiple applications is configured in sequence. The function registration information includes at least the function identification, function number, function name, function operation, routing information and function loading mode. Based on the configured function registration information, the server can generate function menus corresponding to multiple applications. First, according to the hierarchical relationship in the function registration information, the hierarchical structure of the entire function menu is constructed, and then a corresponding menu item is created for each application, and then the menu items are arranged according to the hierarchical structure to generate the corresponding function menu.

[0048] Through the above steps, you can determine the hierarchical architecture corresponding to multiple applications based on the preset function registration page, and perform nested integration according to the architecture, and finally generate a function menu with rich functions and clear structure. The function menu helps users quickly understand and locate each application and its functions, improving the user experience.

[0049] like Figure 3As shown in the schematic diagram of a function menu, the leftmost navigation bar includes menu groups, such as system functions, process platform, development platform, integration platform, enterprise portal, content management, collaborative office, and business functions. Each menu group includes multiple function modules. Taking the system function menu group as an example, there are four function modules: system management, message center, system configuration, and operation monitoring. Each function module includes multiple application types. The distributed transactions, tracking and debugging, and security monitoring displayed in the right area belong to the application types under the operation monitoring function module. Each application type consists of at least one application, such as distributed transaction management, program tracking viewer, etc. Each application corresponds to a menu item. Based on the user's click operation on the menu item, the server can load the application page corresponding to the application.

[0050] S102: In response to a user clicking operation on a designated menu item, determining routing information corresponding to the designated application based on a function loading mode of the designated application corresponding to the designated menu item; wherein the function loading mode includes a SPA single page mode and an iframe mode.

[0051] When the user clicks on a specified menu item in the function menu, the server needs to determine the corresponding routing information based on the function loading mode of the application associated with the menu item in order to correctly load and display the application. The function loading modes mentioned here mainly include SPA (Single Page Application) mode and iframe mode. The function loading mode is pre-configured when registering the application. Therefore, when loading the application page, if you want to clarify the function loading mode of the application, you can do so by obtaining the function registration information of the application corresponding to the specified menu item. In this way, based on the obtained function registration information, you can determine which mode the current application needs to use to load the application page.

[0052] In SPA mode, the application is designed as a separate page. During the user's interaction with the application, the entire page will not be reloaded, but part of the content on the page will be dynamically updated. Therefore, in this mode, the management of routing information becomes particularly important because it determines how to display different application functions according to different routing paths. At this time, it is necessary to obtain the routing path and routing name corresponding to the specified application. The routing path is used to locate the application page where the specified application is located. It is not achieved through server redirection, but by the front-end routing library (such as React Router, VueRouter, etc.) to parse and render the corresponding components. In SPA mode, when a user selects a menu item, the server will first identify the routing name corresponding to the menu item. Then, based on the routing name, find the matching function script in the internal routing mapping table or registered function script. The function script may be a React component, a Vue component, or any other component that can be rendered in the SPA framework.

[0053] In iframe mode, each application or part of an application is encapsulated in an iframe tag. Iframe is an HTML element that allows another HTML page to be embedded in the current page. In order to load a specific application page, you usually need to provide the uniform resource locator of the page. This URL points to a resource on the server, which may be an HTML file, an entry point for an application service, or other loadable content.

[0054] It should be noted that the user's click operation on the specified menu item is based on the function menu page, which includes two main parts: the navigation bar and the page display area. The navigation bar is used to display menu groups and modules, allowing users to browse and select different menu groups and modules. The page display area is used to display different application types and their corresponding specific applications under the selected menu group and module. When the user clicks on a specified menu group in the navigation bar, the available function modules under the group are filtered and displayed according to this group. The server will respond to the user's click operation on the specified menu group and the specified module in the navigation bar, and display the application types contained in the specified module and the applications under the application type in the page display area. In the page display area, each menu item corresponds to a specific application or function. When the user clicks on a specified menu item in the page display area, the server responds to the user's click operation on the specified menu item in the page display area, based on the function loading mode of the specified application corresponding to the specified menu item, obtains the routing information corresponding to the specified application, and triggers subsequent logical processing.

[0055] S103: Loading an application page corresponding to the specified application according to the routing information.

[0056] In SPA mode, when routing to the corresponding application page according to the routing path, the SPA framework will trigger the pre-registered loading interface. In this process, by executing the loading interface, the function script obtained in the previous step can be executed. The SPA framework will render the component into the DOM, thereby displaying the application page corresponding to the specified menu item. This process is completely performed on the client side, and there is no need to reload the entire page.

[0057] In iframe mode, since the iframe loads content as an independent browser context, it is necessary to specify the page to be loaded by setting the directory attribute (src attribute) of the iframe. The full path information is used as the value of the src attribute. Once the src attribute of the iframe is set, the server will start loading and rendering the application page corresponding to the URL pointed to by the src attribute. This process is performed inside the iframe and is isolated from the parent page containing the iframe. Therefore, even if a complete web application is loaded in the iframe, it will not affect the state or behavior of the parent page.

[0058] It can be seen that in SPA mode, the corresponding function script is found by the route name, and the script is executed when the route is to the specified path to render the application page. In iframe mode, the corresponding application page is loaded and displayed by setting the full path information as the src attribute of the iframe. These two modes each have their own application scenarios and advantages. The SPA mode is more suitable for building complex single-page applications, while the iframe mode is more convenient for embedding external content or achieving cross-domain communication.

[0059] In one embodiment, when different applications need to communicate, data interaction between different applications can be achieved by using shared variables and listening to events. Shared variables are a direct and efficient way to share data, but they usually require that all applications or application parts involved can access the same memory space or storage location. Global shared variables can be shared between different scripts on the same page, but global variables are not applicable to cross-page or cross-application communication. Therefore, the response operation of the application can also be achieved by listening to events. When an event occurs in an application or a part of an application, it can send an event notification to the outside, and other applications or application parts can register listeners to receive these notifications and perform corresponding response operations.

[0060] The above are embodiments of the method proposed in this application. Based on the same idea, some embodiments of this application also provide devices and non-volatile computer storage media corresponding to the above methods.

[0061] Figure 4The structure diagram of a multi-application integration device based on a function menu provided in an embodiment of the present application is shown in FIG. Figure 4 As shown, including:

[0062] at least one processor; and,

[0063] at least one processor is communicatively connected to a memory; wherein,

[0064] The memory stores instructions executable by at least one processor, the instructions being executed by at least one processor to enable the at least one processor to:

[0065] The multiple applications are nested and integrated to generate a function menu integrating the multiple applications; wherein the function menu includes multiple menu items, each menu item corresponding to an application;

[0066] In response to a user's click operation on a designated menu item, determining routing information corresponding to the designated application based on a function loading mode of the designated application corresponding to the designated menu item; wherein the function loading mode includes a SPA single page mode and an iframe mode;

[0067] According to the routing information, load the application page corresponding to the specified application.

[0068] The embodiment of the present application provides a non-volatile computer storage medium storing computer executable instructions, wherein the computer executable instructions are configured as follows:

[0069] The multiple applications are nested and integrated to generate a function menu integrating the multiple applications; wherein the function menu includes multiple menu items, each menu item corresponding to an application;

[0070] In response to a user's click operation on a designated menu item, determining routing information corresponding to the designated application based on a function loading mode of the designated application corresponding to the designated menu item; wherein the function loading mode includes a SPA single page mode and an iframe mode;

[0071] According to the routing information, load the application page corresponding to the specified application.

[0072] Each embodiment in this application is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device and medium embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments.

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

[0074] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0075] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0076] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0077] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0078] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0079] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0080] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0081] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity 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, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0082] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A multi-application integration method based on a function menu, characterized in that: The method comprises: Nesting and integrating multiple applications to generate a function menu integrating the multiple applications; wherein the function menu includes multiple menu items, each menu item corresponding to an application; In response to a user's click operation on a designated menu item, determining routing information corresponding to the designated application based on a function loading mode of the designated application corresponding to the designated menu item; wherein the function loading mode includes a SPA single page mode and an iframe mode; According to the routing information, an application page corresponding to the specified application is loaded.

2. A method for integrating multiple applications based on a function menu according to claim 1, characterized in that: Before obtaining routing information corresponding to the function menu according to the function loading mode of the specified application corresponding to the specified menu item, the method further includes: Acquire function registration information of the specified application corresponding to the specified menu item; wherein the function registration information at least includes a function identifier, a function number, a function name, a function operation, routing information and a function loading mode; Determine a function loading mode corresponding to the specified application according to the function registration information.

3. The multi-application integration method based on function menu according to claim 1, characterized in that: Based on the function loading mode of the specified application corresponding to the specified menu item, obtaining routing information corresponding to the specified application specifically includes: When the function loading mode is the SPA single-page mode, obtaining a routing path and a routing name corresponding to the specified application; wherein the routing path is used to locate the application page where the specified application is located; When the function loading mode is the iframe mode, the full path information associated with the specified application is obtained; wherein the full path information is a uniform resource locator pointing to the application page.

4. The multi-application integration method based on function menu according to claim 3, characterized in that: Loading an application page corresponding to the specified application according to the routing information specifically includes: When the function loading mode is the SPA single-page mode, obtaining a function script matching the function name corresponding to the specified menu item according to the routing name; Based on the pre-registered loading interface, when routing to the application page according to the routing path, rendering to obtain the application page corresponding to the specified application by executing the function script; When the function loading mode is the iframe mode, the full path information is added to the directory attribute of the iframe component, and the application page corresponding to the full path information is loaded through the directory attribute.

5. The multi-application integration method based on function menu according to claim 1, characterized in that: The multiple applications are nested and integrated to generate a function menu integrating the multiple applications, specifically including: Based on a preset function registration page, determine a hierarchical architecture corresponding to a plurality of applications, and perform nested integration of the plurality of applications according to the hierarchical architecture; The function registration information of the multiple applications is configured in sequence, and menu items corresponding to the multiple applications are generated based on the configured function registration information to obtain corresponding function menus.

6. The multi-application integration method based on function menu according to claim 5, characterized in that: The hierarchical structure is arranged in the order of menu grouping, module, and application type.

7. The method for integrating multiple applications based on function menus according to claim 6, characterized in that: In response to a user's click operation on a designated menu item, based on a function loading mode of a designated application corresponding to the designated menu item, determining routing information corresponding to the designated application specifically includes: Dividing the function menu into a navigation bar for displaying the menu group and the module, and a page display area for displaying menu items corresponding to different applications under the application type; In response to a user clicking operation on a designated menu group and a designated module in the navigation bar, displaying each application type contained in the designated module and the applications under the application type in the page display area; In response to a click operation of the user on a designated menu item in the page display area, routing information corresponding to the designated application is acquired based on a function loading mode of a designated application corresponding to the designated menu item.

8. According to claim 1, the function loading mode based on the designated menu item corresponding to the designated application, the method further comprises: When the application needs to communicate with other applications, data sharing between the application and the other applications is achieved through shared variables between different applications, or corresponding response operations are performed through event notifications monitored by the other applications.

9. A multi-application integration device based on a function menu, characterized in that: The device comprises: at least one processor; and, a memory communicatively coupled to the at least one processor; The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute a multi-application integration method based on a function menu as described in any one of claims 1-8.

10. A non-volatile computer storage medium storing computer executable instructions, characterized in that: The computer executable instructions are configured to: A multi-application integration method based on a function menu as described in any one of claims 1 to 8.

Images