vue3+vite+ts安装wangeditor富文本编辑器
需求:
实现粘贴,上传图片时本地渲染但并不实现上传功能,工具栏移除不需要的工具
安装方法看官网
安装 | wangEditor
封装子组件
wangEditor.vue
<template><div><div style="border: 1px solid #ccc; margin-top: 10px"><Toolbar:editor="editorRef":defaultConfig="toolbarConfig":mode="mode"style="border-bottom: 1px solid #ccc"/><Editor:defaultConfig="editorConfig":mode="mode"v-model="valueHtml":style="{ height: editorHeight, overflowY: 'hidden' }"@onCreated="handleCreated"@onChange="handleChange"@onDestroyed="handleDestroyed"@onFocus="handleFocus"@onBlur="handleBlur"@customPaste="customPaste"/></div></div>
</template>
ts文件
export interface ViewDataType {visible: booleanitem: {id: stringtopDate: stringtitleTime: stringauthor: stringaddress: stringcontent1: stringcontent3: stringcontent5: stringcontent6: stringcontent7: stringimgUrl: string[key: string]: string // 允许动态属性}
}
// 列表编辑弹框中的类型定义
export interface EditDataType {visible: boolean;datas: {id: stringtopDate: stringtitleTime: stringauthor: stringaddress: stringimgUrl: string[key: string]: string // 允许动态属性}RuleForm :{theme: stringbeginTime: stringcontent: string}
}// 上传功能export type InsertFnType = (url: string,alt: string,href: string,style: string) => voidjs
<script lang="ts" setup>import '@wangeditor/editor/dist/css/style.css'import {onBeforeUnmount,ref,shallowRef,onMounted,PropType,nextTick,} from 'vue'import { Editor, Toolbar } from '@wangeditor/editor-for-vue'import { DomEditor } from '@wangeditor/editor'// 接收父组件传递的参数const props = defineProps({initialValue: {type: String,default: '',},editorHeight: {type: String,default: '200px',},toolbarConfig: {type: Object as PropType<Record<string, any>>,default: () => ({}),},editorConfig: {type: Object as PropType<Record<string, any>>,default: () => ({ placeholder: '请输入内容...' }),},mode: {type: String,default: 'default',},})// 编辑器实例，必须用 shallowRef，重要！const editorRef = shallowRef<typeof Editor | null>(null)// 内容 HTMLconst valueHtml = ref<string>(props.initialValue)const emit = defineEmits(['handleChange','handleFocus','handleDestroyed','handleBlur','customPaste',])// 模拟 ajax 异步获取内容onMounted(() => {// setTimeout(() => {// valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'// }, 1500)})// 编辑器回调函数// const handleCreated = (editor: typeof Editor) => {const handleCreated = (editor) => {nextTick(() => {editorRef.value = editor // 记录 editor 实例，重要！const toolbar = DomEditor.getToolbar(editor)const curToolbarConfig = toolbar?.getConfig()console.log(' 当前菜单排序和分组', toolbar) // 当前菜单排序和分组console.log('curToolbarConfig', curToolbarConfig?.toolbarKeys) //查看工具栏内容})}// 触发事件实现双向绑定const handleChange = (editor: typeof Editor) => {emit('handleChange', editor.getHtml())}// 卸载事件const handleDestroyed = (editor: typeof Editor) => {emit('handleDestroyed', editor)}// 失去焦点事件const handleFocus = (editor: typeof Editor) => {emit('handleFocus', editor)}const handleBlur = (editor: typeof Editor) => {emit('handleBlur', editor)}// 粘贴事件const customPaste = (editor: typeof Editor,event: ClipboardEvent,callback: (value: boolean) => void) => {emit('customPaste', event, editor, callback)}// 组件销毁时，也及时销毁编辑器，重要！onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})// 提交事件给父组件// const emit = defineEmits(['editor'])// emit('editor', editorRef.value)// 导出defineExpose({editorRef,})
</script>
父组件调用并使用
<wangEditor:initialValue="ruleForm.content":editorHeight="'200px'":toolbarConfig="toolbarConfig":editorConfig="editorConfig":mode="'default'"ref="wangEditorRef"@customPaste="customPaste"@handleChange="handleChange"/><script lang="ts" setup>import { onMounted, reactive, ref, unref } from 'vue'import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'import { EditDataType, InsertFnType } from '@/types/messages/securityInfoList'import wangEditor from './wangEditor.vue'import { IToolbarConfig } from '@wangeditor/editor'const headerTitle = ref('编辑安全资讯')const props = withDefaults(defineProps<EditDataType>(), {visible: false,})const emit = defineEmits(['closeApply'])// 来获取表单实例，从而调用表单的验证方法const ruleFormRef = ref<FormInstance>()// 编辑表单数据const ruleForm = reactive<EditDataType['RuleForm']>({content: '',})// 表单数据检验const rules = reactive<FormRules<EditDataType['RuleForm']>>({content: [{ required: true, message: '安全资讯内容不能为空!', trigger: 'blur' },],})// 加载完成onMounted(() => {console.log('props', props.datas)Object.keys(ruleForm).forEach((key) => {ruleForm[key] = props.datas[key]})})const closeApply = () => {// 清空表单ruleFormRef.value?.resetFields()emit('closeApply')}// 定义防抖函数const debounce = (func: Function, delay: number) => {let timer: NodeJS.Timeoutreturn (...args: any[]) => {clearTimeout(timer)timer = setTimeout(() => {func(...args)}, delay)}}// 子组件触发事件const handleChange = (value) => {console.log('子组件触发事件', value)ruleForm.content = value}// 定义保存按钮点击事件处理函数const handlerSave = () => {// 在这里执行保存操作的代码submitForm(ruleFormRef.value)} // 设置防抖时间间隔为1秒// 保存表单检验const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('保存提交表单!')// 清空表单ruleFormRef.value?.resetFields()} else {console.log('缺少必填内容!', fields)}})}// 定义编辑器工具栏const toolbarConfig: Partial<IToolbarConfig> = {// 配置工具栏上移除网络上传图片,视频,表格,代码块,行内代码excludeKeys: ['insertImage','group-video','insertTable','codeBlock','code',],}// 配置编辑器const editorConfig = ref<Record<string, any>>({placeholder: '请输入安全资讯内容==--父组件',MENU_CONF: {uploadImage: {// 选择文件时的类型限制，默认为['image/jpeg', 'image/png', 'image/gif']allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif'],async customUpload(file: File, insertFn: any) {const reader = new FileReader()reader.onload = async () => {if (reader.result) {// reader.result 包含了 Base64 编码的文件数据const base64Data = reader.result as stringconst imgUrl = base64Data //base64传为img标签元素才能设置宽高const imgHtml = `<img src="${imgUrl}" alt="image" style="width:200px;height:200px;"/>`let editorRefs = await wangEditorRef?.value.editorRefconst editor = unref(editorRefs)if (editor) {// 通过 dangerouslyInsertHtml 插入图片的 HTML，控制宽高editor.dangerouslyInsertHtml(imgHtml)}// 插入图片到编辑器// insertFn(imgHtml, file.name, '', '')}}// 读取文件并将其转换为 Base64 编码的字符串reader.readAsDataURL(file)},},},})// 粘贴事件const customPaste = (event, editor, callback) => {const items = event.clipboardData?.itemsif (!items) returnfor (let i = 0; i < items.length; i++) {const item = items[i]if (item.type.indexOf('image') !== -1) {const file = item.getAsFile()if (file) {// 阻止默认的上传行为event.preventDefault()// 创建一个 FileReader 来读取图片数据const reader = new FileReader()reader.onload = (e: ProgressEvent<FileReader>) => {if (e.target?.result) {// 将图片数据转换为 base64 格式const base64Data = e.target.result as string// 创建一个 img 元素并插入到编辑器中setHtmlconst img = new Image()img.src = base64Dataconst imgHtml = `<img src="${base64Data}" alt="image" style="width:200px;height:200px;"/>`let editorRefs = wangEditorRef?.value.editorRefconst editor = unref(editorRefs)if (editor) {// 通过 dangerouslyInsertHtml 插入图片的 HTML，控制宽高editor.dangerouslyInsertHtml(imgHtml)}}}reader.readAsDataURL(file)}}}// 返回值（注意，vue 事件的返回值，不能用 return）// callback(false) // 返回 false ，阻止默认粘贴行为callback(true) // 返回 true ，继续默认的粘贴行为}defineExpose({headerTitle,})
</script>
效果图
相关文章：
vue3+vite+ts安装wangeditor富文本编辑器
需求: 实现粘贴,上传图片时本地渲染但并不实现上传功能,工具栏移除不需要的工具 安装方法看官网 安装 | wangEditor 封装子组件 wangEditor.vue <template><div><div style"border: 1px solid #ccc; margin-top: 10px"><Toolbar:editor&qu…...
PostIn教程-安装配置
PostIn是一款国产开源免费的接口管理工具，包含项目管理、接口调试、接口文档设计、接口数据MOCK等模块，支持常见的HTTP协议、websocket协议等，支持免登陆本地接口调试，同时可以对项目进行灵活的成员权限、消息通知管理等。 1、服务…...
SpringBoot读取配置优先级顺序是什么？
Spring Boot外部化配置详解 目录 引言Spring Boot外部化配置概述配置加载优先级配置加载顺序详解实际案例总结 引言 Spring Boot因其“开箱即用”的特性，极大地简化了Java应用的开发和部署过程。它通过外部化配置机制，允许开发者根据不同的环境&#x…...
群晖docker获取私有化镜像http: server gave HTTP response to HTTPS client].
群晖docker获取私有化镜像提示http: server gave HTTP response to HTTPS clien 问题描述 层级时间用户事件Information2023/07/08 12:47:45cxlogeAdd image from xx.xx.31.240:1923/go-gitea/gitea:1.19.3Error2023/07/08 12:47:48cxlogeFailed to pull image [Get "http…...
MySQL8【学习笔记】
第一章前提须知 1.1 需要学什么 Dbeaver 的基本使用SQL 语句：最重要的就是查询（在实战的时候，你会发现我们做的绝大部分工作就是 “查询”）MySQL 存储过程（利用数据库底层提供的语言，去进行业务逻辑的封装…...
汇编实验·子程序设计
一、实验目的： 1.掌握汇编中子程序编写方法 2.掌握程序传递参数的基本方法，返回值的方法。 3.掌握理解子程序（函数）调用的过程 二、实验内容 1.编写汇编语言子程序，实现C表达式SUM=X+Y的功能，具体要求： 1)函数的参数传递采用寄存器实现 2)函数的参数传递采用堆栈…...
EDI安全：2025年数据保护与隐私威胁应对策略
在数字化转型的浪潮中，电子数据交换（EDI）已成为企业间信息传递的核心基础设施。然而，随着数据规模的指数级增长和网络威胁的日益复杂化，EDI安全正面临前所未有的挑战。展望2025年，企业如何构建一套全面、高…...
Cloudpods是一个开源的Golang实现的云原生的融合多云/混合云的云平台，也就是一个“云上之云”。
Cloudpods是一个开源的Golang实现的云原生的融合多云/混合云的云平台，也就是一个“云上之云”。Cloudpods不仅可以管理本地的虚拟机和物理机资源，还可以管理多个云平台和云账号。Cloudpods隐藏了这些异构基础设施资源的数据模型和API的差异，对…...
C++小病毒-1.0勒索
内容供学习使用,不得转卖,代码复制后请1小时内删除,此代码会危害计算机安全,谨慎操作 在C20环境下,并在虚拟机里运行此代码! #include <iostream> #include <windows.h> #include <shellapi.h> #include <stdio.h> #include <fstream> #include…...
MySQL入门（数据库、数据表、数据、字段的操作以及查询相关sql语法）
天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。…...
AIGC视频扩散模型新星：Video 版本的SD模型
大家好，这里是好评笔记，公主号：Goodnote，专栏文章私信限时Free。本文详细介绍慕尼黑大学携手 NVIDIA 等共同推出视频生成模型 Video LDMs。NVIDIA 在 AI 领域的卓越成就家喻户晓，而慕尼黑大学同样不容小觑，…...
08-ArcGIS For JavaScript-通过Mesh绘制几何体（Cylinder，Circle，Box，Pyramid）
目录 概述代码实现1、Mesh.createBox2、createPyramid3、Mesh.createSphere4、Mesh.createCylinder 完整代码 概述 对于三维场景而言，二位的点、线、面，三维的圆、立方体、圆柱等都是比较常见的三维对象，在ArcGIS For JavaScript中我们知道点…...
在 Go 语言中如何高效地处理集合
文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...
Python的进程和线程
ref 讲个故事先 这就像一个舞台（CPU核心）， 要供多个剧组演出多个剧目（进程）， 剧目中有多个各自独立的角色（线程），有跑龙套的，有主角，第一…...
基于单片机的智能台灯设计
摘要： 方向和亮度，采用的是手动调节。而对于儿童来说，他们通常不知道如何调整以及调整到何种程度。本文设计了一款智能台灯，当有人的 台灯是用于阅读学习而设计使用的灯，一般台灯用的灯泡是白炽灯、节能灯泡以及市面上流行的护眼台灯，可以调节高度、光照的时候，可以根据…...
vue3案例：筛选部门、选择人员案例组件
可以控制可以选多人，或者只能选单人可以做部门筛选再选人，没有部门情景，直接显示全部人员，有输入框可以搜索人员 ✨一、实现功能 需求： 可以灵活控制，多选或者单选人员配合部门进行部门下的人员筛选 详细…...
Spring MVC：综合练习 - 深刻理解前后端交互过程
目录 1. Lombok 1.1 引入 lombok 依赖 1.1.1 通过 Maven 仓库引 lombok 依赖 1.1.2 通过插件引入 lombok 依赖 1.2 Data 1.3 其他注解 2. 接口文档 2.1 接口(api) 2.2 接口文档 3. 综合练习 - 加法计算器 3.1 定义接口文档 3.2 准备工作 - 前端代码 3.3 后端代码 …...
Debian常用命令
以下是完整的 Linux 命令大全，适用于 Debian、Ubuntu 及其衍生系统，涵盖系统管理、文件操作、磁盘管理、用户管理、网络调试、安全、进程管理等多个方面。 目录 基本命令关机与重启文件和目录管理文件搜索挂载文件系统磁盘空间管理用户和群组管理文件和…...
)
【FFmpeg】FLV 格式分析 ③ ( Tag Body 数据块体结构 - Vedio Data 视频数据 )
文章目录 一、Tag Body 数据块体结构 - Video Data 视频数据1、Vedio Data 视频数据 类型标识2、Vedio Data 视频数据 结构分析3、Composition Time Offset 字段涉及的时间计算4、AVC Packet Type 字段说明① AVC Sequence Header 类型② AVC NALU 类型③ AVC End of Sequence …...
开源鸿蒙开发者社区记录
lava鸿蒙社区可提问 Laval社区 开源鸿蒙项目 OpenHarmony 开源鸿蒙开发者论坛 OpenHarmony 开源鸿蒙开发者论坛...
MinIO的安装与使用
目录 1、安装MinIO 1.1 下载 MinIO 可执行文件 1.2 检查 MinIO 是否安装成功 1.3 设置数据存储目录 1.4 配置环境变量（可选） 1.5 编写启动的脚本 1.6 开放端口 1.7 访问 2、项目实战 2.1 引入依赖 2.2 配置yml文件 2.3 编写Minio配置类 2.4…...
【分布式日志篇】从工具选型到实战部署：全面解析日志采集与管理路径
网罗开发 （小红书、快手、视频号同名） 大家好，我是 展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等…...
Spring Boot/MVC
一、Spring Boot的创建 1.Spring Boot简化Spring程序的开发,使用注解和配置的方式开发 springboot内置了tomact服务器 tomact:web服务器,默认端口号8080,所以访问程序使用8080 src/main/java:Java源代码 src/main/resource:静态资源或配置文件,存放前端代码(js,css,html) s…...
uni-app连接EventSource
前言 uniapp默认是不支持event-source，这里是借助renderjs进行SSE连接 正文 引入event-source-polyfill 这里演示的是直接将代码下载到本地进行引入 下载地址 把里面的eventsource.min.js文件放到项目中的static文件夹 项目封装event-source.vue组件 <templ…...
[SCTF2019]babyre
[SCTF2019]babyre 一、查壳 无壳，64位 二、IDA分析 1.没有main，那就shifef12 点击： 再进： 都是花指令，所以要先解决花指令 三、解决花指令，得到完整的 main 往上面翻，注意看爆红的&#x…...
简洁实用的wordpress外贸模板
简洁、实用、大气的wordpress外贸模板，适合跨境电商搭建外贸B2B产品展示型网站。 简洁实用的wordpress外贸模板 - 简站WordPress主题简洁、实用、大气的wordpress外贸模板，适合跨境电商搭建外贸B2B产品展示型网站。https://www.jianzhanpress.com/?p828…...
每日一题 414. 第三大的数
414. 第三大的数 简单 class Solution { public:int thirdMax(vector<int>& nums) {int n nums.size();long first , second,third;first second third LONG_MIN ;bool find false;for(auto num : nums){if(num > first){ third second;second first…...
TVM框架学习笔记
TVM是陈天齐等人一个开源的深度学习编译器栈，用于优化和部署机器学习模型到各种硬件后端。它支持多种前端框架，如TensorFlow、PyTorch、ONNX等，并且可以在不同的硬件平台上运行，包括CPU、GPU和专用加速器。官方文档： Apache TVM Documentation — tvm 0.20.dev0 documenta…...
)
Codeforces Round 998 (Div. 3)
文章目录 EF E 原题链接 思路： 题目要求对于 G 中存在路径的两个点，在 F 中也必须存在路径，不是两个点存在直连的边。 两个点存在路径，说明俩个点在同一个连通块。我们用并查集来维护图的连通块。 最终的要求就是把 F 的并查集通…...
Vue.js 渐进式增强：如何逐步为传统项目注入活力
Vue.js 是一个渐进式框架，这意味着你可以将它逐步引入到现有项目中，而无需彻底重构。渐进式增强特别适合那些已经在使用传统服务器渲染框架（如 PHP、Django、Laravel）的项目，为它们增加动态交互功能。本篇教程将介绍如…...
【算法】经典博弈论问题——巴什博弈 python
目录 前言巴什博弈(Bash Game)小试牛刀PN分析实战检验总结 前言 博弈类问题大致分为： 公平组合游戏、非公平组合游戏（绝大多数的棋类游戏）和 反常游戏 巴什博弈(Bash Game) 一共有n颗石子，两个人轮流拿，每次可以拿1~m颗…...
【技术洞察】2024科技绘卷：浪潮、突破、未来
涌动与突破 2024年，科技的浪潮汹涌澎湃，人工智能、量子计算、脑机接口等前沿技术如同璀璨星辰，方便了大家的日常生活，也照亮了人类未来的道路。这一年，科技的突破与创新不断刷新着人们对未来的想象。那么回顾2024年的科…...
【0x06】HCI_Authentication_Complete事件详解
目录 一、事件概述 二、事件格式及参数 2.1. HCI_Authentication_Complete事件格式 2.2. Status 2.3. Connection_Handle 三、事件的生成于处理 3.1. 事件生成 3.2. 认证流程 3.2.1. 发送认证请求 3.2.2. 处理流程 3.2.3. 示例代码 四、应用场景 4.1. 设备配对与连…...
JS-Web API -day03
一、事件流 1.1 事件流与两个阶段说明 事件流 指的是事件完整执行过程中的流动路径 假设页面有个div标签，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段 捕获阶段：Document - Element html - Elementbody - Element div…...
电子应用设计方案103：智能家庭AI浴缸系统设计
智能家庭 AI 浴缸系统设计 一、引言 智能家庭 AI 浴缸系统旨在为用户提供更加舒适、便捷和个性化的沐浴体验，融合了人工智能技术和先进的水疗功能。 二、系统概述 1. 系统目标 - 实现水温、水位和水流的精确控制。 - 提供多种按摩模式和水疗功能。 - 具备智能清洁…...
linux静态库+嵌套makefile
linux静态库嵌套makefile 文章目录 linux静态库嵌套makefile1、概述2、代码结构3、代码1）main.c2）主makefile3）fun.c4）func.h5）静态库makefile 4、运行效果1）在main.c目录下执行make2）到output目…...
AIP-127 HTTP和gRPC转码
编号127原文链接AIP-127: HTTP and gRPC Transcoding状态批准创建日期2019-08-22更新日期2019-08-22 遵守面向资源设计的API使用RPC进行定义，但面向资源设计框架允许这些API表现为整体上符合REST/JSON约定的接口。这一点很重要，可以帮助开发者利用现有知…...
代码随想录算法训练营day32
代码随想录算法训练营 —day32 文章目录 代码随想录算法训练营前言一、动态规划理论基础二、509. 斐波那契数动态规划动态规划优化空间版递归法 三、70. 爬楼梯动态规划动态规划空间优化 746. 使用最小花费爬楼梯动态规划空间优化 总结 前言 今天是算法营的第32天，…...
设计模式的艺术-开闭原则
原则使用频率图（仅供参考） 1.如何理解开闭原则 简单来说，开闭原则指的是 “对扩展开放，对修改关闭”。 当软件系统需要增加新的功能时，应该通过扩展现有代码的方式来实现，而不是去修改已有的代码。 例如我…...
【易康eCognition实验教程】003：点云数据加载浏览与操作详解
文章目录 一、加载并创建点云数据二、三维浏览1. 点云模式2. 点云视图设置 三、使用点云 一、加载并创建点云数据 本实验点云数据位于专栏配套实验数据包中的data003.rar中的terrian.las，解压后进行以下实验操作。 打开ecognition软件，点击【File】→【…...
海外雅思备考经验
1.18号斯图雅思考试 第一次考雅思，第一次在国外考雅思！ 最近在德国斯图加特联培，报考了1月18号的雅思机考，下面分享一些考试经验. ✌️考试地点 EZ Plus WEST Hasenbergstr. 31/1,, in the backyard of Hasenbergstrae 31, Stuttg…...
Oracle之Merge into函数使用
Merge into函数为Oracle 9i添加的语法，用来合并update和insert语句。所以也经常用于update语句的查询优化： 一、语法格式： merge into A using B on (A.a B.a) --注意on后面带括号，且不能更新join的字段 when matched then upd…...
Spring Boot 自定义属性
Spring Boot 自定义属性 在 Spring Boot 应用程序中，application.yml 是一个常用的配置文件格式。它允许我们以层次化的方式组织配置信息，并且比传统的 .properties 文件更加直观。 本文将介绍如何在 Spring Boot 中读取和使用 application.yml 中的配…...
前端面试题-问答篇-5万字！
1. 请描述CSS中的层叠（Cascade）和继承（Inheritance）规则，以及它们在实际开发中的应用。 在CSS中，层叠（Cascade）和继承（Inheritance）是两个关键的规则&#x…...
2025年1月21日（树莓派点亮呼吸灯第一次修改）
系统信息： Raspberry Pi Zero 2W 系统版本： 2024-10-22-raspios-bullseye-armhf Python 版本：Python 3.9.2 已安装 pip3 支持拍摄 1080p 30 (1092*1080), 720p 60 (1280*720), 60/90 (640*480) 已安装 vim 已安装 git 学习目标：…...
【Linux网络编程】传输层协议
目录 一，传输层的介绍 二，UDP协议 2-1，UDP的特点 2-2，UDP协议端格式 三，TCP协议 3-1，TCP报文格式 3-2，TCP三次握手 3-3，TCP四次挥手 3-4，滑动窗口 3-5…...
JavaScript系列（41）--状态管理实现详解
JavaScript状态管理实现详解 🔄 今天，让我们深入探讨JavaScript的状态管理实现。状态管理是现代前端应用中的核心概念，它帮助我们有效地管理和同步应用数据。 状态管理基础概念 🌟 💡 小知识：状态管理是一…...
flume和kafka整合 flume和kafka为什么一起用？
Flume和Kafka一起使用的主要原因是为了实现高效、可靠的数据采集和实时处理。12 实时流式日志处理的需求 Flume和Kafka结合使用的主要目的是为了完成实时流式的日志处理。Flume负责数据的采集和传输，而Kafka则作为消息缓存队列，能够有效地缓冲数据，防止数据堆积或丢…...
【深度学习】 自动微分
自动微分 正如上节所说，求导是几乎所有深度学习优化算法的关键步骤。 虽然求导的计算很简单，只需要一些基本的微积分。 但对于复杂的模型，手工进行更新是一件很痛苦的事情（而且经常容易出错）。 深度学习框架通过自动…...
什么是三高架构?
大家好，我是锋哥。今天分享关于【什么是三高架构?】面试题。希望对大家有帮助； 什么是三高架构? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 “三高架构”通常是指高可用性（High Availability）、高性能ÿ…...