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

qiankun微前端：qiankun+vite+vue3+ts（未完待续..）

news 文章来源：https://blog.csdn.net/m0_56885551/article/details/140041219 2024/7/6 18:59:38

什么是微前端

目前现有的微前端

好处

使用

子应用的页面在主应用里显示

什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

我的理解就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。

目前现有的微前端方案

iframe

通过iframe实现的话就是每个子应用通过iframe标签来嵌入到父应用中，iframe具有天然的隔离属性，各个子应用之间以及子应用和父应用之间都可以做到互不影响。

但是iframe也有很多缺点：

url不同步，如果刷新页面，iframe中的页面的路由会丢失。
全局上下文完全隔离，内存变量不共享。
UI不同步，比如iframe中的页面如果有带遮罩层的弹窗组件，则遮罩就不能覆盖整个浏览器，只能在iframe中生效。
慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程

single-spa

single-spa是最早的微前端框架，可以兼容很多技术栈。

single-spa首先在基座中注册所有子应用的路由，当URL改变时就会去进行匹配，匹配到哪个子应用就会去加载对应的那个子应用。

相对于iframe的实现方案，single-spa中基座和各个子应用之间共享着一个全局上下文，并且不存在URL不同步和UI不同步的情况，但是single-spa也有以下的缺点：

没有实现js隔离和css隔离
需要修改大量的配置，包括基座和子应用的，不能开箱即用

qiankun

基于single-spa二次开发，封装了开箱即用的api

资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

实现了样式隔离

基于qiankun的微前端实战

准备两个空项目

qiankun-base 主应用
qiankun-child vue 子应用

创建基座项目qiankun-base和qiankun-child-vue

创建一个vue3+vite+tsx项目详情见创建一个vue3+vite+ts项目

vue子应用 qiankun-child-vue

修改.env

VITE_APP_NAME = qiankun-child-vue

修改根节点挂载id

index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>qiankun-child-vue</title></head><body><div id="qiankun-child-vue"></div><script type="module" src="/src/main.ts"></script></body>
</html>main.tsimport { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import antv from "ant-design-vue";
const app = createApp(App);
app.use(router).use(antv).mount("#qiankun-child-vue");

配置子应用菜单

/views/index.tsx

import { defineComponent, h, reactive, ref } from "vue";
import { Menu, SubMenu, MenuItem, ItemType } from "ant-design-vue";
import "./index.css";
import { RouterView, useRouter } from "vue-router";
// 展平数组
const flattenMenu = (list) => {const res: any = [];if (!list) return;list.forEach((item) => {res.push(item);if (item.children) res.push(...flattenMenu(item.children));});return res;
};
const getMenuKey = (menuList, key) => {const allList = flattenMenu(JSON.parse(JSON.stringify(menuList)));const cur = allList.find((item) => item.key == key);return cur ? cur : {};
};export default defineComponent({setup() {const router = useRouter();const menuList = ref([{key: "1",label: "子应用菜单",url: "/qiankun-child-vue",children: [{ label: "设置", key: "2", url: "/qiankun-child-vue/setting" },],},]);// 找到点击的菜单对象const handleMenuSelect = (params) => {const menu = getMenuKey(menuList.value, params.key);router.push(menu.url);};return () => (<a-layout class="layout"><a-layout-sider><MenuonSelect={handleMenuSelect}style="height:100%"mode="inline"items={menuList.value}></Menu></a-layout-sider><a-layout-content><RouterView></RouterView></a-layout-content></a-layout>);},
});

新建/views/setting.tsx

import { defineComponent, ref } from "vue";export default defineComponent({setup() {return () => <div>设置</div>;},
});

配置路由 /router/index.ts

import { createRouter, createWebHashHistory } from "vue-router";
import Index from "@/views/index";
const router = createRouter({history: createWebHashHistory(),routes: [{path: "/",component: Index,children: [{path: "/qiankun-child-vue/setting",name: "setting",component: () => import("@/views/setting"),},],},],
});export default router;

基本的页面就搭建好了

基座 qiankun-base

同样在/views/index.tsx 写好基本的菜单

配置路由 /router/index.ts

import { createRouter, createWebHashHistory } from "vue-router";
import Index from "@/views";const router = createRouter({history: createWebHashHistory(),routes: [{path: "/:afterUser(.*)", // 正则匹配url 跳转不会报错component: Index,},],
});export default router;

配置vite.config.js 根路径base

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";
export const pathResolve = (dir: string) => resolve(process.cwd(), ".", dir);export default defineConfig(({ mode }) => {return {base: "/qiankun-base/",plugins: [vue(), vueJsx()],server: {host: "0.0.0.0",port: 1000,},resolve: {alias: {"@": pathResolve("src"),},},};
});

修改dom根节点和主应用一样改为子应用的项目名称改这个是为了主应用和子应用的挂载在根节点的id不会重复，如果一样的话会导致主应用页面渲染不出来子应用（这里不在展示细节）

qiankun配置步骤（上面还没开始）

主应用qiankun-base中下载qiankun

yarn add qiankun

在main.ts中开启

注意:在挂载之前开启

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { start } from "qiankun";
import router from "./router";
import antv from "ant-design-vue";
start({sandbox: {// strictStyleIsolation: true, // 开启严格的样式隔离模式experimentalStyleIsolation: true, // 开启后所有样式都会加上一个类名 .app-main {} ===>  div[data-qiankun-react16] .app-main {}},singular: false, // 单一时间只渲染一个微应用，默认为true
});
createApp(App).use(router).use(antv).mount("#qiankun-base");

vue子应用 qiankun-child-vue

下载vite-plugin-qiankun插件

yarn add vite-plugin-qiankun

配置vite.config.js 使用vite-plugin-qiankun

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import qiankun from "vite-plugin-qiankun";
import { resolve } from "path";export const pathResolve = (dir: string) => resolve(process.cwd(), ".", dir);export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd());return {base: mode == "production" ? `/${env.VITE_APP_NAME}/` : "",plugins: [vue(),vueJsx(),qiankun(env.VITE_APP_NAME, { useDevMode: true }),],server: {host: "0.0.0.0",port: 2000,},resolve: {alias: {"@": pathResolve("src"),},},};
});

修改main.ts 判断是在主应用还是子应用中

import "./style.css";
import App from "./App.vue";
import router from "./router";
import antv from "ant-design-vue";
import { render } from "@/hooks/microApp";render(App, "#qiankun-child-vue", (app, props) => {app.use(router).use(antv);
});

/hooks/microApp.ts

import renderWithQiankun, {QiankunProps,qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";
import { App, Component, createApp } from "vue";const isMicroApp = qiankunWindow.__POWERED_BY_QIANKUN__;
export const render = (AppRoot: Component,domId,configApp: (app: App, props?: QiankunProps) => any
) => {let app: App;const _render = (props: QiankunProps = {}) => {const { container } = props;const root: string | Element = container? container.querySelector(domId)!: domId; // 避免 id 重复导致微应用挂载失败app = createApp(AppRoot);// 回调配置app的函数 让调用的地方 可以使用appconfigApp(app, props);app.mount(root);};const initQiankun = () => {renderWithQiankun({bootstrap() {// console.log("微应用：bootstrap");},mount(props) {// 获取主应用传入数据// console.log("微应用：mount", props);_render(props);},unmount(props) {// console.log("微应用：unmount", props);app.unmount();},update(props) {// console.log("微应用：update", props);},});};isMicroApp ? initQiankun() : _render();
};

在views/index.tsx 增加判断逻辑是在主应用中还是在子应用中

import { qiankunWindow } from "vite-plugin-qiankun/dist/helper";return () => {
// 判断如果在主应用中if (qiankunWindow.__POWERED_BY_QIANKUN__) {return <router-view></router-view>;}
// 在子应用中return (<a-layout class="layout"><a-layout-sider><MenuonSelect={handleMenuSelect}style="height:100%"mode="inline"items={menuList.value}></Menu></a-layout-sider><a-layout-content><RouterView></RouterView></a-layout-content></a-layout>);};

易错点

1.主应用和子应用挂载在根节点的domid是同一个

2.主应用配置路径和子应用路径不一致

qiankun微前端：qiankun+vite+vue3+ts（未完待续..）

目录什么是微前端目前现有的微前端好处使用子应用的页面在主应用里显示什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。我的理解就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由…...

编程日记 2024/6/30 12:53:58

001：开源交易系统开发实战开篇

本专栏采用融入【主力思维】的方法学，包含数据抓取、特征模型开发、历史验证回归测试、每日动态风险评估管理等技术，较大的增强股票投资胜率，让IT开发者拥有一套属于自己思路的专用交易软件。先简要介绍系统成功和项目，后续持续…...

编程日记 2024/6/30 12:51:56

Pytorch实战（一）：LeNet神经网络

文章目录一、模型实现1.1数据集的下载1.2加载数据集1.3模型训练1.4模型预测 LeNet神经网络是第一个卷积神经网络（CNN），首次采用了卷积层、池化层这两个全新的神经网络组件，接收灰度图像，并输出其中包含的手写数字&…...

编程日记 2024/6/30 12:50:55

RabbitMq的基础及springAmqp的使用

RabbitMq 官网:RabbitMQ: One broker to queue them all | RabbitMQ 什么是MQ？ mq就是消息队列，消息队列遵循这先入先出原则。一般用来解决应用解耦，异步消息，流量削峰等问题，实现高性能，高可用&#xf…...

编程日记 2024/6/30 12:48:52

uniapp uniCloud云开发

uniCloud概述 uniCloud 是 DCloud 联合阿里云、腾讯云、支付宝云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。 uniCloud 的 web控制台地址：https://unicloud.dcloud.net.cn 文档：https://doc.dcloud.net.cn/uniCloud/ un…...

编程日记 2024/6/30 12:46:50

智能扫地机，让生活电器更加便民-NV040D扫地机语音方案

一、语音扫地机开发背景： 随着人工智能和物联网技术的飞速发展，智能家居设备已成为现代家庭不可或缺的一部分。其中，扫地机作为家庭清洁的重要工具，更是得到了广泛的关注和应用。然而，传统的扫地机在功能和使用上仍存…...

编程日记 2024/6/30 12:45:48

【后端面试题】【中间件】【NoSQL】ElasticSearch索引机制和高性能的面试思路

Elasticsearch的索引机制 Elasticsearch使用的是倒排索引，所谓的倒排索引是相对于正排索引而言的。在一般的文件系统中，索引是文档映射到关键字，而倒排索引则相反，是从关键字映射到文档。如果没有倒排索引的话，想找…...

编程日记 2024/6/30 12:44:47

【漏洞复现】时空智友ERP updater.uploadStudioFile接口处存在任意文件上传

0x01 产品简介时空智友ERP是一款基于云计算和大数据技术的企业资源计划管理系统。该系统旨在帮助企业实现数字化转型，提高运营效率、降低成本、增强决策能力和竞争力，时空智友ERP系统涵盖了企业的各个业务领域，包括财务管理、供应链管理、生…...

编程日记 2024/6/30 12:43:46

[leetcode hot 150]第五百三十题，二叉搜索树的最小绝对差

题目： 给你一个二叉搜索树的根节点 root ，返回树中任意两不同节点值之间的最小差值。差值是一个正数，其数值等于两值之差的绝对值。解析： minDiffInBST 方法是主要方法。创建一个 ArrayList 来存储树的节点值。inorderTrave…...

编程日记 2024/6/30 12:42:44

【Docker】可视化平台Portainer

文章目录 Portainer的特点Portainer的安装步骤注意事项 Docker的可视化工具Portainer是一个轻量级的容器管理平台，它为用户提供了一个直观的图形界面来管理Docker环境。以下是关于Portainer的详细介绍和安装步骤： Portainer的特点轻量级：P…...

编程日记 2024/6/30 12:41:43

MySQL高级-MVCC-原理分析（RR级别）

文章目录 1、RR隔离级别下，仅在事务中第一次执行快照读时生成ReadView，后续复用该ReadView2、总结 1、RR隔离级别下，仅在事务中第一次执行快照读时生成ReadView，后续复用该ReadView 而RR 是可重复读，在一个事务中&…...

编程日记 2024/6/30 12:39:41

压力测试Monkey命令参数和报告分析

目录常用参数 -p <测试的包名列表> -v 显示日志详细程度 -s 伪随机数生成器的种子值 --throttle < 毫秒> --ignore-crashes 忽略崩溃 --ignore-timeouts 忽略超时 --monitor-native-crashes 监视本地崩溃代码 --ignore-security-exceptions 忽略安全异常 …...

编程日记 2024/6/30 12:38:40

C# Benchmark

创建控制台项目（或修改现有项目的Main方法代码），Nget导入Benchmark0.13.12，创建测试类： public class StringBenchMark{int[] numbers;public StringBenchMark() {numbers Enumerable.Range(1, 20000).ToArray();}[Be…...

编程日记 2024/6/30 12:36:37

算法金 | 协方差、方差、标准差、协方差矩阵

大侠幸会，在下全网同名「算法金」 0 基础转 AI 上岸，多个算法赛 Top 「日更万日，让更多人享受智能乐趣」抱个拳，送个礼 1. 方差方差是统计学中用来度量一组数据分散程度的重要指标。它反映了数据点与其均值之间的偏离程度。在…...

编程日记 2024/6/30 12:35:36

FastAPI教程II

本文参考FastAPI教程https://fastapi.tiangolo.com/zh/tutorial Cookie参数定义Cookie参数与定义Query和Path参数一样。具体步骤如下： 导入Cookie：from fastapi import Cookie声明Cookie参数，声明Cookie参数的方式与声明Query和Path参数…...

编程日记 2024/6/30 12:33:34

Facebook的投流技巧有哪些？

相信大家都知道Facebook拥有着巨大的用户群体和高转化率，在国外社交推广中的影响不言而喻。但随着Facebook广告的竞争越来越激烈，在Facebook广告上获得高投资回报率也变得越来越困难。IPIDEA代理IP今天就教大家如何在Facebook上投放广告的技巧&#xff0…...

编程日记 2024/6/30 12:32:33

Spring Boot 中的微服务监控与管理

微服务的概述微服务架构的优点和挑战优点：灵活性和可扩展性：微服务架构允许每个服务单独部署和扩展，这使得系统可以更灵活地适应不同的业务需求和负载变化。使团队更加聚焦：每个微服务都有明确的职责，这使得开发团队可以更加聚焦，专注于开发他们的服务。技术和框…...

编程日记 2024/6/30 12:30:31

【计算机网络】期末复习（1）模拟卷

一、选择题 1. 电路交换的三个阶段是建立连接、()和释放连接 A. Hello包探测 B. 通信 C. 二次握手 D. 总线连接 2. 一下哪个协议不属于C/S模式() A. SNMP…...

编程日记 2024/6/30 12:27:26

【软件工程中的演化模型及其优缺点】

文章目录 1. 增量模型什么是增量模型？优点缺点 2. 增量-迭代模型什么是增量-迭代模型？优点缺点 3. 螺旋模型什么是螺旋模型？优点缺点 1. 增量模型什么是增量模型？ 增量模型是一种逐步增加功能和特性的开发方法。项目被划分为多…...

编程日记 2024/6/30 12:25:24

Oracle 数据库详解：概念、结构、使用场景与常用命令

1. 引言 Oracle 数据库作为全球领先的关系型数据库管理系统（RDBMS），在企业级应用中占据了重要地位。本文将详细介绍Oracle数据库的核心概念、架构、常用操作及其广泛的使用场景，旨在为读者提供全面而深入的理解。 2. Oracle 数据…...

编程日记 2024/6/30 12:24:22

FreeRTOS的裁剪与移植

文章目录 1 FreeRTOS裁剪与移植1.1 FreeRTOS基础1.1.1 RTOS与GPOS1.1.2 堆与栈1.1.3 FreeRTOS核心文件1.1.4 FreeRTOS语法 1.2 FreeRTOS移植和裁剪 1 FreeRTOS裁剪与移植 1.1 FreeRTOS基础 1.1.1 RTOS与GPOS 实时操作系统（RTOS）：是指当…...

编程日记 2024/6/30 12:19:17

能求一个数字的字符数量的程序

目录开头程序程序的流程图程序输入与打印的效果例1输入输出例2输入输出关于这个程序的一些实用内容结尾开头大家好，我叫这是我58，今天，我们先来看一下下面的程序。程序 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h>…...

编程日记 2024/6/30 12:18:16

PTA-线性表实验（JAVA）

题目1：Josephus环的问题及算法【实验内容】编程实现如下功能： 题意说明：古代某法官要判决n个犯人的死刑，他有一条荒唐的法律，将犯人站成一个圆圈，从第start个犯人开始数起，每数到第distance的…...

编程日记 2024/6/30 12:17:15

LeetCode：494. 目标和

题目给你一个非负整数数组 nums 和一个整数 target 。向数组中的每个整数前添加 ‘’ 或 ‘-’ ，然后串联起所有整数，可以构造一个表达式 ： 例如，nums [2, 1] ，可以在 2 之前添加 ‘’ ，在 1 之前添…...

编程日记 2024/6/30 12:16:14

HarmonyOS Next开发学习手册——选项卡 (Tabs)

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。 Tabs 组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息…...

编程日记 2024/6/30 12:15:12

cpp class Solution { public:string removeTrailingZeros(string num) {int flag 0;string s num;int size num.length();for (int i num.length() - 1; i > 0; i--) {if (num[i] ! 0)break;if (num[i] 0) {size--;}}s.resize(size);return s;} };...

编程日记 2024/6/30 12:11:09

PPT录屏怎么录？PPT录屏，3种方法简单操作

在数字化时代，PPT已经成为我们日常工作、学习和生活中不可或缺的一部分。无论是商务报告、教学课件还是产品展示，PPT都能帮助我们更加生动、直观地传递信息。然而，有时候我们会面临PPT录屏怎么录的问题。这时，一个好的PPT录屏功能…...

编程日记 2024/6/30 12:10:08

HarmonyOS开发：应用完整性校验

简介为了确保应用的完整性和来源可靠，OpenHarmony需要对应用进行签名和验签。应用开发阶段： 开发者完成开发并生成安装包后，需要开发者对安装包进行签名，以证明安装包发布到设备的过程中没有被篡改。OpenHarmony的应用完整性校…...

编程日记 2024/6/30 12:09:07

【MySQL基础篇】SQL指令：DQL及DCL

1、DQL DQL - 介绍 DQL英文全称是Data Query Language(数据查询语言)，数据查询语言，用来查询数据表中的记录。（在MySQL中应用是最为广泛的） 查询关键字：SELECT DQL - 语法 SELECT 字段列表 FROM 表名列表 WHER…...

编程日记 2024/6/30 12:08:06

[C++][设计模式][适配器模式]详细讲解

目录 1.动机2.模式定义3.要点总结4.代码感受 1.动机在软件系统中，由于应用环境的变化，常常需要将”一些现存的对象“放在新的环境中应用，但是新环境要求的接口是这些现存对象所不满足如何应对这些”迁移的变化“？如何既能利用现…...

编程日记 2024/6/30 12:07:05

8080时序驱动TFT显示屏驱动IC GC9307

8080时序总共有控制线 CS片选线 DC(命令数据控制线) RD读控制线 WR写控制线和N条数据线。控制底层代码如下；写读代码，读的代码反过来就行 inline void TFT8080WriteDat(unsigned char dat) {CS_L;//开始片选DC_H;//写数据 // RD_H;//禁止读WR_H;//禁止写WR_L;//写入…...

编程日记 2024/6/30 12:04:01

K8S 集群节点缩容

环境说明： 主机名IP地址CPU/内存角色K8S版本Docker版本k8s231192.168.99.2312C4Gmaster1.23.1720.10.24k8s232192.168.99.2322C4Gwoker1.23.1720.10.24k8s233（需下线）192.168.99.2332C4Gwoker1.23.1720.10.24 1. K8S 集群节点缩容当集群中有…...

编程日记 2024/6/30 12:01:59

Web-HTML-事件

1 需求 2 语法 3 示例 4 参考资料 HTML 事件 | 菜鸟教程...

编程日记 2024/6/30 12:00:58

Installed Build Tools revision xxx is corrupted. Remove and install again 解决

1.在buildTools文件下找到对应的sdk版本，首先将版本对应目录下的d8.bat改名为dx.bat。 2.在lib文件下将d8.jar改名为dx.jar。 3.重新编译工程即可...

编程日记 2024/6/30 11:58:56

AI 与 Python 实战干货：基于深度学习的图像识别

《AI 与 Python 实战干货：基于深度学习的图像识别》今天咱不啰嗦，直接上干货！ 在 AI 领域，特别是图像识别方面，Python 简直是一把利器。咱就以手写数字识别为例，来看看怎么用 Python 实现一个深度学习模…...

编程日记 2024/6/30 11:57:55

万字长文详解数据结构：树 | 第6章 | Java版大话数据结构 | 二叉树 | 哈夫曼树 | 二叉树遍历 | 构造二叉树 | LeetCode练习

📌本篇分享的大话数据结构中🎄树🎄这一章的知识点，在此基础上，增加了练习题帮助大家理解一些重要的概念✅；同时，由于原文使用的C语言代码，不利于学习Java语言的同学实践，…...

编程日记 2024/6/30 11:55:54

NPOI入门指南：轻松操作Excel文件的.NET库

目录引言一、NPOI概述二、NPOI的主要用途三、安装NPOI库四、NPOI基本使用六、性能优化和内存管理七、常见问题与解决方案八、结论附录引言 Excel文件作为数据处理的重要工具，广泛应用于各种场景。然而，在没有安装Microsoft Office的…...

编程日记 2024/6/30 11:54:52

【高性能服务器】服务器概述

🔥博客主页： 我要成为C领域大神🎥系列专栏：【C核心编程】【计算机网络】【Linux编程】【操作系统】 ❤️感谢大家点赞👍收藏⭐评论✍️ 本博客致力于知识分享，与更多的人进行学习交流服务器概述服…...

编程日记 2024/6/30 11:51:50

003 SSM框架整合

文章目录整合web.xmlapplicationContext-dao.xmlapplicationContext-service.xmlspringmvc.xmldb.propertieslog4j.propertiespom.xml 测试sqlItemController.javaItemMapper.javaItem.javaItemExample.javaItemService.javaItemServiceImpl.javaItemMapper.xml 整合将工程的…...

编程日记 2024/6/30 11:49:47

web刷题记录（7）

[HDCTF 2023]SearchMaster 打开环境，首先的提示信息就是告诉我们，可以用post传参的方式来传入参数data 首先考虑的还是rce，但是这里发现，不管输入那种命令，它都会直接显示在中间的那一小行里面，而实际的命令…...

编程日记 2024/6/30 11:48:46

【单片机毕业设计选题24037】-基于STM32的电力系统电力参数无线监控系统

系统功能: 系统上电后，OLED显示“欢迎使用电力监控系统请稍后”，两秒后显示“Waiting..”等待ESP8266初始化完成， ESP8266初始化成功后进入正常页面显示， 第一行显示电压值（单位V） 第二行显示电流值&am…...

编程日记 2024/6/30 11:44:43

Python使用彩虹表来尝试对MD5哈希进行破解

MD5是一种散列算法，它是不可逆的，无法直接解密。它的主要作用是将输入数据进行散列，生成一个固定长度的唯一哈希值。然而，可以使用预先计算好的MD5哈希值的彩虹表（Rainbow Table）来尝试对MD5进行破解。彩…...

编程日记 2024/6/30 11:43:42

数据恢复篇：如何在数据丢失后恢复照片

数据丢失的情况并不少见。如果您曾经遇到过图像丢失的情况，您可能想过照片恢复工具是如何工作的？可能会丢失多少数据图像？即使是断电也可能导致照片和媒体文件丢失。话虽如此，如果你认为删除的照片无法恢复，那你就错…...

编程日记 2024/6/30 11:42:41

c++ 引用第三方库

文章目录背景编写cmake代码里引用测试背景遇到一个c项目，想跑一些示例。了解下如何直接引用第三方库。编写cmake 项目结构 myprojectincludexx.hmain.cppCMakeLists.txt CMakeLists.txt cmake_minimum_required(VERSION 3.28) project(velox_demo)set(CM…...

编程日记 2024/6/30 11:40:39

[数据集][目标检测]猪只状态吃喝睡站检测数据集VOC+YOLO格式530张4类别

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：530 标注数量(xml文件个数)：530 标注数量(txt文件个数)：530 标注类别…...

编程日记 2024/6/30 11:39:38

Redis中设置验证码

限制一分钟内最多发送5次，且每次有效时间是5分钟！ String 发送验证码(phoneNumber) {key "shortMsg:limit:" phoneNumber;// 设置过期时间为 1 分钟（60 秒）// 使⽤ NX，只在不存在 key 时才能设置成功bool…...

编程日记 2024/6/30 11:38:37

使用hadoop进行数据分析

Hadoop是一个开源框架，它允许分布式处理大数据集群上的大量数据。Hadoop由两个主要部分组成：HDFS（Hadoop分布式文件系统）和MapReduce。以下是使用Hadoop进行数据分析的基本步骤： 数据准备： 将数据存储在HDF…...

编程日记 2024/6/30 11:37:36

架构师篇-7、企业安全架构设计及实践

摘要： 认识企业安全架构企业安全案例分析及实践内容： 为什么做企业安全架构怎么做好安全架构设计案例实践分析&随堂练为什么要做企业安全架构安全是麻烦制造者？ 整天提安全需求增加开发工作增加运维要求增加不确定性延后业务上线…...

编程日记 2024/6/30 11:36:35

递归算法~快速排序、归并排序

递归排序是一种基于分治法的排序算法，最典型的例子就是快速排序和归并排序。这两种算法都利用递归将问题分解成更小的子问题，然后将子问题的解合并以得到原始问题的解。 1、快速排序（Quick Sort） 快速排序的基本思想是选择一个基…...

编程日记 2024/6/30 11:33:32

DarkGPT：基于GPT-4-200k设计的人工智能OSINT助手

关于DarkGPT DarkGPT是一款功能强大的人工智能安全助手，该工具基于GPT-4-200k设计并实现其功能，可以帮助广大研究人员针对泄露数据库进行安全分析和数据查询相关的OSINT操作。工具要求 openai1.13.3 requests python-dotenv pydantic1.10.12 工具安装 …...

编程日记 2024/6/30 11:32:31

nuxt3搭建和部署

Nuxt 3是一个基于Vue 3的静态网站生成框架，它提供了高性能、SEO友好的Web应用程序开发体验。Nuxt 3重写了许多核心代码，增加了新功能，如基于Vite的构建系统、改进的路由系统、数据获取和插件系统。它支持TypeScript和多种渲染模式&#xff08…...

编程日记 2024/7/6 18:43:44

flutter：监听路由的变化

问题当从路由B页面返回路由A页面后，A页面需要进行数据刷新。因此需要监听路由变化解决使用RouteObserver进行录音监听创建全局变量，不在任何类中 final RouteObserver<PageRoute> routeObserver RouteObserver<PageRoute>();在mai…...

编程日记 2024/7/6 10:16:18

数据结构历年考研真题对应知识点（串的模式匹配）

目录 4.2串的模式匹配 4.2.2串的模式匹配算法——KMP算法【KMP 匹配过程中指针变化的分析(2015)】【KMP 匹配过程中比较次数的分析(2019)】 4.2串的模式匹配 4.2.2串的模式匹配算法——KMP算法【KMP 匹配过程中指针变化的分析(2015)】最终得到子串指针变化公式 jnex…...

编程日记 2024/7/6 5:10:24

AI绘画工具：艺术与技术的交响曲

AI绘画工具：艺术与技术的交响曲引言在数字化浪潮的推动下，艺术创作正经历着前所未有的变革。AI绘画工具，作为艺术与科技结合的产物，正以其独特的方式重塑着艺术的边界。一、AI绘画工具的发展历程 AI绘画工具从早期的简单图…...

编程日记 2024/7/5 14:34:34

【Android】【WIFI】检查 SDIO 设备的状态

检查 SDIO 设备的状态要检查 Android 设备上 SDIO 设备的状态，可以使用 ADB 命令来获取系统信息。以下是一些示例命令： 列出 SDIO 设备 adb shell cat /proc/devices | grep sdio检查 SDIO 模块是否加载 adb shell lsmod | grep sdio获取 SDIO 相关的…...

编程日记 2024/7/5 10:25:41

objdump

objdump是一个用于在Linux系统中查看和解析对象文件（如可执行文件、目标文件和共享库）的命令行工具。它可以展示文件的多种信息，包括汇编代码、符号表、调试信息等。objdump的常用选项包括： -d 或 --disassemble：反汇编…...

编程日记 2024/7/5 6:57:27

全球金融观察｜“宽松交易”卷土重来，10年期美债收益率跌破4.4%关口

从种种迹象来看，美国经济似乎逐渐失去动能。在上周一季度GDP被下修后，美国再度公布了疲软的经济数据。当地时间6月3日，美国供应管理协会公布的数据显示，5月制造业PMI从4月的49.2降至48.7，连续二个月放缓，不及预期的49.6，新商品订单创下近两年来最大降幅，制造业物价支付…...

编程日记 2024/7/6 11:24:21

flutter 实现旋转星球

先看效果 planet_widget.dart import dart:math; import package:flutter/material.dart; import package:vector_math/vector_math_64.dart show Vector3; import package:flutter/gestures.dart; import package:flutter/physics.dart;class PlanetWidget extends StatefulW…...

编程日记 2024/7/5 14:10:19

什么是微前端

目前现有的微前端方案

iframe

single-spa

qiankun

基于qiankun的微前端实战

创建基座项目qiankun-base和qiankun-child-vue

vue子应用 qiankun-child-vue

修改.env

修改根节点挂载id

基座 qiankun-base

配置路由 /router/index.ts

配置vite.config.js 根路径base

qiankun配置步骤（上面还没开始）

主应用qiankun-base中下载qiankun

vue子应用 qiankun-child-vue

下载vite-plugin-qiankun插件

配置vite.config.js 使用vite-plugin-qiankun

修改main.ts 判断是在主应用还是子应用中

在views/index.tsx 增加判断逻辑 是在主应用中还是在子应用中

易错点

相关文章：

在views/index.tsx 增加判断逻辑是在主应用中还是在子应用中