CN111796860B - 微前端方案实现方法及装置 - Google Patents
微前端方案实现方法及装置 Download PDFInfo
- Publication number
- CN111796860B CN111796860B CN202010597247.1A CN202010597247A CN111796860B CN 111796860 B CN111796860 B CN 111796860B CN 202010597247 A CN202010597247 A CN 202010597247A CN 111796860 B CN111796860 B CN 111796860B
- Authority
- CN
- China
- Prior art keywords
- sub
- engineering
- node
- information
- project
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 37
- 230000006870 function Effects 0.000 claims description 47
- 230000003068 static effect Effects 0.000 claims description 25
- 238000004590 computer program Methods 0.000 claims description 13
- 230000008571 general function Effects 0.000 claims description 5
- 238000004458 analytical method Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 21
- 238000010586 diagram Methods 0.000 description 16
- 238000004891 communication Methods 0.000 description 10
- 238000012545 processing Methods 0.000 description 8
- 239000000243 solution Substances 0.000 description 8
- 230000008569 process Effects 0.000 description 7
- 238000012423 maintenance Methods 0.000 description 6
- 239000000872 buffer Substances 0.000 description 4
- 208000013407 communication difficulty Diseases 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 239000008186 active pharmaceutical agent Substances 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 230000005856 abnormality Effects 0.000 description 2
- 230000009191 jumping Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011156 evaluation Methods 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Classifications
-
- 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
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
-
- 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/44505—Configuring for program initiating, e.g. using registry, configuration files
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
本发明提供了微前端方案实现方法及装置，方法包括：接收方案的功能实现请求确定实现该功能子工程的节点路由信息；根据所述的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息；其中，所述的节点清单为预先建立的节点路由与子节点工程信息的对应关系；根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案。本发明根据功能实现请求的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息，将子工程注册至主工程的Vue实例以实现方案，提供一种基于Vue的微前端解决方案，实现在开发阶段各工程间彻底解耦、独立开发，做到单页应用体验。
Description
技术领域
本发明涉及前端开发技术，具体的讲是一种微前端方案实现方法及装置。
背景技术
随着近几年前端领域相关技术的快速发展，前端的工程化程度急速提高，目前单页应用(SPA)成为前端开发的主流选择。但随着项目内容增多，前端工程体量也随之增长，带来的维护问题越来越突出，业界顺着微服务的思路提出了微前端的概念。微前端是一种利用微件拆分来达到工程拆分治理的方案，可以解决工程膨胀、开发维护困难等问题。
随着前端业务场景越来越复杂，微前端的概念被越来越多的提起，业界也有多种方案，针对不同的场景，有着不同的处理方案，现有技术的微前端解决方案存在诸多问题，需要一套能够做到在开发和部署阶段分离，又能够在运行时保证单页应用体验的微前端解决方案。
发明内容
为满足微前端开发的要求，解决现有技术的至少一问题，本发明提供了一种微前端方案实现方法，包括：
接收方案的功能实现请求确定实现该功能子工程的节点路由信息；
根据所述的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息；其中，所述的节点清单为预先建立的节点路由与子节点工程信息的对应关系；
根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案。
本发明实施例中，所述的子工程节点信息还包括：子工程的节点入口、子工程静态文件；其中，
所述的子工程静态文件包括：路由信息、全局状态信息及多语言配置信息。
本发明实施例中，所述的根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案包括：
解析所述的子工程静态文件确定子工程的路由信息、全局状态信息及多语言配置信息；
根据所述的子工程的节点入口利用Vue插件加载所述的路由信息、全局状态信息及多语言配置信息子工程注册至主工程的Vue实例以实现方案。
本发明实施例中，所述的Vue插件包括：Vue-router插件、Vuex插件及Vue-i18n插件。
同时，本发明还提供一种微前端方案实现装置，包括：
请求接收模块，用于接收方案的功能实现请求确定实现该功能子工程的节点路由信息；
子工程节点确定模块，用于根据所述的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息；其中，所述的节点清单为预先建立的节点路由与子节点工程信息的对应关系；
子工程注册模块，用于根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案。
本发明实施例中，所述的子工程注册模块包括：
解析单元，用于解析所述的子工程静态文件确定子工程的路由信息、全局状态信息及多语言配置信息；
注册加载单元，用于根据所述的子工程的节点入口利用Vue插件加载所述的路由信息、全局状态信息及多语言配置信息子工程注册至主工程的Vue实例以实现方案。
同时，本发明还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述方法。
同时，本发明还提供一种计算机可读存储介质，计算机可读存储介质存储有执行上述方法的计算机程序。
本发明提供的一种微前端方案实现方法及装置，包括：
接收方案的功能实现请求确定实现该功能子工程的节点路由信息；
根据功能实现请求的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息，将子工程注册至主工程的Vue实例以实现方案，提供了一种基于Vue的微前端解决方案，从而实现在开发阶段各工程间彻底解耦、独立开发，并且各子工程独立部署在不同节点上，在运行时自动集成，做到单页应用体验。从而在不影响用户体验的前提下，解决工程规模过大带来的开发维护问题。
为让本发明的上述和其他目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附图式，作详细说明如下。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明提供的微前端方案实现方法的流程图；
图2为本发明提供的微前端方案实现装置的框图；
图3为本发明一实施例中主工程与子工程的关系示意图；
图4为本发明一实施例中主工程内容示意图；
图5为本发明一实施例中路由调度模块逻辑示意图；
图6为本发明一实施例中子工程注册信息示意图；
图7为本发明一实施例中项目部署示意图；
图8为本发明实施例的电子设备的示意框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
微前端的评价标准大致可以分如下几个方面：技术栈是否统一、是否单独打包部署、是否有单页应用体验、切换速度、工程间通信难度低、侵入性、学习成本等。
现有技术对微前端的需求及期望如下：
①统一技术栈为Vue、②单独打包部署、③单页应用体验、④切换速度快、⑤工程间通信难度低、⑥对项目侵入性低。虽然业内已有多种微前端解决方案，但没有方案能够很好满足上述条件。
因此，需要提供一套能够满足如上条件的微前端方案，使之能够做到在开发和部署阶段分离，又能够在运行时保证单页应用体验。
为了满足上述对微前端方案的要求，如图1所示，为本发明提供的微前端方案实现方法的流程图，其包括：
步骤S101，接收方案的功能实现请求确定实现该功能子工程的节点路由信息；
步骤S102，根据所述的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息；其中，所述的节点清单为预先建立的节点路由与子节点工程信息的对应关系；
步骤S103，根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案。
本发明提供的微前端方案实现方法中，将方案或项目中的多个前端工程分为一个主工程和多个子工程。其中，主工程负责整个项目的通用功能实现，包括整体布局、全局样式、路由调度、用户权限、菜单管理等，核心功能是作为整体项目的基座和入口，运行全局唯一的Vue实例，接受多个子应用的注册信息，主工程及子工程独立部署在不同节点上，在运行时自动集成，做到单页应用体验。从而在不影响用户体验的前提下，解决工程规模过大带来的开发维护问题。
本发明实施例中，所述的子工程节点信息还包括：子工程的节点入口、子工程静态文件；其中，
所述的子工程静态文件包括：路由信息、全局状态信息及多语言配置信息。
将项目中的多个前端工程分为一个主工程和多个子工程。
本发明实施例中，所述的根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案包括：
解析所述的子工程静态文件确定子工程的路由信息、全局状态信息及多语言配置信息；
根据所述的子工程的节点入口利用Vue插件加载所述的路由信息、全局状态信息及多语言配置信息子工程注册至主工程的Vue实例以实现方案。
即本发明提供的微前端方案实现方法中，用户访问主工程节点打开主工程首页，主工程初始化装置会加载配置文件解析得到所有子工程文件所在的节点列表，当进行功能切换时，主工程根据要跳转的路由在步骤1中的节点清单上找到对应子工程的节点入口并加载子工程静态文件，通过解析子工程静态文件通过调用Vuex等插件的API将子工程的信息注册至主工程中的Vue实例上，
同时，本发明还提供一种微前端方案实现装置，如图2所示，包括：
请求接收模块201，用于接收方案的功能实现请求确定实现该功能子工程的节点路由信息；
子工程节点确定模块202，用于根据所述的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息；其中，所述的节点清单为预先建立的节点路由与子节点工程信息的对应关系；
子工程注册模块203，用于根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案。
本发明实施例中，所述的子工程注册模块203包括：
解析单元，用于解析所述的子工程静态文件确定子工程的路由信息、全局状态信息及多语言配置信息；
注册加载单元，用于根据所述的子工程的节点入口利用Vue插件加载所述的路由信息、全局状态信息及多语言配置信息子工程注册至主工程的Vue实例以实现方案。
本发明提供的一种基于Vue的微前端解决方案，在开发阶段各工程间彻底解耦、独立开发，并独立部署在不同节点上，在运行时自动集成，做到单页应用体验。从而在不影响用户体验的前提下，解决工程规模过大带来的开发维护问题。
与传统前端方案相比，本发明提供的微前端方案带来了如下好处：
①将整体项目拆分为多个工程可以解决大型项目中前端工程过于庞大的缺点，各团队可以独立负责各自的工程，减少了后期开发和维护的困难；
②项目拆分为多个应用后，当程序有变更时，只需要重新编译部署所涉及的工程即可，避免整体项目重新打包编译，有效降低项目部署时间
③各工程间可以根据自己的进度安排开发周期，避免了团队协调带来的项目频繁变更问题。
④将工程拆分为主、子工程后，功能代码划分更加清晰，避免了传统方案中各团队修改公共文件带来的冲突问题。
⑤微前端方案提高了项目可用性。传统方案中一旦某个功能有故障，则会导致整个项目部署不可用，而在微前端的情况下，由于各工程均为独立部署，因此除了主工程的异常会影响整体项目外，各子工程节点的故障或异常仅会影响本节点的功能，不会对项目整体产生影响。
本发明以实施例中，为了实现上述目的，首先需要将项目中的多个前端工程分为一个主工程和多个子工程，并部署至不同节点。
其中，主工程负责整个项目的通用功能实现，包括整体布局、全局样式、路由调度、用户权限、菜单管理等，核心功能是作为整体项目的基座和入口，运行全局唯一的Vue实例，接受多个子应用的注册信息。子工程则负责项目中的具体业务功能实现。
本实施例提供的方案运行时的过程如下步骤：
步骤1、用户访问主工程节点打开主工程首页，主工程的初始化装置会加载配置文件解析得到所有子工程文件所在的节点列表；
步骤2、当进行功能切换时，主工程根据要跳转的路由在步骤1中的节点清单上找到对应子工程的节点入口并加载子工程静态文件；即根据用户选择的功能确定要跳转的路由，根据确定的路由找到子工程的节点入口。
通过解析子工程静态文件通过调用Vuex等插件的API将子工程的信息注册至主工程中的Vue实例上。
步骤3、子工程信息注册完成后主工程会加载对应组件并跳转至相应页面，此时子工程的信息已经成为主工程的一部分，使用体验与单页应用保持一致，并提高切换速度。
如图3所示，是本发明实施例中的主工程与子工程关系的示意图。
本实施例中，主工程作为项目入口，负责运行Vue实例和路由调度工作，当用户访问某个子工程功能时，主工程根据子工程配置信息匹配到对应的子工程，并从对应子工程节点上加载对应静态文件，完成页面切换。
以子工程A的功能B为例，前端路由为“/childA/componentB”，主工程调度逻辑通过查找子工程配置信息，根据“/childA”路由前缀定位到子工程A，从而加载子工程A中功能B的相关静态文件，并在加载结束后完成页面切换。
图4是本发明实施例中的主工程内容的介绍，根据功能可以分为如下三类：
①基础信息：主要包含子工程的清单和通用功能；通用功能是涉及项目整体的一些基本设施，比如用户管理与菜单管理等模块，此处不多赘述。子工程清单用来记录各子工程的路由前缀与对应地址的相应关系等注册信息；
本发明一实施例中，清单中每个子工程的信息结构可以如下概括，
其中，id是子工程唯一标识，用于避免重复加载资源；
path是子工程对应的路由前缀，用于通过路由信息识别子工程归属；
urlPath是子工程入口文件，对于Vue工程而言通常是app.js；
origin表示子工程前端静态资源所在路径，用于指示浏览器从指定位置获取相应资源，该地址通常配合反向代理使用，使整体项目资源处于同一个域名下。
即本实施例中，节点清单包括：子工程唯一标识、子工程对应的路由前缀、子工程入口文件、子工程前端静态资源所在路径。
②路由调度及信息注册：这部分包括：路由调度模块和子工程需要注册信息的公共模块，在图4所示的实施例中，对于Vue工程而言，子工程需要注册信息的公共模块包括：路由信息模块、全局状态模块、多语言配置模块。
路由调度模块用于控制子工程文件的加载与路由跳转，具体实现会在下文详细介绍。公共模块暴露给子工程，子工程可以调用对应API将自身信息注册至主工程对应模块中。
③全局配置及可复用模块：全局配置包含项目的一些控制信息，比如允许同时打开的最大功能数量、项目的访问路径前缀等。可复用模块主要包含全局方法、全局模块及自定义指令等，封装并注册后暴露给子工程使用，例如全局的request方法、表单校验方法等。
图5描述了本发明一实施例中的路由调度模块的逻辑，本实施例中，通过Vue-router路由守卫实现，这样做能够保持原有技术栈不变，同时对工程侵入最低。
当用户要访问某路径时，例如路由“/childOne/xxx/xxx”，根据路由前缀/childOne查找子工程清单是否有匹配信息，如果没有则进行失败处理，停止跳转；
如果存在匹配信息则检查当前子工程模块是否已加载；
如果已加载则进行后续正常跳转步骤；
如果没有则动态加载该子工程的入口文件，等待子工程完成信息注册后，进行后续正常跳转步骤。
图6展示了子工程向主工程注册信息的过程。
在子工程入口文件加载后，入口文件会注册三项内容至主工程，分别是路由信息、全局状态信息与多语言配置信息。
本发明实施例中，Vue在这方面常用的组件分别是Vue-router、Vuex、Vue-i18n，主工程将实例化后的三个对象暴露给子工程，本发明实施例中，依靠Vue-router、Vuex、Vue-i18n本身提供的API，子工程可以方便的注册信息至主工程。
值得注意的是，在调用Vue-router的addRoutes接口时需要在路由上添加子工程的特征路由前缀，与主工程中的子路由清单信息保持一致；
在调用Vuex的store.register接口时，也建议根据子应用名称将相应信息注册至对应命名空间下。在子应用加载并注册信息至主工程后，子工程就完成了自身的“注入”工作，此时调用子工程相关功能与调用主工程本身的功能无异，保证了用户的单页应用使用体验。
图7所示为本发明实施例中子工程进行部署的示意图。
主工程与子工程分别打包部署在不同节点上，根据访问前缀在反向代理添加相应的配置，与主工程中的配置清单保持一致，根路径映射到主工程节点，其他子工程路径映射到对应的子工程节点。这样在浏览器进行访问时，浏览器根据主工程提供的配置文件进行去指定路径加载子工程时，反向代理就可以将请求转发至正确的子工程节点上。
本发明实施例提供的方案实现方法及装置，基于Vue技术栈的中心路由式微前端方案，能够在不影响最终单页应用体验的前提下，改变了原有的开发和部署模式。
同时，本发明的微前端方案与其他微前端方案相比，有着如下优点：
①统一技术栈。可以利用Vue生态内的现有插件进行全局状态管理和路由管理，无需额外维护一套路由和状态管理逻辑，开发成本低。
②切换速度快。通过使用Vue-router来对功能进行路由管理，与iframe或singleSPA方案相比，省去了子工程装载卸载的过程，切换速度明显优于两者，能够与传统单页应用保持一致。
③工程间通信难度低。通过使用Vuex对全局状态进行管理，各工程之间的通信非常方便，能够与传统单页应用保持一致。与之相比，singleSPA需要单独维护一套通信逻辑，各工程之间通信难度大，而iframe方案中各工程之间几乎无法通信。
④对项目侵入性低，保持原有的开发体验。只需通过简单的改造，传统Vue前端工程就能适用于微前端方案中。而且改造后的项目并不改变原有的Vue工程开发体验，对开发人员来说几乎无感。
本发明实施例还提供一种电子设备，该电子设备可以是台式计算机、平板电脑及移动终端等，本实施例不限于此。在本实施例中，该电子设备可以参照前述实施例的内容，其内容被合并于此，重复之处不再赘述。
图8为本发明实施例的电子设备600的系统构成的示意框图。如图8所示，该电子设备600可以包括中央处理器100和存储器140；存储器140耦合到中央处理器100。值得注意的是，该图是示例性的；还可以使用其他类型的结构，来补充或代替该结构，以实现电信功能或其他功能。
一实施例中，微前端方案实现功能可以被集成到中央处理器100中。其中，中央处理器100可以被配置为进行如下控制：
接收方案的功能实现请求确定实现该功能子工程的节点路由信息；
根据所述的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息；其中，所述的节点清单为预先建立的节点路由与子节点工程信息的对应关系；
根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案。
本发明实施例中，所述的子工程节点信息还包括：子工程的节点入口、子工程静态文件；其中，
所述的子工程静态文件包括：路由信息、全局状态信息及多语言配置信息。
本发明实施例中，所述的根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案包括：
解析所述的子工程静态文件确定子工程的路由信息、全局状态信息及多语言配置信息；
根据所述的子工程的节点入口利用Vue插件加载所述的路由信息、全局状态信息及多语言配置信息子工程注册至主工程的Vue实例以实现方案。
如图8所示，该电子设备600还可以包括：通信模块110、输入单元120、音频处理单元130、显示器160、电源170。值得注意的是，电子设备600也并不是必须要包括图8中所示的所有部件；此外，电子设备600还可以包括图8中没有示出的部件，可以参考现有技术。
如图8所示，中央处理器100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器100接收输入并控制电子设备600的各个部件的操作。
其中，存储器140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器100可执行该存储器140存储的该程序，以实现信息存储或处理等。
输入单元120向中央处理器100提供输入。该输入单元120例如为按键或触摸输入装置。电源170用于向电子设备600提供电力。显示器160用于进行图像和文字等显示对象的显示。该显示器例如可为LCD显示器，但并不限于此。
该存储器140可以是固态存储器，例如，只读存储器(ROM)、随机存取存储器(RAM)、SIM卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为EPROM等。存储器140还可以是某种其它类型的装置。存储器140包括缓冲存储器141(有时被称为缓冲器)。存储器140可以包括应用/功能存储部142，该应用/功能存储部142用于存储应用程序和功能程序或用于通过中央处理器100执行电子设备600的操作的流程。
存储器140还可以包括数据存储部143，该数据存储部143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器140的驱动程序存储部144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。
通信模块110即为经由天线111发送和接收信号的发送机/接收机110。通信模块(发送机/接收机)110耦合到中央处理器100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。
基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)110还经由音频处理器130耦合到扬声器131和麦克风132，以经由扬声器131提供音频输出，并接收来自麦克风132的音频输入，从而实现通常的电信功能。音频处理器130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器130还耦合到中央处理器100，从而使得可以通过麦克风132能够在本机上录音，且使得可以通过扬声器131来播放本机上存储的声音。
本发明实施例还提供一种计算机可读程序，其中当在电子设备中执行所述程序时，所述程序使得计算机在所述电子设备中执行如上面实施例所述的微前端方案实现方法。
本发明实施例还提供一种存储有计算机可读程序的存储介质，其中所述计算机可读程序使得计算机在电子设备中执行上面实施例所述的微前端方案实现。
以上参照附图描述了本发明的优选实施方式。这些实施方式的许多特征和优点根据该详细的说明书是清楚的，因此所附权利要求旨在覆盖这些实施方式的落入其真实精神和范围内的所有这些特征和优点。此外，由于本领域的技术人员容易想到很多修改和改变，因此不是要将本发明的实施方式限于所例示和描述的精确结构和操作，而是可以涵盖落入其范围内的所有合适修改和等同物。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。
Claims (6)
1.一种微前端方案实现方法，其特征在于，所述的方法包括：
接收方案的功能实现请求确定实现功能子工程的节点路由信息；
根据所述的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息；其中，所述的节点清单为预先建立的节点路由与子节点工程信息的对应关系，所述子工程节点信息包括：子工程的节点入口、子工程静态文件，所述子工程静态文件包括：路由信息、全局状态信息及多语言配置信息；
根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案，其中，所述主工程负责项目中的通用功能实现，所述子工程负责项目中的具体业务功能实现；
其中，所述根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案包括：
解析所述的子工程静态文件确定子工程的路由信息、全局状态信息及多语言配置信息；
根据所述的子工程的节点入口利用Vue插件加载所述的路由信息、全局状态信息及多语言配置信息将子工程注册至主工程的Vue实例以实现方案。
2.如权利要求1所述的微前端方案实现方法，其特征在于，所述的Vue插件包括：Vue-router插件、Vuex插件及Vue-i18n插件。
3.一种微前端方案实现装置，其特征在于，所述的装置包括：
请求接收模块，用于接收方案的功能实现请求确定实现功能子工程的节点路由信息；
子工程节点确定模块，用于根据所述的节点路由信息和预先存储的节点清单确定实现该请求的子工程节点信息；其中，所述的节点清单为预先建立的节点路由与子节点工程信息的对应关系，所述子工程节点信息还包括：子工程的节点入口、子工程静态文件，所述子工程静态文件包括：路由信息、全局状态信息及多语言配置信息；
子工程注册模块，用于根据确定的子工程节点信息将子工程注册至主工程的Vue实例以实现方案；
其中，所述的子工程注册模块包括：
解析单元，用于解析所述的子工程静态文件确定子工程的路由信息、全局状态信息及多语言配置信息；
注册加载单元，用于根据所述的子工程的节点入口利用Vue插件加载所述的路由信息、全局状态信息及多语言配置信息子工程注册至主工程的Vue实例以实现方案。
4.如权利要求3所述的微前端方案实现装置，其特征在于，所述的Vue插件包括：Vue-router插件、Vuex插件及Vue-i18n插件。
5.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1或2所述方法。
6.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有执行权利要求1或2所述方法的计算机程序。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010597247.1A CN111796860B (zh) | 2020-06-28 | 2020-06-28 | 微前端方案实现方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010597247.1A CN111796860B (zh) | 2020-06-28 | 2020-06-28 | 微前端方案实现方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111796860A CN111796860A (zh) | 2020-10-20 |
| CN111796860B true CN111796860B (zh) | 2024-01-30 |
Family
ID=72803403
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010597247.1A Active CN111796860B (zh) | 2020-06-28 | 2020-06-28 | 微前端方案实现方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111796860B (zh) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114647518A (zh) | 2020-12-21 | 2022-06-21 | 腾讯科技（深圳）有限公司 | 微前端系统、子应用加载方法及计算机可读存储介质 |
| CN112612467A (zh) * | 2020-12-22 | 2021-04-06 | 中国建设银行股份有限公司 | 一种处理基于qiankun的微前端架构的方法和装置 |
| CN112685029A (zh) * | 2020-12-30 | 2021-04-20 | 京东数字科技控股股份有限公司 | 一种可视化模板的生成方法、装置、设备及存储介质 |
| CN112835559B (zh) * | 2021-01-28 | 2023-08-11 | 北银金融科技有限责任公司 | 微前端在北银金融场景建设中的设计与实现方法 |
| CN113282541B (zh) * | 2021-06-04 | 2023-08-11 | 网易（杭州）网络有限公司 | 文件调用方法、装置和电子设备 |
| CN113312049B (zh) * | 2021-06-11 | 2023-01-20 | 浪潮云信息技术股份公司 | 一种前端动态路由实现方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104702634A (zh) * | 2013-12-04 | 2015-06-10 | 腾讯科技（深圳）有限公司 | 数据操作请求处理方法、装置及系统 |
| CN110515683A (zh) * | 2019-07-15 | 2019-11-29 | 平安普惠企业管理有限公司 | 一种前端Vue页面可视化配置的方法、装置及存储介质 |
| CN110647319A (zh) * | 2019-10-08 | 2020-01-03 | 中国工商银行股份有限公司 | 功能模块解耦方法及系统 |
| CN110764775A (zh) * | 2019-09-06 | 2020-02-07 | 平安普惠企业管理有限公司 | 一种应用程序整合的方法、装置、存储介质和服务器 |
| CN110989987A (zh) * | 2019-12-04 | 2020-04-10 | 北京小米移动软件有限公司 | 一种门户网页的生成方法、装置、客户端、服务器及存储介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| GB2466289A (en) * | 2008-12-18 | 2010-06-23 | Veda Technology Ltd | Executing a service application on a cluster by registering a class and storing subscription information of generated objects at an interconnect |
-
2020
- 2020-06-28 CN CN202010597247.1A patent/CN111796860B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104702634A (zh) * | 2013-12-04 | 2015-06-10 | 腾讯科技（深圳）有限公司 | 数据操作请求处理方法、装置及系统 |
| CN110515683A (zh) * | 2019-07-15 | 2019-11-29 | 平安普惠企业管理有限公司 | 一种前端Vue页面可视化配置的方法、装置及存储介质 |
| CN110764775A (zh) * | 2019-09-06 | 2020-02-07 | 平安普惠企业管理有限公司 | 一种应用程序整合的方法、装置、存储介质和服务器 |
| CN110647319A (zh) * | 2019-10-08 | 2020-01-03 | 中国工商银行股份有限公司 | 功能模块解耦方法及系统 |
| CN110989987A (zh) * | 2019-12-04 | 2020-04-10 | 北京小米移动软件有限公司 | 一种门户网页的生成方法、装置、客户端、服务器及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111796860A (zh) | 2020-10-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111796860B (zh) | 微前端方案实现方法及装置 | |
| US9442709B1 (en) | Transition experience during loading and updating an interface and applications pack | |
| CN114138372B (zh) | 前端组件加载方法及装置 | |
| CN106020877A (zh) | 系统环境配置自动更新方法及装置 | |
| CN111399840B (zh) | 一种模块开发方法及装置 | |
| CN108170430B (zh) | 一种界面展示的方法及系统 | |
| RU2639667C2 (ru) | Контекстное приглашение в пробной версии приложения | |
| CN111897738B (zh) | 基于原子服务的自动化测试方法及装置 | |
| CN112463634A (zh) | 微服务架构下的软件测试方法及装置 | |
| CN110825448A (zh) | 实现多业务模块相互调用的方法、装置、电子设备和存储介质 | |
| CN113157345A (zh) | 前端工程自动启动方法及装置 | |
| CN107133160B (zh) | 服务器和客户端 | |
| CN113051163A (zh) | 单元测试方法、装置、电子设备及存储介质 | |
| CN109358833A (zh) | 一种音频播放方法及系统、一种计算设备及存储介质 | |
| CN109739487B (zh) | 一种业务逻辑处理方法、设备及计算机可读存储介质 | |
| CN113050985A (zh) | 前端工程依赖自动注册方法及装置 | |
| CN110851370B (zh) | 程序测试方法及装置、存储介质 | |
| CN113296740A (zh) | 一种服务对象的处理方法、装置、设备和机器可读介质 | |
| CN116483477A (zh) | 一种api调用方法及装置 | |
| CN111930626B (zh) | 基于PaaS云服务的自动化测试方法及装置 | |
| CN112786034B (zh) | 语音交互方法、装置、设备及存储介质 | |
| CN114489607A (zh) | 跨栈应用处理与页面渲染方法、装置、设备及存储介质 | |
| CN113791984A (zh) | 接口自动化测试方法及装置 | |
| US20220035591A1 (en) | Method and apparatus for displaying message box, terminal device and non-transitory computer-readable storage medium | |
| CN112822190A (zh) | 报文维护方法及装置 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |