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

【Vue3知识】Vue3集成富文本编辑器TinyMCE

news 来源：原创 2025/7/5 18:52:11

Vue3集成富文本编辑器TinyMce

- 集成
- - 一、安装依赖
  - 二、基础集成示例
  - - 1. 组件封装：`RichEditor.vue`
  - 三、关键配置说明
  - - 1. **API Key 配置**
    - 2. **图片上传处理**
    - 3. **多语言支持**
  - 四、完整本地化部署步骤（无 API Key）
  - 五、在父组件中使用
  - 六、常见问题解决
  - - 1. **控制台警告 `Failed to load` 皮肤文件**
    - 2. **编辑器无法初始化**
    - 3. **图片上传不生效**
  - 七、扩展功能示例
  - - 自定义插件
- 汉化
- - 一、下载 TinyMCE 中文语言包
  - 二、配置 TinyMCE 使用中文
  - - 1. 通过 CDN 直接引入
    - 2. 通过 npm 安装（适用于 Vue/React 项目）
  - 三、完整示例（Vue 3）
  - - 1. 创建语言文件目录
    - 2. 配置路径
    - 3. 组件代码
  - 四、注意事项
  - 五、自定义翻译

集成

在 Vue 3 中集成 TinyMCE 富文本编辑器，可以通过官方提供的 @tinymce/tinymce-vue 组件库实现。以下是详细步骤和完整示例：

一、安装依赖

安装 TinyMCE Vue 组件：

npm install @tinymce/tinymce-vue@^4.0.0 tinymce@^6.0.0

(可选) 下载本地皮肤文件（若需离线使用）：
• 从 TinyMCE 官网下载皮肤包（skins 文件夹）。
• 将 skins 文件夹复制到项目的 public 目录下。

二、基础集成示例

1. 组件封装：`RichEditor.vue`

<template><div class="rich-editor"><!-- TinyMCE 编辑器组件 --><Editorv-model="content":init="initOptions"api-key="your-api-key" <!-- 替换为你的 API Key -->/></div>
</template><script setup>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';// 编辑器内容绑定
const content = ref('<p>初始内容</p>');// TinyMCE 配置项
const initOptions = ref({height: 500,menubar: true,plugins: ['advlist autolink lists link image charmap print preview anchor','searchreplace visualblocks code fullscreen','insertdatetime media table paste code help wordcount'],toolbar:'undo redo | formatselect | bold italic backcolor | \alignleft aligncenter alignright alignjustify | \bullist numlist outdent indent | removeformat | help',// 本地皮肤配置（需提前放置 skins 文件）skin: 'oxide', // 或自定义皮肤名称content_css: 'default', // 或自定义 CSS 路径// 图片上传配置images_upload_handler: async (blobInfo) => {const formData = new FormData();formData.append('file', blobInfo.blob(), blobInfo.filename());// 调用后端接口上传图片const response = await fetch('/api/upload', { method: 'POST', body: formData });const data = await response.json();return data.url; // 返回图片 URL}
});
</script>

三、关键配置说明

1. API Key 配置

• 注册 TinyMCE 账号获取免费 API Key（用于解除试用警告）。
• 若不使用云端服务，需本地化部署，跳过 api-key 并配置 initOptions.skin_url：

initOptions.value.skin_url = '/skins/ui/oxide'; // 路径对应 public/skins

2. 图片上传处理

通过 images_upload_handler 实现图片上传逻辑：

images_upload_handler: async (blobInfo) => {const formData = new FormData();formData.append('image', blobInfo.blob(), blobInfo.filename());try {const res = await axios.post('/api/upload', formData);return res.data.url;} catch (error) {console.error('上传失败:', error);return '';}
}

3. 多语言支持

配置中文语言包：

import 'tinymce-i18n/langs/zh_CN';initOptions.value.language = 'zh_CN';

四、完整本地化部署步骤（无 API Key）

下载 TinyMCE 完整包：
• 访问 TinyMCE 下载页面下载 Self-hosted 版本。
• 解压后得到 tinymce/js/tinymce 目录。
复制文件到项目：
• 将 tinymce/js/tinymce 目录复制到项目的 public 文件夹下。

配置路径：

initOptions.value = {// ...skin_url: '/tinymce/js/tinymce/skins/ui/oxide', // 皮肤路径content_css: '/tinymce/js/tinymce/skins/content/default/content.css'
};

五、在父组件中使用

<template><div><RichEditor v-model="htmlContent" /><button @click="getContent">获取内容</button></div>
</template><script setup>
import { ref } from 'vue';
import RichEditor from '@/components/RichEditor.vue';const htmlContent = ref('');const getContent = () => {console.log('当前内容:', htmlContent.value);
};
</script>

六、常见问题解决

1. 控制台警告 `Failed to load` 皮肤文件

• 原因：未正确配置皮肤路径。
• 解决：确保 skin_url 指向正确的本地路径或 CDN 地址。

2. 编辑器无法初始化

• 原因：未正确引入 TinyMCE 核心脚本。
• 解决：在 index.html 中手动引入（仅限 CDN 模式）：

<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"></script>

3. 图片上传不生效

• 检查点：
• 确保 images_upload_handler 返回正确的 URL。
• 后端接口需支持 multipart/form-data 格式。

七、扩展功能示例

自定义插件

创建插件文件 public/tinymce/custom-plugin.js：

tinymce.PluginManager.add('customPlugin', (editor) => {editor.ui.registry.addButton('customButton', {text: '自定义按钮',onAction: () => alert('点击自定义按钮')});
});

配置插件：

initOptions.value = {plugins: '... customPlugin',toolbar: '... | customButton'
};

通过以上步骤，即可在 Vue 3 项目中快速集成功能丰富的 TinyMCE 编辑器，并支持高度定制化开发。

汉化

在 Vue 3 或任何前端框架中集成 TinyMCE 并进行汉化（中文化），需要以下步骤：

一、下载 TinyMCE 中文语言包

官方语言包地址
TinyMCE 的中文语言文件位于：
https://www.tiny.cloud/get-tiny/language-packages/

直接使用 CDN 链接（推荐）
中文语言包可直接通过 CDN 引用：

<!-- 将 `6.x.x` 替换为你实际使用的 TinyMCE 版本 -->
<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6.x.x/langs/zh_CN.js"></script>

二、配置 TinyMCE 使用中文

根据你的使用场景，选择以下配置方式：

1. 通过 CDN 直接引入

<textarea id="myEditor"></textarea><script>tinymce.init({selector: '#myEditor',language: 'zh_CN', // 指定中文language_url: 'https://cdn.tiny.cloud/1/your-api-key/tinymce/6.x.x/langs/zh_CN.js',plugins: 'advlist lists link image code', // 按需选择插件toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'});
</script>

2. 通过 npm 安装（适用于 Vue/React 项目）

npm install tinymce @tinymce/tinymce-vue

在 Vue 3 中配置：

<template><Editorapi-key="your-api-key":init="editorConfig"v-model="content"/>
</template><script setup>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';// 引入中文语言包（需确保路径正确）
import 'tinymce/langs/zh_CN';const content = ref('');const editorConfig = {language: 'zh_CN',plugins: 'advlist lists link image code',toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',skin_url: '/path/to/skins/ui/oxide', // 可选：自定义皮肤路径content_css: '/path/to/content.css'  // 可选：自定义内容样式
};
</script>

三、完整示例（Vue 3）

1. 创建语言文件目录

在项目的 public 或 static 目录下创建文件夹：

public/tinymce/langs/zh_CN.js

2. 配置路径

// vue.config.js（确保路径映射）
module.exports = {configureWebpack: {resolve: {alias: {tinymce: '/public/tinymce'}}}
};

3. 组件代码

<template><Editorapi-key="your-api-key":init="editorConfig"v-model="content"/>
</template><script setup>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';const content = ref('');const editorConfig = {language: 'zh_CN',language_url: '/tinymce/langs/zh_CN.js', // 本地路径plugins: 'advlist lists link image code',toolbar: 'undo redo | bold italic | code',height: 500
};
</script>

四、注意事项

路径问题
• 如果语言包未生效，检查 language_url 路径是否正确。
• 本地开发时，可将语言文件放在 public 目录下。
版本兼容性
确保语言包版本与 TinyMCE 主版本一致（如 TinyMCE 6.x 对应 zh_CN.js 6.x）。
清除缓存
修改语言配置后，强制刷新浏览器（Ctrl + F5）。
完整汉化
如果部分内容未翻译，检查语言包是否覆盖了所有插件词汇。

五、自定义翻译

如果需要手动修改翻译内容，可以编辑 zh_CN.js 文件：

// zh_CN.js
tinymce.addI18n('zh_CN', {'Redo': '重做','Undo': '撤销',// 其他翻译项...
});

通过以上步骤，TinyMCE 将完全显示为中文界面。

【Vue3知识】Vue3集成富文本编辑器TinyMCE

Vue3集成富文本编辑器TinyMce 集成一、安装依赖二、基础集成示例1. 组件封装：RichEditor.vue 三、关键配置说明1. **API Key 配置**2. **图片上传处理**3. **多语言支持** 四、完整本地化部署步骤（无 API Key）五、在父组件中使用六、常见问题…...

编程日记 2025/7/5 18:52:11

pod生命周期

1.init容器：做主容器运行前需要做的准备条件 2.探针通俗易懂就是检测容器是否正常运行工作启动探针startupProbe：检测应用是否完成启动 ，如果启动则禁用其他探测直到成功为止，探测失败则杀死容器，容器服从重启策略…...

编程日记 2025/7/5 18:31:45

Oracle数据库数据编程SQL＜3.3 PL/SQL 游标＞

游标(Cursor)是Oracle数据库中用于处理查询结果集的重要机制，它允许开发者逐行处理SQL语句返回的数据。目录一、游标基本概念 1. 游标定义 2. 游标分类二、静态游标 （一）显式游标【一】不带参数，普通的显示游标 1. 显式…...

编程日记 2025/7/5 18:46:56

OLLAMA 未授权访问-漏洞挖掘

1.漏洞描述 Ollama存在未授权访问漏洞。由于Ollama默认未设置身份验证和访问控制功能，未经授权的攻击者可在远程条件下调用Ollama服务接口，执行包括但不限于敏感模型资产窃取、虚假信息投喂、模型计算资源滥用和拒绝服务、系统配置篡改和扩大利用等恶意…...

编程日记 2025/7/5 18:13:45

上篇文章： 多线程—JUChttps://blog.csdn.net/sniper_fandc/article/details/146713322?fromshareblogdetail&sharetypeblogdetail&sharerId146713322&sharereferPC&sharesourcesniper_fandc&sharefromfrom_link 目录 1 线程安全的集合类 …...

编程日记 2025/7/3 22:09:21

【鸿蒙5.0】鸿蒙登录界面 web嵌入（隐私页面加载）

在鸿蒙应用中嵌入 Web 页面并加载隐私页面，可借助 WebView 组件来实现。以下是一个完整示例，展示如何在鸿蒙 ArkTS 里嵌入 Web 页面并加载隐私政策页面。在 HarmonyOS 应用开发中，如果你希望嵌入一个网页，并且特别关注隐私页面加…...

编程日记 2025/7/5 17:21:36

C++轻量HeaderOnly的JSON库

文章目录 1 nlohmann/json库说明2 nlohmann/json特点3 nlohmann/json库的使用方法3.1 引入头文件3.2 解析JSON字符串3.3 访问JSON数据3.4 生成JSON对象3.5 修改JSON数据3.6 将JSON写入文件3.7 遍历JSON对象 4 代码示例4.1 定义JSON数值类型4.2 从STL容器转换到json4.3 string序…...

编程日记 2025/7/5 17:47:33

打包python文件生成exe

下载PyInstaller 官网 pip install pyinstaller验证是否安装成功 pyinstaller --version打包 pyinstaller "C:\Documents and Settings\project\myscript.py"会生成.spec,build,dist三项，其中build,dist为文件夹，dist是最后的可执行文件&a…...

编程日记 2025/7/5 18:47:50

Nginx — Nginx安装证书模块(配置HTTPS和TCPS)

一、安装和编译证书模块 [rootmaster nginx]# wget https://nginx.org/download/nginx-1.25.3.tar.gz [rootmaster nginx]# tar -zxvf nginx-1.25.3.tar.gz [rootmaster nginx]# cd nginx-1.25.3 [rootmaster nginx]# ./configure --prefix/usr/local/nginx --with-http_stub_…...

编程日记 2025/7/5 18:42:43

《Mycat核心技术》第21章：高可用负载均衡集群的实现（HAProxy + Keepalived + Mycat）

作者：冰河星球：http://m6z.cn/6aeFbs 博客：https://binghe.gitcode.host 文章汇总：https://binghe.gitcode.host/md/all/all.html 星球项目地址：https://binghe.gitcode.host/md/zsxq/introduce.html 沉淀&#xff0c…...

编程日记 2025/7/5 17:29:37

Dynamic WallPaper-壁纸动态-Mac电脑-4K超高清

Dynamic WallPaper-壁纸动态-Mac电脑-4K超高清文章目录 Dynamic WallPaper-壁纸动态-Mac电脑-4K超高清一、介绍二、效果三、下载一、介绍 Dynamic Wallpaper for mac版，是一款4K超高清动态壁纸软件，告别单调的静态壁纸，拥抱活泼的动态壁纸…...

编程日记 2025/7/5 17:26:21

MySQL8.4 NDB Cluster 集群配置安装

文章目录前置条件安装步骤环境准备下载安装 RPM 包安装 NDB 组件与常见错误配置节点启用节点配置启动 MySQL 集群验证集群状态关于 ndb_mgm集群管理备份与恢复集群配置管理日志相关 MySQL NDB Cluster 是一个分布式数据库解决方案，提供高可用性、数据分片和自动故…...

编程日记 2025/7/5 18:13:01

多线程开发中List的使用

由于ArrayList在多线程高并发情况下是不安全的，因此要慎用，那么此时如果涉及到集合操作，应该怎么选： 方案一：Vector: 特点：通过给所有方法都用 synchronized 修饰从而保证线程安全， 缺点&…...

编程日记 2025/7/5 17:55:17

Html 页面图标的展示列表

Html 页面中经常需要使用网页图标，这些图标的样式和名称都不容易记住。常用的网页图标展示页面链接记录如下： Material Design Icons 图标库 - FontAwesome 字体图标中文Icon...

编程日记 2025/7/5 18:04:26

Vue实现动态路由的后端控制

在传统开发后台管理系统时，都会涉及权限控制这一功能需求即：根据不同登录的角色账号来使用该账号拥有的功能，也就是说系统左边的菜单栏不是固定不变的。首先是基础路由配置带有component的。 const allRoutes [// 基础路由{path: /,name…...

编程日记 2025/7/5 17:36:29

AI训练中的专有名词大白话版

AI训练中的专有名词大白话版 1. 数据集（Dataset） 👉 人话：AI的“练习题题库”，包含一堆带答案的题目（比如猫狗照片标签）。 🔹 例子： 训练集（练习…...

编程日记 2025/7/5 17:12:53

kafka 与 RocketMQ对比

问题 1: 为什么使用消息队列?服务搭建KafkaRocketMQ编写 docker-compose.yml运行docker compose修改配置文件(解决网络问题)创建一个 topic运行skd尝试发送与接收功能压力测试:Kafkabatch-size(批量大小)分区数:发送数据(MB/s)消费-线程数(15 分区) RocketMQ生产生产者数量批…...

编程日记 2025/7/5 17:56:43

instnatid模型加载器放在哪里

一般根据节点名称来放，如果没有就新建 ComfyUI\models\instantid...

编程日记 2025/7/5 17:44:55

Spring Boot自动配置原理解析

文章目录前言一、SpringBootConfiguration二、EnableAutoConfiguration2.1、AutoConfigurationPackage2.2、Import(AutoConfigurationImportSelector.class) 三、ComponentScan四、自动配置源码4.1、获取所有候选的自动配置类4.2、过滤不满足条件的自动配置总结前言在常规的…...

编程日记 2025/7/5 1:21:05

LlamaIndex实现(基于PDF|CSV文件)RAG检索增强生成:NaiveRAG

什么是 RAG？ RAG（Retrieval-Augmented Generation，检索增强生成） 是一种结合信息检索（Retrieval） 和文本生成（Generation） 的AI技术，用于提升大语言模型（L…...

编程日记 2025/7/5 17:36:29

分布式系统面试总结：3、分布式锁（和本地锁的区别、特点、常见实现方案）

仅供自学回顾使用，请支持javaGuide原版书籍。本篇文章涉及到的分布式锁，在本人其他文章中也有涉及。《JUC：三、两阶段终止模式、死锁的jconsole检测、乐观锁（版本号机制CAS实现）悲观锁》：https://blog.…...

编程日记 2025/7/5 16:14:50

vue3搭建实战项目笔记三

vue3搭建实战项目笔记三 3.1.行高偏移问题3.2.谷歌浏览器上不能定位3.2.2 移动端css隐藏滚动条 3.3.获取列表的数据3.3.1 服务器返回十万条数据3.3.2 分页展示数据3.3.2 防止展示数据为空报错 3.4.上拉加载数据3.4.1 加载更多数据3.4.2 监听页面滚动到底部3.4.3 监听滚动的时机…...

编程日记 2025/7/5 17:24:46

【商城实战(101)】电商未来已来：新技术引领商城发展新航向

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想…...

编程日记 2025/7/5 17:35:45

深入解析最大公约数（GCD）与最小公倍数（LCM）的C++实现

深入解析最大公约数（GCD）与最小公倍数（LCM）的C实现一、GCD与LCM的数学定义 1. 最大公约数（GCD） 两个或多个整数共有约数中最大的一个。例如： GCD(12, 18) 6GCD(21, 14) 7 2. 最小公倍数…...

编程日记 2025/7/5 18:08:42

低功耗LPWAN模块开发指南：远距离无线通信与边缘计算融合实战‌

在远程资产追踪、野外环境监测等场景中，稳定可靠的长距离通信与超低功耗是系统设计的核心挑战。eFish-SBC-RK3576通过 ‌原生双UART接口 USB OTG扩展能力‌ ，可无缝集成主流LPWAN模组（LoRa/NB-IoT），实现“数据采集-边…...

编程日记 2025/7/5 17:52:47

【质量管理】纠正、纠正措施和预防的区别与解决问题的四重境界

“质量的定义就是符合要求”，我们在文章【质量管理】人们对于质量的五个错误观念-CSDN博客中提到过，这也是质量大师克劳士比所说的。“质量的系统就是预防”，防止出现产品不良而造成的质量损失。质量问题的解决可以从微观和宏观两个方面来考…...

编程日记 2025/7/5 17:10:23

STM32F103_LL库+寄存器学习笔记12 - 提高串口通讯程序的健壮性：异常监控 + 超时保护机制

导言首先，进行USART和DMA状态监测、记录异常状态并主动处理，是高健壮性嵌入式系统开发的核心思想之一。这种机制看似复杂，实则能有效保障系统长期、稳定地运行： 提升通讯可靠性。降低维护成本。增强系统自恢复能力。因此&…...

编程日记 2025/7/5 17:52:47

搜索-BFS

马上蓝桥杯了，最近刷了广搜，感觉挺有意思的，广搜题类型都差不多，模板也一样，大家写的时候可以直接套模板这里给大家讲一个比较经典的广搜题-迷宫题目问问能否走到 (n,m) 位置，假设最后一个点是我们的&…...

编程日记 2025/7/5 16:52:20

Keil调试(RTT Debug 断点)

调试打印操作方式接口优缺点串口打印TXRX简单,但是占用串口,速度慢,重定向fputc简单RTT打印SWDIOSWCLK速度快,不占额外接口,直接移植RTT库断点打印SWDIOSWCLKDebug的时候断点操作SWOSWDIOSWCLKSWO需要连接SWO引脚,重定向fputc简单这里我只介绍RTT打印和断点打印; 一. RT…...

编程日记 2025/7/5 17:06:22

【jQuery】插件

目录一、 jQuery插件 1. 瀑布流插件： jQuery 之家 http://www.htmleaf.com/ 2. 图片懒加载： jQuery 插件库 http://www.jq22.com/ 3. 全屏滚动总结不易~ 本章节对我有很大收获，希望对你也是~~~ 一、 jQuery插件 jQuery 功能…...

编程日记 2025/7/5 18:32:36

leetcode 28 Find the Index of the First Occurrence in a String

直接用kmp算法 class Solution { public:int strStr(string haystack, string needle) {return kmp(haystack,needle);}int kmp(std::string &text,std::string &pattern){int n text.size();int m pattern.size();if(m 0)return 0;std::vector<int> next;ne…...

编程日记 2025/7/5 17:08:42

nginx 动静分离

一.动静分离 1.动静分离的好处 Apache Tocmat 严格来说是一款java EE服务器，主要是用来处理 servlet请求。处理css、js、图片这些静态文件的IO性能不够好，因此，将静态文件交给nginx处理，可以提高系统的访问速度，减少…...

编程日记 2025/7/5 18:04:26

1.2 斐波那契数列模型：LeetCode 面试题 08.01. 三步问题

动态规划解三步问题：LeetCode 面试题 08.01. 三步问题 1. 题目链接 LeetCode 面试题 08.01. 三步问题题目要求：小孩上楼梯，每次可以走1、2或3步，计算到达第 n 阶台阶的不同方式数，结果需对 1e9 7 取模。 2. 题目描述…...

编程日记 2025/7/5 17:15:41

关于AutoMapper

AutoMapper 概述 AutoMapper 是一个基于约定的对象 - 对象映射库，主要用于在不同对象类型之间自动映射属性值。它能根据配置的映射规则，将源对象的属性值填充到目标对象中，避免了手动编写大量繁琐的对象映射代码。作用提升开发效率&…...

编程日记 2025/7/5 16:45:19

是否每一层之间都要线性变换和激活函数？

1. 神经网络层的基本组成一个典型的神经网络层通常包含两个步骤： 线性变换（加权求和）： z Wx} b 其中W 是权重矩阵，b是偏置向量，是输入，z 是线性输出。激活函数： 其中&#xff0c…...

编程日记 2025/7/5 17:39:49

golang 的reflect包的常用方法

目录 reflect 包方法总结类型 (Type) 方法值 (Value) 方法代码示例： reflect 包方法总结 p : Person{Name: "小明", Age: 22}t : reflect.TypeOf(&p)v : reflect.ValueOf(p) 类型 (Type) 方法方法名描述示例　　　　　　　　　　　　　　　Na…...

编程日记 2025/7/5 17:37:10

CentOS 7 安装 EMQX (MQTT)

CentOS 7 安装 EMQX 通过 Yum 源安装 EMQX 支持通过 Yum 源安装，您可通过以下 Yum 命令从中自动下载和安装 EMQX。通过以下命令配置 EMQX Yum 源： curl -s https://assets.emqx.com/scripts/install-emqx-rpm.sh | sudo bash安装以下依赖项&#xff…...

编程日记 2025/7/5 17:34:13

Flask项目部署:Flask + uWSGI + Nginx

目录 1,网络架构 2,环境安装 2.1,安装yum:Shell软件包管理器 2.2 安装python 2.3 安装uWSGI 2.4 安装Flask 3,上传工程包到服务器,打包Flask项目 4,创建和配置 uwsgi 配置文件 uwsgi.ini 4.1配置文件 4.2配置文件注释详解 5,启动服务 6,安装nginx 7,nginx配置 8,…...

编程日记 2025/7/5 17:07:02

软件工程面试题（十五）

1、servlet 创建过程以及ruquest，response，session的生命周期？ Servlet的创建过程：第一步 public class AAA extends HttpServlet{ 实现对应的doxxx方法 } 第二步: 在web.xml中配置 <servlet> <servlet-name></servlet-name> <servlet-c…...

编程日记 2025/7/5 18:05:12

当Kafka化身抽水马桶：论组件并发提升与系统可用性的量子纠缠关系

《当Kafka化身抽水马桶：论组件并发提升与系统可用性的量子纠缠关系》引言：一场OOM引发的血案某个月黑风高的夜晚，监控系统突然发出刺耳的警报——我们的数据发现流水线集体扑街。事后复盘发现：Kafka集群、Gateway、Discovery服…...

编程日记 2025/7/5 17:55:17

python和Java的区别

Python和Java是两种流行的编程语言，它们之间有一些重要的区别： 语法：Python是一种动态类型的脚本语言，语法简洁明了，通常使用缩进来表示代码块。Java是一种静态类型的编程语言，语法更为严格，需要…...

编程日记 2025/7/5 18:02:55

QFlightInstruments飞行仪表控件库

QFlightInstruments 是一个开源的飞行仪表控件库，专为基于 Qt 的应用程序设计。它提供了一系列仿真实飞机仪表的组件，适用于飞行模拟软件、航空电子系统或任何需要高仿真飞行仪表显示的项目。主要功能高仿真飞行仪表：包括空速表、高度表、…...

编程日记 2025/7/5 18:07:50

可发1区的超级创新思路（python\matlab实现）：MPTS+Lconv+注意力集成机制的Transformer时间序列模型

首先声明，该模型为原创！原创！原创！且该思路还未有成果发表，感兴趣的小伙伴可以借鉴！应用场景该模型主要用于时间序列数据预测问题，包含功率预测、电池寿命预测、电机故障检测等等。一、模型整体架构（本文以光伏功率预测为例）本模型由多尺度特征提取模块（MPTS）…...

编程日记 2025/6/28 7:08:56

Nginx — Nginx版本升级

例如：将10.224.11.220、10.224.11.221、10.208.11.220 三台服务器上的Nginx从1.21.1版本升级到1.23.3版本。一、Nginx升级步骤步骤一：备份老版本的Nginx（10.224.11.220、10.224.11.221、10.208.11.220） #关闭Nginx cd /usr/l…...

编程日记 2025/7/3 19:44:39

CSS学习笔记6——网页布局

目录一、元素的浮动属性、清除浮动清除浮动的其他方法 1、使用空标签清除浮动影响 2、使用overflow属性清除浮动 3、使用伪元素清除浮动影响原理 overflow属性二、元素的定位 1、相对定位 2、绝对定位编辑 3、固定定位 z-index层叠等级属性一、元素的浮动…...

编程日记 2025/7/5 17:38:43

C语言【指针二】

引言介绍：const修饰指针，野指针应用：指针的使用（strlen的模拟实现），传值调用和传指调用一、const修饰指针 1.const修饰变量简单回顾一下前面学过的const修饰变量：在变量前面加上const&…...

编程日记 2025/6/28 4:06:54

第十六届蓝桥杯模拟二（串口通信）

由硬件框图可以知道我们要配置LED 和按键一.LED 先配置LED的八个引脚为GPIO_OutPut，锁存器PD2也是，然后都设置为起始高电平，生成代码时还要去解决引脚冲突问题二.按键按键配置，由原理图按键所对引脚要GPIO_Input 生成代码，在文件夹中添加code文件夹，code中添加fun.…...

编程日记 2025/6/30 20:20:10

Java List 集合取交集、并集、差集、补集

在Java中，集合操作是编程中非常常见的需求，尤其是在处理数据集合时，如List、Set等。本文将详细介绍如何在Java中实现List集合的交集、并集、差集和补集操作，并提供代码示例和实现方法。 1. 交集操作交集是指两个集合中都存在的元…...

编程日记 2025/6/27 11:24:53

SkyWalking+Springboot实战

1、下载SkyWalking APM 1.手动下载 Downloads | Apache SkyWalkinghttps://skywalking.apache.org/downloads/ 2.链接下载 https://dlcdn.apache.org/skywalking/10.2.0/apache-skywalking-apm-10.2.0.tar.gzhttps://dlcdn.apache.org/skywalking/10.2.0/apache-skywalking-…...

编程日记 2025/7/5 4:37:25

【小兔鲜】day01 项目、Vue3介绍、组合式API、小案例

【小兔鲜】day01 项目、Vue3介绍、组合式API、小案例 0. 市场上Vue前端工程师用到的技术1. Vue3小兔鲜先导课1.1 技术栈1.2 项目规模1.3 项目亮点1.4 课程安排 2. 认识Vue32.1 Vue3组合式API体验 3. create-vue创建Vue3项目3.1 新建项目结构3.2 小节3.3 补充说明npm init vuela…...

编程日记 2025/7/4 14:17:52