Configuration method for dynamically loading Vue3 component to construct front-end user interface under ExtJS combined JSP architecture

Abstract

The invention discloses a configuration method for dynamically loading a Vue3 component to construct a front-end user interface under an ExtJS combined JSP architecture, which comprises the following steps of: under the ExtJS combined JSP architecture, newly adding a front-end bridging layer in a Java back-end source code and a compiled and output directory, and configuring a micro front-end engine file and a loading configuration file of a dynamic component loading engine in the front-end bridging layer; an application project directory of the Vue3 component is newly added; a micro-front-end engine file is introduced into a main interface entry JSP file, a loading configuration file of a packaged dynamic component loading engine is introduced, a DOM container of a Vue3 component is arranged in an HTML, and a management object syncExt of a bridging layer of the Vue3 component is customized; and carrying out packaging deployment on the J2EE and a front-end bridging layer by adopting dockerfile configuration, so as to realize cross-framework context communication. The method not only can support stable operation of stock applications, but also can integrate modern front-end framework components and realize framework decoupling.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Web front-end visualization integration, in particular to a configuration method for constructing a front-end user interface by dynamically loading Vue3 components under an ExtJS combined JSP architecture. BACKGROUND

[0002] ExtJS is a powerful enterprise-level JavaScript front-end framework focusing on building rich client Web applications, providing powerful front-end UI components and interaction functions, and was discontinued in 2003. JSP is a Java-based dynamic Web technology standard, and the ExtJS combined JSP architecture once dominated the construction of enterprise-level front-end user interfaces, resulting in a deep dependence of many applications on it, and the discontinued application inventory faces the risk of technology discontinuity.

[0003] Although the adoption rate of the ExtJS combined JSP architecture has approached zero, the architecture still accounts for a certain share within the enterprise, but due to the lack of an ecological system and technical debt, it is difficult to adapt to new business needs and technology trends. If a full-scale reconstruction is carried out, not only will it require a huge investment, but it may also have a serious impact on the continuity of the business. Therefore, the architecture needs to be modified to meet the following requirements: (1) introduce modern capabilities while ensuring the stability of the inventory business, accelerating function iteration; (2) seamlessly integrate new and old technology stacks to ensure that new requirements can be directly migrated without having to do it twice; (3) achieve front-end and back-end separation and decoupling, share risks, and increase the flexibility of development resource investment. SUMMARY

[0004] To solve the problems in the prior art, the present application provides a configuration method for constructing a front-end user interface by dynamically loading Vue3 components under an ExtJS combined JSP architecture. This method can not only support the stable operation of inventory applications, but also integrate modern front-end framework components and achieve architecture decoupling.

[0005] To achieve the above technical purposes, the present application adopts the following technical solutions: A configuration method for constructing a front-end user interface by dynamically loading Vue3 components under an ExtJS combined JSP architecture, comprising: Under the ExtJS combined JSP architecture, a front-end bridge layer is added to the directory of Java back-end source code and compiled output, a micro-front-end engine file and a loading configuration file of a dynamic component loading engine are configured in the front-end bridge layer, and an application engineering directory of Vue3 components is added; In the main interface entry JSP file, the micro-front-end engine file is introduced, the loading configuration file of the encapsulated dynamic component loading engine is introduced, the DOM container of the Vue3 component is set in the HTML, and the management object asyncExt of the custom Vue3 component bridge layer is set. The dockerfile configuration is used for packaging and deploying the J2EE and front-end bridge layer to realize cross-framework context communication.

[0006] Further, the application engineering directory of the Vue3 component includes: a Webpack development environment configuration file, a Webpack production environment configuration file, a configuration file of the Vue3 component, a component directory to be loaded, an output Web resource directory, an npm dependency package, an execution script command configuration file, and a project description document.

[0007] Further, the micro-frontend engine file is introduced to introduce the micro-frontend engine through the UMD specification, and the Vue3 component is loaded on demand by using the loadMicroApp mode loading method; The loading configuration file of the encapsulated dynamic component loading engine is introduced to encapsulate the complete life cycle of the Vue3 component again, and the Promise configuration is used to manage the life cycle of the asynchronous loading of the Vue3 component; The DOM container of the Vue3 component is set in the HTML to arrange the div slot of the custom DOM attribute data-controller as the DOM container of the Vue3 component in the HTML, so as to realize the on-demand creation and position display of the DOM container of the Vue3 component; The management object asyncExt of the custom Vue3 component bridge layer is preloaded by calling the useFedClient method, and the preloading result is processed by using Promise.

[0008] Further, in the asyncModulesSetting.js file of the loading configuration file of the encapsulated dynamic component loading engine, the Vue3 component bridge layer singleton factory creation module, the Vue3 component bridge layer initialization configuration module, and the Vue3 component loading configuration module are registered by using the asyncExt.module method; The Vue3 component bridge layer singleton factory creation module is used to realize the loading of the Vue3 component; The Vue3 component bridge layer initialization configuration module is used to realize the configuration of the Vue3 component; The Vue3 component loading configuration module is used to realize the life cycle management of the Vue3 component.

[0009] Further, the Vue3 component bridge level singleton factory creation module configures FedClientFactory, including: setting the application method of loading the micro-frontend engine and the global state initialization method, defining the Fn object containing the initialization and mounting logic, initializing the merged configuration, initializing the global state and mounting the micro application, calling the loading mode "loadMicroApp" provided by the micro-frontend engine when mounting to pass in the application information, and simultaneously listening to the life cycle event and executing the custom hook or outputting the log; wherein the application information includes the application name, application entry URL, life cycle event and mapping relationship of executing custom hooks of the application project of the Vue3 component; The Vue3 component bridge level initialization configuration module is used to configure MicroModuleSetConfig, including: alias of the Vue3 component, entry path of the Vue3 component, initial data and passed-in method. The Vue3 component loading configuration module is used to configure useFedClient, including: control logic of managing the life cycle of the Vue3 component dynamic mounting or unloading action and callback of the life cycle of the Vue3 component connecting the ExtJS instance.

[0010] Further, it further includes login panel modification, switching panel modification and switching panel closing function modification. The login panel modification is implemented by setting a div container with data-controller="app.MicroFed" in the login panel, loading the login component constructed based on Vue3 by the asyncExt.useMicroFed method after the login panel is rendered, passing in the interface target rendering position, data to be used in the login component and callable ExtJS method, and realizing interaction and resource preloading. The switching panel modification is implemented by setting a corresponding container in the panel, loading the employeeView component by calling asyncExt.useMicroFed after rendering is completed, passing in data and method, processing the creation result of the login component by Promise, and storing the instance in the panel "subExport" attribute when successful. The switching panel closing function modification is implemented by obtaining the closable panel item through the processing function of the close all button, uninstalling the Vue3 component first if the item is mounted, emptying the attribute and removing the panel item after waiting for completion, or directly removing it.

[0011] Further, the configuration for dynamically loading the Vue3 component is also included, including: a defineAsyncComponent function for realizing asynchronous loading of the Vue3 component, and a markRaw mark component for marking the Vue3 component as non-responsive processing.

[0012] Further, the process of packaging and deploying the J2EE and front-end bridge layer using the dockerfile configuration is as follows: Configure the JAVA_HOME environment variable name, configure the war package environment variable name, configure the environment variable name of the front-end bridge layer FedClient package, and configure the default file permission; After cleaning the Tomcat webapps directory, deploy the J2EE war package and the front-end bridge layer FedClient package to the webapps directory; Set the working directory to the Tomcat directory, expose the Tomcat port, configure the time zone, system language, and JVM startup parameters, fix the time zone, replace the Tomcat server configuration file, and start the Tomcat service.

[0013] Further, the development and production environment compilation and build configuration of the Vue3 component construction tool Webpack is also included, including: Use Webpack configuration sandbox compilation chain to process Vue3 component code and styles, and set global sandbox identifier; Use Webpack to compile Vue3 files in the development environment for realizing normal communication and real-time preview of Vue3 components and backend services during development; Use Webpack to compile Vue3 files in the general packaging environment for realizing correct access and loading of Vue3 component resources by ExtJS combined with JSP architecture.

[0014] Further, the access path of J2EE and Vue3 component using Nginx configuration is also included: Configure to listen to port 9120, configure to bind the host name, set the access log storage path and format, proxy the request for the root path " / " to the specified IP and path of the J2EEProjec application, and close the proxy redirection response header; Proxy the request for the " / FedClient / dist / " path to the specified IP, port, and path of the Vue3 component, and close the proxy redirection response header; Configure the specific file types for error page access.

[0015] Compared with the prior art, the present application has the following beneficial effects: (1) The configuration method for dynamically loading Vue3 components to build a front-end user interface under the ExtJS combined JSP architecture can realize state synchronization between ExtJS and Vue3 components, ensure smooth and accurate cross-framework context communication, through the configuration integration of the newly added front-end bridge layer and the ExtJS combined JSP architecture; at the same time, the dynamic component loading engine can obtain the corresponding Vue3 components through network requests according to the configuration information, and perform parsing and rendering, accurately meeting the on-demand loading needs of modern technology stacks in different business scenarios. (2) The configuration method for dynamically loading Vue3 components to build a front-end user interface under the ExtJS combined JSP architecture modifies the development and production environment compilation and construction configuration of the Vue3 component construction tool Webpack, so that the Vue3 component can be independently compiled and run in isolation under the ExtJS combined JSP architecture, solving the logic and style conflict problem after multi-framework fusion. (3) The configuration method for dynamically loading Vue3 components to build a front-end user interface under the ExtJS combined JSP architecture configures the access path of J2EE and Vue3 components through Nginx, undertakes the task of resource proxy and cross-domain processing, avoids the same-origin policy restriction of B / S architecture, and ensures smooth integration during runtime loading. BRIEF DESCRIPTION OF DRAWINGS

[0016] Figure 1 The flowchart of the configuration method for dynamically loading Vue3 components to build a front-end user interface under the ExtJS combined JSP architecture is shown in the figure. Figure 2 The schematic diagram of dynamically loading Vue3 components to build a front-end user interface under the ExtJS combined JSP architecture is shown in the figure. DETAILED DESCRIPTION

[0017] The technical solutions of the present application will be further explained and described below in conjunction with the drawings.

[0018] As Figure 1 The flowchart of the configuration method for dynamically loading Vue3 components to build a front-end user interface under the ExtJS combined JSP architecture is shown in the figure, and the method comprises: Under the ExtJS combined JSP architecture, a front-end bridge layer FedClient / directory is added in the directory of the Java back-end source code and the compiled output, a micro front-end engine file and a loading configuration file of a dynamic component loading engine are configured in the front-end bridge layer, and the original Java back-end code and Maven configuration remain unchanged, so that the contents in the webapp / directory, i.e., the front-end bridge layer FedClient / directory, are automatically included in the WAR package built by the Java-web project, and the front-end bridge layer is allowed to be accessed after being mapped by the Tomcat server. In addition, the application engineering directory of the Vue3 component that can be independently developed and deployed is added, which is specially used for developing, compiling and packaging the Vue3 component that can be remotely loaded by ExtJS. The application engineering directory of the Vue3 component includes a Webpack development environment configuration file, a Webpack production environment configuration file, a Vue3 component configuration file, a component directory to be loaded, an output Web resource directory, an npm dependency package and an execution script command configuration file and a project description document.

[0019] The micro front-end engine file, the loading configuration file of the encapsulated dynamic component loading engine, the DOM container of the Vue3 component in the HTML and the management object asyncExt of the custom Vue3 component bridge layer are introduced in the main interface entry JSP file to realize hybrid rendering. The micro front-end engine file is introduced to introduce the micro front-end engine "qiankun" as the core of the integrated Vue3 component bridge layer through the UMD specification, and the Vue3 component is loaded on demand by using the loadMicroApp mode loading method. The loading configuration file of the encapsulated dynamic component loading engine is introduced to encapsulate the complete life cycle of the Vue3 component again, and the life cycle of the asynchronous loading of the Vue3 component is managed by using a Promise configuration, so that the file serves as the configuration driving core of the Vue3 component. The DOM container of the Vue3 component in the HTML is set to arrange the div slot with the custom DOM attribute data-controller as the DOM container of the Vue3 component in the HTML, so that the DOM container of the Vue3 component is created and displayed on demand. The management object asyncExt of the custom Vue3 component bridge layer is preloaded by calling the useFedClient method, and the preloading result is processed by using a Promise.

[0020] The dockerfile configuration is used for packaging and deploying the J2EE and the front-end bridge layer to ensure the normal operation of the front-end bridge layer and realize cross-frame context communication. Configure JAVA_HOME environment variable name, configure war package environment variable name, configure front-end bridge layer FedClient package environment variable name, and configure default file permission; After cleaning up the Tomcat webapps directory, deploy the J2EE war package and the front-end bridge layer FedClient package to the webapps directory. Set the working directory to the Tomcat directory, expose the Tomcat port, configure the time zone, system language and JVM startup parameters, fix the time zone, replace the Tomcat server configuration file, and start the Tomcat service.

[0021] The application takes ExtJS combined with JSP architecture as a core carrier, establishes contact with Vue3 components through a newly added front-end bridge layer, and specifically can send a request to the Vue3 components through a dynamic component loading engine in the front-end bridge layer to call corresponding Vue3 components, after the Vue3 components are dynamically loaded, can obtain parameters and data transmitted by the ExtJS combined with JSP architecture, after being processed by the Vue3 components, the results are fed back to the ExtJS combined with JSP architecture, state synchronization between the ExtJS and the Vue3 components is realized, and the results are integrated into the overall interface to be presented to the user. The application realizes the separate deployment of the Vue3 components and the ExtJS combined with JSP architecture in a configuration driven manner, accurately meets the on-demand loading demand of the modern technology stack in different business scenarios, and maximally reduces the dependence of front-end development on the JSP rendering mode.

[0022] In one technical solution of the application, the Vue3 component bridge layer singleton factory creation module, the Vue3 component bridge layer initialization configuration module and the Vue3 component loading configuration module are registered in the asyncModulesSetting.js file of the loading configuration file of the encapsulated dynamic component loading engine through the asyncExt.module method, the "bridge layer" object singleton is created through the Vue3 component bridge layer singleton factory creation module, the initialization configuration module can be called anywhere after being configured, and the Vue3 component loading configuration module is called as needed when the ExtJS combined with JSP architecture opens a route or a panel, and the Vue3 components are dynamically obtained to jointly build a user interface.

[0023] The Vue3 component bridge layer singleton factory creation module is used to implement loading of the Vue3 component, and a bridge layer factory class is implemented by configuring the FedClientFactory, which is responsible for loading the Vue3 component, mounting to a specified container, and processing global state and life cycle events, and marking an isolated area. The FedClientFactory configuration includes: setting an application method for loading a micro front-end engine and a global state initialization method, defining an Fn object containing initialization and mounting logic, initializing and merging a configuration, initializing a global state and mounting a micro application, calling a loading mode "loadMicroApp" provided by the micro front-end engine to input application information when mounting, and listening to life cycle events and executing custom hooks or outputting logs; wherein the application information includes an application name, an application entry URL, life cycle events, and a mapping relationship of executing custom hooks of an application project of the Vue3 component. The Vue3 component bridge layer initialization configuration module is used to implement configuration of the Vue3 component, and the MicroModuleSetConfig is configured, including: an alias of the Vue3 component, an entry path of the Vue3 component, initial data, and a transmission method, and dynamic merging of externally transmitted configuration is supported.

[0024] The Vue3 component loading configuration module is used to implement life cycle management of the Vue3 component, and the useFedClient is configured, including: control logic of managing a life cycle of a dynamic mounting or unmounting action of the Vue3 component, and a callback of a life cycle of connecting an ExtJS instance of the Vue3 component.

[0025] In one technical solution of the application, the login panel modification, the switching panel modification, and the switching panel closing function modification are further included. The login panel modification is implemented by setting a div container with data-controller="app.MicroFed" in the login panel, loading the login component constructed based on the Vue3 by using the asyncExt.useMicroFed method after the login panel is rendered, and inputting an interface target rendering position, data to be used in the login component, and an ExtJS method that can be called, so as to realize interaction and resource preloading. The switching panel modification is implemented by setting a corresponding container in the panel, loading the employeeView component by using the asyncExt.useMicroFed after the panel is rendered, inputting data and a method, and processing a creation result of the login component by using a Promise, and storing an instance in a "subExport" attribute of the panel when the creation is successful. The switching panel closing function modification obtains a closable panel item through a processing function of closing all buttons, if the item is mounted with a Vue3 component, the item is unloaded first, and after completion, the attributes are emptied and the panel item is removed; otherwise, the item is directly removed, to realize correct closing and resource cleaning.

[0026] In one technical solution of the application, the configuration for dynamically loading the Vue3 component is further included, including a defineAsyncComponent function and a markRaw marked component, wherein the defineAsyncComponent function is used to realize asynchronous loading of the Vue3 component, that is, the Vue3 component is loaded only when the corresponding route is accessed for the first time, to reduce the initial loading time; the markRaw marked component is used to mark the Vue3 component as non-responsive processing, to prevent the Vue3 component from converting it into a responsive object. Through the above configuration, the compilation and package building of different user interface scenarios are realized, to meet the ExtJS combined JSP architecture dynamically loading the Vue3 component, and to realize the business appeal of thousands of people.

[0027] In one technical solution of the application, the development and production environment compilation and building configuration of the modified Vue3 component building tool Webpack is further included, including: The Webpack configuration sandbox compilation chain is used to process the code and style of the Vue3 component, specifically, for JavaScript code, babel-loader is used for translation to ensure compatibility; for CSS style, CSS Modules is used, and the class name is hashed to make the style of the Vue3 component only effective in its own scope, to avoid conflict with the style of ExtJS; at the same time, a global sandbox identifier is set to determine whether it is in a sandbox environment during code running, to execute corresponding isolation logic; The development environment configuration of the Vue3 file offline compiled by Webpack is used to realize normal communication and real-time preview of the Vue3 component and the backend service during development, specifically, the source code directory is configured as “. / dist”, gzip compression is enabled, the local service port is set to 9110, and the hot update function is enabled; the local proxy is configured to forward the request of “ / JavaWeb” path to “Tomcat service IP:8063”, the host header function is enabled when cross-domain, and the cross-domain response header “Access-Control-Allow-Origin: *” is set to allow cross-domain access, to ensure normal communication and component loading of the front end and the backend service; The general packaging environment configuration for offline compiling Vue3 files by using Webpack is used to realize that the Vue3 component resources can be correctly accessed and loaded by the ExtJS combined JSP architecture. Specifically, the resource access request path is set as “ / FedClient / dist / ”, the Js / css resource file and the picture resource file name are both provided with a hash value, such as “[name].[fullhash:8].js” and “images / [name].[fullhash:8]-[ext]”, the output directory path is “.. / dist”, the Vue3 component name is set as “Export”, the output module format is umd, and the global variable name of the Vue3 component accessed by the ExtJS is “webpackJsonp_Export”.

[0028] The configuration method for dynamically loading the Vue3 component to build the front-end user interface under the ExtJS combined JSP architecture of the application reconstructs the development and production environment compilation and construction configuration of the Vue3 component construction tool Webpack, so that the Vue3 component can be independently compiled and isolatedly run under the ExtJS combined JSP architecture, and the logical and style conflict problems after the fusion of multiple frameworks are solved.

[0029] In one technical solution of the application, the access path of the J2EE and the Vue3 component is configured by using Nginx. The 9120 port is configured to be listened to, the host name is configured to be bound, the access log storage path and format are set, the request of the root path “ / ” is proxied to the specified IP and path of the J2EEProjec application, and the proxy redirection response header is closed; The request of the “ / FedClient / dist / ” path is proxied to the specified IP, port and path of the Vue3 component, and the proxy redirection response header is closed; The specific file types of the error page access are configured. Specifically, the error pages of the 500, 502 and other error status codes are configured as “50x.html”.

[0030] The configuration method for dynamically loading the Vue3 component to build the front-end user interface under the ExtJS combined JSP architecture of the application configures the access path of the J2EE and the Vue3 component by using Nginx, so that Figure 2 the front-end user interface built by dynamically loading the Vue3 component under the ExtJS combined JSP architecture can be accessed through http: / / 127.0.0.1:9120 / , the cross-domain problem is solved, the smoothness of the Vue3 component loading process is ensured, the task of resource proxying and cross-domain processing is undertaken, the same-origin policy restriction of the B / S architecture is avoided, and the smooth integration in the runtime loading is ensured.

[0031] The front-end user interface configuration method based on the Vue3 component dynamic loading of the application runs in time, and the ExtJS combined JSP architecture dynamically loads the Vue3 component according to the configuration strategy, constructs the front-end user interface on demand, greatly improves the user access speed based on the advantage of DOM sharing, and significantly improves the loading efficiency compared with the traditional iframe embedding; meanwhile, the cross-frame state synchronization delay is controlled within 50 ms, bringing the user a smooth experience close to the native interaction; in terms of development cost, 70% of the cost is saved compared with full reconstruction, the upgrade cycle is shortened to 1 / 3 of the full reconstruction scheme, and the cost and time input of the enterprise technology upgrade are significantly reduced. In addition, the architecture constructed by the application has high flexibility, supports dynamic switching of the component loading strategy, can enable or disable the Vue3 component according to different business scenarios, and has good scalability. In the future, if it needs to be extended to other frameworks such as React, only the protocol configuration and the compilation chain need to be modified, which can effectively promote the digital transformation process of enterprises.

[0032] The above is only a preferred embodiment of the application, and the protection scope of the application is not limited to the above-mentioned embodiment. Any technical solution falling within the idea of the application shall fall within the protection scope of the application. It should be noted that, for ordinary skilled persons in the art, some improvements and refinements without departing from the principles of the application shall be considered as the protection scope of the application.

Claims

1. A configuration method for dynamically loading Vue3 components to build a front-end user interface under an ExtJS combined JSP architecture, characterized in that, include: In the ExtJS and JSP architecture, a front-end bridging layer is added to the directory of Java back-end source code and compilation output. The micro-front-end engine file and the loading configuration file of the dynamic component loading engine are configured in the front-end bridging layer. And add a new application project directory for Vue3 components; In the main interface entry JSP file, import the micro frontend engine file, import the loading configuration file of the encapsulated dynamic component loading engine, set the DOM container of Vue3 components in HTML, and customize the management object asyncExt of the Vue3 component bridge layer. The J2EE and front-end bridging layer are packaged and deployed using Dockerfile configuration to achieve cross-framework context communication.

2. The configuration method of claim 1, wherein the ExtJS combined JSP architecture dynamically loads the Vue3 component to construct the front-end user interface. The application project directory for newly added Vue3 components includes: Webpack development environment configuration file, Webpack production environment configuration file, Vue3 component configuration file, component directory to be loaded, output web resource directory, npm dependency packages and execution script command configuration file, and project documentation.

3. The configuration method for dynamically loading Vue3 components to build a front-end user interface under the ExtJS and JSP architecture according to claim 1, characterized in that: The micro-frontend engine file is used to import the micro-frontend engine through the UMD specification, and to load Vue3 components on demand using the loadMicroApp mode. The loading configuration file of the encapsulated dynamic component loading engine is introduced to further encapsulate the complete lifecycle of Vue3 components, and the lifecycle of asynchronous loading of Vue3 components is managed using Promise configuration. Setting the DOM container for Vue3 components in HTML allows you to place the div slots of the custom DOM property data-controller as the DOM container for Vue3 components, enabling the DOM container of Vue3 components to be created and displayed in position as needed; The custom Vue3 component bridge layer's management object, asyncExt, preloads components by calling the useFedClient method and uses Promise to handle the preloading results.

4. The configuration method of claim 3, wherein the method is characterized in that, In the asyncModulesSetting.js file of the encapsulated dynamic component loading engine, the Vue3 component bridge layer singleton factory creation module, the Vue3 component bridge layer initialization configuration module, and the Vue3 component loading configuration module are registered through the asyncExt.module method; The Vue3 component bridge layer singleton factory creation module is used to load Vue3 components; The Vue3 component bridge hierarchy initialization configuration module is used to configure Vue3 components; The Vue3 component loading configuration module is used to implement the lifecycle management of Vue3 components.

5. The configuration method for dynamically loading Vue3 components to build a front-end user interface under the ExtJS and JSP architecture according to claim 4, characterized in that: The Vue3 component bridge layer singleton factory creation module configures FedClientFactory, including: setting the application method of loading the micro-frontend engine and the global state initialization method, defining the Fn object containing initialization and mounting logic, initializing the merged configuration, initializing the global state and mounting the micro application, calling the loading mode "loadMicroApp" provided by the micro-frontend engine when mounting to pass in application information, and listening to life cycle events and executing custom hooks or outputting logs; wherein the application information includes the application name, application entry URL, life cycle events and mapping relationship of executing custom hooks of the Vue3 component application project; The Vue3 component bridge layer initialization configuration module is used to configure MicroModuleSetConfig, including: alias of Vue3 component, entry path of Vue3 component, initial data and passed-in method; The Vue3 component loading configuration module is used to configure useFedClient, including: control logic of managing the life cycle of Vue3 component dynamic mounting or unloading action and callback of Vue3 component connecting ExtJS instance life cycle.

6. The configuration method of claim 1, wherein the Vue3 component is dynamically loaded under an ExtJS combined JSP architecture. It also includes login panel modification, switching panel modification and switching panel closing function modification; The login panel modification sets a div container with data-controller="app.MicroFed" in the login panel, and when the login panel is rendered, the asyncExt.useMicroFed method is used to load the login component built based on Vue3, and the target rendering position of the interface, the data to be used in the login component and the callable ExtJS method are passed in to realize interaction and resource preloading; The switching panel modification sets the corresponding container in the panel, and after rendering, the asyncExt.useMicroFed is called to load the employeeView component, and the data and method are passed in. The creation result of the login component is processed through Promise, and when successful, the instance is stored in the panel "subExport" attribute; The switching panel closing function modification obtains the closable panel item through the processing function of the close all button. If the item is mounted with a Vue3 component, it is unloaded first, and after the completion, the attribute is emptied and the panel item is removed. Otherwise, it is directly removed.

7. The configuration method of claim 1, wherein the Vue3 component is dynamically loaded under an ExtJS combined JSP architecture. It also includes the configuration of dynamically loading Vue3 components, including: defineAsyncComponent function and markRaw marked component, the defineAsyncComponent function is used to realize asynchronous loading of Vue3 components, and the markRaw marked component is used to mark Vue3 components as non-responsive processing.

8. The configuration method of claim 1, wherein the Vue3 component is dynamically loaded under an ExtJS combined JSP architecture. The process of packaging and deploying J2EE and front-end bridge layer using dockerfile configuration is as follows: Configure JAVA_HOME environment variable name, configure war package environment variable name, configure front-end bridge layer FedClient package environment variable name, and configure default file permissions; After cleaning up the webapps directory of Tomcat, deploy the J2EE war package and the front-end bridge layer FedClient package to the webapps directory; Set the working directory to the Tomcat directory, expose the Tomcat port, configure the time zone, system language, and JVM startup parameters, fix the time zone, replace the Tomcat server configuration file, and start the Tomcat service.

9. The configuration method of claim 1, wherein the Vue3 component is dynamically loaded under an ExtJS combined JSP architecture. It also includes the development and production environment compilation and build configuration of the Vue3 component build tool Webpack, including: Use Webpack to configure a sandbox compilation chain to process the code and styles of Vue3 components, and set a global sandbox identifier; Use Webpack to configure the development environment for offline compilation of Vue3 files to enable normal communication between Vue3 components and backend services during development and real-time preview; Use Webpack to configure the general packaging environment for offline compilation of Vue3 files to enable ExtJS to correctly access and load Vue3 component resources.

10. The configuration method of claim 1, wherein the Vue3 component is dynamically loaded under an ExtJS combined JSP architecture. It also includes using Nginx to configure the access path of J2EE and Vue3 components: Configure to listen to port 9120, configure to bind the host name, set the access log storage path and format, proxy the request for the root path " / " to the specified IP and path of the J2EEProjec application, and close the proxy redirection response header; Proxy the request for the " / FedClient / dist / " path to the specified IP, port, and path of the Vue3 component, and close the proxy redirection response header; Configure the specific file types for error page access.

Images