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

qiankun学习记录

news 来源：原创 2025/7/5 4:20:29

什么是微前端

微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。

如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。

微前端的好处

1.团队自治
2.兼容老项目
3.跨技术栈

现有的微前端方案

1.iframe

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

iframe的缺点：

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

2.single-spa

官网：https://zh-hans.single-spa.js.org/docs/getting-started-overviewsingle-spa是最早的微前端框架，可以兼容很多技术栈。

single-spa的缺点：

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

3.qiankun

qiankun是阿里开源的一个微前端的框架qiankun的优点：
- 基于single-spa封装的，提供了更加开箱即用的API
- 技术栈无关，任意技术栈的应用均可使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
- HTML Entry的方式接入，像使用iframe一样简单
- 实现了single-spa不具备的样式隔离和js隔离
- 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

基座（主应用）：主要负责集成所有的子应用，提供一个入口能够访问你所需要的子应用的展示，尽量不写复杂的业务逻辑
子应用：根据不同业务划分的模块，每个子应用都打包成umd模块的形式供基座（主应用）来加载

基座改造

基座用的是create-react-app脚手架加上antd组件库搭建的项目，也可以选择vue或者其他框架，一般来说，基座只提供加载子应用的容器，尽量不写复杂的业务逻辑。

安装qiankun

// 安装qiankun
npm i qiankun // 或者 yarn add qiankun

修改入口文件

// 在src/index.tsx中增加如下代码
import { start, registerMicroApps} from 'qiankun'
// 1.要加载的子应用列表
const apps = [{name: 'sub-react', // 子应用的名称entry: '//localhost:3001', // 默认会加载这个路径下的html，解析里面的jsactiveRule: '/sub-react',// 匹配的路由container: '#sub-app' // 子应用加载的容器},
] // 2. 注册子应用
registerMicroApps(apps, {beforeLoad: [async app => console.log('before load', app.name)],beforeMount: [async app => console.log('before mount', app.name)],afterMount: [async app => console.log('after mount', app.name)],afterUnmount: [async app => console.log('after unmount', app.name)]
})// 3. 启动微服务
start()

react子应用

使用create-react-app脚手架创建，webpack进行配置，为了不eject所有的webpack配置，我们选择用react-app-rewired工具来改造webpack配置。
2. 修改入口文件

// 在src/index.tsx中增加如下代码
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
import './public-path'let root: any;
// 将render方法用函数包裹，供后续主应用与独立运行调用
function render(props: any) {const { container } = props// 1.拿到root的divconst dom = container ? container.querySelector('#root') : document.getElementById('root')root = createRoot(dom)// 2.把app渲染到root上面// basename对应的是基座里面子应用列表的路由// 因为基座加载子应用的时候是匹配路由的root.render(<BrowserRouter basename='/sub-react'><App/></BrowserRouter>)
}// 判断是否在qiankun环境下，非qiankun环境下独立运行
if(!(window as any).__POWERED_BY_QIANKUN__) {render({})
}// 各个生命周期
// bootstrap 置灰在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用mount钩子，不会再重复触发 bootstrap
export async function bootstrap() {console.log('react app bootstrap');
}// 应用每次进入都会调用mount方法，通常我们在这里触发应用的渲染方法
export async function mount(props: any) {console.log('props==', props);render(props)
} // 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
export async function unmount(props: any) {root.unmount()
}

新增public-path.js

if (window.__POWERED_BY_QIANKUN__) {// 动态设置 webpack publicPath，防止资源加载出错// eslint-disable-next-line no-undef__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

修改webpack配置文件

// 在根目录下新增config-overrides.js文件并新增如下配置
const { name } = require("./package");module.exports = {webpack: (config) => {config.output.library = `${name}-[name]`;// 把项目打包成umd模块，方便qiankun去读取我们暴露出来的生命周期（bootstrap、mount、unmount）config.output.libraryTarget = "umd";config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;return config;}
};

vue子应用

# 创建子应用，选择vue3+vite
npm create vite@latest

改造子应用

安装vite-plugin-qiankun依赖包

npm i vite-plugin-qiankun # yarn add vite-plugin-qiankun

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun';export default defineConfig({base: '/sub-vue', // 和基座中配置的activeRule一致server: {port: 3002, // 端口cors: true, // 允许跨域origin: 'http://localhost:3002'  // 指定允许跨域请求的来源地址},plugins: [vue(),// 加一个qiankun，写子应用的名称，需要开发模式的需要配置useDevModeqiankun('sub-vue', { // 配置qiankun插件// 是否运行在开发模式下useDevMode: true})]
})

修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'let app: any;
// 判断是不是在qiankun环境下
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {createApp(App).use(router).mount('#app');
} else {renderWithQiankun({// 子应用挂载(来回切换的时候)mount (props){ // 挂载的时候app = createApp(App);app.use(router).mount(props.container.querySelector('#app'))},// 只有子应用第一次加载会触发bootstrap () { // 应用刚加载的时候console.log('vue app bootstrap');},// 更新update () { // 更新console.log('vue app update');},// 卸载unmount () { // 卸载console.log('vue app unmount');app?.unmount();}})
}

umi子应用

使用umi4去创建子应用，创建好后只需要简单的配置就可以跑起来

安装插件

npm i @umijs/plugins

配置.umirc.ts

export default {base: '/sub-umi',npmClient: 'npm',plugins: ['@umijs/plugins/dist/qiankun'],qiankun: {slave: {},}
};

// 在入口文件导出qiankun的生命周期
export const qiankun = {async mount(props:any) {console.log(props);},async bootstrap () {console.log('umi app bootstraped');},async afterMount(props: any) {console.log('umi app afterMount', props);},
}

补充

1.样式隔离

qiankun内部实现的是子应用之间的样式隔离，基座和子应用之间的样式么没有进行隔离

应用间的样式隔离原因：子应用之间的样式隔离很简单，加载子应用的样式，卸载的时候把子应用的样式进行卸载，加载下一个子应用的时候加载下一个子应用的样式

 1.样式隔离1.1 每个应用的样式使用固定的格式1.2 通过css-module的方式给每个应用自动添加上前缀修改基座应用公共样式的时候还是会影响子应用的样式，这时候可以把子应用的样式优先级提高一点 （样式隔离）

2.子应用间的跳转

2.1 主应用和微应用都是hash模式，主应用根据hash来判断微应用，则不用考虑这个问题

通过location.hash直接修改hash值
http://localhost:3001/#/react-app/list
修改为
http://localhost:3001/#/vue-app/list

2.2 history模式下应用之间的跳转或者微应用跳主应用页面，直接使用微应用的路由实例是不行的，原因是微应用的路由实例跳转都基于路由的base。

2.2.1 history.pushState()
2.2.2 将主应用的路由实例通过props传给微应用，微应用这个路由实例跳转
// 基座和子应用用的都是一个windows对象，可以在基座中复写并监听history.pushState()方法并做相应的跳转逻辑// 在app.tsx重写pushState
// 重写函数// 重写函数const _wr = function (type: string) {// 拿到windos 的history对象传过来的参数const org = (window as any).history[type]return function() {// 拿到org后对他重新调用下const rv = org.apply(this, arguments);const e: any = new Event(type)// 返回发布一个自定义事件e.arguments = argumentswindow.dispatchEvent(e)return rv}}// 把重写的函数赋值给window上pushStatewindow.history.pushState = _wr('pushState')// 在这个函数中做跳转后的逻辑const bindHistory = () => {const currentPath = window.location.pathname;setSelectedPath(routes.find(item => currentPath.includes(item.key))?.key || '')}// 绑定事件window.addEventListener('pushState', bindHistory)

公共依赖加载

3.1 场景：如果主应用和子应用都使用了相同的库或者包(antd, axios等)，就可以用externals(外部扩展)的方式来引入，减少加载重复报导致资源浪费，就是一个项目使用后另一个项目不必再重复加载。

3.2.1 主应用：将所有公共依赖配置webpack的externals，并且在index.html使用外链引入这些公共依赖
3.2.2 子应用：和主应用一样配置webpack的externals,并且在index.html使用外链引入这些公共依赖，注意，还需要给子应用的公共依赖加上ignore属性(这是自定义的属性， 非标准属性)，
qiankun在解析时如果发现ignore属性就会自动忽略

以axios为例：
基座的配置

// 修改config-overrides.js
const { override, addWebpackExternals } = require('customize-cra')// 这个配置就是通过外链的方式去引入这个包
module.exports = override(addWebpackExternals({axios: "axios"})
)// 在publi目录下的index.html添加外链
<!-- 注意：这里的公共依赖的版本必须和子应用一致 -->
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

子应用的配置

// 在umi-app子应用中
// 修改.umirc.ts配置文件
export default {base: '/sub-umi',npmClient: 'npm',plugins: ['@umijs/plugins/dist/qiankun'],qiankun: {slave: {},},headScripts: [{ // 配置外链地址，和设置忽略，qiankun在解析时如果发现ignore属性就会自动忽略src: 'https://unpkg.com/axios@1.1.2/dist/axios.min.js', ignore: true}]
};

全局状态管理

一般来说，各个子应用是通过业务来划分的，不同业务线应该降低耦合度，尽量去避免通信，但是如果涉及到一些公共的状态或者操作，qiankun也是支持的。

qiankun提供了一个全局的GLobalState来共享数据，基座初始化之后，子应用可以监听到这个数据的变化，也能提交这个数据

// 基座的配置
// 在src/index.tsx中增加如下代码
import {  initGlobalState } from 'qiankun'
// 基座初始化
const state = { count: 1 }
const actions = initGlobalState(state);
// 基座项目监听和修改
actions.onGlobalStateChange((state, prev) => {// state: 变更后的状态； prev 变更前的状态console.log(state, prev);
})
actions.setGlobalState(state)

// 子应用的配置
// 在src/index.tsx中增加如下代码
// 在子应用的mount生命周期监听
export async function mount(props: any) {console.log('props==', props);// 子项目监听和修改// 然后在子应用中拿到这两个函数，然后给他设置一个count:2props.onGlobalStateChange((state,prev) => {// state: 变更后的状态， prev 变更前的状态console.log('子应用state===',state,prev)// 一般是将这个state存储到我们子应用的store,然后在其他组件中去用// 这样就是实现了一个简单基座和子应用之间的通信// 同样在其他子应用中想要用到基座传过来的状态也是这样用的，// 修改的话也是调用这个setGlobalState// 监听变化也是调用onGlobalStateChange})props.setGlobalState({ count: 2 })render(props)
}

qiankun学习记录

什么是微前端微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以…...

编程日记 2025/7/5 4:20:29

【C++ 20进阶（2）：初始化 Initializer

【C 20进阶（2）：初始化 Initializer】原文：https://blog.csdn.net/weixin_44259356/article/details/144377955 引言本篇文章为系列文章将着重介绍C20新特性，一是希望可以和大家交流分享，二是也便于自己…...

编程日记 2025/7/3 8:46:10

vue3学习——事件监听（v-on）

我们可以使用 v-on 指令监听 DOM 事件： <button v-on:click"increment">{{ count }}</button> 因为其经常使用，v-on 也有一个简写语法： <button click"increment">{{ count }}</button> 此处…...

编程日记 2025/7/4 11:53:42

java全栈day13-后端Web实战2

接上述查询部门实现，完成后续要求一、统一响应结果 1.1步骤资料如下对一开始的代码修改如下结果如下 1.2测试指定请求方式结果小结二、前后端联调测试资料如下： (不行，一定要不带空格和不带中文，要不然启动不了试了半天…...

编程日记 2025/7/5 4:11:58

C++/CX，一个智能的 C++/Windows 平台开发库！

以下是一篇关于C/CX的C学习文章： 开篇嘿，大家好呀！我是一行。今天咱们来一起探索一个超棒的C开发库——C/CX，它可是在Windows平台开发中非常智能且强大的工具哦，能让我们的开发变得更加高效便捷。让我们一起开启今天的…...

编程日记 2025/6/29 14:00:32

分布式分布式事务总结

前言相关系列《分布式 & 目录》《分布式 & 分布式事务 & 总结》《分布式 & 分布式事务 & 问题》分布式事务所谓分布式事务是指操作范围笼罩多个不同节点的事务。例如对于订单节点&库存节点而言，一次完整的交易需要同时调动两个节…...

编程日记 2025/7/5 3:53:28

数据结构（3）单链表的模拟实现

上一节我们进行了数据结构中的顺序表的模拟式现，今天我们来实现一下另外一个数据结构：单链表。我们在实现顺序表之后一定会引发一些问题和思考： 1.顺序表在头部和中间插入数据会用到循环，时间复杂O（N） …...

编程日记 2025/7/5 3:27:58

HBU深度学习实验14.5-循环神经网络（1.5）

梯度爆炸实验造成简单循环网络较难建模长程依赖问题的原因有两个：梯度爆炸和梯度消失。一般来讲，循环网络的梯度爆炸问题比较容易解决，一般通过权重衰减或梯度截断可以较好地来避免；对于梯度消失问题，更加有效的方式…...

编程日记 2025/7/1 13:44:36

Redis01

springbootredis 特点 1.高效性 2.支持多种数据结构 String,list,set,hash.zset 3.稳定性：持久化，主从复制（集群） 4.其他特性：支持过期时间，支持事务，消息订阅。安装 1.下载安装包 redis官…...

编程日记 2025/7/4 10:21:24

数据库中decimal、float 和 double区别

在计算机科学中，decimal、float 和 double 是用于表示和处理数值的不同数据类型。 - decimal 是一种精确的十进制浮点数表示，通常用于需要高精度计算的场景，比如财务应用。它能够精确表示小数，并且不会出现浮点数运算误差。 - flo…...

编程日记 2025/7/5 4:05:11

HDR视频技术之五：HDR生产流程

在介绍 HDR 的生产流程之前，我们先介绍下视频制作与传输的一些基本知识。内容类型： 直播内容（ live content） ——所谓的直播内容即没有后处理过程以及创作者意图。分发给用户的信息是实时产生并且实时制作并派发的。常见的应用…...

编程日记 2025/7/5 3:34:37

CTFshow-爆破(Web21-28)

CTFshow-爆破(Web21-28) Web21 抓包选则dic.zip里的字典爆破，记得添加前缀admin: 答案admin:shark63 burp里有一个自定义迭代器，可以设置前几部分，很好用 Web22 题目失效了直接看wp吧 360quake 使用空间搜索引擎—>360quake 搜索语法…...

编程日记 2025/7/3 8:45:06

作业题目： #include <iostream> using namespace std; class Rec {const int length;int width; public:void set_length(int l);void set_width(int w);int get_length();int get_width();void show(); };#include <iostream> using namespace std; c…...

编程日记 2025/7/5 1:34:08

UnityShaderLab-实现溶解效果

实现思路： 使用一张噪声图，与一个Cut值计算（加或减），将计算后的值赋值给Alpha,然后小于0的片段就被丢弃掉了。 ShaderGraph实现： ShaderLab实现： Shader "Dissolve" {Properties{_…...

编程日记 2025/6/30 10:43:01

SQLite 数据库学习

1.install sudo apt update sudo apt install sqlitebrowser这是一个开源的图形用户界面工具，专门用于开发、管理和分析 SQLite 数据库。它支持创建或导入导出表、编辑数据、执行 SQL 查询等功能。 2.python 操作数据库 Python 内置了 sqlite3 模块，使…...

编程日记 2025/7/5 4:11:59

【LeetCode: 463. 岛屿的周长 + bfs】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…...

编程日记 2025/7/2 21:11:39

Bean的注入、单例和多例

目录注入Bean对象属性注入构造注入属性注入专题注入集合/数组级联简单类型赋值 Bean的单例和多例注入Bean对象简单类型使用value(除Date)，非简单类型使用ref 属性注入 name规则：必须提供set方法，去掉set，第一个字…...

编程日记 2025/7/2 17:20:41

java 使用JSqlParser和CCJSqlParser 解析sql

maven <dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlparser</artifactId><version>4.9</version> </dependency>解析SQL String sql "select aa,bb from b"; Statement statementCCJSq…...

编程日记 2025/6/30 12:31:03

Anaconda Conda Pip 的区别与联系

在Python生态中，Anaconda、Conda和Pip是三个非常重要的工具，它们在包管理和环境管理方面发挥着关键作用。 Anaconda Anaconda是一个为科学计算而设计的Python发行版，它集成了Conda、Python以及大量的数据科学相关库，如NumPy、Pandas等。Anaconda的主要优势在于它提供了一个…...

编程日记 2025/7/3 7:35:32

总结的一些MySql面试题

目录一：基础篇二：索引原理和SQL优化三：事务原理四：缓存策略一：基础篇 1：定义：按照数据结构来组织、存储和管理数据的仓库；是一个长期存储在计算机内的、有组织的、可共享的…...

编程日记 2025/7/3 6:35:38

【实验15】LSTM的记忆能力实验

目录 1 模型构建 1.1 LSTM层 1.1.1 自定义LSTM算子 1.1.2 nn.LSTM 1.1.3 将自定义LSTM与pytorch内置的LSTM进行对比 1.2 模型汇总 2 模型训练 2.1 训练指定长度的数字预测模型 2.2 多组训练 2.3 损失函数展示 3 模型评价 4 完整代码 5 LSTM模型门状态和单元状态的…...

编程日记 2025/7/2 11:27:52

SSH克隆github项目

1、生成密钥 ssh-keygen -t rsa -C "你的邮箱xxx.com" 全程回车即可（不用输入ras文件名及密码）、为了方便下面的公钥查看 2、配置公钥查看公钥内容 cat c:\Users\xxx\.ssh\id_rsa.pub(修改为自己的路径及名字) 将公钥内容复制并粘贴至…...

编程日记 2025/6/30 15:56:04

计算机网络ENSP课设--三层架构企业网络

本课程设计搭建一个小型互联网，并模拟Internet的典型Web服务过程。通过此次课程设计，可以进一步理解Internet的工作原理和协议过程，并提高综合知识的运用能力和分析能力。具体目标包括： （1）掌握网络拓扑的…...

编程日记 2025/7/1 13:40:58

Node.js系统模块

【图书介绍】《Node.jsMongoDBVue.js全栈开发实战》-CSDN博客《Node.jsMongoDBVue.js全栈开发实战（Web前端技术丛书）》(邹琼俊)【摘要书评试读】- 京东图书 (jd.com) 2.2.1 什么是系统模块由于Node.js运行环境提供的API都是以模块化的方式进行开…...

编程日记 2025/7/3 21:20:32

React - useActionState、useFormStatus与表单处理

参考文档：react18.3.1官方文档一些概念： React 的 Canary 和 Experimental 频道是 React 团队用于发布和测试新功能的渠道。 useActionState useActionState 是一个可以根据某个表单动作的结果更新 state 的 Hook。 const [state, formAction, isPe…...

编程日记 2025/6/28 20:27:48

GC常见垃圾回收算法，JVM分代模型

如何判断是垃圾？引用计数器和Root可达性算法如何进行清除？标记清除、复制、标记整理堆分代模型？Eden，Surevivor，Tenuring 一个对象从创建到消亡的过程？ 对象什么时候进入老年代？ 一、GC&a…...

编程日记 2025/7/1 22:06:14

深入探索 JVM：原理、机制与实战

一、JVM 概述 JVM（Java Virtual Machine）是 Java 程序运行的核心组件，它提供了一个独立于硬件和操作系统的执行环境，使得 Java 程序能够在不同平台上具有跨平台的特性。 JVM 主要由以下几部分组成： 类装载器&#xf…...

编程日记 2025/7/1 16:03:00

前端成长之路：HTML（2）

HTML中有两个非常重要的标签——表格和表单，在介绍之前需要先了解表格和表单的区别：表格是用于展示数据的；表单是用于提交数据的。本文主要介绍表格。表格标签表格主要是用于显示、展示数据的，并非是页面布局。它可以使本来难…...

编程日记 2025/7/4 23:14:28

python基础：（七）类

目录一.创建和使用类二.使用类和实例2.1给属性指定默认值2.2修改属性的值2.2.1直接修改属性的值2.2.2通过方法修改属性的值2.2.3通过方法对属性的值进行递增三.继承3.1子类的方法__init__()3.2给子类定义属性和方法3.3重写父类的方法四.导入类4.1语法--1:4.2语法--2 前言 p…...

编程日记 2025/7/4 14:18:02

Spring AOP基础、快速入门

介绍 AOP，面向切面编程，作为面向对象的一种补充，将公共逻辑（事务管理、日志、缓存、权限控制、限流等）封装成切面，跟业务代码进行分离，可以减少系统的重复代码和降低模块之间的耦合度。切面就是…...

编程日记 2025/7/3 5:05:38

Golang使用etcd构建分布式锁案例

在本教程中，我们将学习如何使用Go和etcd构建分布式锁系统。分布式锁系统对于管理对分布式系统中共享资源的并发访问至关重要。它有助于维护一致性，防止竞争条件，并确保在任何给定时间只有一个进程独占访问资源。我们将使用Go作为编程语言&am…...

编程日记 2025/7/4 5:05:44

深度学习：基于MindSpore的极简风大模型微调

什么是PEFT？What is PEFT？ PEFT(Parameter Efficient Fine-Tuning)是一系列让大规模预训练模型高效适应于新任务或新数据集的技术。 PEFT在保持大部分模型权重冻结，只修改或添加一小部份参数。这种方法极大得减少了计算量和存储开销&#x…...

编程日记 2025/7/5 1:11:36

如何在 Android 项目中实现跨库传值

背景介绍在一个复杂的 Android 项目中，我们通常会有多个库（lib），而主应用程序（app）依赖所有这些库。目前遇到的问题是，在这些库中，libAd 需要获取 libVip 的 VIP 等级状态&#xf…...

编程日记 2025/7/1 1:12:39

HTML：表格重点

用表格就用table caption为该表上部信息，用来说明表的作用 thead为表头主要信息，效果加粗 tbody为表格中的主体内容 tr是 table row 表格的行 td是table data th是table heading表格标题 ，一般表格第一行的数据都是table heading...

编程日记 2025/7/3 6:39:20

STM32 出租车计价器系统设计（一）江科大源码改写

STM32 出租车计价器系统设计功能目标驱动步进电机模拟车轮旋转，并实现调速功能。设置车轮周长和单价，检测车轮转速和运转时间。计算并显示行驶里程和价格。硬件材料 28BYJ48 五线四相步进电机和 ULN2003 驱动板模块测速传感器模块嵌入式小系统…...

编程日记 2025/7/4 23:42:43

Git基础操作快速入门

Git是一个免费开源分布式版本控制工具，是由Linux的作者Linus开发的第二个伟大作品。2005年由于BitKeeper软件公司对Linux社区停止了免费使用权。Linus迫不得己自己开发了一个分布式版本控制工具，从而Git诞生了目前使用Git作为版本控制的开源软件&#…...

编程日记 2025/7/1 18:15:43

vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

在Windows操作系统中，安装了nodeJs之后，并且也安装了vue依赖包，但是在cmd控制台运行vue的时候，会报错：vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。针对这个问题我提供如下解决办法，并且是有效的。一、原因分析关于尝试这个问题的主要原因，我分析主要…...

编程日记 2025/6/30 20:13:36

JAVA安全—SpringBoot框架MyBatis注入Thymeleaf模板注入

前言之前我们讲了JAVA的一些组件安全，比如Log4j，fastjson。今天讲一下框架安全，就是这个也是比较常见的SpringBoot框架。 SpringBoot框架 Spring Boot是由Pivotal团队提供的一套开源框架，可以简化spring应用的创建及部署。它提…...

编程日记 2025/6/30 18:51:16

Milvus向量数据库05-常见问题整理

Milvus向量数据库05-常见问题整理 1-什么是PipeLine 这张图展示了一个文档处理和搜索系统的架构，主要分为两个部分：Ingestion Pipeline（摄取管道）和 Search Pipeline（搜索管道）。下面是对图中各部分的详细…...

编程日记 2025/7/1 14:55:38

strncpy在复制含有多个\0的字符串时遇到的问题

strncpy在复制含有多个\0的字符串的时候，会产生截断，因为strncpy在读取源字符串的时候，遇到了\0，函数会认为该字符串已经结束了，然后会向目标字符串内填充\0。 char buffer[100] "ak\0jl";for (int i 0; i…...

编程日记 2025/6/30 14:54:23

C++作业3

作业1： 1.定义一个矩形类Rec，包含私有属性length、width，包含公有成员方法： void set_length(int l);//设置长度 Void set_width(int w);//设置宽度 Int get_length();//获取长度，将长度的值返回给调用处 Int get_widt…...

编程日记 2025/7/1 12:44:31

重生之我在学Vue--第1天 Vue 3 基础与开发环境搭建

重生之我在学Vue–第1天 Vue 3 基础与开发环境搭建文章目录重生之我在学Vue--第1天 Vue 3 基础与开发环境搭建前言一、Vue 3 的特点与核心概念二、搭建开发环境1. 安装 Node.js2. 使用 Vite 创建 Vue 3 项目创建项目进入项目目录并安装依赖启动开发服务器 3. 理解项目结构三…...

编程日记 2025/6/29 17:33:43

企业经营数据分析系统：提升决策能力的利器

搭建企业经营数据分析系统是当今企业绕不开的话题，企业想要在竞争激烈的市场当中突围而出，需要对于企业内部的各种数据了然于胸，同时对于外部的数据也有敏锐的把握能力，因此企业构建自身的经营性数据分析系统就显得尤其重要。作为…...

编程日记 2025/7/1 13:08:25

Linux笔记9 DNS域名解析服务器

简介 DNS（Domain Name System）是互联网上的一项服务，它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网。 DNS使用的是53端口， 通常DNS是以UDP这个较快速的数据传输协议来查询的&#x…...

编程日记 2025/7/3 11:50:33

鸿蒙高级开发者认证的主观题试题及答案

以下是一份鸿蒙高级开发者认证的主观题试题及答案示例，涵盖了鸿蒙开发中的多个关键技术和应用场景相关内容，希望对你有所帮助：一、论述题（每题 20 分，共 60 分） 1. 阐述鸿蒙操作系统中分布式软总线的工作原理、核心优势以及在多设备协同应用开发场景下的应用方式，并举…...

编程日记 2025/7/1 3:37:33

leetcode_547 省份数量

该题主要运用了图的连通性接着使用染色法解决该问题染色法:标记所有节点为false 访问后将其标记位true class Solution {int n; // 代表n个数据bool colors[201]; // 标记是否访问到void dfs(vector<vector<int>>& isConnected, int u) { // …...

编程日记 2025/7/2 22:19:11