微前端小记

步骤

将普通的项目改造成 qiankun 主应用基座,需要进行三步操作:

1. 创建微应用容器 - 用于承载微应用,渲染显示微应用;

	a. 设置路由routeb.主应用的布局

在这里插入图片描述
包括:

  1. 主应用菜单,用于渲染菜单
  2. 主应用渲染区域,在触发主应用路由规则时候,$route.name, 将渲染主应用的组件
  3. 微应用渲染区。在未触发主应用路由规则时

2. 注册微应用 - 设置微应用激活条件,微应用地址等等;

在构建好了主框架后,我们需要使用 qiankun 的 registerMicroApps 方法注册微应用,代码实现如下:

3. 配置微应用

bootstrap
mount
unmount

  1. 启动 qiankun;

通信方式

第一种是 qiankun 官方提供的通信方式 - Actions 通信,适合业务划分清晰,比较简单的微前端应用,一般来说使用第一种方案就可以满足大部分的应用场景需求。
第二种是基于 redux 实现的通信方式 - Shared 通信,适合需要跟踪通信状态,子应用具备独立运行能力,较为复杂的微前端应用。

Actions 通信
原理

qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信,该实例有三个方法,分别是:

setGlobalState:设置 globalState - 设置新的值时,内部将执行 浅检查,如果检查到 globalState 发生改变则触发通知,通知到所有的 观察者 函数。
onGlobalStateChange:注册 观察者 函数 - 响应 globalState 变化,在 globalState 发生改变时触发该 观察者 函数。
offGlobalStateChange:取消 观察者 函数 - 该实例不再响应 globalState 变化。
在这里插入图片描述
观察者放到观察者池中
globalState 然后触发观察者函数,从而达到组件间通信的效果

我们在主应用中实现了登录功能,登录拿到 token 后存入 globalState 状态池中。在进入子应用时,我们使用 actions 获取 token,再使用 token 获取到用户信息,在这里插入图片描述
完成页面数据渲染!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/638116.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu安装vm和Linux

1、下载Ubuntu Index of /releaseshttps://old-releases.ubuntu.com/releases/ 2、下载VMware 官方正版VMware下载(16 pro):https://www.aliyundrive.com/s/wF66w8kW9ac 下载Linux系统镜像(阿里云盘不限速)&#xff…

webpack 核心武器:loader 和 plugin 的使用指南(上)

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Twisted Circuit洛谷绿题题解

Twisted Circuit 题面翻译 读入四个整数 0 0 0 或者 1 1 1,作为如图所示的电路图的输入。请输出按照电路图运算后的结果。 感谢PC_DOS 提供的翻译 题目描述 输入格式 The input consists of four lines, each line containing a single digit 0 or 1. 输出格…

读书笔记之《万物起源》:宇宙与人类的极简史

《万物起源:从宇宙大爆炸到文明的兴起》讲述了从大爆炸直到今日,约140亿年间所有重大事物的起源,依次覆盖了量子力学,天体物理学,化学,行星科学,地质学,生物学和人类历史等等学科。 …

08- OpenCV:形态学操作(膨胀与腐蚀 、提取水平与垂直线)

目录 前言 一、膨胀(Dilation)与 腐蚀(Erosion) 二、形态学操作 1、开操作(Opening) 2、闭操作(Closing) 3、形态学梯度(Morphological Gradient) 4、…

Spring成长之路—Spring MVC

在分享SpringMVC之前,我们先对MVC有个基本的了解。MVC(Model-View-Controller)指的是一种软件思想,它将软件分为三层:模型层、视图层、控制层 模型层即Model:负责处理具体的业务和封装实体类,我们所知的service层、poj…

LLM之RAG实战(十九)| 利用LangChain、OpenAI、ChromaDB和Streamlit构建RAG

生成式人工智能以其创造与上下文相关内容的能力彻底改变了技术,开创了人工智能可能性的新时代。其核心是检索增强生成(RAG),将信息检索与LLM相结合,从外部文档中产生智能、知情的响应。 本文将深入研究使用ChromaDB构建…

三.Winform使用Webview2加载本地HTML页面

Winform使用Webview2加载本地HTML页面 往期目录创建Demo2界面创建HTML页面在Demo2窗体上添加WebView2和按钮加载HTML查看效果 往期目录 往期相关文章目录 专栏目录 创建Demo2界面 经过前面两小节 一.Winform使用Webview2(Edge浏览器核心) 创建demo(Demo1)实现回车导航到指定…

广和通AI解决方案“智”赋室外机器人迈向新天地!

大模型趋势下,行业机器人将具备更完善的交互与自主能力,逐步迈向AI 2.0时代,成为人工智能技术全面爆发的重要基础。随着行业智能化,更多机器人应用将从“室内”走向“室外”,承担更多高风险、高智能工作。复杂的室外环…

代码随想录二刷 | 二叉树 | 把二叉搜索树转换为累加树

代码随想录二刷 | 二叉树 | 把二叉搜索树转换为累加树 题目描述解题思路递归法迭代法 代码实现递归法迭代法 题目描述 538.把二叉搜索树转换为累加树 给出二叉 搜索 树的根节点,该树的节点值各不相同,请你将其转换为累加树&…

分布式 session

分布式 session 种 session 的时候需要注意范围,也就是 cookie.domain。 比如两个域名:a.heo.com,b.heo.com。如果要共享 cookie,可以种一个更高层的公共域名,比如 heo.com。 当服务器 A (localhost:808…

基于ECS服务器搭建FTP服务

vsftpd(very secure FTP daemon)是一款在Linux发行版中最受推崇的FTP服务器。vsftpd支持匿名访问和本地用户模式两种访问方式。匿名访问方式任何用户都可以访问搭建的FTP服务;本地用户模式只支持添加的本地用户访问搭建的FTP服务。 说明: 匿…

前端实现贪吃蛇功能

大家都玩过贪吃蛇小游戏,控制一条蛇去吃食物,然后蛇在吃到食物后会变大。本篇博客将会实现贪吃蛇小游戏的功能。 1.实现效果 2.整体布局 /*** 游戏区域样式*/ const gameBoardStyle {gridTemplateColumns: repeat(${width}, 1fr),gridTemplateRows: re…

新买电脑配置不低却卡顿?

目录 前言: 电脑卡顿的原因 Windows 10必做的系统优化 禁用 IP Helper 关闭系统通知 机械硬盘开启优化驱动器功能 开启存储感知 前言: 新买的电脑配置不低,但却卡顿甚至程序不反应,这是怎么回事儿? 其实并不…

《Linux C编程实战》笔记:Linux信号介绍

信号是一种软件中断,它提供了处理一种异步事件的方法,也是进程惟一的异步通信方式。在Linux系统中,根据POSIX标准扩展的信号机制,不仅可以用来通知某进程发生了什么事,还可以给进程传递数据。 信号的来源 信号的来源…

信号处理专题设计-基于边缘检测的数字图像分类识别

目录 一、实验目的 二、实验要求 三、实验原理 1.卷积神经网络(CNN)模型 2.边缘检测 3.形态学操作 4.鲁棒性 四、实验过程 1.数据预处理 2. 网络的构建 3.模型的训练 4.边缘检测和形态学操作相关代码 5.模型训练结果 6.关键信息的保存 五、实验测试与评估…

竞赛保研 机器视觉人体跌倒检测系统 - opencv python

0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 机器视觉人体跌倒检测系统 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数&…

【蓝桥杯日记】复盘第一篇——顺序结构

🚀前言 本期是一篇关于顺序结构的题目的复盘,通过复盘基础知识,进而把基础知识学习牢固!通过例题而进行复习基础知识。 🚩目录 前言 1.字符三角形 分析: 知识点: 代码如下 2. 字母转换 题目分析: 知…

C语言·预处理详解

1. 预定义符号 C语言设置了一些预定义符号,可以直接使用,预定义符号也是在预处理期间处理的 __FILE__ 进行编译的源文件 __LINE__ 文件当前的行号 __DATE__ 文件被编译的日期 __TIME__ 文件被编译的时间 __STDC__ 如果编译器遵循ANSI C,…

SpringCloud Aliba-Sentinel【下篇】-从入门到学废【6】

🤩java小课堂🤩 🌭🌭🌭 和 equals 的区别是什么?🥹🥹🥹 对于基本类型, 比较的是值;对于引用类型,比较的是地址;equals不能…