Web application development method and system based on module federation

Abstract

The invention provides a webweb application development method and system based on module federation, and the method comprises the steps: dividing a web application to be developed into a plurality of functional services, taking the mutually associated functional services as a micro-application, forming a plurality of service micro-applications, and independently developing each service micro-application; after the service micro-application is developed, obtaining a to-be-accessed service micro-application, and determining an access path of the to-be-accessed service micro-application; loading a static resource file corresponding to the to-be-accessed service micro-application based on the access path of the to-be-accessed service micro-application; according to the method, the slot information is loaded, the configuration information collected in the integrated files corresponding to the exposed files in all the micro-applications is collected, initialization configuration is carried out on all the micro-application information based on the configuration information, management interaction is carried out between different micro-applications through the slots, and the development deployment difficulty and the maintenance cost in the web application development process are reduced.

Description

Technical Field

[0001] The present invention relates to the field of application development, and in particular to a module federation-based web application development method and system. Background Art

[0002] In the development and maintenance of existing large-scale web applications, individual web applications reference each other, different entry points between different projects, page rewriting and reuse, project deployment and operation, technology conflicts and other issues. Traditional iframe nesting, nginx proxy and other technologies can indeed meet development needs, but require a lot of modification and configuration, and the performance is not very good, which puts a lot of pressure on development and operation, and a lot of repetitive work is required every time.

[0003] Although existing technologies also adopt the method of splitting large-scale web applications into multiple small projects, the following problems still exist during the splitting and development process: 1. As the scale of project applications expands, the complexity of applications increases. Large applications are usually developed collaboratively by multiple teams, with each team responsible for a part of the functional modules. However, the integration and deployment of functional modules become difficult.

[0004] 2. Highly coupled architecture. Traditional monolithic application architecture usually adopts tightly coupled module dependencies, that is, different modules directly reference and depend on each other. Such an architecture makes code reuse and independent deployment difficult, increasing code maintenance costs.

[0005] To address this problem, the present invention provides a module federation-based web application development method and system to solve the above problem. Summary of the Invention

[0006] In order to solve the problems existing in the prior art, the present invention innovatively proposes a web application development method and system based on module federation, which effectively solves the problems of difficulty in development and deployment and high maintenance cost in the web application development process caused by the prior art, and effectively reduces the development and deployment difficulty and maintenance cost of the web application development process.

[0007] A first aspect of the present invention provides a web application development method based on module federation, comprising: Split the web application to be developed into multiple functional businesses, treat the interrelated functional businesses as a micro-application, and form multiple business micro-applications. Each business micro-application is developed independently. After the business micro-application is developed, obtain the business micro-application to be accessed and determine the access path of the business micro-application to be accessed; Based on the access path of the business micro-application to be accessed, load the static resource file corresponding to the business micro-application to be accessed; Load slot information, collect configuration information collected in the integration file corresponding to the exposed files within all micro-applications, initialize all micro-application information based on the configuration information, and manage and interact with different micro-applications through slots; After the configuration is complete, load the micro-application to be accessed until the rendering of the micro-application to be accessed is completed.

[0008] Optionally, the web application to be developed can be split into multiple functional businesses, and the interrelated functional businesses can be treated as a micro-application. Specifically, multiple business micro-applications are: The user management business, organization management business, and menu management business associated with the basic business of the web application to be developed are used as basic business micro-applications; The form generation business, form interaction business, and form management business associated with the form business of the web application to be developed are used as form business micro-applications; The process establishment business, process execution business, process monitoring business, and process management business associated with the process business of the web application to be developed are used as process business micro-applications; and when the basic business micro-applications, form business micro-applications, process business micro-applications, and other business micro-applications are combined into a web application, multiple combination methods are supported, and each combination method includes at least the basic business micro-application. Other business micro-applications are micro-applications corresponding to other businesses in the web application to be developed except for the basic business micro-applications, form business micro-applications, and process business micro-applications.

[0009] Optionally, the static resource files, exposed files, and integrated files of each micro-application are independent of each other, and the static resource files include files that do not require processing logic or dynamic generation in the micro-application; each micro-application also includes service resource files and entry files, and the service resource files are responsible for various service files dynamically generated in response to the services provided by the micro-application at runtime; the entry file is responsible for loading various plug-ins loaded in the micro-application.

[0010] Optionally, loading slot information, collecting configuration information collected in the integration file corresponding to the exposed files within all micro-applications, and initializing configuration of all micro-application information based on the configuration information specifically includes: Load slot information, collect the exposed files within all micro-applications, and obtain the identification information of the configuration information in each micro-application exposed file; Determine the specific content of the configuration information in the corresponding micro-application integration file based on the identification information of the configuration information in each micro-application exposure file; Initialize configuration of all micro-application information based on the specific content of the configuration information in the integration file; Get the configuration information of the web micro application to be accessed, open the homepage of the web micro application to be accessed, and the initialization configuration is completed.

[0011] Furthermore, the configuration information specifically includes theme information, routing information, permission information, and status management information. The exposed file includes the micro-application identifier, micro-application theme information identifier, micro-application routing information identifier, micro-application page permission identifier, and micro-application data status management identifier. The integrated file includes the specific content information under the micro-application theme information identifier, the specific content information under the micro-application routing information identifier, the specific content information under the micro-application page permission identifier, and the specific content information under the micro-application data status management identifier.

[0012] Furthermore, when the configuration information is theme information, initializing configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The theme information is in array format. The specific content of each theme information includes theme identification key, theme component name, theme component path, and theme image path. The micro-application is initialized and configured based on the specific content of the theme information in the integrated file of each micro-application. When a theme is loaded, the theme identification key and / or theme component name in the specific content of the theme information are matched with the theme identification keys and / or theme component names corresponding to all themes in the integrated file. After a successful match, the corresponding theme component is determined through the theme component path, and the corresponding theme image is determined through the theme image path. The determined theme component and theme image are rendered to the page.

[0013] Furthermore, when the configuration information is routing information, initializing configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The routing information is in array format. The specific content of each routing information includes the routing identification key, page component name, page component path, and page component access path. Each route maps to a page component. The micro-application is initialized and configured based on the specific content of the routing information in the integrated file of each micro-application. When a route is loaded, the routing identification key and page component access path in the specific content of the routing information are matched with the routing identification keys and page component access paths corresponding to all routes in the integrated file. After a successful match, the corresponding page component is determined through the page component access path, and the corresponding page component is loaded as the current page.

[0014] Furthermore, when the configuration information is permission information, initializing configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The permission information is in array format. The specific content of each permission information includes the page component access path and the corresponding permission field. The micro-application is initialized and configured based on the specific content of the permission information in the integrated file of each micro-application. When loading or accessing through the page component access path, it is determined whether the corresponding permission field is authorized. If it is authorized, it is released, otherwise, access is prohibited.

[0015] Optionally, when the configuration information is state management information, initializing configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The state management information includes the data types, data names, and data management methods that are responsible for storing globally shared data. The micro-application is initialized and configured based on the specific content of the state management information in the integrated file of each micro-application. When the corresponding data type and data name in the state management information are generated, the generated data is stored according to the type and name, and the stored data is managed in status.

[0016] A second aspect of the present invention provides a web application development system based on module federation, comprising: Split the unit to split the web application to be developed into multiple functional businesses, and treat the interrelated functional businesses as a micro-application to form multiple business micro-applications. Each business micro-application is developed independently; The acquisition unit, after the business micro-application is developed, acquires the business micro-application to be accessed and determines the access path of the business micro-application to be accessed; A first loading unit loads a static resource file corresponding to the business micro-application to be accessed based on an access path of the business micro-application to be accessed; The initialization unit loads slot information and initializes the slots based on the slot information; collects the configuration information collected in the integration file corresponding to the exposed files within all micro-applications, initializes the configuration of all micro-application information based on the configuration information, and manages and interacts with different micro-applications through slots; After the configuration is completed, the second loading unit loads the micro-application to be accessed until the rendering of the micro-application to be accessed is completed.

[0017] The technical solution adopted by the present invention includes the following technical effects: 1. The present invention divides the web application to be developed into multiple functional businesses, and regards the mutually related functional businesses as a micro-application to constitute multiple business micro-applications, and each business micro-application is developed independently; after the business micro-application is developed, the business micro-application to be accessed is obtained, and the access path of the business micro-application to be accessed is determined; based on the access path of the business micro-application to be accessed, the static resource file corresponding to the business micro-application to be accessed is loaded; the slot information is loaded, and the configuration information collected in the integrated file corresponding to the exposed file within all micro-applications is collected, and all micro-application information is initialized and configured based on the configuration information, and different micro-applications are managed and interacted through slots; it effectively solves the problem that the development and deployment of web applications is difficult and the maintenance cost is high due to the existing technology, and effectively reduces the development and deployment difficulty and maintenance cost of the web application development process.

[0018] 2. In the technical solution of the present invention, the web application to be developed is split into multiple functional businesses, and the interrelated functional businesses are regarded as a micro-application to constitute multiple business micro-applications; and when the micro-applications are combined into web applications, multiple combination methods are supported, and each combination method includes at least basic business micro-applications. Based on the company's products, they can be flexibly assembled into different web applications according to user needs. Each micro-application can be developed independently and provides multiple deployment modes to meet the deployment needs in different scenarios.

[0019] 3. In the technical solution of the present invention, the static resource files, exposed files, and integrated files of each micro-application are independent of each other, and the static resource files include files that do not require processing logic or dynamic generation in the micro-application; each micro-application also includes service resource files and entry files, and the service resource files are responsible for various service files dynamically generated in response to the services provided by the micro-application at runtime; the entry file is responsible for loading various plug-ins loaded in the micro-application, and the content related to the micro-application (front-end static resources, back-end dynamic services, help documents) are all gathered together and integrated in a low-coupling manner, which greatly reduces maintenance costs. Moreover, the static resource files, exposed files, and integrated files of each micro-application are independent of each other, and each micro-application can be developed synchronously, that is, while developing a micro-application, it will not affect the development of other micro-applications and will not block the development progress. It can be developed separately, and each micro-application can be maintained separately, independently of each other, and not affected. It can be deployed separately without affecting each other.

[0020] 4. The configuration information in the technical solution of the present invention specifically includes theme information, routing information, permission information, and status management information. The exposed file includes the micro-application identifier, micro-application theme information identifier, micro-application routing information identifier, micro-application page permission identifier, and micro-application data status management identifier. The integrated file includes the specific content information under the micro-application theme information identifier, the specific content information under the micro-application routing information identifier, the specific content information under the micro-application page permission identifier, and the specific content information under the micro-application data status management identifier, which ensures the independent development and deployment of micro-applications and the effective unified management.

[0021] It should be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] 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 description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0023] Figure 1 Schematic diagram of the process of the method of Example 1 in the scheme of the present invention; Figure 2 This is a schematic diagram of the overall architecture flow in the method of Example 1 of the solution of the present invention; Figure 3 This is a schematic diagram of slot information in the method of Example 1 of the present invention; Figure 4 This is a schematic diagram of the structure of the system of Example 2 in the solution of the present invention. DETAILED DESCRIPTION

[0024] In order to clearly illustrate the technical features of this solution, the present invention is described in detail below through specific implementation methods and in conjunction with the accompanying drawings. The disclosure below provides many different embodiments or examples for realizing different structures of the present invention. In order to simplify the disclosure of the present invention, the components and settings of specific examples are described below. In addition, the present invention may repeat reference numbers and / or letters in different examples. This repetition is for the purpose of simplicity and clarity and does not itself indicate the relationship between the various embodiments and / or settings discussed. It should be noted that the components illustrated in the accompanying drawings are not necessarily drawn to scale. The present invention omits descriptions of well-known components and processing technologies and processes to avoid unnecessary limitations on the present invention.

[0025] Example 1 like Figure 1-Figure 3 As shown, the present invention provides a web application development method based on module federation, comprising: S1: Split the web application to be developed into multiple functional businesses. Treat the interrelated functional businesses as a micro-application to form multiple business micro-applications. Each business micro-application is developed independently. S2: After the business micro-application is developed, the business micro-application to be accessed is obtained and the access path of the business micro-application to be accessed is determined; S3, based on the access path of the business micro-application to be accessed, load the static resource file corresponding to the business micro-application to be accessed; S4: Load slot information, collect configuration information collected in the integrated files corresponding to the exposed files within all micro-applications, initialize all micro-application information based on the configuration information, and manage and interact with different micro-applications through slots; S5: After the configuration is completed, the micro application to be accessed is loaded until the rendering of the micro application to be accessed is completed.

[0026] In steps S1-S2, the web application to be developed is split into multiple functional businesses, and the interrelated functional businesses are treated as a micro-application to form multiple business micro-applications. Specifically, Use the user management, organization management, and menu management services associated with the basic services of the web application to be developed as basic service micro-applications (Example 1); The form generation business, form interaction business, and form management business associated with the form business of the web application to be developed are used as form business micro-applications (Example 2); The process establishment business, process execution business, process monitoring business, and process management business associated with the process business of the web application to be developed are used as process business micro-applications (Example 3); and when the basic business micro-application, form business micro-application, process business micro-application, and other business micro-applications are combined into a web application, multiple combination methods are supported, and each combination method includes at least the basic business micro-application. Other business micro-applications are micro-applications corresponding to other businesses in the web application to be developed except for the basic business micro-application, form business micro-application, and process business micro-application.

[0027] Specifically, the splitting standard is: put related businesses into one micro-application according to the business (vertical division by business function, such as system management, form management, process business, etc., according to high cohesion and low coupling, tight internal logic, and minimized external dependence), for example: Figure 2As shown, lanhai-system.war: basic business micro-application 1, is mainly responsible for basic system business such as user management, organization management, and menu management. The overall business of lanhai-system is an account management system for enterprise management, which determines the personnel structure and account authority allocation of system functions; lanjian-das.war: basic business micro-application 2, is mainly responsible for lanjing-das.war form-related business, and the overall business of lanjian-das is to process business data of business documents; lanjing-data.war: basic business micro-application 3, is mainly responsible for lanjing-data.war process-related business, and the overall business of lanjing-data is to process business processes.

[0028] At the same time, in the process of combining micro-applications into web applications after development, multiple combination methods are supported, and each combination method includes at least basic business micro-applications. For example, taking the three micro-applications above as an example, it can include only one business micro-application 1, it can include business micro-application 1 and business micro-application 2, it can include business micro-application 1 and business micro-application 3, or it can include business micro-application 1, business micro-application 2, and business micro-application 3. On the one hand, it can be flexibly adjusted according to customer development needs and combined into different web applications; on the other hand, it can also be flexibly adjusted according to the development progress of different business micro-applications. For example, when business micro-application 2 is not completed, other When the business micro-application has been developed, business micro-application 1 and business micro-application 3 can be combined into a web application; or when business micro-application 3 has not been developed and other business micro-applications have been developed, business micro-application 1 and business micro-application 2 can be combined into a web application. Other business micro-applications are micro-applications corresponding to other businesses in addition to basic business micro-applications, form business micro-applications, and process business micro-applications in the web applications to be developed. Other business micro-applications can specifically be micro-applications corresponding to customer-customized businesses, such as cloud computing businesses, data management businesses, etc., or other types of businesses. The present invention does not limit this.

[0029] When accessing lanjian-das (business micro-application 2), this micro-application is used as the running subject (the access path contains the business micro-application name, which is the subject, and can only be single), and the access path is http: / / localhost:8080 / lanjian-das / # / index. ( / index is the component route, through which the corresponding component is loaded); When accessing lanjing-data (business micro-application 3), this micro-application is the running subject (the access path contains the business micro-application name, which is the subject, and can only be single), and the access path is http: / / localhost:8080 / lanjing-data / # / index ( / index is the component route, through which the corresponding component is loaded).

[0030] When obtaining the business micro-application to be accessed, you can call the back-end interface through Ajax to obtain the name of the corresponding micro-application to be put on the shelf or accessed (that is, the listing or access of the micro-application is controlled by the status field, true means listing or accessing, false means delisting or not accessing).

[0031] Among them, in step S3, based on the access path of the business micro-application to be accessed, the static resource files corresponding to the business micro-application to be accessed are loaded specifically as follows: Based on the access path of micro-application 2 being http: / / localhost:8080 / lanjian-das / # / , micro-application 2 is accessed, and the static resource index.html is first accessed. index.html is the entry file of the micro-application, which is mainly responsible for loading the static resources used in the referenced micro-application. main.js: The entry file in each micro-application, mainly responsible for loading various plug-ins loaded in the micro-application. Appsolt.js: The core function, mainly responsible for initializing various basic parts of the micro-application such as general functions theme (theme), Routers (routing), Store (state management), permission (authorization), etc.

[0032] The static resource files (index.html), exposure files (plugOptions.js), and integration files (remoteEntry.js) of each micro-application are independent of each other. In addition, the static resource files include files that do not require processing logic or dynamic generation in the micro-application; each micro-application also includes service resource files and entry files. The service resource files are responsible for various service files dynamically generated in response to the services provided by the micro-application at runtime; the entry file is responsible for loading various plug-ins loaded in the micro-application.

[0033] In this solution, each micro-app can be developed simultaneously. This means that developing lanhai-system will not affect lanjing-data development, nor will it block development progress. Each micro-app can be developed independently, maintained independently, and deployed independently. Each micro-app has its own pluginOption.js file, which contains information about the micro-app.

[0034] Web applications are less complex and more reusable, allowing users to build specific web applications by combining micro-applications based on their business needs. For example, if we want to develop a process-related web application, we only need to deploy the basic business micro-application lanhai-system and the process business micro-application lanjing-data. For example, if we want to develop a form-related web application, we only need to deploy the basic business micro-application lanhai-system and the form business micro-application lanjian-data.

[0035] Among them, in step S4, the slot information is loaded, the configuration information collected in the integrated file corresponding to the exposed files within all micro-applications is collected, and the initialization configuration of all micro-application information based on the configuration information specifically includes: Load slot information, collect the exposed files within all micro-applications, and obtain the identification information of the configuration information in each micro-application exposed file; Determine the specific content of the configuration information in the corresponding micro-application integration file based on the identification information of the configuration information in each micro-application exposure file; Initialize configuration of all micro-application information based on the specific content of the configuration information in the integration file; Get the configuration information of the web micro application to be accessed, open the homepage of the web micro application to be accessed, and the initialization configuration is completed.

[0036] Among them, such as Figure 3 As shown in the figure, slot information is loaded. Appsolt (slot) contains core modules such as theme (theme), routers (routing), permissions (authorization), appsolt class, and store (state management). It is mainly responsible for converting and combining the data of each micro-application into a web application through core modules such as theme (theme), routers (routing), permissions (authorization), appsolt class, and store (state management).

[0037] Among them, the configuration information specifically includes theme information, routing information, permission information, and state management information store. The exposed file includes the micro-application identifier, micro-application theme information identifier, micro-application routing information identifier, micro-application page permission identifier, and micro-application data state management identifier. The integrated file includes the specific content information under the micro-application theme information identifier, the specific content information under the micro-application routing information identifier, the specific content information under the micro-application page permission identifier, and the specific content information under the micro-application data state management identifier.

[0038] When loading slot related information, it will collect relevant information such as route and theme of the core part of the micro application. appsolt is used to initialize the basic information of the current micro-application, and pluginOption is the information exposed by each micro-application.

[0039] pluginOption leaked information parameters: name: string type, micro application name; routes: array type, micro-application routing information identifier; store: object type, data status management identifier; theme: array type, theme information identifier; permission: array type, page permission identifier; The specific content information under the micro-application theme identifier in the integrated file is the specific content of the theme corresponding to different theme information identifiers, the specific content information under the micro-application routing information identifier is the specific content of the routing corresponding to different routing information identifiers, the specific content information under the micro-application page permission identifier is the specific content of the page permission corresponding to different page permission identifiers, and the specific content information under the micro-application data status management identifier is the specific content of the data status management corresponding to different data status management identifiers.

[0040] like Figure 3 As shown, the appsolt class (slot): Micro-application lifecycle management: unified scheduling of micro-applications.

[0041] It's responsible for initializing common micro-application components like themes, routers, and stores. It also provides init methods to transform the application's routing, themes, and other features into visual pages. Developers focus solely on the view layer, making it easy to get started and integrate with third-party libraries or existing projects, allowing developers to quickly build complex single-page applications.

[0042] The appsolt class is exposed for use by other independent microapps. The accessed microapp is loaded into the appsolt class. The init method returns the resources of each listed microapp through the backend interface. The exposed information of each microapp is collected through the resolveTheme, resolveRouter, resolverPermission, and resolverStore methods. Each microapp's exposed information must include relevant information such as router permissions. Through different configurations, this configured information is an object containing properties such as name (module name), routes (routing information), store (shared data), permissions (permissions), and theme (theme). The appsolt slot class also provides an initModule method that converts data functions such as routing and themes for the corresponding microapp, providing data for page display. Developers focus solely on the view layer, making it easy to get started and integrating with third-party libraries or existing projects, allowing developers to quickly build complex single-page applications.

[0043] In step S4, first, based on the information collected from each micro-application, the theme information of each micro-application is collected to obtain the theme of the current micro-application; secondly, the routing information of each micro-application is collected, and the RouterManager routing class is loaded, initialized through the init method, the addRoute method is used to add each micro-application route, and the megerRoute method is used to merge and process; then, the permission information of each micro-application is loaded, and the permission class is loaded, and the initPermission method is called to load the permission information, and the pages, buttons and other parts are processed; then, the store information of each micro-application is loaded, and the initPermission method is called to integrate by loading the store class, and the global data state is initialized; finally, the initialization is completed, and the homepage of the corresponding micro-application is opened.

[0044] Specifically, when the configuration information is theme information, initializing the configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The theme information is in array format. The specific content of each theme information includes theme identification key, theme component name, theme component path, and theme image path. The micro-application is initialized and configured based on the specific content of the theme information in the integrated file of each micro-application. When a theme is loaded, the theme identification key and / or theme component name in the specific content of the theme information are matched with the theme identification keys and / or theme component names corresponding to all themes in the integrated file. After a successful match, the corresponding theme component is determined through the theme component path, and the corresponding theme image is determined through the theme image path. The determined theme component and theme image are rendered to the page.

[0045] In theme management, dynamic theme management: supports multiple sets of theme configurations (such as dark mode, enterprise customized style), and realizes real-time switching through CSS variables or dynamic style sheet injection.

[0046] Theme inheritance and extension: Provides a basic theme template, allowing micro-applications to inherit the global theme and extend private styles through the slot mechanism to ensure visual consistency.

[0047] Responsive adaptation: Automatically adapt theme elements (such as navigation bars and button components) in combination with micro-application layout.

[0048] A theme consists of two parts: layout and style.

[0049] Each theme has its own unique layout, color texture and emotion, making our app more vivid, interesting and engaging. We switch themes by selecting different themes in the theme section.

[0050] Layouts determine the overall structure and visual quality of your app. Each layout has its own unique style and characteristics, making your app more aesthetically pleasing, user-friendly, and comfortable. Styling can be achieved through custom CSS styles. You can define common styles, such as colors, fonts, and borders, and then adjust these styles based on different themes.

[0051] Implementation process: listen to ur, obtain the current micro-application body, obtain the theme in the micro-application pluginOption.js (the data format is an array, the element is an object containing name (identification key), comPath (theme path), imgUrl (thumbnail), title (theme name) { name: "lanyi",comPath: () =>import("@ / theme / lanyi / layouts / MainLayout.vue"), imgUrl:"",title:"Blue Wing Theme"}), collect the themes of each micro-application, and then obtain the current theme name (identification key) and / or title (theme name) through ajax (that is, the theme information can be matched through three methods: theme identification key, theme identification key and theme name, and theme name). The corresponding theme path information, namely comPath (theme component path), imgUrl (thumbnail, theme image path), can be found through name and / or title. Compat is the theme component path of the theme style, and it can be rendered.

[0052] Each micro-app can share a theme and develop its own theme independently. That is, each micro-app can register its own module theme through the theme slot of appsolt. The entire web application can only select one theme (i.e., the theme name field). The style loaded by this theme is global. When the desired theme is loaded, other themes are not loaded (i.e., they will not be referenced in the web application).

[0053] Specifically, when the configuration information is routing information, initializing the configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The routing information is in array format. The specific content of each routing information includes the routing identification key, page component name, page component path, and page component access path. Each route maps to a page component. The micro-application is initialized and configured based on the specific content of the routing information in the integrated file of each micro-application. When a route is loaded, the routing identification key and page component access path in the specific content of the routing information are matched with the routing identification keys and page component access paths corresponding to all routes in the integrated file. After a successful match, the corresponding page component is determined through the page component access path, and the corresponding page component is loaded as the current page.

[0054] Among them, Routers (routing class): Unified routing hub: Based on the micro-frontend architecture design, it aggregates sub-application routing configurations, dynamically registers routing rules through the appsolt slot, and collects the routers field in the pluginOption file exposed in the micro-application through ajax.

[0055] Isolation: Each micro-application maintains an independent routing stack (e.g. / app1 / dashboard and / app2 / dashboard). Dynamic loading optimization: Load micro-application routing configuration on demand, combined with Webpack dynamic import (DynamicImport) to reduce the size of the first screen resources.

[0056] Responsible for micro-application routing, facilitating page transitions. It also manages routes across individual applications. It consists of a series of paths and page components. Each route is mapped to a page component, like a giant atlas, recording all possible paths and corresponding page components. When we need to navigate to a new page, we simply tell the navigator the path, and it automatically takes us there.

[0057] Implementation process: listen to the URL, obtain the current micro-application body, obtain the routers field (router configuration) in the micro-application exposure file pluginOption.js, filter and combine all routing data through this class (get the access body according to the URL, filter the routing path according to the path, remove duplicates, and then store all the micro-application routing information in this class), then get the path according to the different URLs, and render different components.

[0058] Router configuration: This is primarily responsible for page routing information within micro-applications, managing system routing and facilitating page transitions. It also manages routes for each application. Within the routing class, the addRouter method is called to retrieve routes for different micro-applications. The addRoute and filterRoute methods are then used to filter and remove duplicate routes. Router route data exposed in the micro-application slot is in array format.

[0059] Each route must contain a name (identification key, responsible for the route), a title (name, responsible for the name of the page component), a component (page component path, responsible for the route), and a path (page component access path, responsible for the access address, etc.). When accessing the URL, if either the path or the name matches successfully (the title represents the name of the page component), the corresponding component will be rendered on the page. That is, the corresponding page component path can be found by accessing the path and then the corresponding page component. This configuration can minimize the complexity and learning cost of micro-applications, making them simple, easy to understand, and easy to use.

[0060] Implementation idea: When loading into this class (Routers), the megerRoute method will be called first to obtain the paths of all running micro-applications, and then the route information will be merged and filtered by the filterRoute method (each path is unique, and duplicate routes are removed by this). The reorganized path information can be accessed by the web application through the path to find the loading component.

[0061] Different micro-apps can define different display methods for the same page without affecting each other or conflicting with each other. That is, when accessing different micro-apps, the Routers in the appsolt slot will prioritize the currently loaded micro-app page when processing routing information.

[0062] Specifically, when the configuration information is permission information, initializing the configuration of all micro-application information based on the specific content of the configuration information in the integrated file specifically includes: The permission information is in array format. The specific content of each permission information includes the page component access path and the corresponding permission field. The micro-application is initialized and configured based on the specific content of the permission information in the integrated file of each micro-application. When loading or accessing through the page component access path, it is determined whether the corresponding permission field is authorized. If it is authorized, it is released, otherwise, access is prohibited.

[0063] permission (permission class): Real-time permission updates: Monitor URL changes, i.e., changes in the micro-application being accessed, and dynamically refresh the micro-application's accessible scope. For example, the access subjects for http: / / 127.0.0.1 / lanhai-system / # / and http: / / 127.0.0.1 / lanjing-data / # / are lanhai-system (a basic business micro-application) and lanjing-data (a process business micro-application), respectively. These micro-applications collect different data and therefore have different permissions.

[0064] Responsible for the permission management of micro-applications, such as: showing and hiding menus, whitelisting which pages are subject to permission control, etc.

[0065] Routing permission control is performed at the routing level, and user operations are controlled and restricted by encapsulating permissions to ensure the security and stability of the application.

[0066] Implementation process: listen to the URL, obtain the permission field in the micro-application exposure file pluginOption.js by obtaining the current micro-application body (the array parameter content is the path field in the router), and process it in this class by combining the vue-router (third-party plug-in) beforeEach hook function to determine whether the accessed path exists. If it exists, it can be accessed, otherwise it is different.

[0067] Permission configuration: Responsible for the permission management of the system. The configured routing information in the system will be passed to the backend through Ajax. The backend returns the routing data with permissions in JSON format according to different users and stores it in the store configuration. The path in the permission configuration will not be subject to permission control and users can access it.

[0068] Implementation idea: Each micro application can pass the permission field. This field is an array containing the path field (page component access path) in the route and the corresponding permission content field (whether there is permission or not). The passed content is the path (access path) field under the router configuration. The passed field code has permission to load, otherwise it does not. The example is as follows permission: [' / lh / business / jobManageDetail', ' / lh / track / replay', ' / lh / vir / cockpit', ' / device / uavDetail', ' / lh / car / cockpit']; after collecting the routing information of each micro application, it can also be loaded into this class. At this time, if there is no accessible routing information in the routing data of the store and it exists in the permission, it will be released, otherwise it will enter the 404 page.

[0069] Specifically, when the configuration information is state management information, initializing configuration of all micro-application information based on the specific content of the configuration information in the integrated file specifically includes: The state management information includes the data types, data names, and data management methods that are responsible for storing globally shared data. The micro-application is initialized and configured based on the specific content of the state management information in the integrated file of each micro-application. When the corresponding data type and data name in the state management information are generated, the generated data is stored according to the type and name, and the stored data is managed in status.

[0070] The permissions, routing, store data sharing, etc. within each micro-application are centrally managed and maintained by the slots, without affecting each other.

[0071] Store (state management): Responsible for storing globally shared data such as routing information and personal information. Global data sharing is achieved by defining a global Store object. Caching is used to improve program performance. This allows for cross-component data sharing and state management, and also allows for data caching.

[0072] When a web application is accessed via a URL, it retrieves the microapp being accessed. It then calls a backend interface to return all other microapps besides the microapp being accessed. A dynamic script tag (HTML file) is created and dynamically inserted into the body of the page (this inserts the external data exposed by the microapp's plugOptions.js file). Appsolt is then initialized. The Routers class collects data from each microapp's router field. The Store class is initialized to collect data from each microapp's store and store it for global sharing. The Permission class is initialized to obtain permission data from each microapp. Finally, the Theme class is loaded to collect theme data from each microapp, load the theme, and finally, render the page based on the accessed URL and the corresponding component. This solution eliminates the traditional use of iframes to nest pages that are not part of the same system. The microapp is a single page. It dynamically monitors URL (including path) changes to find the corresponding component path based on the microapp name and component routing information contained in the access path. (The access path includes the path field in the router, which is used to find the corresponding component path.)

[0073] This solution abandons the traditional use of iframes to nest pages that are not part of the same system. The entire microapp is a single page. The corresponding data is found based on the microapp name and component routing information contained in the access path. By dynamically monitoring URL changes and matching component rendering (the access path includes the path field in the router, which is used to find the corresponding component path).

[0074] When accessing a web application through a URL, the currently accessed micro-application is obtained, and then a list of other micro-applications is obtained through Ajax. All routing data is collected through the routers in pluginOption.js of each micro-application. If a path in the routes already exists, the currently accessed micro-application is used as the primary route, and the paths of other micro-applications are deduplicated. This makes it easier to expand the access page. If each micro-application defines different services with the same path, different access URLs can be used to achieve different effects using the same path. Strong scalability.

[0075] The present invention divides a web application to be developed into multiple functional businesses, and regards the mutually related functional businesses as a micro-application to constitute multiple business micro-applications, and each business micro-application is developed independently. After the development of the business micro-application is completed, the business micro-application to be accessed is obtained, and the access path of the business micro-application to be accessed is determined. Based on the access path of the business micro-application to be accessed, the static resource file corresponding to the business micro-application to be accessed is loaded. The slot information is loaded, and the configuration information collected in the integrated file corresponding to the exposed file within all micro-applications is collected. Based on the configuration information, all micro-application information is initialized and configured, and different micro-applications are managed and interacted through slots. The present invention effectively solves the problem of difficulty in development and deployment and high maintenance cost in the web application development process caused by the existing technology, and effectively reduces the difficulty in development and deployment and maintenance cost in the web application development process.

[0076] In the technical solution of the present invention, the web application to be developed is split into multiple functional businesses, and the mutually related functional businesses are regarded as a micro-application to constitute multiple business micro-applications; and when the micro-applications are combined into web applications, multiple combination methods are supported, and each combination method includes at least basic business micro-applications. Based on the company's products, they can be flexibly assembled into different web applications according to user needs. Each micro-application can be developed independently and provides multiple deployment modes to meet deployment needs in different scenarios.

[0077] In the technical solution of the present invention, the static resource files, exposed files, and integrated files of each micro-application are independent of each other, and the static resource files include files that do not require processing logic or dynamic generation in the micro-application; each micro-application also includes service resource files and entry files, and the service resource files are responsible for various service files dynamically generated in response to the services provided by the micro-application at runtime; the entry file is responsible for loading various plug-ins loaded in the micro-application, and the content related to the micro-application (front-end static resources, back-end dynamic services, help documents) are all gathered together and integrated in a low-coupling manner, which greatly reduces maintenance costs. Moreover, the static resource files, exposed files, and integrated files of each micro-application are independent of each other, and each micro-application can be developed synchronously, that is, while developing a micro-application, it will not affect the development of other micro-applications and will not block the development progress. It can be developed separately, and each micro-application can be maintained separately, independently of each other, and not affected. It can be deployed separately without affecting each other.

[0078] The configuration information in the technical solution of the present invention specifically includes theme information, routing information, permission information, and status management information. The exposed file includes the micro-application identifier, micro-application theme information identifier, micro-application routing information identifier, micro-application page permission identifier, and micro-application data status management identifier. The integrated file includes the specific content information under the micro-application theme information identifier, the specific content information under the micro-application routing information identifier, the specific content information under the micro-application page permission identifier, and the specific content information under the micro-application data status management identifier, thereby ensuring the effective independent development and deployment and unified management of micro-applications.

[0079] Example 2 like Figure 4 As shown, the technical solution of the present invention also provides a web application development system based on module federation, including: The splitting unit 101 splits the web application to be developed into multiple functional businesses, and treats the interrelated functional businesses as a micro-application to form multiple business micro-applications, each of which is developed independently; After the business micro application is developed, the acquisition unit 102 acquires the business micro application to be accessed and determines the access path of the business micro application to be accessed; The first loading unit 103 loads a static resource file corresponding to the business micro-application to be accessed based on the access path of the business micro-application to be accessed; Initialization unit 104 loads slot information and initializes the slot based on the slot information; collects configuration information collected in the integrated file corresponding to the exposed file within all micro-applications, initializes all micro-application information based on the configuration information, and manages and interacts with different micro-applications through slots; After the configuration is completed, the second loading unit 105 loads the micro-application to be accessed until the rendering of the micro-application to be accessed is completed.

[0080] It should be noted that the splitting unit 101, the acquiring unit 102, the first loading unit 103, The implementation methods of the initialization unit 104 and the second loading unit 105 correspond to the steps in the first embodiment, and are not described in detail in this embodiment.

[0081] The present invention divides a web application to be developed into multiple functional businesses, and regards the mutually related functional businesses as a micro-application to constitute multiple business micro-applications, and each business micro-application is developed independently. After the development of the business micro-application is completed, the business micro-application to be accessed is obtained, and the access path of the business micro-application to be accessed is determined. Based on the access path of the business micro-application to be accessed, the static resource file corresponding to the business micro-application to be accessed is loaded. The slot information is loaded, and the configuration information collected in the integrated file corresponding to the exposed file within all micro-applications is collected. Based on the configuration information, all micro-application information is initialized and configured, and different micro-applications are managed and interacted through slots. The present invention effectively solves the problem of difficulty in development and deployment and high maintenance cost in the web application development process caused by the existing technology, and effectively reduces the difficulty in development and deployment and maintenance cost in the web application development process.

[0082] In the technical solution of the present invention, the web application to be developed is split into multiple functional businesses, and the mutually related functional businesses are regarded as a micro-application to constitute multiple business micro-applications; and when the micro-applications are combined into web applications, multiple combination methods are supported, and each combination method includes at least basic business micro-applications. Based on the company's products, they can be flexibly assembled into different web applications according to user needs. Each micro-application can be developed independently and provides multiple deployment modes to meet deployment needs in different scenarios.

[0083] In the technical solution of the present invention, the static resource files, exposed files, and integrated files of each micro-application are independent of each other, and the static resource files include files that do not require processing logic or dynamic generation in the micro-application; each micro-application also includes service resource files and entry files, and the service resource files are responsible for various service files dynamically generated in response to the services provided by the micro-application at runtime; the entry file is responsible for loading various plug-ins loaded in the micro-application, and the content related to the micro-application (front-end static resources, back-end dynamic services, help documents) are all gathered together and integrated in a low-coupling manner, which greatly reduces maintenance costs. Moreover, the static resource files, exposed files, and integrated files of each micro-application are independent of each other, and each micro-application can be developed synchronously, that is, while developing a micro-application, it will not affect the development of other micro-applications and will not block the development progress. It can be developed separately, and each micro-application can be maintained separately, independently of each other, and not affected. It can be deployed separately without affecting each other.

[0084] The configuration information in the technical solution of the present invention specifically includes theme information, routing information, permission information, and status management information. The exposed file includes the micro-application identifier, micro-application theme information identifier, micro-application routing information identifier, micro-application page permission identifier, and micro-application data status management identifier. The integrated file includes the specific content information under the micro-application theme information identifier, the specific content information under the micro-application routing information identifier, the specific content information under the micro-application page permission identifier, and the specific content information under the micro-application data status management identifier, thereby ensuring the effective independent development and deployment and unified management of micro-applications.

[0085] Although the above describes the specific embodiments of the present invention in conjunction with the accompanying drawings, it is not intended to limit the scope of protection of the present invention. Those skilled in the art should understand that various modifications or variations that can be made by those skilled in the art on the basis of the technical solution of the present invention without any creative work are still within the scope of protection of the present invention.

Claims

1. A web application development method based on module federation, characterized in that: include: Split the web application to be developed into multiple functional businesses, treat the interrelated functional businesses as a micro-application, and form multiple business micro-applications. Each business micro-application is developed independently. After the business micro-application is developed, obtain the business micro-application to be accessed and determine the access path of the business micro-application to be accessed; Based on the access path of the business micro-application to be accessed, load the static resource file corresponding to the business micro-application to be accessed; Load slot information, collect configuration information collected in the integration file corresponding to the exposed files within all micro-applications, initialize all micro-application information based on the configuration information, and manage and interact with different micro-applications through slots; After the configuration is complete, load the micro-application to be accessed until the rendering of the micro-application to be accessed is completed.

2. A web application development method based on module federation according to claim 1, characterized in that: Split the web application to be developed into multiple functional businesses, and treat the interrelated functional businesses as a micro-application. The specific micro-applications are: The user management business, organization management business, and menu management business associated with the basic business of the web application to be developed are used as basic business micro-applications; The form generation business, form interaction business, and form management business associated with the form business of the web application to be developed are used as form business micro-applications; The process establishment business, process execution business, process monitoring business, and process management business associated with the process business of the web application to be developed are used as process business micro-applications; and when the basic business micro-applications, form business micro-applications, process business micro-applications, and other business micro-applications are combined into a web application, multiple combination methods are supported, and each combination method includes at least the basic business micro-application. Other business micro-applications are micro-applications corresponding to other businesses in the web application to be developed except for the basic business micro-applications, form business micro-applications, and process business micro-applications.

3. A web application development method based on module federation according to claim 1, characterized in that: The static resource files, exposed files, and integrated files of each micro-application are independent of each other, and the static resource files include files that do not require processing logic or dynamic generation in the micro-application; each micro-application also includes service resource files and entry files. The service resource files are responsible for various service files dynamically generated in response to the services provided by the micro-application at runtime; the entry file is responsible for loading various plug-ins loaded in the micro-application.

4. A web application development method based on module federation according to claim 1, characterized in that: Load slot information, collect configuration information collected in the integration files corresponding to the exposed files within all micro-applications, and initialize the configuration of all micro-application information based on the configuration information. Specifically, it includes: Load slot information, collect the exposed files within all micro-applications, and obtain the identification information of the configuration information in each micro-application exposed file; Determine the specific content of the configuration information in the corresponding micro-application integration file based on the identification information of the configuration information in each micro-application exposure file; Initialize configuration of all micro-application information based on the specific content of the configuration information in the integration file; Get the configuration information of the web micro application to be accessed, open the homepage of the web micro application to be accessed, and the initialization configuration is completed.

5. A web application development method based on module federation according to claim 4, characterized in that: The configuration information specifically includes theme information, routing information, permission information, and status management information. The exposed file includes the micro-application identifier, micro-application theme information identifier, micro-application routing information identifier, micro-application page permission identifier, and micro-application data status management identifier. The integrated file includes the specific content information under the micro-application theme information identifier, the specific content information under the micro-application routing information identifier, the specific content information under the micro-application page permission identifier, and the specific content information under the micro-application data status management identifier.

6. A web application development method based on module federation according to claim 4, characterized in that: When the configuration information is theme information, initializing the configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The theme information is in array format. The specific content of each theme information includes theme identification key, theme component name, theme component path, and theme image path. The micro-application is initialized and configured based on the specific content of the theme information in the integrated file of each micro-application. When a theme is loaded, the theme identification key and / or theme component name in the specific content of the theme information are matched with the theme identification keys and / or theme component names corresponding to all themes in the integrated file. After a successful match, the corresponding theme component is determined through the theme component path, and the corresponding theme image is determined through the theme image path. The determined theme component and theme image are rendered to the page.

7. A web application development method based on module federation according to claim 6, characterized in that: When the configuration information is routing information, initializing the configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The routing information is in array format. The specific content of each routing information includes the routing identification key, page component name, page component path, and page component access path. Each route maps to a page component. The micro-application is initialized and configured based on the specific content of the routing information in the integrated file of each micro-application. When a route is loaded, the routing identification key and page component access path in the specific content of the routing information are matched with the routing identification keys and page component access paths corresponding to all routes in the integrated file. After a successful match, the corresponding page component is determined through the page component access path, and the corresponding page component is loaded as the current page.

8. A web application development method based on module federation according to claim 7, characterized in that: When the configuration information is permission information, initializing the configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The permission information is in array format. The specific content of each permission information includes the page component access path and the corresponding permission field. The micro-application is initialized and configured based on the specific content of the permission information in the integrated file of each micro-application. When loading or accessing through the page component access path, it is determined whether the corresponding permission field is authorized. If it is authorized, it is released, otherwise, access is prohibited.

9. A web application development method based on module federation according to claim 4, characterized in that: When the configuration information is state management information, initializing the configuration of all micro-application information based on the specific content of the configuration information in the integration file specifically includes: The state management information includes the data types, data names, and data management methods that are responsible for storing globally shared data. The micro-application is initialized and configured based on the specific content of the state management information in the integrated file of each micro-application. When the corresponding data type and data name in the state management information are generated, the generated data is stored according to the type and name, and the stored data is managed in status.

10. A web application development system based on module federation, characterized in that: include: Split the unit to split the web application to be developed into multiple functional businesses, and treat the interrelated functional businesses as a micro-application to form multiple business micro-applications. Each business micro-application is developed independently; The acquisition unit, after the business micro-application is developed, acquires the business micro-application to be accessed and determines the access path of the business micro-application to be accessed; A first loading unit loads a static resource file corresponding to the business micro-application to be accessed based on an access path of the business micro-application to be accessed; The initialization unit loads slot information and initializes the slots based on the slot information; collects the configuration information collected in the integration file corresponding to the exposed files within all micro-applications, initializes the configuration of all micro-application information based on the configuration information, and manages and interacts with different micro-applications through slots; After the configuration is completed, the second loading unit loads the micro-application to be accessed until the rendering of the micro-application to be accessed is completed.

Images