CN116628380A - 微前端的应用管理方法、装置、电子设备及存储介质 - Google Patents

微前端的应用管理方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN116628380A
CN116628380A CN202310603458.5A CN202310603458A CN116628380A CN 116628380 A CN116628380 A CN 116628380A CN 202310603458 A CN202310603458 A CN 202310603458A CN 116628380 A CN116628380 A CN 116628380A
Authority
CN
China
Prior art keywords
sub
application
plug
applications
route
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310603458.5A
Other languages
English (en)
Inventor
韩生曌
陈存利
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Du Xiaoman Technology Beijing Co Ltd
Original Assignee
Du Xiaoman Technology Beijing Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Du Xiaoman Technology Beijing Co Ltd filed Critical Du Xiaoman Technology Beijing Co Ltd
Priority to CN202310603458.5A priority Critical patent/CN116628380A/zh
Publication of CN116628380A publication Critical patent/CN116628380A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Stored Programmes (AREA)

Abstract

本发明提供一种微前端的应用管理方法、装置、电子设备及存储介质，方法包括：将多个子应用的路径分发至同一个域名下；搭建基座库，并采用模块打包器将基座库的插件打包；多个子应用中的每个子应用均可通过标签引入打包后的插件；监听当前子应用的路由变化；在监听到路由变化时，拦截跳转指令，并获取新的路由地址，判断新的路由地址是否在当前子应用及基座库的插件的路由范围内，若否，则刷新跳转至新的路由地址。本发明可实现前端各子应用整合为一，并且可实现前端各子应用的独立开发、独立维护，提高研发效率。

Description

微前端的应用管理方法、装置、电子设备及存储介质
技术领域
本发明涉及计算机前端技术领域，尤其涉及微前端的应用管理方法、装置、电子设备及存储介质。
背景技术
现代负责的前端应用或者网站，通常是由很多功能模块组成，这些功能模块往往是由多个不同团队负责，每个团队都会有自己单独的业务领域，比如有负责权限认证的模块，有负责网络通讯的模块，在这样的背景下，要维护一个统一的前端应用是极为困难的。
发明内容
有鉴于此，本发明实施例提供了一种微前端的应用管理方法、装置、电子设备及存储介质，以解决现有技术中维护统一的前端应用极为困难的问题。
根据本发明的一方面，提供了一种微前端的应用管理方法，包括步骤：
将多个子应用的路径分发至同一个域名下；
搭建基座库，并采用模块打包器将基座库的插件打包；多个子应用中的每个子应用均可通过标签引入打包后的插件；
监听当前子应用的路由变化；在监听到路由变化时，拦截跳转指令，并获取新的路由地址，判断新的路由地址是否在当前子应用及基座库的插件的路由范围内，若否，则刷新跳转至新的路由地址。
可选地，刷新跳转至新的路由地址包括：
在新的路由地址中添加预设标识，在检测到预设标识时，调用页面刷新函数跳转至新的路由地址。
可选地，若新的路由地址在当前子应用及基座插件的范围内，则无刷新切换至新的路由地址。
可选地，微前端的应用管理方法还包括步骤：
搭建共通组件库；多个子应用中的每个子应用均采用共通组件库。
可选地，搭建基座库包括：采用Vue框架搭建基座库。
可选地，模块打包器包括webpack。
可选地，多个子应用中的每个子应用均可通过标签的形式引入打包后的插件包括：
多个子应用中的每个子应用均可通过Script标签引入打包后的插件。
根据本发明的另一方面，提供了一种微前端的应用管理装置，包括：
路由分发模块，用于将多个子应用的路径分发至同一个域名下；
基座库搭建模块，用于搭建基座库，并采用模块打包器将基座库的插件打包；多个子应用中的每个子应用均可通过标签引入打包后的插件；
访问模块，用于监听当前子应用的路由变化；在监听到路由变化时，拦截跳转指令，并获取新的路由地址，判断新的路由地址是否在当前子应用及基座库的插件的路由范围内，若否，则刷新跳转至新的路由地址。
根据本发明的另一方面，提供了一种电子设备，包括：
处理器；以及
存储程序的存储器，
其中，程序包括指令，指令在由处理器执行时使处理器执行上述的方法。
根据本发明的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，计算机指令用于使计算机执行根据上述的方法。
本申请实施例中提供的一种微前端的应用管理方法、装置、电子设备及存储介质，通过路由分发将多个子应用的路径分发至同一个域名下，然后搭建统一的基座库，使各子应用均可在入口处通过标签引用基座库的插件。还采用了路由导航守卫，跨子应用跳转采用多页面应用模式，子应用内部页面切换采用单页面应用模式，实现了多个子应用的管理。且各个子应用能够独立开发、独立运行、独立部署，减少了项目之间的耦合，提升了项目扩展性。还采用共通组件库，实现样式统一，避免了子应用之间的差异带来的不连贯的用户体验。
附图说明
图1示出了根据本发明示例性实施例的微前端的应用管理方法的流程图；
图2示出了根据本发明示例性实施例的微前端的应用管理装置的示意性框图；
图3示出了能够用于实现本发明的实施例的示例性电子设备的结构框图。
具体实施方式
下面将参照附图更详细地描述本发明的实施例。虽然附图中显示了本发明的某些实施例，然而应当理解的是，本发明可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本发明。应当理解的是，本发明的附图及实施例仅用于示例性作用，并非用于限制本发明的保护范围。
应当理解，本发明的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本发明的范围在此方面不受限制。
本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。需要注意，本发明中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意，本发明中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。本发明实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
以下参照附图描述本发明的方案，如图1所示，本发明示例性实施例提供了一种微前端的应用管理方法，包括步骤：
S1，将多个子应用的路径分发至同一个域名下；
S2，搭建基座库，并采用模块打包器将基座库的插件打包；多个子应用中的每个子应用均可通过标签引入打包后的插件；
S3，监听当前子应用的路由变化；在监听到路由变化时，拦截跳转指令，并获取新的路由地址，判断新的路由地址是否在当前子应用及基座库的插件的路由范围内，若否，则刷新跳转至新的路由地址。
其中，微前端是前端应用构建的一种方式，用来将多个前端应用融合为一。子应用是指运行在各种终端设备的程序及资源，在本发明示例性实施例中主要指运行在PC端浏览器上的用HTML、CSS、JS提供运行的代码，后端API为提供业务功能服务和数据访问服务。
在本发明示例性实施例中，首先将多个子应用的路径分发至同一个域名下，然后搭建统一的基座库，使各子应用均可在入口处通过标签引用基座库的插件。在监听到跨子应用跳转即新的路由地址不在当前子应用及基座库的插件的路由范围内时，刷新跳转至新的路由地址。本发明示例性实施例可实现前端各子应用整合为一，并且可实现前端各子应用的独立开发、独立维护，提高研发效率。并且，各子应用在首次加载时引用基座库，就可具备认证、导航、及其他通用功能，子应用只需关注业务逻辑即可，最小成本实现最佳的微前端方案。让子应用开发不需要进行过多的改造，让用户访问不同的前端应用时，体验更一致。
在一些实施方式中，不同的子应用通过web服务器分发至同一个域名的不同目录下。
作为一种实施方式，设置两个子应用home和about，web服务器可通过alias命令将home子应用和about子应用分发至域名xx.com的不同目录下。home子应用可被分发到/home/work/home/dist目录下，about子应用分发到/home/work/about/dist目录下。经过web服务器分发之后，用户可通过访问同一个域名xx.com实现对子应用home和about的访问。
其中，web服务器是一种网站服务器，用于处理浏览器等Web客户端的请求，返回前端所需的资源，比如Nginx就是一种Web服务器。
在另一些实施方式中，刷新跳转至新的路由地址包括：
在新的路由地址中添加预设标识，在检测到预设标识时，调用页面刷新函数跳转至新的路由地址。
作为一种实施方式，预设标识可设置为refresh＝true，当在新的路由地址中检测到refresh＝true时，调用页面刷新函数跳转至新的路由地址，从当前子应用的页面跳转至另外一个子应用的页面。在本实施方式中，通过路由标识处理跨子应用访问的问题，灵活性高。
作为一种示例，从home子应用进入about子应用时，拦截跳转指令，并获取新的路由地址。由于about子应用的路由地址不在home子应用及基座库的插件的路由范围内，则在新的路由地址中添加预设标识refresh＝true，调用页面刷新函数跳转至新的路由地址，采用多页面应用模式从当前home子应用的页面刷新跳转至about子应用的页面。
在又一些实施方式中，若新的路由地址在当前子应用及基座插件的范围内，则无刷新切换至新的路由地址。
作为一种实施方式，home子应用包括两个页面home/page1、home/page2。从home/page1页面进入home/page2页面时，home/page2页面的地址在当前子应用及基座插件的范围内，则采用单页面应用模式从当前home/page1页面无刷新切换至home/page2页面。
在本发明示例性实施例中，采用了路由导航守卫，跨子应用跳转采用多页面应用模式，可避免出现路由不存在或者页面白屏的问题；子应用内部页面切换采用单页面应用模式，避免了不必要的跳转和重复渲染，提高了页面间的切换速度，提升了用户体验。
在又一些实施方式中，微前端的应用管理方法还包括步骤：
搭建共通组件库，多个子应用中的每个子应用均采用共通组件库。
其中，共通组件库的样式可做统一的定制，各个子应用在加载时可引用共通组件库产出的CSS文件。
在本实施方式中，各个子应用均采用共通组件库，实现样式统一，避免了子应用之间的差异带来的不连贯的用户体验。
在又一些实施方式中，采用Vue框架搭建基座库。Vue框架是一套用于构建用户界面的渐进式框架，可以独立完成前后端分离式web项目的javascript框架。Vue插件机制对功能范围没有严格的限制，意味着可以在基座库里根据业务需求实现各种各样的功能，比如一些通用的用户管理、权限管理、配置管理等。
在又一些实施方式中，还可采用其他Web框架搭建基座库，如React。
在又一些实施方式中，还可采用qiankun框架或microApp框架搭建基座库。
在又一些实施方式中，模块打包器包括webpack，webpack可将基座库的插件打包为可直接执行的UMD格式的模块，各个子应用可以通过标签的方式引入打包后的插件。
其中，webpack是一个用于现代Javascript应用程序的静态模块打包工具，比如可将Vue等框架打包为浏览器可识别的html、js、css等文件。
在又一些实施方式中，多个子应用中的每个子应用均可通过标签的形式引入打包后的插件包括：
多个子应用中的每个子应用均可通过Script标签引入打包后的插件。
现有技术中，Vue插件可以发布到公共或者私有的NPM仓库里，供各子应用引用。每个子应用在开发时安装该插件即可。但是在后续插件功能升级时，需要各子应用逐个升级，会带来极大的不便，影响开发效率。
在本实施方式中，将Vue框架的插件通过webpack打包为UMD格式的模块，各个子应用可通过Script标签引入打包后的插件。在浏览器访问时，只要有一个子应用引入该打包后的插件，其他子应用将会默认使用该平台缓存，有效地提高了访问效率，同时插件自身可以做到独立开发、独立维护，提高了研发效率。
在本发明示例性实施例中，通过Vue插件机制实现前端基座库，通过Webpack产出子应用可以引入的JS文件，并且在基座库中实现路由守卫，统一认证，灵活性高、易维护，子应用改造成本低。
如图2所示，本发明示例性实施例还提供了一种微前端的应用管理装置1100，包括：
路由分发模块1101，用于将多个子应用的路径分发至同一个域名下；
基座库搭建模块1102，用于搭建基座库，并采用模块打包器将基座库的插件打包；多个子应用中的每个子应用均可通过标签引入打包后的插件；
访问模块1103，用于监听当前子应用的路由变化；在监听到路由变化时，拦截跳转指令，并获取新的路由地址，判断新的路由地址是否在当前子应用及基座库的插件的路由范围内，若否，则刷新跳转至新的路由地址。
在本发明示例性实施例中，首先将多个子应用的路径分发至同一个域名下，然后搭建统一的基座库，使各子应用均可在入口处通过标签引用基座库的插件。在监听到跨子应用跳转即新的路由地址不在当前子应用及基座库的插件的路由范围内时，刷新跳转至新的路由地址。本发明示例性实施例可实现前端各子应用整合为一，并且可实现前端各子应用的独立开发、独立维护，提高研发效率。并且，各子应用在首次加载时引用基座库，就可具备认证、导航、及其他通用功能，子应用只需关注业务逻辑即可，最小成本实现最佳的微前端方案。让子应用开发不需要进行过多的改造，让用户访问不同的前端应用时，体验更一致。
在一些实施方式中，不同的子应用通过web服务器分发至同一个域名的不同目录下。
作为一种实施方式，设置两个子应用home和about，web服务器可通过alias命令将home子应用和about子应用分发至域名xx.com的不同目录下。home子应用可被分发到/home/work/home/dist目录下，about子应用分发到/home/work/about/dist目录下。经过web服务器分发之后，用户可通过访问同一个域名xx.com实现对不同子应用的访问。
在另一些实施方式中，刷新跳转至新的路由地址包括：
在新的路由地址中添加预设标识，在检测到预设标识时，调用页面刷新函数跳转至新的路由地址。
作为一种实施方式，预设标识可设置为refresh＝true，当在新的路由地址中检测到refresh＝true时，调用页面刷新函数跳转至新的路由地址，从当前子应用的页面跳转至另外一个子应用的页面。在本实施方式中，通过路由标识处理跨子应用访问的问题，灵活性高。
作为一种示例，从home子应用进入about子应用时，拦截跳转指令，并获取新的路由地址。由于about子应用的路由地址不在home子应用及基座库的插件的路由范围内，则在新的路由地址中添加预设标识refresh＝true，调用页面刷新函数跳转至新的路由地址，采用多页面应用模式从当前home子应用的页面刷新跳转至about子应用的页面。
在又一些实施方式中，若新的路由地址在当前子应用及基座插件的范围内，则无刷新切换至新的路由地址。
作为一种实施方式，home子应用包括两个页面home/page1、home/page2。从home/page1页面进入home/page2页面时，home/page2页面的地址在当前子应用及基座插件的范围内，则采用单页面应用模式从当前home/page1页面无刷新切换至home/page2页面。
在本发明示例性实施例中，采用了路由导航守卫，跨子应用跳转采用多页面应用模式，可避免出现路由不存在或者页面白屏的问题；子应用内部页面切换采用单页面应用模式，避免了不必要的跳转和重复渲染，提高了页面间的切换速度，提升了用户体验。
在又一些实施方式中，微前端的应用管理装置还包括：
组件库搭建模块1104，用于搭建共通组件库。多个子应用中的每个子应用均采用共通组件库。
其中，共通组件库的样式可做统一的定制，各个子应用在加载时可引用共通组件库产出的CSS文件。
在本实施方式中，各个子应用均采用共通组件库，实现样式统一，避免了子应用之间的差异带来的不连贯的用户体验。
在又一些实施方式中，采用Vue框架搭建基座库。Vue框架是一套用于构建用户界面的渐进式框架，可以独立完成前后端分离式web项目的javascript框架。Vue插件机制对功能范围没有严格的限制，意味着可以在基座库里根据业务需求实现各种各样的功能，比如一些通用的用户管理、权限管理、配置管理等。
在又一些实施方式中，还可采用其他Web框架搭建基座库，如React。
在又一些实施方式中，还可采用qiankun框架或microApp框架搭建基座库。
在又一些实施方式中，模块打包器包括webpack，webpack可将基座库的插件打包为可直接执行的UMD格式的模块，各个子应用可以通过标签的方式引入打包后的插件。
其中，webpack是一个用于现代Javascript应用程序的静态模块打包工具，比如可将Vue等框架打包为浏览器可识别的html、js、css等文件。
在又一些实施方式中，多个子应用中的每个子应用均可通过标签的形式引入打包后的插件包括：
多个子应用中的每个子应用均可通过Script标签引入打包后的插件。
现有技术中，Vue插件可以发布到公共或者私有的NPM仓库里，供各子应用引用。每个子应用在开发时安装该插件即可。但是在后续插件功能升级时，需要各子应用逐个升级，会带来极大的不便，影响开发效率。
在本实施方式中，将Vue框架的插件通过webpack打包为UMD格式的模块，各个子应用可通过Script标签引入打包后的插件。在浏览器访问时，只要有一个子应用引入该打包后的插件，其他子应用将会默认使用该平台缓存，有效地提高了访问效率，同时插件自身可以做到独立开发、独立维护，提高了研发效率。
在本发明示例性实施例中，通过Vue插件机制实现前端基座库，通过Webpack产出子应用可以引入的JS文件，并且在基座库中实现路由守卫，统一认证，灵活性高、易维护，子应用改造成本低。
本发明示例性实施例还提供一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器。所述存储器存储有能够被所述至少一个处理器执行的计算机程序，所述计算机程序在被所述至少一个处理器执行时用于使所述电子设备执行根据本发明实施例的方法。
本发明示例性实施例还提供一种存储有计算机程序的非瞬时计算机可读存储介质，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本发明实施例的方法。
本发明示例性实施例还提供一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本发明实施例的方法。
参考图3，现将描述可以作为本发明的服务器或客户端的电子设备1200的结构框图，其是可以应用于本发明的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。
如图3所示，电子设备1200包括计算单元1201，其可以根据存储在只读存储器(ROM)1202中的计算机程序或者从存储单元1208加载到随机访问存储器(RAM)1203中的计算机程序，来执行各种适当的动作和处理。在RAM 1203中，还可存储电子设备1200操作所需的各种程序和数据。计算单元1201、ROM 1202以及RAM 1203通过总线1204彼此相连。输入/输出(I/O)接口1205也连接至总线1204。
电子设备1200中的多个部件连接至I/O接口1205，包括：输入单元1206、输出单元1207、存储单元1208以及通信单元1209。输入单元1206可以是能向电子设备1200输入信息的任何类型的设备，输入单元1206可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入。输出单元1207可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元1208可以包括但不限于磁盘、光盘。通信单元1209允许电子设备1200通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。
计算单元1201可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元1201的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元1201执行上文所描述的各个方法和处理。例如，在一些实施例中，微前端的应用管理方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元1208。在一些实施例中，计算机程序的部分或者全部可以经由ROM 1202和/或通信单元1209而被载入和/或安装到电子设备1200上。在一些实施例中，计算单元1201可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行微前端的应用管理方法。
用于实施本发明的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
在本发明的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行***、装置或设备使用或与指令执行***、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体***、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
如本发明使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。
为了提供与用户的交互，可以在计算机上实施此处描述的***和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的***和技术实施在包括后台部件的计算***(例如，作为数据服务器)、或者包括中间件部件的计算***(例如，应用服务器)、或者包括前端部件的计算***(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的***和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算***中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将***的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。
计算机***可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

Claims (10)

1.一种微前端的应用管理方法，其特征在于，包括步骤：
将多个子应用的路径分发至同一个域名下；
搭建基座库，并采用模块打包器将所述基座库的插件打包；所述多个子应用中的每个子应用均可通过标签引入打包后的插件；
监听当前子应用的路由变化；在监听到路由变化时，拦截跳转指令，并获取新的路由地址，判断所述新的路由地址是否在当前子应用及所述基座库的插件的路由范围内，若否，则刷新跳转至所述新的路由地址。
2.根据权利要求1所述的微前端的应用管理方法，其特征在于，所述刷新跳转至所述新的路由地址包括：
在所述新的路由地址中添加预设标识，在检测到所述预设标识时，调用页面刷新函数跳转至所述新的路由地址。
3.根据权利要求1所述的微前端的应用管理方法，其特征在于，若所述新的路由地址在当前子应用及基座插件的范围内，则无刷新切换至所述新的路由地址。
4.根据权利要求1所述的微前端的应用管理方法，其特征在于，还包括步骤：
搭建共通组件库；所述多个子应用中的每个子应用均采用所述共通组件库。
5.根据权利要求1所述的微前端的应用管理方法，其特征在于，所述搭建基座库包括：采用Vue框架搭建所述基座库。
6.根据权利要求5所述的微前端的应用管理方法，其特征在于，所述模块打包器包括webpack。
7.根据权利要求5所述的微前端的应用管理方法，其特征在于，所述多个子应用中的每个子应用均可通过标签的形式引入打包后的插件包括：
所述多个子应用中的每个子应用均可通过Script标签引入打包后的插件。
8.一种微前端的应用管理装置，其特征在于，包括：
路由分发模块，用于将多个子应用的路径分发至同一个域名下；
基座库搭建模块，用于搭建基座库，并采用模块打包器将所述基座库的插件打包；所述多个子应用中的每个子应用均可通过标签引入打包后的插件；
访问模块，用于监听当前子应用的路由变化；在监听到路由变化时，拦截跳转指令，并获取新的路由地址，判断所述新的路由地址是否在当前子应用及所述基座库的插件的路由范围内，若否，则刷新跳转至所述新的路由地址。
9.一种电子设备，其特征在于，包括：
处理器；以及
存储程序的存储器，
其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据权利要求1-7中任一项所述的方法。
10.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，其中，所述计算机指令用于使计算机执行根据权利要求1-7中任一项所述的方法。
CN202310603458.5A 2023-05-25 2023-05-25 微前端的应用管理方法、装置、电子设备及存储介质 Pending CN116628380A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310603458.5A CN116628380A (zh) 2023-05-25 2023-05-25 微前端的应用管理方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310603458.5A CN116628380A (zh) 2023-05-25 2023-05-25 微前端的应用管理方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN116628380A true CN116628380A (zh) 2023-08-22

Family

ID=87636245

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310603458.5A Pending CN116628380A (zh) 2023-05-25 2023-05-25 微前端的应用管理方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN116628380A (zh)

Similar Documents

Publication Publication Date Title
US9077770B2 (en) Mobile web app infrastructure
CN109408136B (zh) 信息处理方法、装置、存储介质及电子设备
CN111580879A (zh) 小程序的运行方法、装置、电子设备及计算机存储介质
CN111338623B (zh) 一种开发用户界面的方法、装置、介质和电子设备
CN112260853B (zh) 容灾切换方法、装置、存储介质及电子设备
CN114327688B (zh) 基于微前端的数据处理方法、框架、存储介质及终端设备
CN108647032B (zh) 应用加载方法及装置、计算机装置和计算机可读存储介质
CN113010827B (zh) 页面渲染方法、装置、电子设备以及存储介质
CN113900834B (zh) 基于物联网技术的数据处理方法、装置、设备及存储介质
CN113760324A (zh) 构建微前端应用的方法和装置
CN113179188B (zh) 服务降级动态实现方法、装置、计算机设备及存储介质
CN112416458A (zh) 基于ReactNative的预加载方法、装置、计算机设备及存储介质
CN111581555A (zh) 一种文档加载方法、装置、设备及存储介质
CN115470432A (zh) 一种页面渲染方法、装置、电子设备及计算机可读介质
CN114443076A (zh) 镜像构建方法、装置、设备及存储介质
CN114143191A (zh) 基于分布式网关的微服务编排方法、装置及相关设备
CN116628380A (zh) 微前端的应用管理方法、装置、电子设备及存储介质
CN113722007B (zh) Vpn分支设备的配置方法、装置及***
CN113726855B (zh) 服务聚合方法、装置、电子设备以及计算机可读存储介质
EP3872630A2 (en) Request processing method and apparatus, electronic device, and computer storage medium
CN111382381B (zh) 一种用户数据共享方法、装置、移动终端及存储介质
CN114726905A (zh) 一种Tbox网络接入Android***的方法、装置、设备及存储介质
CN106775900B (zh) 应用浏览器的调用方法和***
US11595356B1 (en) Method, apparatus, device and storage medium for processing network request
KR20190062801A (ko) oneM2M 기반 데이터 관제 API 구성 방법

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination