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

Abstract

The invention discloses a front-end framework system and a front-end application development method and device, and relates to the technical field of computers, and the front-end framework system comprises a login module, a central control application module and a plurality of front-end applications; wherein the login module is used for realizing unified security authentication, and the central control application module is used for displaying a central control application module page in which a plurality of front-end application pages are nested for a user after the security authentication of the user is passed, uniformly managing global state information, triggering each front-end application to cache and load the page according to the global state information, and transmitting the cached and loaded pages to the user. Realizing cross-domain based on a cloud native function; and the plurality of front-end applications are used for receiving input information of a user and interacting with the central control application module and the respective rear-end servers according to the input information of the user to realize service logic processing. According to the invention, rapid and reliable front-end application development can be realized.

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 a device. Background Art

[0002] This section is intended to provide a background or context to the embodiments of the invention recited in the claims. No admission is made that the description herein is prior art by inclusion in this section.

[0003] At present, front-end application projects with complex business are generally developed using a monolithic architecture or implemented using a micro-front-end architecture. However, both the monolithic architecture and the micro-front-end architecture have certain defects.

[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 frontend architecture, there are currently three types of development methods:

[0006] 1. Micro front-end solutions based on webpack 5module federation, such as EMP micro front-end. This solution is highly dependent on webpack and is not friendly to long-standing front-end applications or front-end business projects, which limits the scope of use of this solution.

[0007] 2. Context isolation does not use iframe (inline frame) solutions: such as Qiankun, micro-app, Garfish, etc. After parsing the front-end application, add it to the specified Dom (Document Object Model), and use a specific sandbox solution to achieve js and css style isolation. However, there are many restrictions on cross-domain resource access, high adaptation costs, and css style isolation still needs to be improved in terms of effect and performance.

[0008] 3. Context isolation uses iframes for isolation. Some of these solutions use Web Components (network native components) based on the characteristics of iframe tags to add the content in the iframe to the parent page to form a page, and implement sandbox isolation through Web Components. Some solutions use an iframe to display each front-end application, only hiding the pages that do not need to be displayed, and using the characteristics of iframe hard isolation to achieve business isolation. However, due to the thoroughness of iframe hard isolation, it is not suitable for use when multiple front-end applications need to be integrated. Summary of the invention

[0009] The embodiment of the present invention provides a front-end framework system to ensure that the existing front-end applications maintain the original construction and deployment, and can easily add and remove front-end applications in a plug-in manner, eliminate cross-domain restrictions and other security issues between front-end applications, provide a lightweight distributed security layer and a bottom-level secure communication channel, so that developers can only focus 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 according to the user login information and perform security authentication on the user information;

[0011] The central control application module is used to display the central control application module page with multiple nested front-end application pages to the user after the user security authentication is passed, uniformly manage the global status information, trigger the cache and page loading of each front-end application according to the global status information, and realize cross-domain based on cloud native functions; the global status information includes the status information of each front-end application and the 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 the 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 respective back-end servers according to 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 realize cross-domain by utilizing the unified cluster external access portal and traffic routing function provided by cloud native 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 the change of the uniform resource locator URL. The first API is used to obtain the URL change information monitored by the plug-in, calculate the browser URL address and the iframe tag address according to the URL change information monitored by the plug-in, and trigger the page refresh of the front-end application according to the calculation result;

[0016] The loading module is used to monitor the change information of each front-end application state information and public state information stored in the framework state 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 own 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 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.

[0021] In one embodiment, the cache management module is further 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.

[0022] The embodiment of the present invention further provides a front-end application development method, which is used to easily add new front-end applications and integrate existing front-end applications based on the front-end framework system in the embodiment of the present invention, reduce the redundant code generated by the new and integrated front-end applications, and realize 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 page information of the front-end application, and the public status information includes the status of the 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, and the public status information includes a message that triggers the change of the front-end application status information and a message that triggers the change of the central control application module status information; loading the front-end application page according to the information change in the central control application module and the front-end application authority may include:

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

[0033] When the page data to be displayed needs to be obtained from the backend server corresponding to the frontend application, a business data acquisition request is sent to the backend server corresponding to the frontend 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, provides a unified user interface entrance for the user, and thus realizes a 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 the user 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 ensure that the existing front-end applications maintain their original construction and deployment, and can easily add and remove front-end applications in a plug-in manner; in addition, the central control application module uniformly manages the global status information, which includes the status information of each front-end application and the 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 the data information commonly used by multiple front-end applications, that is, the 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 too much related code in the business code during the front-end code development and deployment process due to different deployment environments. In general, the front-end framework system provides a lightweight distributed security layer and an underlying secure communication channel through the cooperation between modules. The front-end applications call and access each other as if 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, which realizes simple and flexible development and fast and convenient construction.

[0040] The 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 the front-end application status information and the 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 newly added and integrated 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 use in the embodiments or the prior art descriptions. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. In the drawings:

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

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

[0044] Figure 3 This is a schematic diagram of the processing of the framework state management module 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 A schematic diagram of loading module processing of a 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 solution and advantages of the embodiments of the present invention more clear, the embodiments of the present invention are further described in detail below in conjunction with 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 front-end: Micro front-end is not a simple front-end framework or tool, but a set of architecture systems, similar to the microservice architecture, which applies the concept of microservices to the browser side, that is, the Web application is transformed from a single monolithic application to an application that aggregates multiple small front-end applications. Each front-end application can also run, develop, and deploy independently.

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

[0054] Cloud Native: Cloud means that the application is located in the cloud rather than a traditional data center; Native means that the application is designed with the cloud environment in mind. Cloud native is a method of building and running applications, a set of technical systems and methodologies. Applications developed based on cloud native architecture generally use open source stacks for containerization, support continuous iteration and operation and maintenance automation with the help of agile methods, and improve 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 cars or cotton that are transported. The containers are used to standardize the transportation process into standardized operations. 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, deployed 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. 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 have a small scope of application; 2. Context isolation does not use iframe solutions, there are 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. Since iframe hard isolation has the thoroughness of 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. Figure 1 As shown, the front-end framework system includes: a login module 101, a central control application module 102 and a plurality of 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: queries user information according to the user login information and performs security authentication on the user information;

[0060] The central control application module 102 is used to display a central control application module page with multiple nested front-end application pages to the user after the user security authentication is passed, uniformly manage the global status information, trigger the front-end application cache and page loading according to the global status information, and implement 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 page information of the front-end application, and the public status information includes the status of the 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 respective back-end servers according to 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 realize cross-domain by utilizing the unified cluster external access portal and traffic routing function provided by cloud native 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 the change of the uniform resource locator URL. The first API is used to obtain the URL change information monitored by the plug-in, calculate the browser URL address and the iframe tag address according to the URL change information monitored by the plug-in, and trigger the page refresh of the front-end application according to the calculation result;

[0065] The loading module is used to monitor the change information of each front-end application state information and public state information stored in the framework state 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 own 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 or adaptation costs. It is based on cloud native and eliminates the problem of network differences in the deployment of various business systems, so that each business application module can maintain its original construction and deployment.

[0068] Figure 2 A specific embodiment of the front-end framework system in the embodiment of the present invention is as follows: Figure 2 As shown, Figure 2 The process of front-end and back-end server interaction is shown. In this example, multiple front-end applications are implemented using different technology stacks, such as vue technology stack, react technology stack, angularJS technology or native JavaScript / HTML / CSS technology stack, etc. Front-end applications can be easily added and removed in a plug-in manner. Similarly, multiple front-end applications can also be implemented using the same technology stack, and developers can freely choose the technology stack to develop front-end applications.

[0069] All front-end applications implement unified security authentication through the login module. The login module provides a unified user interface entrance. The user enters the login information, and the unified authentication server authenticates the information and grants permissions. After passing the security authentication and obtaining permissions, the user interface jumps to the central control application page. On the central control application page, the user interface is composed of multiple front-end application pages nested in the central control application page. That is, for multiple front-end applications, one iframe is used for display. Finally, the front-end applications access the services provided by their corresponding 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] The front-end application status information includes the status of the front-end application's page information, for example, active status information and historical status information, where the active status information records the status information of the currently active front-end application; the historical status information records the status information of the inactive front-end application. Before the front-end application is loaded, the status information of the inactive front-end application 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 application. When the front-end application is executed, the active status information is recorded.

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

[0076] Figure 3 FIG. 1 is a schematic diagram of a processing of a framework state management module of a front-end framework system in 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 the 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, after the iframe is refreshed in the browser, the URL status is lost and the back and forward buttons cannot be used, which results in cross-domain restrictions. 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 the embodiment of the present invention realizes cross-domain based on the unified cluster external access portal and traffic routing function provided by cloud native. Among them, the unified cluster external access portal function eliminates the problem of front-end cross-domain and improves user experience. The traffic routing composed of virtual service and destination rule 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, so that the network requests of all front-end applications can 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 respectively installed in the central control application module and each front-end application, and multiple plug-ins are used to monitor URL changes, for example, changes in 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 changes are 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 of pathname, hash or search value, and publishes it to the first API that calculates the browser URL and iframe Src address, finally triggering the page refresh of the corresponding front-end application.

[0087] 3. Load the module.

[0088] In the prior art, Iframe is hard isolated, and there is 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 loading module processing of the front-end framework system in 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 the front-end application page needs to display or close the page loading data, the loading information is published to the framework state management module. The framework state management module modifies the loading information to true or false. When the loading module monitors that the loading information in the framework state management module has been modified, the loading module displays or closes the page loading data.

[0091] 4. Cache management module.

[0092] In the prior art, when browsing a single page without iframes, since the browser cache provides a function of fast page display, clicking the back and forward buttons causes page jumps, but does not trigger page refresh, network access requests, or reordering and redrawing. However, pages with iframes usually cause page refreshes, trigger multiple network access requests, and reordering and redrawing, making the page display slow, with most of the time spent on network requests.

[0093] Therefore, a cache management module is designed in the embodiment of the present invention. The cache management module monitors the network requests sent by each front-end application to its own back-end server, and obtains and caches 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. 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 backward 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 acquired business data is pushed into the stack and updated to the end of the queue waiting 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 in an embodiment of the present invention. Figure 7 As shown, 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 the user operation information and the configuration information.

[0097] In summary, in the embodiment of the present invention, based on cloud native technology and iframe technology, a front-end framework system is proposed, 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 the efficiency of development. According to the functional requirements of the front-end application, the corresponding front-end functions are added or deleted to achieve development flexibility, code reusability, rapid development and improved 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 in 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 described in 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 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 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 It can be seen from the process shown that the front-end application development method in the embodiment of the present invention deploys the front-end application based on the cluster environment; uses the front-end framework system in the embodiment of the present invention to register the front-end application and obtain the 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 the change of the global status information in the central control application module; the global status information includes the front-end application status information and the 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 the data information 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 front-end application development method in the embodiment of the present invention is explained in detail below.

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

[0109] Then, build the front-end application, export the necessary life cycle, 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 a registration mapping table is obtained; 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 according to 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, there are multiple existing front-end applications in the front-end framework system; 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] According to the information changes in the central control application module and the front-end application permissions, load the front-end application page, which may include:

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

[0119] When the page data to be displayed needs to be obtained from the backend server corresponding to the frontend application, a business data acquisition request is sent to the backend server corresponding to the frontend 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] The embodiment of the present invention also 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 has passed, the first page corresponding to the central control application module is displayed to the user;

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

[0127] According to the operation information input by the user, the corresponding configuration information is obtained from the 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 address information of a second page to be redirected corresponding to the front-end application;

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

[0129] Determining whether to obtain the page data to be displayed on the second page from the back-end server to which the front-end application belongs according to the page data to be displayed on the second page and the existing page data on the second page;

[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 by 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, 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; according to the information changes in the central control application module and the front-end application permissions, the front-end application page is loaded.

[0138] In one embodiment, there are multiple existing front-end applications in the front-end framework system of the device; 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 frontend application based on the business data acquisition request information, URL change information and frontend application permissions;

[0142] When the page data to be displayed needs to be obtained from the backend server corresponding to the frontend application, a business data acquisition request is sent to the backend server corresponding to the frontend 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, provides a unified user interface entrance for the user, and thus realizes a 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 the user 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 ensure that the existing front-end applications maintain their original construction and deployment, and can easily add and remove front-end applications in a plug-in manner; in addition, the central control application module uniformly manages the global status information, which includes the status information of each front-end application and the 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 the data information commonly used by multiple front-end applications, that is, the 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 too much related code in the business code during the front-end code development and deployment process due to different deployment environments. In general, the front-end framework system provides a lightweight distributed security layer and an underlying secure communication channel through the cooperation between modules. The front-end applications call and access each other as if 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, which realizes simple and flexible development and fast and convenient construction.

[0149] The 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 the front-end application status information and the 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 newly added and integrated front-end applications, and realizing fast and reliable front-end application development and construction.

[0150] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, 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 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 flowchart and / or block diagram, as well as the combination of processes and / or blocks 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 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 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.

[0152] 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 1A 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 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 A step that specifies a function 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 according to the user login information and perform security authentication on the user information; The central control application module is used to display the central control application module page with multiple nested front-end application pages to the user after the user security authentication is passed, uniformly manage the global status information, trigger the cache and page loading of each front-end application according to the global status information, and realize cross-domain based on cloud native functions; the global status information includes the status information of each front-end application and the 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 the data information commonly used by multiple front-end applications; The multiple front-end applications are used to receive user input information, interact with the central control application module and respective back-end servers according to 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.

2. The front-end framework system according to claim 1, characterized in that: The central control application module includes a framework status management module, a routing management module, a loading module, and a cache management module; The framework state management module is used to obtain and store global state information; The routing management module is used to realize cross-domain by utilizing the unified cluster external access portal and traffic routing function provided by cloud native 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 the change of the uniform resource locator URL. The first API is used to obtain the URL change information monitored by the plug-in, calculate the browser URL address and the iframe tag address according to the URL change information monitored by the plug-in, and trigger the page refresh of the front-end application according to the calculation result; The loading module is used to monitor the change information of each front-end application state information and public state information stored in the framework state 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 own 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.

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

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 framework system according to claim 2, characterized in that: The traffic routing function includes Virtualservice and destination rule, which are used to match the network request of each front-end application to a specific destination address in the grid according to the destination rule.

6. The front-end framework system according to claim 1, characterized in that: 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 page information of the front-end application, and the public status information includes the status of the 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, characterized in that 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, characterized in that 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 the change of the front-end application status information and messages that trigger the change of the central control application module status information; According to 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 frontend application based on the business data acquisition request information, URL change information and frontend application permissions; When the page data to be displayed needs to be obtained from the backend server corresponding to the frontend application, a business data acquisition request is sent to the backend server corresponding to the frontend 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, characterized in that: 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