当前位置： 首页 > news >正文

微前端学习（上）

news 2026/2/7 16:51:43

一、课程目标

  1. 微前端概念；
  2. 现有方案利弊；
  3. Single-spa实现原理；
  4. 掌握使用qiankun搭建微应用；

二、课程大纲

  1. 微前端背景
  2. 现在web应用面临的问题
  3. 微前端的价值
  4. 微前端应用具备哪些能力
  5. 微前端解决方案有哪些
  6. 基于qiankun的实践

1、微前端背景

2014年: Martin Fowler和James Lewis共同提出了 微服务 的概念。微服务是一种开发软件的架构和组织方法，其中软件由通过明确定义的API进行通信的 小型独立服务 组成。
微服务的主要思路是:

  • 将应用 分解 为小的、互相连接的微服务，一个微服务完成某个 特定功能。

  • 每个微服务都有自己的业务逻辑和适配器，不同的微服务，可以使用 不同的技术 去实现。

  • 使用 统一的网关 进行调用。
    由上可见微服务的主要思路是化繁为简，通过更加细致的划分，使得服务内部更加内聚，服务之间耦合性降低，有利于项目的团队开发和后期维护。把微服务的概念应用到前端，前端微服务/微前端服务 就诞生了，简称其为微前端。

    微前端的概念是由Thoughtworks在2016年提出的。
    2018年：第一个微前端工具 single-spa 在 github 开源。
    2019年：基于 single-spa 的 qiankun 问世。
    2020年: Module Federation(webpack5) 把项目中模块分

相关文章：

微前端学习（上）

一、课程目标 微前端概念；现有方案利弊；Single-spa实现原理；掌握使用qiankun搭建微应用；二、课程大纲 微前端背景现在web应用面临的问题微前端的价值微前端应用具备哪些能力微前端解决方案有哪些基于qiankun的实践1、微前端背景 2014年: Martin Fowler和James Lewis共同提…...

编程日记 2023/8/24 21:48:30

【Axure视频教程】标签版多选下拉列表

今天教大家在Axure里如何制作标签版多选下拉列表的原型模板，该模板用中继器制作，制作完成后使用也方便，只需要在中继器表格里维护选项信息，即可自动生成交互效果，包括显示隐藏选项列表，选中和取消选中选项&…...

编程日记 2023/8/24 21:47:28

Sharepoint2013必备软件安装路径

SP2013是最后一个有foundation版本的，后续各个版本都是server版，要买lisence。免费的可以用，但安装组件有些链接已经失效了，自己手动下载的路径备份一下，已经下载好的完整版，在文章最后可以直接下载&#x…...

编程日记 2023/8/24 21:46:26

C++day4（关系运算符的重载）

关系运算符重载的作用&#xff1a;可以让两个自定义类型对象进行对比操作。 代码实现关系运算符的重载&#xff1a; #include <iostream>using namespace std;class Person {// friend const Person operator(const Person &L, const Person &R); private:int …...

编程日记 2023/8/24 21:45:25

农业水价综合改革系统主要组成

一、系统概述 农业水价改革灌区信息化系统主要由感知采集层、网络传输层、系统应用层等部分组成。通过无线技术、感知层技术与新型应用的有效结合&#xff0c;可以用于各种业务的传送&#xff0c;充分满足灌区监测站间的物与物互联&#xff0c;农业生产的自动化和信息化相结合。…...

编程日记 2023/8/24 21:44:24

使用批处理文件(.bat)启动多个CMD窗口并执行命令

由于每次启动本机的mongodb和kafka&#xff0c;都需要进入相关目录进行启动&#xff0c;操作相对繁琐&#xff0c;于是想起了批处理来帮忙一键启动。 在桌面新建一个txt文件&#xff0c;改后缀名为.bat&#xff0c;并加上下面的代码。 cd /d D:\env-java\mongodb-win32-x86_64…...

编程日记 2023/8/24 21:43:23

开源项目-会议室预约管理系统

哈喽，大家好，今天给大家带来一个开源项目-会议室管理系统。项目基于SpringBoot+VUE开发。 会议室管理系统主要分为 前台会议室预约管理系统 和 会议室后台管理系统 两部分 前台会议室预约管理系统主要有申请会议室，预约进程，查看历史会议三部分 后台管理系统主要有会议室…...

编程日记 2023/8/24 21:42:21

Flask路由注册route的几种方式

前言 Flask路由注册的三种方式&#xff1a; app.routeapp.add_url_rule蓝图 app.route&#xff08;添加变量&#xff09; from flask import Flaskapp Flask(__name__) app.config.from_pyfile(config/base_setting.py) app.route("/") def hello():return "…...

编程日记 2023/8/24 21:41:21

Elasticsearch 查询之Function Score Query

前言 ES 的主查询评分模式分为两种&#xff0c;是信息检索领域的重要算法&#xff1a; TF-IDF 算法 和 BM25 算法。 Elasticsearch 从版本 5.0 开始引入了 BM25 算法作为默认的文档评分&#xff08;relevance scoring&#xff09;算法。在此之前&#xff0c;Elasticsearch 使…...

编程日记 2023/8/24 21:40:19

【3D激光SLAM】LOAM源代码解析--scanRegistration.cpp

系列文章目录 【3D激光SLAM】LOAM源代码解析–scanRegistration.cpp 【3D激光SLAM】LOAM源代码解析–laserOdometry.cpp 【3D激光SLAM】LOAM源代码解析–laserMapping.cpp 【3D激光SLAM】LOAM源代码解析–transformMaintenance.cpp 写在前面 本系列文章将对LOAM源代码进行讲解…...

编程日记 2023/8/24 21:39:18

解锁ChatGLM-6B的潜力：优化大语言模型训练，突破任务困难与答案解析难题

解锁ChatGLM-6B的潜力&#xff1a;优化大语言模型训练&#xff0c;突破任务困难与答案解析难题 LLM&#xff08;Large Language Model&#xff09;通常拥有大量的先验知识&#xff0c;使得其在许多自然语言处理任务上都有着不错的性能。 但&#xff0c;想要直接利用 LLM 完成…...

编程日记 2023/8/24 21:38:16

Apipost：提升API开发效率的利器

在数字化时代&#xff0c;API已经成为企业和开发者实现业务互通的关键工具。然而&#xff0c;API的开发、调试、文档编写以及测试等工作繁琐且复杂。Apipost为这一问题提供了完美的解决方案。 Apipost是一款专为API开发人员设计的协同研发平台&#xff0c;旨在简化API的生命周…...

编程日记 2023/8/24 21:37:15

论文解读：Image-Adaptive YOLO for Object Detection in Adverse Weather Conditions

发布时间&#xff1a;2022.4.4 (2021发布&#xff0c;进过多次修订) 论文地址&#xff1a;https://arxiv.org/pdf/2112.08088.pdf 项目地址&#xff1a;https://github.com/wenyyu/Image-Adaptive-YOLO 虽然基于深度学习的目标检测方法在传统数据集上取得了很好的结果&#xf…...

编程日记 2023/8/24 21:36:13

springboot 基于JAVA的动漫周边商城的设计与实现64n21

动漫周边商城分为二个模块&#xff0c;分别是管理员功能模块和用户功能模块。管理员功能模块包括&#xff1a;文章资讯、文章类型、动漫活动、动漫商品功能&#xff0c;用户功能模块包括&#xff1a;文章资讯、动漫活动、动漫商品、购物车&#xff0c;传统的管理方式对时间、地…...

编程日记 2023/8/24 21:35:12

uniapp - 全平台兼容实现上传图片带进度条功能，用户上传图像到服务器时显示上传进度条效果功能（一键复制源码，开箱即用）

效果图 uniapp小程序/h5网页/app实现上传图片并监听上传进度，显示进度条完整功能示例代码 一键复制，改下样式即可。 全部代码 记得改下样式，或直接...

编程日记 2023/8/24 21:34:11

第 7 章 排序算法(2)(冒泡排序)

7.5冒泡排序 7.5.1基本介绍 冒泡排序&#xff08;Bubble Sorting&#xff09;的基本思想是&#xff1a;通过对待排序序列从前向后&#xff08;从下标较小的元素开始&#xff09;,依次比较相邻元素的值&#xff0c;若发现逆序则交换&#xff0c;使值较大的元素逐渐从前移向后部…...

编程日记 2023/8/24 21:33:09

软件测试技术之可用性测试之WhatsApp Web

Tag&#xff1a;可行性测试、测试流程、结果分析、案例分析 WhatsApp是一款面向智能手机的网络通讯服务&#xff0c;它可以通过网络传送短信、图片、音频和视频。WhatsApp在全球范围内被广泛使用&#xff0c;是最受欢迎的即时聊天软件。 虽然&#xff0c;在电脑上使用WhatsAp…...

编程日记 2023/8/24 21:32:06

制作 Mikrotik CHR AWS AMI 镜像

文章目录 制作 Mikrotik RouterOS CHR AWS AMI 镜像前言前期准备配置 Access Key安装配置 AWS CLI创建 S3 bucket上传 Mikrotik CHR 镜像trust-policy配置role-policy 配置创建 AMI导入镜像查看导入进度导入进度查看注册镜像参考:制作 Mikrotik RouterOS CHR AWS AMI 镜像 前言…...

编程日记 2023/8/24 21:31:05

科技成果鉴定测试有什么意义?专业CMA、CNAS软件测评公司

科技成果鉴定测试是指通过一系列科学的实验和检测手段&#xff0c;对科技成果进行客观评价和鉴定的过程。通过测试&#xff0c;可以对科技成果的技术优劣进行评估&#xff0c;从而为科技创新提供参考和指导。 一、科技成果鉴定测试的意义 1、帮助客户了解科技产品的性能特点和…...

编程日记 2023/8/24 21:30:04

知识储备--基础算法篇-排序算法

1.知识--时间复杂度和空间复杂度 1.2时间复杂度 一个算法所花费的时间与其中语句的执行次数成正比例&#xff0c;算法中的基本操作的执行次数&#xff0c;为算法的时间复杂度。 1.3空间复杂度 空间复杂度不是程序占用了多少bytes的空间&#xff0c;空间复杂度算的是变量的个…...

编程日记 2023/8/24 21:29:03

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/5 15:43:28

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/2/6 15:56:54

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2026/2/4 16:47:57