Front-end framework system, front-end application development methods and equipment

Abstract

The present invention discloses a front-end framework system, a front-end application development method, and a device, relating to the field of computer technology. The front-end framework system includes a login module, a central control application module, and multiple front-end applications. The login module is used to implement unified security authentication. The central control application module is used to display a central control application module page nested with multiple front-end application pages to the user after the user passes the security authentication. The central control application module uniformly manages global status information, triggers each front-end application to cache and load pages based on the global status information, and implements cross-domain based on cloud native functions. The multiple front-end applications are used to receive user input information and interact with the central control application module and their respective back-end servers based on the user input information to implement business logic processing. The present invention can achieve fast and reliable front-end application development.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a front-end framework system, a front-end application development method and equipment. Background Art

[0002] This section is intended to provide a background or context to the embodiments of the invention that are recited in the claims. No statement herein is admitted to be prior art by virtue of its inclusion in this section.

[0003] Currently, complex front-end application projects are generally developed using a monolithic architecture or implemented using a micro-front-end architecture. However, both monolithic and micro-front-end architectures have certain drawbacks.

[0004] Monolithic architecture generally integrates multiple businesses, and has defects such as high coupling and complexity, difficulty in functional expansion, difficulty in team collaboration, difficulty in iteration, and complex construction.

[0005] For micro front-end architecture, there are currently three types of development methods:

[0006] 1. Micro-frontend solutions based on webpack 5 module federation, such as EMP micro-frontend. This solution has a strong dependency on webpack and is not friendly to long-standing frontend applications or frontend business projects, limiting its scope of application.

[0007] 2. Context isolation does not utilize iframes (inline frames), such as Qiankun, Micro-App, and Garfish. Instead, the front-end application is parsed and added to a designated DOM (Document Object Model), using a specific sandbox solution to isolate JavaScript and CSS styles. However, cross-domain resource access comes with numerous restrictions, resulting in high adaptation costs, and CSS style isolation still needs improvement in effectiveness and performance.

[0008] 3. Contextual isolation uses iframes for isolation. Some of these solutions leverage the characteristics of iframe tags and use Web Components (web-native components) to add the content within the iframe to the parent page, creating a single page and implementing sandbox isolation through Web Components. Other solutions use an iframe to display each front-end application, hiding only unnecessary pages and leveraging the iframe's hard isolation to isolate services. However, due to the thoroughness of iframe hard isolation, it is not suitable for integrating multiple front-end applications. Summary of the Invention

[0009] The embodiment of the present invention provides a front-end framework system to ensure that existing front-end applications maintain their original construction and deployment, and can easily add and remove front-end applications in a plug-in manner, eliminating cross-domain restrictions and other security issues between front-end applications, and providing a lightweight distributed security layer and an underlying secure communication channel, so that developers can focus only on the security of the front-end application level. The front-end framework system includes: a login module, a central control application module and multiple front-end applications; wherein,

[0010] A login module is used to receive user login information and send the user login information to a unified authentication server of multiple front-end applications, so that the unified authentication server can query user information based on the user login information and perform security authentication on the user information;

[0011] The central control application module is used to display a central control application module page nested with multiple front-end application pages to the user after the user passes security authentication. It uniformly manages global status information, triggers each front-end application to cache and load pages based on the global status information, and implements cross-domain based on cloud native functions. The global status information includes the status information of each front-end application and public status information. The front-end application status information includes the status of the front-end application's page information, and the public status information includes the status of data information commonly used by multiple front-end applications.

[0012] The multiple front-end applications are used to receive user input information, interact with the central control application module and their respective back-end servers based on the user input information, and implement business logic processing; the user input information includes information that triggers front-end application status information, public status information, URL information changes, and network request information sent to the back-end server.

[0013] In one embodiment, the central control application module may include a framework state management module, a routing management module, a loading module, and a cache management module;

[0014] The framework state management module is used to obtain and store global state information;

[0015] The routing management module is used to use the unified cluster external access portal and traffic routing function provided by cloud native to achieve cross-domain when refreshing the front-end application page. The routing management module is also used to trigger the front-end application page refresh through multiple plug-ins and the first application API. The multiple plug-ins are installed in the central control application module and each front-end application. The multiple plug-ins are used to monitor Uniform Resource Locator (URL) changes. The first API is used to obtain URL change information monitored by the plug-in, calculate the browser URL address and iframe tag address based on the URL change information monitored by the plug-in, and trigger the front-end application page refresh according to the calculation result;

[0016] The loading module is used to monitor the change information of each front-end application status information and public status information stored in the framework status management module, and load the front-end application page according to the change information;

[0017] The cache management module is used to monitor the network requests sent by each front-end application to its respective back-end server, and obtain and cache business data from the corresponding back-end server according to the network requests sent by the front-end application to the corresponding back-end server.

[0018] In one embodiment, multiple front-end applications are implemented using different technology stacks.

[0019] In one embodiment, the technology stack includes one or any combination of the following: Vue technology stack, React technology stack, AngularJS technology, and native technology stack.

[0020] In one embodiment, the traffic routing function includes a virtual service and a destination rule, which is used to match the network request of each front-end application to a specific target address in the grid according to the destination rule.

[0021] In one embodiment, the cache management module is further configured to: when the number of monitored network requests exceeds a preset threshold, no longer obtain and cache business data from the corresponding backend server.

[0022] The embodiment of the present invention further provides a front-end application development method for easily adding new front-end applications and integrating existing front-end applications based on the front-end framework system in the embodiment of the present invention, thereby reducing redundant code generated by adding and integrating front-end applications and achieving fast and reliable front-end application development and construction. The front-end application development method includes:

[0023] Configure the cluster environment;

[0024] Deploy front-end applications based on cluster environment;

[0025] Using the front-end framework system in the embodiment of the present invention, register the front-end application to obtain a registration mapping table;

[0026] Register front-end application permissions based on the registration mapping table;

[0027] Compile and run the front-end application in the cluster environment and load the front-end application;

[0028] When the front-end application initiates a network request to the back-end server, a change in the global status information in the central control application module is triggered; the global status information includes the front-end application status information and public status information. The front-end application status information includes the status of the front-end application's page information, and the public status information includes the status of data information commonly used by multiple front-end applications;

[0029] Load the front-end application page based on the information changes in the central control application module and the front-end application permissions.

[0030] In one embodiment, the front-end framework system has multiple existing front-end applications; the multiple existing front-end applications are implemented using different technology stacks.

[0031] In one embodiment, the front-end application status information includes business data acquisition request information and URL change information. The public status information includes a message that triggers a change in the front-end application status information and a message that triggers a change in the central control application module status information. Loading the front-end application page based on information changes in the central control application module and front-end application permissions may include:

[0032] Determine whether to obtain the page data to be displayed from the backend server corresponding to the front-end application based on the business data acquisition request information, URL change information and front-end application permissions;

[0033] When the page data to be displayed needs to be obtained from the backend server corresponding to the front-end application, a business data acquisition request is sent to the backend server corresponding to the front-end application;

[0034] Receive and cache business data fed back by the back-end server corresponding to the front-end application;

[0035] Based on the URL change information, the message that triggers the front-end application status information change, and the message that triggers the central control application module status information change, the cached business data is loaded and displayed on the front-end application page.

[0036] An embodiment of the present invention also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned front-end application development method when executing the computer program.

[0037] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the above-mentioned front-end application development method is implemented.

[0038] An embodiment of the present invention further provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the above-mentioned front-end application development method is implemented.

[0039] An embodiment of the present invention provides a front-end framework system, including a login module, a central control application module and multiple front-end applications, the central control application module framework status management module, routing management module, loading module, cache management module, wherein the login module receives user login information and provides users with a unified user interface entrance, thereby realizing unified security authentication. After the security authentication is passed, the user interface jumps to the central control application module page, and the central control application module page nests multiple front-end application pages, and users can implement business logic processing based on different front-end applications. Adding or removing front-end applications based on this front-end framework system can not only ensure that the existing front-end applications maintain their original construction and deployment, but also easily and plug-in-style add and remove front-end applications; and, the central control application module uniformly manages global status information, the global status information includes the status information of each front-end application and public status information, the front-end application status information includes the status of the page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications, that is, global status information monitoring and management is realized; at the same time, the central control application module uses cloud native to achieve cross-domain and is developed in a cloud native way, which can also eliminate other security issues caused by excessive related code in the business code due to different deployment environments during the front-end code development and deployment process. In general, the front-end framework system provides a lightweight distributed security layer and an underlying secure communication channel through the mutual collaboration between modules. The front-end applications call and access each other as if they are on a server. The construction of each front-end application maintains its original and respective construction method. Developers only need to focus on the security at the front-end application level, achieving simple and flexible development and fast and convenient construction.

[0040] An embodiment of the present invention provides a front-end application development method, which configures a cluster environment; deploys a front-end application based on the cluster environment; registers the front-end application using the front-end framework system in the embodiment of the present invention to obtain a registration mapping table; registers the front-end application permissions based on the registration mapping table; compiles and runs the front-end application in the cluster environment and loads the front-end application; when the front-end application initiates a network request to the back-end server, triggers a change in global status information in the central control application module; the global status information includes front-end application status information and public status information, the front-end application status information includes the status of the page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications; loads the front-end application page according to the information change in the central control application module and the front-end application permissions. The front-end application development method in the embodiment of the present invention is based on the front-end framework system in the embodiment of the present invention, and can easily add new front-end applications and integrate existing front-end applications, thereby reducing the redundant code generated by the addition and integration of front-end applications and realizing fast and reliable front-end application development and construction. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0042] Figure 1 This is a schematic diagram of a front-end framework system in an embodiment of the present invention;

[0043] Figure 2 This is a specific embodiment of the front-end framework system in an embodiment of the present invention;

[0044] Figure 3 This is a schematic diagram of the framework state management module processing of the front-end framework system in an embodiment of the present invention;

[0045] Figure 4 Schematic diagram of the routing management module processing of the front-end framework system in an embodiment of the present invention Figure 1 ;

[0046] Figure 5 Schematic diagram of the routing management module processing of the front-end framework system in an embodiment of the present invention Figure 2 ;

[0047] Figure 6 This is a schematic diagram of loading module processing of the front-end framework system in an embodiment of the present invention;

[0048] Figure 7 This is a schematic diagram of the cache management module processing of the front-end framework system in an embodiment of the present invention;

[0049] Figure 8 The figure is a flow chart of the front-end application development method in an embodiment of the present invention. DETAILED DESCRIPTION

[0050] To make the purpose, technical solutions and advantages of the embodiments of the present invention more clear, the embodiments of the present invention are further described in detail below with reference to the accompanying drawings. Here, the exemplary embodiments of the present invention and their descriptions are used to explain the present invention, but are not intended to limit the present invention.

[0051] First, the technical terms involved in the embodiments of the present invention are explained.

[0052] Micro-frontends: Micro-frontends are not simply front-end frameworks or tools, but rather an architectural system, similar to the microservices architecture. They apply the microservices concept to the browser side, transforming web applications from single, monolithic applications into multiple, integrated, front-end applications. Each front-end application can also run, develop, and deploy independently.

[0053] Front-end framework: A platform for developing front-ends. It usually includes methods for building files, associating data with DOM elements, setting component styles, and making AJAX (creating fast dynamic web pages) requests. Users must standardize their code according to its regulations.

[0054] Cloud Native: Cloud means that the application is located in the cloud, not a traditional data center; Native means that the application is designed with the cloud environment in mind from the beginning. Cloud native is a method for building and running applications, a set of technical systems and methodologies. Applications developed based on cloud native architecture are generally containerized using open source stacks, using agile methods to support continuous iteration and operation and maintenance automation, and improving flexibility and maintainability based on microservice architecture.

[0055] Containerization: Referring to the concept of containers in shipping, in shipping, it doesn’t matter whether it is transporting cars or cotton. The shipping process is standardized through containers. The mission of containers in the computer field is the same. Containers have the ability to be self-contained, and all the programs that their own programs depend on are included in the container. By flattening the underlying environment through Docker, users can run a container image on a host machine with any operating system. Of course, there is more than one type of container, Docker, there are also CoreOs, etc. Containers are extremely lightweight, deployable in seconds, easy to port, elastically scalable, etc., and are widely used in microservices.

[0056] The applicant found that in the prior art, the development of front-end application solutions generally adopts a monolithic architecture or a micro-front-end architecture. However, both the monolithic architecture and the micro-front-end architecture have certain defects. The monolithic architecture generally integrates multiple businesses, and has defects such as high coupling and complexity, difficulty in functional expansion, difficulty in team collaboration, difficulty in iteration, and complex construction. There are currently three types of development methods for micro-front-end architecture: 1. Micro-front-end solutions based on webpack 5module federation, which have a small scope of application; 2. Context isolation does not use iframe solutions, has many cross-domain resource access restrictions, high adaptation costs, and CSS style isolation still needs to be improved in terms of effect and performance; 3. Context isolation uses iframe for isolation. Due to the thoroughness of iframe hard isolation, it is not suitable for use when multiple front-end applications need to be integrated.

[0057] Based on the above-mentioned defects in the prior art, the applicant proposes a front-end framework system.

[0058] Figure 1 Schematic diagram of the front-end framework system in an embodiment of the present invention, as shown in FIG. Figure 1 As shown, the front-end framework system includes: a login module 101, a central control application module 102 and multiple front-end applications 103; wherein,

[0059] The login module 101 is used to receive user login information and send the user login information to a unified authentication server of multiple front-end applications 103, so that the unified authentication server can query user information based on the user login information and perform security authentication on the user information;

[0060] The central control application module 102 is used to display a central control application module page containing multiple nested front-end application pages to the user after the user passes security authentication. It also manages global status information in a unified manner, triggers each front-end application to cache and load pages based on the global status information, and implements cross-domain functionality based on cloud native functions. The global status information includes the status information of each front-end application and public status information. The front-end application status information includes the status of the front-end application's page information, and the public status information includes the status of data information commonly used by multiple front-end applications.

[0061] The multiple front-end applications 103 are used to receive user input information, interact with the central control application module 102 and their respective back-end servers based on the user input information, and implement business logic processing; the user input information includes information that triggers front-end application status information, public status information, URL information changes, and network request information sent to the back-end server.

[0062] In one embodiment, the central control application module 102 may include a framework state management module, a routing management module, a loading module, and a cache management module;

[0063] The framework state management module is used to obtain and store global state information;

[0064] The routing management module is used to utilize the unified cluster external access portal and traffic routing function provided by cloud native to achieve cross-domain when refreshing the front-end application page. The routing management module is also used to trigger the front-end application page refresh through multiple plug-ins and a first API. The multiple plug-ins are installed in the central control application module and each front-end application. The multiple plug-ins are used to monitor Uniform Resource Locator (URL) changes. The first API is used to obtain URL change information monitored by the plug-in, calculate the browser URL address and iframe tag address based on the URL change information monitored by the plug-in, and trigger the front-end application page refresh according to the calculation result;

[0065] The loading module is used to monitor the change information of each front-end application status information and public status information stored in the framework status management module, and load the front-end application page according to the change information;

[0066] The cache management module is used to monitor the network requests sent by each front-end application to its respective back-end server, and obtain and cache business data from the corresponding back-end server according to the network requests sent by the front-end application to the corresponding back-end server.

[0067] It can be seen that the embodiment of the present invention proposes a pluggable front-end framework based on cloud native and iframe, wherein Iframe uses the browser native hard isolation method to achieve complete context isolation, without compatibility issues and adaptation costs. Moreover, based on cloud native, it eliminates the problem of network differences in the deployment of various business systems, and enables each business application module to maintain its original construction and deployment.

[0068] Figure 2 This is a specific embodiment of the front-end framework system in the embodiment of the present invention, such as Figure 2 As shown, Figure 2 This diagram illustrates the interaction between the front-end and back-end servers. In this example, multiple front-end applications are implemented using different technology stacks, such as Vue, React, AngularJS, or native JavaScript / HTML / CSS. Front-end applications can be easily added and removed as plugins. Similarly, multiple front-end applications can be implemented using the same technology stack, allowing developers to freely choose the technology stack to develop their front-end applications.

[0069] All front-end applications implement unified security authentication through the login module. The login module provides a unified user interface. Users enter their login information, which is then authenticated and granted permissions by a unified authentication server. After passing security authentication and obtaining permissions, the user interface transitions to the central control application page. Within the central control application page, the user interface consists of multiple front-end application pages nested within the central control application page. This means that multiple front-end applications are displayed together within a single iframe. Finally, the front-end applications access services provided by their respective back-end servers.

[0070] In an embodiment of the present invention, the central control application module includes at least a framework state management module, a routing management module, a loading module, and a cache management module, and may also include other necessary functional modules, such as some basic functional components and APIs that support calls, functional modules for discovering and registering newly connected front-end applications, modules for front-end application life cycle management, and so on.

[0071] 1. Framework status management module.

[0072] In the prior art, the Iframe global context is completely isolated and does not share memory variables. When the parent page switches routes, its internal state is lost and cannot be reproduced. Therefore, in the embodiment of the present invention, a frame state management is designed, and a frame state management container is used to store the global state.

[0073] The framework state management module can be containerized to obtain and store the state information of each front-end application and public state information.

[0074] Front-end application status information includes the status of the front-end application's page information, such as active status information and historical status information. Active status information records the status information of the currently active front-end application, while historical status information records the status information of inactive front-end applications. Before the front-end application is loaded, the status information of the inactive front-end applications in the historical status information is read. Before the parent page switches routes, the active status information is stored in the historical status information of the inactive front-end applications. The active status information is recorded while the front-end application is executing.

[0075] Public status information includes the status of data information commonly used by multiple front-end applications. When the public status is modified, corresponding events are triggered, such as user information, permission information, loading, etc.

[0076] Figure 3 FIG. 1 is a schematic diagram of a processing module of a front-end framework system according to an embodiment of the present invention. Figure 3 As shown, the central control application module initially stores public status information. When the user triggers a change in page information through a page operation or triggers a network request, the front-end application status information and public status information will be changed. The framework status management module of the central control application module obtains the information change, for example, by subscription, and the central control application module uniformly manages and stores the global status.

[0077] 2. Routing management module.

[0078] In the prior art, since the URL status of the iframe is lost and the back and forward buttons cannot be used after the browser is refreshed, there is a cross-domain restriction. Therefore, in the embodiment of the present invention, a routing management module function is designed to solve this problem.

[0079] The front-end framework system in this embodiment of the present invention achieves cross-domain implementation based on the unified cluster external access portal and traffic routing capabilities provided by cloud native. The unified cluster external access portal eliminates cross-domain issues with the front-end and improves the user experience. Traffic routing, consisting of virtual services and destination rules, is used to match each front-end application's network request to a specific destination address within the grid according to the destination rule, ensuring that all front-end application network requests access the correct resources and services.

[0080] In addition, based on the functions provided by cloud native, the routing management module in this front-end framework system is also used to trigger the front-end application page refresh through multiple plug-ins and the first API; wherein, multiple plug-ins are installed in the central control application module and each front-end application respectively, and multiple plug-ins are used to monitor URL changes, for example, changes in the pathname, hash, and search query value in the URL; the first API is used to obtain the URL change information monitored by the plug-in, calculate the browser URL address and iframe Src tag address according to the URL change information monitored by the plug-in, and trigger the front-end application page refresh according to the calculation results.

[0081] Figure 4 Schematic diagram of the routing management module processing of the front-end framework system in an embodiment of the present invention Figure 1 ,like Figure 4 As shown, the plug-in installed in each front-end application monitors the URL change, and the first API processes the URL change information uniformly to trigger a page refresh.

[0082] Figure 5 Schematic diagram of the routing management module processing of the front-end framework system in an embodiment of the present invention Figure 2 , combined with Figure 4 、 Figure 5 , where the browser path change is triggered by two situations:

[0083] 1) Modify the URL address triggered by the central control application;

[0084] When the central control application modifies the URL address, the plug-in dependency package installed in the central control application observes the change of pathname, hash or search value, publishes information to the first API that calculates the browser URL address and iframe Src address, and finally triggers the page refresh of the corresponding front-end application.

[0085] 2) Modify the URL address triggered by the front-end application;

[0086] When the URL address is modified in the front-end application interface, in order to modify the browser path, the plug-in dependency package installed in the front-end application observes the change in pathname, hash or search value, publishes it to the first API that calculates the browser URL and iframe Src address, and finally triggers the page refresh of the corresponding front-end application.

[0087] 3. Load the module.

[0088] In the prior art, Iframes are hard-isolated and have no uniform loading effect, which reduces the user experience. Therefore, a loading module is designed in the embodiment of the present invention.

[0089] Figure 6 FIG. 1 is a schematic diagram of a loading module process of a front-end framework system according to an embodiment of the present invention. Figure 6 As shown, the loading module monitors the change information of each front-end application state information and public state information stored in the framework state management module, and loads the front-end application page according to the change information.

[0090] When a front-end application page needs to display or close page loading data, it publishes loading information to the framework state management module. The framework state management module modifies the loading information to true or false. When the loading module detects the loading information modification in the framework state management module, it displays or closes the page loading data.

[0091] 4. Cache management module.

[0092] In the prior art, when browsing a single page without iframes, the browser cache provides a fast page display function. Clicking the back and forward buttons causes the page to jump, but does not trigger a page refresh, network access requests, or reflow or redraw. However, pages containing iframes often cause page refreshes, triggering multiple network access requests and reflow and redraw, resulting in slow page display, with the majority of the time spent on network requests.

[0093] Therefore, in this embodiment of the present invention, a cache management module is designed. The cache management module monitors network requests sent by each front-end application to its respective back-end server. Based on the network requests sent by the front-end application to the corresponding back-end server, the module retrieves and caches business data from the corresponding back-end server. When the page jumps caused by forward and backward movement, the cached data is used to achieve the same effect as clicking the forward and back buttons on a single page without iframes.

[0094] In one embodiment, in order not to affect the performance of the front-end framework system, the cache management module is also used to no longer obtain and cache business data from the corresponding back-end server when the number of monitored network requests exceeds a preset threshold.

[0095] For example, the number of requests cached by each business module is limited to a maximum of 5. Specifically, when a new network request is monitored, the obtained business data is pushed into the stack and updated to the end of the queue for processing. The business data at the head of the queue is deleted after processing, and the stack is updated. The number of business data in the stack does not exceed 5.

[0096] Figure 7 FIG. 1 is a schematic diagram of a cache management module processing of a front-end framework system according to an embodiment of the present invention. Figure 7 As shown, when the user operates on the front-end application, a mapping table is configured according to the user's operation information, and a configuration file is generated. According to the configuration file, a network request is initiated to the corresponding back-end server, and business data is obtained and cached from the corresponding back-end server. When the page jumps due to forward and backward movement, the cached data is read and rendered and displayed on the front-end application page. The mapping table stores the correspondence between user operation information and configuration information.

[0097] In summary, in an embodiment of the present invention, a front-end framework system is proposed based on cloud native technology and iframe technology, wherein the front-end framework system includes a login module, a central control application module and multiple front-end applications; wherein the central control application module includes a routing management module, a framework state management module, a loading module and a cache management module; a pluggable integrated front-end framework for front-end applications is realized, so that front-end application projects with different technical selections can be brought together to jointly realize the functions of front-end application projects, and developers with different backgrounds and skills can give full play to their best performance without being restricted by the platform, thereby improving development efficiency. According to the various functional requirements of the front-end application, the corresponding front-end functions are added or deleted to achieve development flexibility and code reusability, thereby achieving rapid development and improving user experience.

[0098] The embodiment of the present invention also provides a front-end application development method, Figure 8 FIG. 1 is a flow chart of a front-end application development method according to an embodiment of the present invention. Figure 8 As shown, the method includes:

[0099] Step 801: Configure the cluster environment;

[0100] Step 802: deploying front-end applications based on the cluster environment;

[0101] Step 803: Register the front-end application using the front-end framework system according to the embodiment of the present invention to obtain a registration mapping table.

[0102] Step 804: Register the front-end application permissions based on the registration mapping table;

[0103] Step 805: compile and run the front-end application in the cluster environment and load the front-end application;

[0104] Step 806: When the front-end application initiates a network request to the back-end server, a change in global status information in the central control application module is triggered; the global status information includes front-end application status information and public status information. The front-end application status information includes the status of page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications.

[0105] Step 807: Load the front-end application page according to the information changes in the central control application module and the front-end application permissions.

[0106] from Figure 8 As can be seen from the process shown, the front-end application development method in the embodiment of the present invention deploys the front-end application based on the cluster environment; utilizes the front-end framework system in the embodiment of the present invention to register the front-end application and obtain a registration mapping table; based on the registration mapping table, registers the front-end application permissions; compiles and runs the front-end application in the cluster environment and loads the front-end application; when the front-end application initiates a network request to the back-end server, triggers a change in the global status information in the central control application module; the global status information includes the front-end application status information and public status information, the front-end application status information includes the status of the page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications; according to the information change in the central control application module and the front-end application permissions, the front-end application page is loaded. The front-end application development method in the embodiment of the present invention is based on the front-end framework system in the embodiment of the present invention, and can easily add new front-end applications and integrate existing front-end applications, reducing the redundant code generated by the addition and integration of front-end applications, and realizing fast and reliable front-end application development and construction.

[0107] The following is a detailed explanation of the front-end application development method in the embodiment of the present invention.

[0108] First, configure the cluster environment, for example, configure the root directory, configuration files, deploy containers in Pods and corresponding output information, etc.

[0109] Then, build the front-end application, export the necessary lifecycle, package the front-end application, deploy it to the cluster environment, and pay attention to configuring the network port.

[0110] By using the front-end framework system in the embodiment of the present invention, the information of the front-end application is obtained to register the front-end application and obtain a registration mapping table; the registration mapping table includes routing information, authentication information, etc. of the front-end application.

[0111] Register the front-end application permissions based on the registration mapping table. The central control application module of the front-end framework system regularly obtains the latest registration mapping table information of the front-end application and registers the permissions required by the front-end application based on the latest registration mapping table information.

[0112] Compile and run the front-end application in the cluster environment and load the front-end application.

[0113] When the front-end application initiates a network request to the back-end server, the global status information in the central control application module is triggered to change; the global status information includes the front-end application status information and public status information, the front-end application status information includes the status of the page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications.

[0114] Load the front-end application page based on the information changes in the central control application module and the front-end application permissions.

[0115] In one embodiment, the front-end framework system has multiple existing front-end applications; the multiple existing front-end applications are implemented using different technology stacks.

[0116] In one embodiment, the front-end application status information includes at least business data acquisition request information and URL change information, and the public status information includes at least a message that triggers a change in the front-end application status information and a message that triggers a change in the central control application module status information;

[0117] Based on the information changes in the central control application module and the front-end application permissions, the front-end application page is loaded, which may include:

[0118] Determine whether to obtain the page data to be displayed from the backend server corresponding to the front-end application based on the business data acquisition request information, URL change information and front-end application permissions;

[0119] When the page data to be displayed needs to be obtained from the backend server corresponding to the front-end application, a business data acquisition request is sent to the backend server corresponding to the front-end application;

[0120] Receive and cache business data fed back by the back-end server corresponding to the front-end application;

[0121] Based on the URL change information, the message that triggers the front-end application status information change, and the message that triggers the central control application module status information change, the cached business data is loaded and displayed on the front-end application page.

[0122] An embodiment of the present invention further provides a page display method based on the front-end framework system, comprising:

[0123] Receive user login information;

[0124] Sending the user's login information to a unified authentication server of multiple front-end applications, so that the unified authentication server: queries the user information according to the user login information and performs security authentication on the user information;

[0125] According to the message that the user security authentication is passed, the first page corresponding to the central control application module is displayed to the user;

[0126] receiving operation information input by the user on the first page;

[0127] According to the operation information input by the user, corresponding configuration information is obtained from a pre-established configuration mapping table, wherein the configuration information includes business data acquisition request information, URL change information, a message that triggers a change in the state information of the front-end application, and a message that triggers a change in the state information of the central control application module. The pre-established configuration mapping table includes a correspondence between the user operation information and the configuration information; the URL change information includes the address information of a second page corresponding to the front-end application to be redirected;

[0128] Determining page data to be displayed on the second page and existing page data on the second page according to the business data acquisition request information and the URL change information;

[0129] determining, based on the page data to be displayed on the second page and the existing page data on the second page, whether to obtain the page data to be displayed on the second page from the backend server to which the frontend application belongs;

[0130] When the page data to be displayed on the second page needs to be obtained from the backend server to which the frontend application belongs, a business data acquisition request is sent to the backend server to which the frontend application belongs according to the business data acquisition request;

[0131] Receive and cache business data fed back by the backend server;

[0132] According to the URL change information, jump from the first page to the second page, and according to the message that triggers the change of the front-end application status information and the message that triggers the change of the central control application module status information, load and display the business data fed back by the cache backend server on the second page.

[0133] The present invention also provides a front-end application development device, as described in the following embodiments. Since the principle of solving the problem of the device is similar to that of the front-end application development method, the implementation of the device can refer to the implementation of the front-end application development method, and the repeated parts will not be repeated.

[0134] The front-end application development device in the embodiment of the present invention includes:

[0135] Front-end application deployment module, used to configure the cluster environment; deploy front-end applications based on the cluster environment;

[0136] The front-end application registration module is used to register the front-end application using the front-end framework system in the embodiment of the present invention to obtain a registration mapping table; based on the registration mapping table, register the front-end application permissions;

[0137] The front-end application loading module is used to compile and run the front-end application in a cluster environment and load the front-end application; when the front-end application initiates a network request to the back-end server, it triggers a change in the global status information in the central control application module; the global status information includes the front-end application status information and public status information, the front-end application status information includes the status of the page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications; the front-end application page is loaded according to the information change in the central control application module and the front-end application permissions.

[0138] In one embodiment, the front-end framework system in the device has multiple existing front-end applications; the multiple existing front-end applications are implemented using different technology stacks.

[0139] In one embodiment, the front-end application status information includes at least business data acquisition request information and URL change information, and the public status information includes at least a message that triggers a change in the front-end application status information and a message that triggers a change in the central control application module status information;

[0140] The root front-end application loading module is specifically used for:

[0141] Determine whether to obtain the page data to be displayed from the backend server corresponding to the front-end application based on the business data acquisition request information, URL change information and front-end application permissions;

[0142] When the page data to be displayed needs to be obtained from the backend server corresponding to the front-end application, a business data acquisition request is sent to the backend server corresponding to the front-end application;

[0143] Receive and cache business data fed back by the back-end server corresponding to the front-end application;

[0144] Based on the URL change information, the message that triggers the front-end application status information change, and the message that triggers the central control application module status information change, the cached business data is loaded and displayed on the front-end application page.

[0145] An embodiment of the present invention also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned front-end application development method when executing the computer program.

[0146] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the above-mentioned front-end application development method is implemented.

[0147] An embodiment of the present invention further provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the above-mentioned front-end application development method is implemented.

[0148] An embodiment of the present invention provides a front-end framework system, including a login module, a central control application module and multiple front-end applications, the central control application module framework status management module, routing management module, loading module, cache management module, wherein the login module receives user login information and provides users with a unified user interface entrance, thereby realizing unified security authentication. After the security authentication is passed, the user interface jumps to the central control application module page, and the central control application module page nests multiple front-end application pages, and users can implement business logic processing based on different front-end applications. Adding or removing front-end applications based on this front-end framework system can not only ensure that the existing front-end applications maintain their original construction and deployment, but also easily and plug-in-style add and remove front-end applications; and, the central control application module uniformly manages global status information, the global status information includes the status information of each front-end application and public status information, the front-end application status information includes the status of the page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications, that is, global status information monitoring and management is realized; at the same time, the central control application module uses cloud native to achieve cross-domain and is developed in a cloud native way, which can also eliminate other security issues caused by excessive related code in the business code due to different deployment environments during the front-end code development and deployment process. In general, the front-end framework system provides a lightweight distributed security layer and an underlying secure communication channel through the mutual collaboration between modules. The front-end applications call and access each other as if they are on a server. The construction of each front-end application maintains its original and respective construction method. Developers only need to focus on the security at the front-end application level, achieving simple and flexible development and fast and convenient construction.

[0149] An embodiment of the present invention provides a front-end application development method, which configures a cluster environment; deploys a front-end application based on the cluster environment; registers the front-end application using the front-end framework system in the embodiment of the present invention to obtain a registration mapping table; registers the front-end application permissions based on the registration mapping table; compiles and runs the front-end application in the cluster environment and loads the front-end application; when the front-end application initiates a network request to the back-end server, triggers a change in global status information in the central control application module; the global status information includes front-end application status information and public status information, the front-end application status information includes the status of the page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications; loads the front-end application page according to the information change in the central control application module and the front-end application permissions. The front-end application development method in the embodiment of the present invention is based on the front-end framework system in the embodiment of the present invention, and can easily add new front-end applications and integrate existing front-end applications, thereby reducing the redundant code generated by the addition and integration of front-end applications and realizing fast and reliable front-end application development and construction.

[0150] It will be understood by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Thus, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0151] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, 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 produce 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 flowcharts and / or block diagrams. 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.

[0152] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work 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 1The function specified in one or more boxes.

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

[0154] The specific embodiments described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A front-end framework system, characterized in that: The front-end framework system includes: a login module, a central control application module and multiple front-end applications; wherein, A login module is used to receive user login information and send the user login information to a unified authentication server of multiple front-end applications, so that the unified authentication server can query user information based on the user login information and perform security authentication on the user information; The central control application module is used to display a central control application module page that embeds multiple front-end application pages to the user after the user security authentication is passed. For multiple front-end applications, one iframe is used for display, and global status information is uniformly managed. According to the global status information, each front-end application is triggered to cache and load pages, and cross-domain is realized based on cloud native functions. The global status information includes the status information of each front-end application and public status information. The front-end application status information includes the status of the page information of the front-end application, and the public status information includes the status of data information commonly used by multiple front-end applications. The public status information includes messages that trigger changes in the front-end application status information and messages that trigger changes in the central control application module status information. The multiple front-end applications are used to receive user input information and interact with the central control application module and their respective back-end servers based on the user input information to implement business logic processing; the user input information includes information that triggers changes in front-end application status information, public status information, URL information, and network request information sent to the back-end server; The central control application module includes a framework status management module, a loading module, and a cache management module; the framework status management module is used to obtain and store global status information; the loading module is used to monitor the change information of each front-end application status information and public status information stored in the framework status management module, and load the front-end application page according to the change information; the cache management module is used to monitor the network requests sent by each front-end application to its respective back-end server, and obtain and cache business data from the corresponding back-end server according to the network requests sent by the front-end application to the corresponding back-end server; wherein, when the user operates in the front-end application, a mapping table is configured according to the user's operation information, a configuration file is generated, and a network request is initiated to the corresponding back-end server according to the configuration file, and business data is obtained and cached from the corresponding back-end server. When the page jumps due to forward and backward movement, the cached data is read and rendered and displayed on the front-end application page. The mapping table stores the correspondence between user operation information and configuration information; the configuration information includes business data acquisition request information, URL change information, messages that trigger changes in front-end application status information, and messages that trigger changes in central control application module status information.

2. The front-end frame system according to claim 1, characterized in that: The central control application module includes a routing management module; The routing management module is used to achieve cross-domain when refreshing the front-end application page by utilizing the unified cluster external access portal and traffic routing function provided by cloud native. The routing management module is also used to trigger the front-end application page refresh through multiple plug-ins and the first application API. The multiple plug-ins are installed in the central control application module and each front-end application. The multiple plug-ins are used to monitor the Uniform Resource Locator URL changes. The first application API is used to obtain the URL change information monitored by the plug-in, calculate the browser URL address and iframe tag address based on the URL change information monitored by the plug-in, and trigger the front-end application page refresh according to the calculation results.

3. The front-end frame system according to claim 1, characterized in that: The multiple front-end applications are implemented using different technology stacks.

4. The front-end frame system according to claim 3, characterized in that: The technology stack includes one or any combination of the following: Vue technology stack, React technology stack, AngularJS technology, and native technology stack.

5. The front-end frame system according to claim 2, wherein: The traffic routing function includes VirtualService and DestinationRule, which are used to match the network request of each front-end application to a specific destination address within the grid according to the destination rule.

6. The front-end frame system according to claim 1, wherein: The cache management module is also used to: when the number of monitored network requests exceeds a preset threshold, no longer obtain and cache business data from the corresponding backend server.

7. A front-end application development method, characterized in that: include: Configure the cluster environment; Deploy front-end applications based on cluster environment; Using the front-end framework system described in any one of claims 1 to 6, registering the front-end application to obtain a registration mapping table; Register front-end application permissions based on the registration mapping table; Compile and run the front-end application in the cluster environment and load the front-end application; When the front-end application initiates a network request to the back-end server, a change in the global status information in the central control application module is triggered; the global status information includes the front-end application status information and public status information. The front-end application status information includes the status of the front-end application's page information, and the public status information includes the status of data information commonly used by multiple front-end applications; Load the front-end application page based on the global status information changes and front-end application permissions in the central control application module.

8. The method according to claim 7, wherein The front-end framework system has multiple existing front-end applications; the multiple existing front-end applications are implemented using different technology stacks.

9. The method according to claim 7, wherein The front-end application status information includes business data acquisition request information and URL change information, and the public status information includes messages that trigger changes in the front-end application status information and messages that trigger changes in the central control application module status information; Based on the information changes in the central control application module and the front-end application permissions, load the front-end application page, including: Determine whether to obtain the page data to be displayed from the backend server corresponding to the front-end application based on the business data acquisition request information, URL change information and front-end application permissions; When the page data to be displayed needs to be obtained from the backend server corresponding to the front-end application, a business data acquisition request is sent to the backend server corresponding to the front-end application; Receive and cache business data fed back by the back-end server corresponding to the front-end application; Based on the URL change information, the message that triggers the front-end application status information change, and the message that triggers the central control application module status information change, the cached business data is loaded and displayed on the front-end application page.

10. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the method according to any one of claims 7 to 9 is implemented.

11. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 7 to 9 is implemented.

12. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method according to any one of claims 7 to 9 is implemented.

Images