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

Vue 中如何嵌入可浮动的第三方网页窗口（附Demo）

news 来源：原创 2025/5/10 21:00:46

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

1. 思路Demo

以下Demo提供思路参考，需要结合实际自身应用代码

下述URL的链接使用百度替代！

方式 1：使用 iframe 浮窗
可以创建一个固定在页面右下角的 iframe，让它加载该 script 生成的内容

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮窗嵌入</title><style>/* 浮窗样式 */#floating-window {position: fixed;bottom: 20px;right: 20px;width: 400px;height: 500px;border: none;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);background: white;z-index: 9999;border-radius: 10px;}/* 关闭按钮 */#close-btn {position: absolute;top: 5px;right: 5px;background: red;color: white;border: none;width: 25px;height: 25px;border-radius: 50%;cursor: pointer;font-size: 14px;line-height: 25px;text-align: center;}</style>
</head>
<body><!-- 按钮触发浮窗 --><button id="open-float">打开浮窗</button><!-- 浮窗框架 --><div id="floating-container" style="display: none;"><button id="close-btn">×</button><iframe id="floating-window" src="https://www.baidu.com/"></iframe></div><script>document.getElementById("open-float").addEventListener("click", function() {document.getElementById("floating-container").style.display = "block";});document.getElementById("close-btn").addEventListener("click", function() {document.getElementById("floating-container").style.display = "none";});</script></body>
</html>

方式 2：使用 div + script 动态加载
script 代码是动态生成 HTML 的，可以创建一个浮窗 div，然后在 div 里动态插入 script

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮窗嵌入 Script</title><style>#floating-div {position: fixed;bottom: 20px;right: 20px;width: 400px;height: 500px;border: 1px solid #ccc;background: white;z-index: 9999;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);display: none;border-radius: 10px;}#close-div-btn {position: absolute;top: 5px;right: 5px;background: red;color: white;border: none;width: 25px;height: 25px;border-radius: 50%;cursor: pointer;font-size: 14px;line-height: 25px;text-align: center;}</style>
</head>
<body><!-- 按钮触发浮窗 --><button id="show-div-btn">打开浮窗</button><!-- 浮窗内容 --><div id="floating-div"><button id="close-div-btn">×</button><div id="script-content"></div></div><script>document.getElementById("show-div-btn").addEventListener("click", function() {document.getElementById("floating-div").style.display = "block";let script = document.createElement("script");script.async = true;script.defer = true;script.src = "https://www.baidu.com/";document.getElementById("script-content").appendChild(script);});document.getElementById("close-div-btn").addEventListener("click", function() {document.getElementById("floating-div").style.display = "none";});</script></body>
</html>

方式 3：使用 dialog 元素
想要更现代化的 UI，可以使用 <dialog> 标签

<dialog id="floating-dialog"><button onclick="document.getElementById('floating-dialog').close()">关闭</button><iframe src="https://www.baidu.com/"></iframe>
</dialog><button onclick="document.getElementById('floating-dialog').showModal()">打开浮窗</button>

2. 实战Demo

下述实战代码为Vue2（项目源自bladex）

初始：
在这里插入图片描述

集成之后：
在这里插入图片描述

在 avue-top 组件里嵌入一个浮窗 div，然后动态加载 script，确保它能够嵌入 Vue 组件中

<template><div class="avue-top"><div class="top-bar__right"><el-tooltip effect="dark" content="打开浮窗" placement="bottom"><div class="top-bar__item" @click="toggleFloatingWindow"><i class="el-icon-monitor"></i> <!-- 你可以换成任意图标 --></div></el-tooltip></div><!-- 浮窗 --><div v-if="showFloatingWindow" class="floating-window"><button class="close-btn" @click="showFloatingWindow = false">×</button><iframe :src="floatingUrl"></iframe></div></div></template>

在 methods 里添加 toggleFloatingWindow 方法，控制浮窗的显示：

<script>
export default {data() {return {showFloatingWindow: false,floatingUrl: "http://xxxxx"};},methods: {toggleFloatingWindow() {this.showFloatingWindow = !this.showFloatingWindow;}}
};
</script>

添加 <style> 样式

<style lang="scss" scoped>
.floating-window {position: fixed;bottom: 20px;right: 20px;width: 400px;height: 500px;background: white;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);z-index: 9999;border-radius: 10px;border: 1px solid #ddd;overflow: hidden;
}.floating-window iframe {width: 100%;height: 100%;border: none;
}.close-btn {position: absolute;top: 5px;right: 5px;background: red;color: white;border: none;width: 25px;height: 25px;border-radius: 50%;cursor: pointer;font-size: 14px;line-height: 25px;text-align: center;
}
</style>

但这样会有个bug，每次点开隐藏都会刷新下网页

优化浮窗：防止重复加载内容
可以使用 v-show 而不是 v-if，这样 iframe 只会被隐藏，而不会被销毁，内容不会丢失

<div v-show="showFloatingWindow" class="floating-window"><button class="close-btn" @click="showFloatingWindow = false">×</button><iframe ref="floatingIframe" :src="floatingUrl"></iframe>
</div>

如果对应需要增加浮窗文字，可这样设置：

<el-tooltip effect="dark" content="管理小助手" placement="bottom"><div class="top-bar__item" @click="toggleFloatingWindow"><i class="el-icon-monitor"></i> <span class="floating-text">浮窗</span></div>
</el-tooltip>

添加样式

.floating-text {font-size: 15px;  /* 调整字体大小 */margin-left: 5px; /* 控制与图标的间距 */color: #fff;      /* 文字颜色 */
}

如果需要自定义图标，使用图片来代替：

可以使用 <img> 标签来替换 el-icon-monitor，具体修改如下：

<el-tooltip effect="dark" content="浮窗" placement="bottom"><div class="top-bar__item" @click="toggleFloatingWindow"><img src="@/assets/my-icon.png" class="custom-icon" alt="自定义图标" /><span class="floating-text">xx设备管理小助手</span></div>
</el-tooltip>

具体样式如下：

.custom-icon {width: 24px; /* 适当调整图标大小 */height: 24px;margin-right: 5px; /* 让图标和文本有一定间距 */
}

想让图片样式更加鲜艳：

.custom-icon {width: 24px;height: 24px;margin-right: 5px;filter: brightness(1.2) contrast(1.2); /* 提高亮度和对比度 */
}

文字的颜色：

使用稍微鲜艳但不刺眼的颜色，让文字更清晰，比如：

🔹 推荐颜色：
亮蓝色：#007bff（适合科技风）
柔和橙色：#ff9800（温暖醒目）
湖绿色：#17a2b8（清新不刺眼）
紫罗兰色：#6f42c1（优雅有辨识度）

🎨 修改 floating-text 颜色：

.floating-text {font-size: 15px;  margin-left: 5px; color: #007bff;  /* 亮蓝色，科技感强 */font-weight: bold; /* 让文字更清晰 */
}

Vue 中如何嵌入可浮动的第三方网页窗口（附Demo）

目录前言1. 思路Demo2. 实战Demo 前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 1. 思路Demo 以下Demo提供思路参考，需要结合实际自身应用代码下述URL的链接使用百度替代！ 方式 1…...

编程日记 2025/5/10 21:00:46

6-图像金字塔与轮廓检测

文章目录 6.图像金字塔与轮廓检测（1）图像金字塔定义（2）金字塔制作方法（3）轮廓检测方法（4）轮廓特征与近似（5）模板匹配方法6.图像金字塔与轮廓检测（1）图像金字塔定义高斯金字塔拉普拉斯金字塔高斯金字塔：向下采样方法(缩小) 高斯金字塔：向上采样方法(放大)…...

编程日记 2025/5/10 20:55:27

【学Rust写CAD】4 相对坐标系详解与实现要素概览

相对坐标系（Relative Coordinate System, RCS）是一个强大且灵活的工具，尤其在绘图、三维建模等领域中发挥着重要作用。以下是对相对坐标系的详细解析，包括其定义、应用、特性、与绝对坐标的区别、在CAD中的应用以及实现方式。一…...

编程日记 2025/5/10 11:39:06

win编译openssl

一、perl执行脚本 1、安装perl脚本 perl安装 2、配置perl脚本 perl Configure VC-WIN32 no-asm no-shared --prefixE:\openssl-x.x.x\install二、编译openssl 1、使用vs工具编译nmake 如果使用命令行nmake编译会提示“无法打开包括文件: “limits.h”“ 等错误信息所以…...

编程日记 2025/5/10 20:48:49

文章来源：kafka -- 南京筱麦软件有限公司第 1 步：获取 KAFKA 下载最新的 Kafka 版本并提取它： $ tar -xzf kafka_{{scalaVersion}}-{{fullDotVersion}}.tgz $ cd kafka_{{scalaVersion}}-{{fullDotVersion}} 第 2 步：启动 KAFKA 环境注意：您的本地环境必须安装 Java 8+。…...

编程日记 2025/5/10 20:49:51

PyTorch数据建模

回归分析 import torch import numpy as np import pandas as pd from torch.utils.data import DataLoader,TensorDataset import time strat = time.perf_counter()...

编程日记 2025/5/10 5:42:44

Node.js与嵌入式开发：打破界限的创新结合

文章目录一、Node.js的本质与核心优势1.1 什么是Node.js？1.2 嵌入式开发的范式转变二、Node.js与嵌入式结合的四大技术路径2.1 硬件交互层2.2 物联网协议栈2.3 边缘计算架构2.4 轻量化运行时方案三、实战案例：智能农业监测系统3.1 硬件配置3.2 软件架构3.3 核心代码片段四、…...

编程日记 2025/5/5 23:57:27

CVPR | CNN融合注意力机制，芜湖起飞！

**标题：**On the Integration of Self-Attention and Convolution **论文链接：**https://arxiv.org/pdf/2111.14556 **代码链接：**https://github.com/LeapLabTHU/ACmix 创新点 1. 揭示卷积和自注意力的内在联系文章通过重新分解卷积和自…...

编程日记 2025/4/14 17:17:21

Markdown转换器中间件

目录需求文本编码检测 Markdown→HTML 注意实现需求 Markdown是一种文本格式；不被浏览器支持；编写一个在服务器端把Markdown转换为HTML的中间件。我们开发的中间件是构建在ASP.NET Core内置的StaticFiles中间件之上，并且在它之前运…...

编程日记 2025/5/10 20:39:17

https是如何保证安全的，又是如何保证不被中间人攻击的？

HTTPS如何保证安全，以及如何防止中间人攻击保护用户隐私和数据安全已经成为了一个不可忽视的问题。随着网络攻击的不断升级，HTTPS（超文本传输安全协议）成为了我们在网络上交流时的一道重要防线。以下是HTTPS是如何保证安全的&am…...

编程日记 2025/5/10 20:43:35

2025.2.5

Web [SWPUCTF 2021 新生赛]ez_unserialize: 这个题先了解一下反序列化：反序列化是序列化的逆过程。序列化是将对象或数据结构转换为可以存储或传输的格式（如JSON、XML或二进制格式）的过程。反序列化则是将这个格式的数据转换回原始的对象或…...

编程日记 2025/5/6 8:37:47

TGT-HC：一种用于无线时间敏感网络的时隙感知整形MAC方案的调研、设计与评估

论文标题中文标题：TGT-HC：一种用于无线时间敏感网络的时隙感知整形MAC方案的调研、设计与评估英文标题：Survey, Design and Evaluation of TGT-HC: A Time-Aware Shaper MAC for Wireless TSN 作者信息 Raymond J. Jayabal（I…...

编程日记 2025/5/6 15:11:57

Ollama教程：轻松上手本地大语言模型部署

Ollama教程：轻松上手本地大语言模型部署在大语言模型（LLM）飞速发展的今天，越来越多的开发者希望能够在本地部署和使用这些模型，以便更好地控制数据隐私和计算资源。Ollama作为一个开源工具，旨在简化大语言…...

编程日记 2025/4/30 20:49:23

《Redis4.0数据持久化》

【redis持久化导读】Redis作为一款高性能的内存数据库，支持key-value键值对的形式存储数据，为业务层提供了高效的数据查询能力，但大家有思考过一个问题没？假如redis服务所在的主机突然挂了，那么之前缓存在内存的数据是…...

编程日记 2025/4/29 4:55:07

如何利用Docker和.NET Core实现环境一致性、简化依赖管理、快速部署与扩展，同时提高资源利用率、确保安全性和生态系统支持

目录 1. 环境一致性 2. 简化依赖管理 3. 快速部署与扩展 4. 提高资源利用率 5. 确保安全性 6. 生态系统支持总结使用 Docker 和 .NET Core 结合，可以有效地实现环境一致性、简化依赖管理、快速部署与扩展，同时提高资源利用率、确保安全性和生态…...

编程日记 2025/5/10 20:54:27

前端js高级25.1.30

原型：函数的组成结构通过这个图我们需要知道。假设我们创建了一个Foo函数。规则：Function.protoType是函数显示原型。__proto__是隐式对象。 Function、Object、Foo函数的__proto__指向了Function.protoType说明。这三个都依托function函数来创建。…...

编程日记 2025/5/1 4:18:36

C语言打印输出星号图形(三角形、菱形、漏斗)

文章目录 1. 介绍2. 案例分析3. 漏斗型4. 直角三角形4.1 左上直角三角形4.2 右上直角三角形4.3 左下直角三角形4.4 右下直角三角形 5. 等腰三角形5.1 正等腰三角形5.2 倒等腰三角形 6. 平行四边形6.1 纵向左下平行四边形6.2 纵向左上平行四边形6.3 横向左上平行四边形6.4 横向左…...

编程日记 2025/5/10 20:36:59

litemall，又一个小商场系统

litemall Spring Boot后端 Vue管理员前端微信小程序用户前端 Vue用户移动端代码地址：litemall: 又一个小商城。 litemall Spring Boot后端 Vue管理员前端微信小程序用户前端 Vue用户移动端...

编程日记 2025/5/10 20:08:49

消费kafka消息示例

以下是使用 Java 结合 Spring Kafka 框架来监听 updated-topic-test 这个 Kafka Topic 的详细实现步骤及代码示例，用于捕获人员信息变更的事件。 1. 添加依赖在 pom.xml 文件中添加 Spring Kafka 相关依赖： <dependencies><!-- Spring Boot…...

编程日记 2025/5/3 16:17:59

ShardingSphere--03--SpringBoot整合案例

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 SpringBoot整合案例1.建表2.nacos 配置ShardingSphere 规则3.java 依赖4.sql5.java 代码 SpringBoot整合案例 1.建表 CREATE TABLE t_audience_customer_0 (audid …...

编程日记 2025/5/10 20:18:25

K8S运行时切换-从Docker到Containerd的切换实战

1. 切换的原因性能提升：Containerd通过减少抽象层提升了整体性能。安全性增强：它提供了更直接的系统调用，减少了潜在的安全风险。简化架构：Containerd拥有更简洁的设计，使得维护和故障排除更为容易。官方支持趋…...

编程日记 2025/5/6 11:27:20

C# yield 关键字

前言在 C# 中，yield 关键字是一个非常独特且强大的语言特性，它主要用于迭代器块（Iterator Block）中，能够让开发者以一种简洁高效的方式实现自定义的可迭代类型，轻松地生成并返回一个序列的值&#xff…...

编程日记 2025/5/10 5:41:58

软件设计模式

目录一.创建型模式抽象工厂 Abstract Factory 构建器 Builder 工厂方法 Factory Method 原型 Prototype 单例模式 Singleton 二.结构型模式适配器模式 Adapter 桥接模式 Bridge 组合模式 Composite 装饰者模式 Decorator 外观模式 Facade 享元模式 Flyw…...

编程日记 2025/5/10 20:48:49

【Leetcode 每日一题 - 补卡】922. 按奇偶排序数组 II

问题背景给定一个非负整数数组 n u m s nums nums， n u m s nums nums 中一半整数是奇数 ，一半整数是偶数。对数组进行排序，以便当 n u m s [ i ] nums[i] nums[i] 为奇数时， i i i 也是奇数 ；当 n u m s [ …...

编程日记 2025/5/10 20:38:04

Redis缓存穿透、击穿、雪崩介绍以及解决方案

一、缓存穿透 1.1 什么是缓存穿透？ 指的是，外部进来的请求，查询一个不存在的数据。Redis中没有，数据库中也没有，这时候如果外部恶意大量请求，所有请求会直接查询数据库，导致数据库崩溃 1.2 解决…...

编程日记 2025/5/10 20:33:56

Django框架丨从零开始的Django入门学习

Django 是一个用于构建 Web 应用程序的高级 Python Web 框架，Django是一个高度模块化的框架，使用 Django，只要很少的代码，Python 的程序开发人员就可以轻松地完成一个正式网站所需要的大部分内容，并进一步开发出全功能…...

编程日记 2025/5/10 20:58:41

AI绘画：解锁商业设计新宇宙（6/10）

1.AI 绘画：商业领域的潜力新星近年来，AI 绘画技术以惊人的速度发展，从最初简单的图像生成，逐渐演变为能够创造出高度逼真、富有创意的艺术作品。随着深度学习算法的不断优化，AI 绘画工具如 Midjourney、Stable Diffu…...

编程日记 2025/5/10 20:47:39

.net的一些知识点

1.public,protected,private的区别从访问权限来说是 public>protecd>private 翻译成汉字：公有的>受保护的>私有的但是在拿那种旧版本(2017及之前)的vs创建class的时候，这个类是没有修饰符的。现在vs2022版本创建带了默认修饰符&#x…...

编程日记 2025/5/10 20:34:57

【Docker】——安装Docker以及解决常见报错

🎼个人主页：【Y小夜】 😎作者简介：一位双非学校的大二学生，编程爱好者， 专注于基础和实战分享，欢迎私信咨询！ 🎆入门专栏：🎇【MySQL&#xff0…...

编程日记 2025/5/6 3:31:18

Linux环境部署DeepSeek大模型

一、背景【DeepSeek 深度求索】这个春节给了世界一个重磅炸弹，弄得美国都睡不好觉。这次与以往不同，之前我们都是跟随着美国的AI人工智能，现在DeepSeek通过算法上的优化，大大降低了训练模型所需的成本以及时间，短期造…...

编程日记 2025/5/6 5:47:56

Java 面试真题

本题适合一到三年 Java 开发 ，以下问题都是按照原面试官提问记录文章目录我要进大厂系列面试题二面我要进大厂系列面试题全部真题，欢迎投稿你的面试经验。本篇涉及基础较多，但要耐性看完。 JVM内存模型垃圾回收器用的哪个gc各个算法…...

编程日记 2025/5/10 20:05:24

Electron使用WebAssembly实现CRC-8 MAXIM校验

Electron使用WebAssembly实现CRC-8 MAXIM校验将C/C语言代码，经由WebAssembly编译为库函数，可以在JS语言环境进行调用。这里介绍在Electron工具环境使用WebAssembly调用CRC-8 MAXIM格式校验的方式。 CRC-8 MAXIM校验函数WebAssembly源文件 C语言实现C…...

编程日记 2025/5/7 6:00:17

（一）DeepSeek大模型安装部署-Ollama安装

大模型deepseek安装部署 (一)、安装ollama curl -fsSL https://ollama.com/install.sh | sh sudo systemctl start ollama sudo systemctl enable ollama sudo systemctl status ollama(二)、安装ollama遇到网络问题，请手动下载 ollama-linux-amd64.tgz curl -L …...

编程日记 2025/5/6 13:13:49

Unity游戏(Assault空对地打击)开发(6) 鼠标光标的隐藏

前言鼠标光标在游戏界面太碍眼了，要隐藏掉。详细操作新建一个脚本HideCursor，用于隐藏/取消隐藏光标。写入以下代码。意义：游戏开始自动隐藏光标，按Esc（隐藏<-->显示）。 using System.Collectio…...

编程日记 2025/5/9 21:12:17

蓝桥杯python基础算法（2-1）——排序

目录一、排序二、例题 P3225——宝藏排序Ⅰ 三、各种排序比较四、例题 P3226——宝藏排序Ⅱ 一、排序 （一）冒泡排序基本思想：比较相邻的元素，如果顺序错误就把它们交换过来。 （二）选择排序基本思想…...

编程日记 2025/4/29 2:01:29

算法随笔_36: 复写零

上一篇:算法随笔_35: 每日温度-CSDN博客题目描述如下: 给你一个长度固定的整数数组 arr ，请你将该数组中出现的每个零都复写一遍，并将其余的元素向右平移。注意：请不要在超过该数组长度的位置写入元素。请对输入的数组就地进行上述修改…...

编程日记 2025/5/10 11:38:04

基于springboot的体质测试数据分析及可视化设计

作者：学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等文末获取“源码数据库万字文档PPT”，支持远程部署调试、运行安装。项目包含： 完整源码数据库功能演示视频万字文档PPT 项目编码&#xff1…...

编程日记 2025/5/6 21:01:52

知识蒸馏教程 Knowledge Distillation Tutorial

来自于：Knowledge Distillation Tutorial 将大模型蒸馏为小模型，可以节省计算资源，加快推理过程，更高效的运行。使用CIFAR-10数据集 import torch import torch.nn as nn import torch.optim as optim import torchvision.tran…...

编程日记 2025/5/6 11:28:53

排序算法--选择排序

选择排序虽然简单，但时间复杂度较高，适合小规模数据或教学演示。 // 选择排序函数 void selectionSort(int arr[], int n) {for (int i 0; i < n - 1; i) { // 外层循环控制当前最小值的存放位置int minIndex i; // 假设当前位置是最小值的索引// 内…...

编程日记 2025/5/7 6:00:40

视频融合平台EasyCVR无人机场景视频压缩及录像方案

安防监控视频汇聚EasyCVR平台在无人机场景中发挥着重要的作用，通过高效整合视频流接入、处理与分发等功能，为无人机视频数据的实时监控、存储与分析提供了全面支持，广泛应用于安防监控、应急救援、电力巡检、交通管理等领域。 EasyCVR支持GB…...

编程日记 2025/5/4 14:47:50

【react-redux】react-redux中的 useDispatch和useSelector的使用与原理解析

一、useSelector 首先，useSelector的作用是获取redux store中的数据。下面就是源码，感觉它的定义就是首先是createSelectorHook这个方法先获得到redux的上下文对象。然后从上下文对象中获取store数据。然后从store中得到选择的数据。 2、useDispatc…...

编程日记 2025/5/8 14:44:16

【自学笔记】Git的重点知识点-持续更新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 Git基础知识Git高级操作与概念Git常用命令总结 Git基础知识 Git简介 Git是一种分布式版本控制系统，用于记录文件内容的改动，便于开发者追踪…...

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

【大模型实战】0代码基于DeepSeek-R1搭建本地知识库，打造专属智能助手

【大模型实战】0代码基于DeepSeek-R1搭建本地知识库，打造专属智能助手一、ollama下载与安装二、部署deepseek私有模型三、部署embedding模型四、可视化操作工具（1）下载与安装工具（2）部署安装的模型（3）添加知识库（4）添加智能体助手（5）助手问答一、ollama下载与安装…...

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

[LeetCode] 二叉树 I — 深度优先遍历（前中后序遍历） | 广度优先遍历（层序遍历）：递归法迭代法

二叉树基础知识深度优先遍历递归法迭代法（栈）144# 二叉树的前序遍历94# 二叉树的中序遍历145# 二叉树的后序遍历广度优先遍历递归法迭代法（队列）102# 二叉树的层序遍历107# 二叉树的层序遍历 II199# 二叉树的右视图637# 二叉树的…...

编程日记 2025/5/10 19:57:54

【OS】AUTOSAR架构下的Interrupt详解（上篇）

目录前言正文 1.中断概念分析 1.1 中断处理API 1.2 中断级别 1.3 中断向量表 1.4 二类中断的嵌套 1.4.1概述 1.4.2激活 1.5一类中断 1.5.1一类中断的实现 1.5.2一类中断的嵌套 1.5.3在StartOS之前的1类ISR 1.5.4使用1类中断时的注意事项 1.6中断源的初始化 1.…...

编程日记 2025/5/6 1:30:34

NFT Insider #167：Champions Tactics 角色加入 The Sandbox；AI 助力 Ronin 游戏生态

引言：NFT Insider 由 NFT 收藏组织 WHALE Members、BeepCrypto 联合出品， 浓缩每周 NFT 新闻，为大家带来关于 NFT 最全面、最新鲜、最有价值的讯息。每期周报将从 NFT 市场数据，艺术新闻类，游戏新闻类，虚拟…...

编程日记 2025/5/8 17:05:42

保姆级教程Docker部署KRaft模式的Kafka官方镜像

目录一、安装Docker及可视化工具二、单节点部署 1、创建挂载目录 2、运行Kafka容器 3、Compose运行Kafka容器 4、查看Kafka运行状态三、集群部署四、部署可视化工具 1、创建挂载目录 2、运行Kafka-ui容器 3、Compose运行Kafka-ui容器 4、查看Kafka-ui运行状态 …...

编程日记 2025/5/10 3:09:10