Quankun-based micro-front-end architecture method and device

Abstract

The invention belongs to the field of front-end development and application, and relates to a qiankun-based micro-front-end architecture method and device, computer equipment and a storage medium, the method comprises the steps that a control layer is constructed through html and js, and the control layer is used for development iteration of micro-front-end public functions; based on the control layer, codes are pulled through a cli scaffold provided by the control layer, then the pulled codes are packaged to construct a business layer, the business layer is used for issuing business tasks, and multiple business modules are created through the business layer; according to the control layer, a main application is created through a cli architecture, and the main application is used for integrating all service modules in a unified mode and providing public basic capacity; according to the business layer, creating a sub-application through a cli architecture, the sub-application being used for business logic development of the plurality of business modules; and deploying and publishing the main application and / or the sub-application.

Description

Technical Field

[0001] The present invention relates to the field of front-end development and application technology, and in particular to a micro-front-end architecture method, device, computer equipment and storage medium based on Qiankun. Background Art

[0002] In the prior art, when doing project development, multi-module mixed development is required. Then after mixed development, unified release is carried out when releasing the software. If a module is modified in a batch, all modules need to be updated and released in full. In this way, a lot of useless work will be done in the development and testing phase. For example, batch A of spare parts module is to be launched, but batch A of service module has no requirements for online launch, but the next batch B has requirements for online launch. When releasing batch A, the service module needs to be released at the same time and the existing development functions need to be blocked. And after the version is released, the software cannot be interoperable in multiple usage scenarios. This is bound to increase development costs and reduce development efficiency. Summary of the invention

[0003] The purpose of the embodiments of the present invention is to propose a micro-front-end architecture method, device, computer equipment and storage medium based on Qiankun, so as to solve the problem in the prior art that when multiple modules are mixed developed, only part of the modules are modified, but all modules must be updated and released in full when upgrading, which increases development costs and reduces development efficiency.

[0004] In order to solve the above technical problems, the present invention provides a micro-frontend architecture method based on Qiankun, which adopts the following technical solutions, including:

[0005] Build a control layer using HTML and JS, which is used for the development and iteration of micro-frontend public functions;

[0006] Based on the control layer, the code is pulled through the cli scaffolding provided by the control layer, and then the pulled code is packaged to build a business layer. The business layer is used to publish business tasks. Through the business layer, multiple business modules are created;

[0007] According to the control layer, a main application is created through the cli architecture, and the main application is used to unify and integrate various business modules and provide common basic capabilities;

[0008] According to the business layer, a sub-application is created through the cli architecture, and the sub-application is used for the business logic development of multiple business modules;

[0009] Deploy and publish the main application and / or the sub-application.

[0010] Preferably, the control layer is constructed by HTML and JS, and the control layer is used for the development iteration of the common functions of the micro-frontend, and the steps specifically include:

[0011] Get the public certificate for permission verification;

[0012] Mount the sub-application into the business layer;

[0013] Directly use the capabilities provided by the main application in the sub-application.

[0014] Preferably, based on the control layer, the code is pulled through the cli scaffolding provided by the control layer, and then the pulled code is packaged to build a business layer, the business layer is used to publish business tasks, and through the business layer, the steps of creating multiple business modules specifically include:

[0015] Create a project based on the cli template provided by the control layer;

[0016] Build a project and publish the application. Publishing the project allows access through the domain name.

[0017] Enter the main application by mounting and integrating.

[0018] Preferably, the step of creating a main application through a CLI architecture according to the control layer, wherein the main application is used to uniformly integrate various business modules and provide common basic capabilities specifically includes:

[0019] Pull the code of the cli architecture provided by the control layer through git.

[0020] Execute the npm run build:prod command to get the dist file directory.

[0021] Publish dist to the online server, and then access the main application through the ngxin proxy.

[0022] Preferably, the steps of creating a sub-application through a cli architecture according to the business layer, wherein the sub-application is used for the business logic development of a plurality of the business modules specifically include:

[0023] Create a project based on the cli template provided by the control layer;

[0024] Build a project to publish the sub-application, and publish the project so that the sub-application can be accessed through the domain name;

[0025] The sub-application is integrated into the main application by mounting.

[0026] Preferably, the steps of deploying and publishing the main application and / or the sub-application specifically include:

[0027] Package the main application and / or the sub-application, npm run build:prod, to obtain a dist code package;

[0028] Upload the dist code package to the remote server, forward it through the ngxin proxy, and then map the IP to access the main application and / or sub-application.

[0029] In order to solve the above technical problems, the present invention also provides a micro-frontend architecture device based on Qiankun, which adopts the following technical solution, including:

[0030] A control layer construction module is used to build a control layer through HTML and JS. The control layer is used for the development iteration of micro-frontend public functions.

[0031] The business layer construction module is used to pull the code based on the control layer through the cli scaffolding provided by the control layer, and then package the pulled code to build the business layer. The business layer is used to publish business tasks. Through the business layer, multiple business modules are created;

[0032] The main application building module is used to create the main application through the CLI architecture according to the control layer. The main application is used to integrate various business modules and provide common basic capabilities.

[0033] A sub-application building module, used to create a sub-application through the cli architecture according to the business layer, and the sub-application is used for the business logic development of multiple business modules;

[0034] The deployment and publishing module is used to deploy and publish the main application and / or the sub-application.

[0035] Preferably, the control layer building module includes:

[0036] The credential module is used to obtain public credentials for permission verification;

[0037] Mounting module, used to mount sub-applications into the business layer;

[0038] Use modules to directly use the capabilities provided by the main application in the sub-application.

[0039] In order to solve the above technical problems, the present invention also provides a computer device, which adopts the technical solution described below, including a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the above-mentioned Qiankun-based micro-frontend architecture method when executing the computer-readable instructions.

[0040] In order to solve the above technical problems, the present invention also provides a computer-readable storage medium, which adopts the technical solution described below, and stores computer-readable instructions on the computer-readable storage medium. When the computer-readable instructions are executed by the processor, the steps of the above-mentioned qiankun-based micro-frontend architecture method are implemented.

[0041] Compared with the prior art, the present invention mainly has the following beneficial effects: first, a control layer is constructed through HTML and JS, and the control layer is used for the development and iteration of the common functions of the micro-front-end; then, based on the control layer, the code is pulled through the CLI scaffolding provided by the control layer, and then the pulled code is packaged to build the business layer, and the business layer is used to publish business tasks, and multiple business modules are created through the business layer; then, according to the control layer, a main application is created through the CLI architecture, and the main application is used to integrate various business modules and provide common basic capabilities; according to the business layer, a sub-application is created through the CLI architecture, and the sub-application is used for the business logic development of multiple business modules; finally, the main application and / or sub-application is deployed and released; the problem of publishing multiple business modules brought to the project team by the iteration of large projects is reduced, on-demand publishing is realized, and multi-environment data can be viewed at the same time. While maintaining a unified window, the environment can be switched in real time according to development and testing requirements, which greatly improves the efficiency of test modification. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the scheme in the present invention, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0043] Figure 1 It is a flowchart of an embodiment of the micro-frontend architecture method based on Qiankun of the present invention;

[0044] Figure 2 It is a schematic diagram of the software version release process in the prior art;

[0045] Figure 3 It is a schematic diagram of the software version release process adopted in the Qiankun-based micro-front-end architecture method of the present invention;

[0046] Figure 4 It is a structural schematic diagram of an embodiment of a micro-frontend architecture device based on Qiankun of the present invention;

[0047] Figure 5 It is a schematic structural diagram of an embodiment of a computer device of the present invention. DETAILED DESCRIPTION

[0048] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present invention; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention; the terms "including" and "having" and any variations thereof in the specification and claims of the present invention and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present invention or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0049] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present invention. The appearance of the phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0050] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings.

[0051] Micro-frontends is an architecture similar to microservices. It applies the concept of microservices to the browser side, that is, it transforms the Web application from a single monolithic application to an application that aggregates multiple small front-end applications. Each front-end application can also run, develop, and deploy independently. When the project becomes larger and more complex, new and old technologies are entangled with each other, the number of developers increases, and the amount of code increases, micro-frontends are needed to separate unrelated requirements and new and old technologies so that they do not interfere with each other and are independent of each other. Micro-frontends are not a tool or a framework, but an architecture system. Qiankun is an Alibaba tool that can implement micro-frontends, compatible with vue, react, and angular.

[0052] It should be noted that the qiankun-based micro-front-end architecture method provided in the embodiment of the present invention is generally executed by a server / terminal device, and accordingly, the qiankun-based micro-front-end architecture device is generally arranged in a server / terminal device.

[0053] It should be understood that the number of terminal devices, networks and servers is merely illustrative and any number of terminal devices, networks and servers may be provided as required.

[0054] Embodiment 1

[0055] Continue to refer Figure 1 , showing a flow chart of an embodiment of a micro front-end architecture method based on qiankun of the present invention. The micro front-end architecture method based on qiankun comprises the following steps:

[0056] Step S1, build a control layer through HTML and JS. The control layer is used for the development iteration of the common functions of the micro front-end.

[0057] In this embodiment, the electronic device (such as a server / terminal device) on which the Qiankun-based micro-frontend architecture method runs can receive the Qiankun-based micro-frontend architecture request through a wired connection or a wireless connection. It should be noted that the above-mentioned wireless connection method may include but is not limited to 3G / 4G / 5G connection, WiFi connection, Bluetooth connection, WiMAXX connection, Zigbee connection, UWB (ultra wideband) connection, and other wireless connection methods currently known or to be developed in the future.

[0058] The control layer is based on HTML and JS to control the front-end main application. All permissions and public information are edited and maintained in the main application. Some methods that trigger the system to update data at a scheduled time are also triggered in the main application.

[0059] The public functions of the micro-frontend may include, but are not limited to, login, value list, token verification, etc. Login means: after logging in through the main application, you can directly access the sub-application in the main application, and use the business process in the sub-application without logging in again in the sub-application. Value list means: in the process of project construction, there will be some public data, which is called value list. In the prior art, each project usually manages its own value list and cannot communicate with each other. The embodiment of the present invention maintains the value list through the main application, and can obtain the value list of the common part in each sub-application, and can also maintain the data of the value list in the main application, and modify it in the sub-application synchronously and automatically. Token verification refers to: obtaining an authentication token so that users who access the main application can access the various sub-applications mounted under the main application.

[0060] In this embodiment, step S1 may further include the following steps:

[0061] S11. Obtaining public credentials for authority verification.

[0062] Log in by logging in the main application, and then get the token through the interface returned by the backend.

[0063] S12. Mount the sub-application into the business layer.

[0064] When the sub-application publishing process is completed, you will get an IP address or a mounted domain name. Provide this domain name and system name to the main application, and add the sub-application information to the domain name, route activation name, and route mounting module in the main application to mount it into the sub-application.

[0065] S13. Directly use the capabilities provided by the main application in the sub-application.

[0066] The data between the main application and the sub-application are interoperable, and can be achieved through code, penetrating from the main application to the sub-application, and then storing the data in the sub-application's vuex public cache data.

[0067] Step S2, based on the control layer, pull the code through the cli scaffolding provided by the control layer, and then package the pulled code to build the business layer. The business layer is used to publish business tasks. Through the business layer, multiple business modules are created.

[0068] The business layer refers to the business management and control layer based on the sub-application. The business tasks are determined according to the actual situation of each project. In this embodiment, step S2 may further include the following steps:

[0069] S21. Create a project based on the cli template provided by the control layer.

[0070] Through the official cli scaffolding of vue and react, the integration of qiankun sub-applications has been realized, and functions such as mutual data transmission and mutual jump between sub-pages have been added. When creating a project, pull the code repository address I provided and directly pull the code.

[0071] S22. Build a project publishing application. Publishing the project allows access through the domain name.

[0072] S23. Enter the main application through mounting integration.

[0073] When the sub-application publishing process is completed, you will get an IP address or a mounted domain name. Provide this domain name and system name to the main application, and add the sub-application information to the domain name, route activation name, and route mounting module in the main application to mount it into the sub-application.

[0074] Step S3: Create a main application based on the control layer through the CLI architecture. The main application is used to integrate various business modules and provide common basic capabilities.

[0075] The main application is equivalent to a container. All its completed functions can be set to be called and modified by sub-applications, which is equivalent to providing a public space for each sub-application under the main application to interact with data. In this embodiment, the public basic functional capabilities include but are not limited to login, token distribution, authentication, route jump, route interception, version monitoring, etc.

[0076] In this embodiment, step S3 may further include the following steps:

[0077] S31. Pull the code of the cli architecture provided by the control layer through git.

[0078] git pull https: / / devcloud.szlanyou.com / gitlab / xxx (this URL is an example URL, not the actual URL) to pull the code, and then you can start the project in the form of npm run dev.

[0079] S32. Execute the npm run build:prod command to get the dist file directory.

[0080] After installing the node environment on your computer, simply execute the command in the terminal in the root directory of the folder.

[0081] S33. Publish dist to the online server and access it through the ngxin proxy.

[0082] Upload the obtained dist to the server, and then move dist to the folder where the corresponding front-end web page is mounted (this depends on the specific project situation). Then configure and write the ngxin configuration, and finally restart the ngxin service.

[0083] The main application created by the cli architecture can be a react main application architecture or a vue3 main application architecture. The embodiment of the present invention adopts an open source solution based on qiankun, integrates qiankun into the main application, obtains the sub-application address through a public interface, or registers the application by calling a public method. On this basis, multiple application cli packages can be written for subsequent personnel to use for integrated development.

[0084] Integrate Qiankun into the main application, obtain the sub-application address through the public interface, or call the public method to register the application. This can be achieved through the following code:

[0085] / / Register sub-application

[0086] registerMicroApps(

[0087] Object.keys(gemini_entry_nap).map((micro)=>{

[0088] const route = ' / ' + micro;

[0089] return {

[0090] name:micro,

[0091] entry:

[0092] getEnv() === 'test'

[0093] ? recodeEntry(customEntry[micro],micro) / / Sub-application environment

[0094] :gemini_entry_map[micro][getEnv()],

[0095] container:'#childRoot', / / div where the child application is mounted

[0096] activeRule:route, / / Sub-application activation rules

[0097] props:{

[0098] routerBase:route, / / Send basic routing

[0099] qiankunActions,

[0100] env:getEnv(),

[0101] gateway:host[getEnv()],

[0102] entryMap,

[0103] actions

[0104] },

[0105] loader:(loading)=>{

[0106] / / Sub-application loading callback

[0107] if(loader)loader.style.display=loading? 'block':'none';

[0108] },

[0109] };

[0110] }) );

[0112] start(); / / {prefetch:false}1 / / Indicates no preloading

[0113] });

[0114] The embodiment of the present invention creates two main applications: vue3 and react18. By pulling the official cli, and then modifying it according to the actual project needs, pulling the code in the form of a code repository, and then building it, packaging the code, generating two main applications of vue3 and react18, and finally releasing the two main applications of vue3 and react18.

[0115] If the sub-application address is obtained in the form of a public interface in the main application, it is also possible to dynamically switch between multiple environments while maintaining the current domain name. In one window, the data of the development / test / UAT environment can be viewed at the same time. However, the data of these parts exist in isolation at the same time.

[0116] Step S4, based on the business layer, create a sub-application through the cli architecture, and the sub-application is used for the business logic development of multiple business modules.

[0117] The business logic of multiple business modules is based on actual project requirements.

[0118] In this embodiment, step S4 may further include the following steps:

[0119] S41. Create a project based on the cli template provided by the control layer.

[0120] S42. Build a project publishing application, and publish the project so that it can be accessed through the domain name.

[0121] S43. Enter the sub-application through mounting integration.

[0122] Sub-applications are created through the cli architecture. The embodiment of the present invention creates three sub-applications: vue2, react16.8 and vue3. The three sub-applications: vue2, react16.8 and vue3 are provided in the form of code repositories, and then the codes are pulled.

[0123] Step S5, deploy and publish the main application and / or sub-application.

[0124] Deploying the main application and sub-application means that the main application and sub-application need to be published on the cloud server and exposed so that they can be accessed through the domain name or IP. In this embodiment, step S5 may further include the following steps:

[0125] S51. Package npm run build:prod to get the dist code package.

[0126] S52, upload to the remote server, forward through ngxin proxy, and access the main application and / or sub-application after mapping the IP. In the first stage of development, the main application and sub-application need to be deployed. When the public basic functions are improved, there is no need to release the main application every time. Sub-application modules divided according to actual business can be released later according to the development progress requirements.

[0127] After publishing the main application and sub-application, obtain the address of the sub-application after publishing, and fill the address back into the public method provided in the main application. In each subsequent iteration, you only need to iterate according to the business module (sub-application) developed.

[0128] Figure 2 This is a schematic diagram of the software version release process in the prior art. Figure 2 As shown, in the prior art, when a software version is released for the first time or again, the software module is developed according to the iteration requirements. The unused functional modules can be shielded by configuration, and then all modules are released in full iteration. Since the entire process is a full module full iteration release, the functional modules that have not been modified will be re-copied and installed, and the subsequent software testing will also be fully tested for the new version, which will inevitably increase the testing time and reduce the development efficiency.

[0129] Figure 3 This is a schematic diagram of the software version release process used in the Qiankun-based micro-frontend architecture method of the present invention. Figure 3 As shown, the software version release process adopted in the qiankun-based micro-frontend architecture method of the present invention includes first releasing a multi-functional module, and then developing and improving it according to iterative requirements. When updating a new version, it is only necessary to release the latest modified functional module according to the update requirements. The unchanged functional modules are retained, so that when performing software testing, only the functions related to the modified functional modules need to be tested, saving testing time. In other words, when iteratively releasing, after adopting the architecture of the embodiment of the present invention, in each iteration process, only specific business modules need to be released, and the main application and other sub-applications do not interfere with the normal use process at all, and there is no additional risk of shielding unused functions to the project team.

[0130] The beneficial effects of implementing this embodiment are as follows: first, a control layer is constructed through HTML and JS, and the control layer is used for the development and iteration of the common functions of the micro-frontend; then, based on the control layer, the code is pulled through the CLI scaffolding provided by the control layer, and then the pulled code is packaged to build the business layer, and the business layer is used to publish business tasks, and multiple business modules are created through the business layer; then, according to the control layer, a main application is created through the CLI architecture, and the main application is used to integrate various business modules and provide common basic capabilities; according to the business layer, a sub-application is created through the CLI architecture, and the sub-application is used for the business logic development of multiple business modules; finally, the main application and / or sub-application is deployed and released; the problem of publishing multiple business modules brought to the project team by the iteration of large projects is reduced, on-demand publishing is realized, and data from multiple environments can be viewed at the same time. While maintaining a unified window, the environment can be switched in real time according to development and testing requirements, which greatly improves the efficiency of test modification.

[0131] The present invention can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present invention can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present invention can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0132] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0133] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0134] Embodiment 2

[0135] Further references Figure 4 , as a response to the above Figure 1 The present invention provides an embodiment of a micro-frontend architecture device based on Qiankun, and the device embodiment is similar to Figure 1 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0136] like Figure 4 As shown, the Qiankun-based micro-frontend architecture device 60 described in this embodiment includes: a control layer construction module 61, a business layer construction module 62, a main application construction module 63, a sub-application construction module 64 and a deployment and release module 65. Among them:

[0137] A control layer construction module 61 is used to construct a control layer through HTML and JS, and the control layer is used for the development iteration of the common functions of the micro front-end;

[0138] The business layer construction module 62 is used to pull the code based on the control layer through the cli scaffolding provided by the control layer, and then package the pulled code to build the business layer. The business layer is used to publish business tasks and create multiple business modules through the business layer;

[0139] A main application building module 63 is used to create a main application based on the control layer through the CLI architecture, and the main application is used to integrate various business modules and provide common basic capabilities;

[0140] A sub-application construction module 64 is used to create a sub-application according to the business layer through the CLI architecture, and the sub-application is used for the business logic development of multiple business modules;

[0141] The deployment and publishing module 65 is used to deploy and publish the main application and / or the sub-application.

[0142] In some optional implementations of this embodiment, the control layer construction module 61 further includes:

[0143] Credential module, used to obtain public credentials for permission verification;

[0144] Mounting module, used to mount sub-applications into the business layer;

[0145] Use modules to directly use the capabilities provided by the main application in the sub-application.

[0146] In some optional implementations of this embodiment, the business layer construction module 62 further includes:

[0147] The business layer creation module is used to create projects based on the cli template provided by the control layer;

[0148] The business layer publishing module is used to build project publishing applications. Publishing projects allows them to be accessed through domain names.

[0149] The business layer mounting module is used to enter the main application through mounting integration.

[0150] In some optional implementations of this embodiment, the main application building module 63 further includes:

[0151] The pull module is used to pull the code of the cli architecture provided by the control layer through git;

[0152] Execution module, used to execute the npm run build:prod command to get the dist file directory.

[0153] The main application publishing module is used to publish dist to the online server. The main application can be accessed through the ngxin proxy.

[0154] In some optional implementations of this embodiment, the sub-application construction module 64 further includes:

[0155] Sub-application creation module, used to create projects based on the cli template provided by the control layer;

[0156] An access module is used to build a project to publish the sub-application, and the published project allows the sub-application to be accessed through a domain name;

[0157] The sub-application mounting module is used to integrate the sub-application into the main application through mounting.

[0158] In some optional implementations of this embodiment, the deployment and publishing module 65 further includes:

[0159] A packaging module is used to package the main application and / or the sub-application, npm run build:prod, to obtain a dist code package;

[0160] The upload module is used to upload the dist code package to the remote server, forward it through the ngxin proxy, and access the main application and / or sub-application after mapping the IP.

[0161] The beneficial effects of implementing this embodiment are as follows: first, a control layer is constructed through HTML and JS, and the control layer is used for the development and iteration of the common functions of the micro-frontend; then, based on the control layer, the code is pulled through the CLI scaffolding provided by the control layer, and then the pulled code is packaged to build the business layer, and the business layer is used to publish business tasks, and multiple business modules are created through the business layer; then, according to the control layer, a main application is created through the CLI architecture, and the main application is used to integrate various business modules and provide common basic capabilities; according to the business layer, a sub-application is created through the CLI architecture, and the sub-application is used for the business logic development of multiple business modules; finally, the main application and / or sub-application is deployed and released; the problem of publishing multiple business modules brought to the project team by the iteration of large projects is reduced, on-demand publishing is realized, and data from multiple environments can be viewed at the same time. While maintaining a unified window, the environment can be switched in real time according to development and testing requirements, which greatly improves the efficiency of test modification.

[0162] Embodiment 3

[0163] To solve the above technical problems, the embodiment of the present invention also provides a computer device. Figure 5 , Figure 5 This is a basic structural block diagram of the computer device in this embodiment.

[0164] The computer device 7 includes a memory 71, a processor 72, and a network interface 73 that are interconnected through a system bus. It should be noted that the figure only shows a computer device 7 having components of a memory 71, a processor 72, and a network interface 73, but it should be understood that it is not required to implement all the components shown, and more or fewer components may be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to a microprocessor, an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), a digital processor (DSP), an embedded device, etc.

[0165] The computer device may be a desktop computer, a notebook computer, a PDA, a cloud server, etc. The computer device may interact with the user through a keyboard, a mouse, a remote control, a touch pad, or a voice control device.

[0166] The memory 71 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 71 may be an internal storage unit of the computer device 7, such as a hard disk or memory of the computer device 7. In other embodiments, the memory 71 may also be an external storage device of the computer device 7, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. equipped on the computer device 7. Of course, the memory 71 may also include both the internal storage unit of the computer device 7 and its external storage device. In this embodiment, the memory 71 is generally used to store the operating system and various application software installed on the computer device 7, such as computer-readable instructions based on the micro-frontend architecture method of Qiankun. In addition, the memory 71 can also be used to temporarily store various types of data that have been output or are to be output.

[0167] The processor 72 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip in some embodiments. The processor 72 is generally used to control the overall operation of the computer device 7. In this embodiment, the processor 72 is used to run computer-readable instructions stored in the memory 71 or process data, such as running computer-readable instructions of the micro-frontend architecture method based on Qiankun.

[0168] The network interface 73 may include a wireless network interface or a wired network interface. The network interface 73 is generally used to establish a communication connection between the computer device 7 and other electronic devices.

[0169] The beneficial effects of implementing this embodiment are as follows: first, a control layer is constructed through HTML and JS, and the control layer is used for the development and iteration of the common functions of the micro-frontend; then, based on the control layer, the code is pulled through the CLI scaffolding provided by the control layer, and then the pulled code is packaged to build the business layer, and the business layer is used to publish business tasks, and multiple business modules are created through the business layer; then, according to the control layer, a main application is created through the CLI architecture, and the main application is used to integrate various business modules and provide common basic capabilities; according to the business layer, a sub-application is created through the CLI architecture, and the sub-application is used for the business logic development of multiple business modules; finally, the main application and / or sub-application is deployed and released; the problem of publishing multiple business modules brought to the project team by the iteration of large projects is reduced, on-demand publishing is realized, and data from multiple environments can be viewed at the same time. While maintaining a unified window, the environment can be switched in real time according to development and testing requirements, which greatly improves the efficiency of test modification.

[0170] Embodiment 4

[0171] The present invention also provides another embodiment, namely, providing a computer-readable storage medium, which stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the qiankun-based micro-frontend architecture method as described above.

[0172] The beneficial effects of implementing this embodiment are as follows: first, a control layer is constructed through HTML and JS, and the control layer is used for the development and iteration of the common functions of the micro-frontend; then, based on the control layer, the code is pulled through the CLI scaffolding provided by the control layer, and then the pulled code is packaged to build the business layer, and the business layer is used to publish business tasks, and multiple business modules are created through the business layer; then, according to the control layer, a main application is created through the CLI architecture, and the main application is used to integrate various business modules and provide common basic capabilities; according to the business layer, a sub-application is created through the CLI architecture, and the sub-application is used for the business logic development of multiple business modules; finally, the main application and / or sub-application is deployed and released; the problem of publishing multiple business modules brought to the project team by the iteration of large projects is reduced, on-demand publishing is realized, and data from multiple environments can be viewed at the same time. While maintaining a unified window, the environment can be switched in real time according to development and testing requirements, which greatly improves the efficiency of test modification.

[0173] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the various embodiment methods of the present invention.

[0174] Obviously, the embodiments described above are only some embodiments of the present invention, rather than all embodiments. The preferred embodiments of the present invention are given in the accompanying drawings, but they do not limit the patent scope of the present invention. The present invention can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present invention more thorough and comprehensive. Although the present invention has been described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific embodiments, or to perform equivalent replacements for some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of the present invention, directly or indirectly used in other related technical fields, is also within the scope of patent protection of the present invention.

Claims

1. A micro front-end architecture method based on Qiankun, characterized in that: The steps include: Build a control layer using HTML and JS, which is used for the development and iteration of micro-frontend public functions; Based on the control layer, the code is pulled through the cli scaffolding provided by the control layer, and then the pulled code is packaged to build a business layer. The business layer is used to publish business tasks. Through the business layer, multiple business modules are created; According to the control layer, a main application is created through the cli architecture, and the main application is used to unify and integrate various business modules and provide common basic capabilities; According to the business layer, a sub-application is created through the cli architecture, and the sub-application is used for the business logic development of multiple business modules; Deploy and publish the main application and / or the sub-application.

2. According to the qiankun-based micro-frontend architecture method of claim 1, it is characterized in that: The control layer is constructed by HTML and JS, and the control layer is used for the development iteration of the common functions of the micro front-end, which specifically includes: Get the public certificate for permission verification; Mount the sub-application into the business layer; Directly use the capabilities provided by the main application in the sub-application.

3. According to the qiankun-based micro-frontend architecture method of claim 1, it is characterized in that: Based on the control layer, the code is pulled through the cli scaffolding provided by the control layer, and then the pulled code is packaged to build a business layer. The business layer is used to publish business tasks. Through the business layer, the steps of creating multiple business modules specifically include: Create a project based on the cli template provided by the control layer; Build a project and publish the application. Publishing the project allows access through the domain name. Enter the main application by mounting and integrating.

4. According to the qiankun-based micro-frontend architecture method of claim 1, it is characterized in that: The steps of creating a main application according to the control layer through the CLI architecture, wherein the main application is used to integrate various business modules and provide common basic capabilities specifically include: Pull the code of the cli architecture provided by the control layer through git. Execute the npm run build:prod command to get the dist file directory. Publish dist to the online server, and then access the main application through the ngxin proxy.

5. The qiankun-based micro-frontend architecture method according to claim 1 is characterized in that: The steps of creating a sub-application according to the business layer through the CLI architecture, wherein the sub-application is used for the business logic development of the multiple business modules specifically include: Create a project based on the cli template provided by the control layer; Build a project to publish the sub-application, and publish the project so that the sub-application can be accessed through the domain name; The sub-application is integrated into the main application by mounting.

6. The qiankun-based micro-frontend architecture method according to any one of claims 1 to 5, characterized in that: The steps of deploying and publishing the main application and / or the sub-application specifically include: Package the main application and / or the sub-application, npm run build:prod, to obtain a dist code package; Upload the dist code package to the remote server, forward it through the ngxin proxy, and then map the IP to access the main application and / or sub-application.

7. A micro-frontend architecture device based on Qiankun, characterized in that: include: A control layer construction module is used to build a control layer through HTML and JS. The control layer is used for the development iteration of micro-frontend public functions. The business layer construction module is used to pull the code based on the control layer through the cli scaffolding provided by the control layer, and then package the pulled code to build the business layer. The business layer is used to publish business tasks. Through the business layer, multiple business modules are created; The main application building module is used to create the main application through the CLI architecture according to the control layer. The main application is used to integrate various business modules and provide common basic capabilities. A sub-application building module, used to create a sub-application through the cli architecture according to the business layer, and the sub-application is used for the business logic development of multiple business modules; The deployment and publishing module is used to deploy and publish the main application and / or the sub-application.

8. The qiankun-based micro-frontend architecture device according to claim 7, characterized in that: The control layer building module includes: The credential module is used to obtain public credentials for permission verification; Mounting module, used to mount sub-applications into the business layer; Use modules to directly use the capabilities provided by the main application in the sub-application.

9. A computer device comprising a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the qiankun-based micro-frontend architecture method are implemented as described in any one of claims 1 to 6.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the qiankun-based micro-frontend architecture method are implemented as described in any one of claims 1 to 6.

Images