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

wangEditor富文本插件在vue项目中使用和媒体上传的实现

news 来源：原创 2025/5/15 4:30:52

wangEditor是前端一个比较流行的简洁易用，功能强大的前端富文本编辑器，支持 JS Vue React，提供了很多丰富的功能，下面手把手教你实现wangWditor富文本插件在vue项目中配置，保存、图片上传等功能。无脑ctrl+c即可
基本功能入如下：在这里插入图片描述

template

<div class="editor-wrap"><p class="title">发布文章</p><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden; border-bottom: 1px solid #ccc"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/>
</div>

script

<script setup lang="ts">
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ref, onBeforeUnmount, onMounted, shallowRef, watchEffect, onUnmounted } from 'vue'
// import '@wangeditor/editor/dist/css/style.css'   // 试了几次无效，直接把样式复制到本地后引入
import '@/styles/editorStyle.css'
import { getToken } from '@/utils/cookie'// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 定义组件的本地状态
const mode = ref('simple') // 或 'default, simple'
// 内容 HTML
const valueHtml = ref('<p>hello</p>')// 模拟 ajax 异步获取内容
onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'}, 1500)
})// 菜单栏配置项，下面卧虎列出所有菜单配置，直观展示所有菜单,使用editorRef.value.getAllMenuKeys()也可以获取全部菜单的key
const toolbarConfig = {}  
toolbarConfig.toolbarKeys = ["bold","underline","italic","through",// "code",// "sub",// "sup","clearStyle","color","bgColor","fontSize","fontFamily","indent","delIndent","justifyLeft","justifyRight","justifyCenter","justifyJustify","lineHeight",// "insertImage",// "deleteImage",// "editImage",// "viewImageLink",// "imageWidth30",// "imageWidth50",// "imageWidth100",// "divider",// "emotion",// "insertLink",// "editLink",// "unLink",// "viewLink","codeBlock","blockquote","headerSelect","header1","header2","header3","header4","header5","todo","redo","undo",// "fullScreen",// "enter",// "bulletedList",// "numberedList",// "insertTable",// "deleteTable",// "insertTableRow",// "deleteTableRow",// "insertTableCol",// "deleteTableCol",// "tableHeader",// "tableFullWidth",// "insertVideo",// "uploadVideo",// "editVideoSize","uploadImage",// "codeSelectLang"
]//编辑器配置
const editorConfig = { placeholder: '请输入内容...',MENU_CONF: {// 图片上传uploadImage: {server: '/dev-api/upload-image',   //上传的api地址// fieldName: 'img',   //这个是form-data流上传的文件名，自己根据需求修改fieldName: 'file',// 单个文件的最大体积限制，默认为 2MmaximgSize: 10 * 1024 * 1024, // 10M// 最多可上传几个文件，默认为 100maxNumberOfimgs: 10,// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedimgTypes: ['image/*'],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {// token: 'xxx',// otherKey: 'yyy'// img:''},// 将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// 自定义增加 http  headerheaders: {// 这里可以新增一些header自定义参数authorization: getToken(),// Accept: 'text/x-json',// otherKey: 'xxx'},// 跨域是否传递 cookie ，默认为 falsewithCredentials: true,// 超时时间，默认为 10 秒timeout: 10 * 1000, //10 秒// 上传前onBeforeUpload(imgs) {ElMessage({message: '图片正在上传中,请耐心等待',grouping: true,duration: 0,customClass: 'uploadTip',iconClass: 'el-icon-loading',showClose: true});return imgs;},// 自定义插入图片customInsert(res, insertFn) {// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理// 先关闭等待的ElMessageElMessage.closeAll();if (res.code === 200) {ElMessage.success({message: "图片上传成功",grouping: true,});// 获取到服务端响应的图片链接插入编辑器insertFn(res.data.url);} else {ElMessage.error({message: "图片上传失败，请重新尝试",grouping: true,});}},// 单个文件上传成功之后onSuccess(img, res) {// console.log(`${img.name} 上传成功`, res);console.log('img', img)console.log('res', res)},// 单个文件上传失败onFailed(img, res) {console.log(`${img.name} 上传失败`, res);},// 上传进度的回调函数onProgress(progress) {console.log('progress', progress);// progress 是 0-100 的数字},// 上传错误，或者触发 timeout 超时onError(img, err, res) {console.log(`${img.name} 上传出错`, err, res);}}},
}// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()
})// 定义一个 handleCreated 函数，用于记录 editor 实例
const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！
}
</script>

这样一个非常简单又强大的富文本编辑器就实现了，效果如下：
在这里插入图片描述
视频等其他文件上传同理。
富文本内容保存直接使用valueHtml或者editorRef.value.getHtml()即可。

相关文章：

wangEditor富文本插件在vue项目中使用和媒体上传的实现

wangEditor是前端一个比较流行的简洁易用&#xff0c;功能强大的前端富文本编辑器&#xff0c;支持 JS Vue React&#xff0c;提供了很多丰富的功能&#xff0c;下面手把手教你实现wangWditor富文本插件在vue项目中配置&#xff0c;保存、图片上传等功能。无脑ctrlc即可 基本功…...

编程日记 2025/5/15 4:30:52

FFmpeg 的常用API

FFmpeg 的常用API 附录&#xff1a;FFmpeg库介绍 库介绍libavcodec音视频编解码核心库编码 (avcodec_send_frame, avcodec_receive_packet)。解码 (avcodec_send_packet, avcodec_receive_frame)。libavformat提供了音视频流的解析和封装功能&#xff0c;多种多媒体封装格式&…...

编程日记 2025/5/15 4:26:30

【软件】教务系统成绩提交工具使用步骤

【软件】教务系统成绩提交工具使用步骤 零、快速开始 安装 与大多数软件一样&#xff0c;安装步骤很简单&#xff0c;一直点击“下一步”即可快速完成安装&#xff0c;安装完成后&#xff0c;在桌面会有一个软件图标&#xff0c;双击即可打开软件主界面。 导入成绩到Excel中…...

编程日记 2025/5/10 14:47:37

es快速扫描

介绍 Elasticsearch简称es&#xff0c;一款开源的分布式全文检索引擎 可组建一套上百台的服务器集群&#xff0c;处理PB级别数据 可满足近实时的存储和检索 倒排索引 跟正排索引相对&#xff0c;正排索引是根据id进行索引&#xff0c;所以查询效率非常高&#xff0c;但是模糊…...

编程日记 2025/5/13 6:24:05

埃斯顿机器人程序模版案例，欢迎指点

埃斯顿机器人程序模版案例&#xff0c;欢迎指点...

编程日记 2025/4/21 2:02:07

解锁成长密码：探寻刻意练习之道

刻意练习&#xff0c;真有那么神&#xff1f; 在生活中&#xff0c;你是否有过这样的困惑&#xff1a;每天苦练英语口语&#xff0c;可一到交流时还是支支吾吾&#xff1b;埋头苦学吉他&#xff0c;却总是卡在几个和弦转换上&#xff1b;工作多年&#xff0c;业务能力却似乎陷入…...

编程日记 2025/5/10 14:33:59

对外发PDF设置打开次数

在线 Host PDF 文件并对链接进行限制——保障文件安全的最佳解决方案 在数字化办公和远程协作日益普及的今天&#xff0c;如何安全高效地分享 PDF 文件成为许多用户关注的重点。MaiPDF 作为一款功能强大的在线工具&#xff0c;不仅支持在线 host PDF 文件&#xff0c;还提供多…...

编程日记 2025/5/14 6:20:19

【Linux命令】su、sudo、sudo su、sudo -i、sudo -l的用法和区别

su 命令 su (Switch User 切换用户)&#xff0c;允许用户切换到另一个用户的身份&#xff0c;默认情况下是切换到 root 用户。 默认行为&#xff1a;如果只运行 su&#xff0c;则系统会要求输入 root 用户的密码来切换到 root 用户&#xff0c;获取管理员权限。 切换到其他用…...

编程日记 2025/5/10 12:57:05

leetcode hot 100搜索回溯

39. 组合总和 已解答 中等 相关标签 相关企业 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candi…...

编程日记 2025/5/12 8:50:06

记录--＞为2025添砖java的第二天

如何在java中创建自己的方法呢&#xff0c;我认为它和在C语言c里面写函数就没啥区别&#xff0c;(⊙﹏⊙)&#xff0c;可能有一点点就是说public static int add(int a,int b){}就是得和main方法里面的状态一致。 import java.util.Scanner; public class Math3 {public stati…...

编程日记 2025/5/13 17:47:20

uniapp小程序实现弹幕不重叠

uniapp小程序实现弹幕不重叠 1、在父组件中引入弹幕组件 <template><!-- 弹幕 --><barrage ref"barrage" class"barrage-content" reloadDanmu"reloadDanmu"></barrage> </template> <script>import barr…...

编程日记 2025/5/14 1:57:45

拼多多纠偏，能否实现买卖平权？

科技新知 原创作者丨江蓠 编辑丨蕨影 当曾将仅退款、运费险作为标配的电商平台们开始听到商家诉求&#xff0c;有意优化营商环境&#xff0c;作为“仅退款”服务发起者的拼多多也坐不住了。 在推出一揽子减免计划讨好中小商家之后&#xff0c;拼多多近期被传正在内测精选用户…...

编程日记 2025/5/13 4:40:31

【Leetcode】3159. 查询数组中元素的出现位置

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 给你一个整数数组 nums &#xff0c;一个整数数组 queries 和一个整数 x 。 对于每个查询 q u e r i e s [ i ] queries[i] queries[i] &#xff0c;你需要找到 n u m s nums nu…...

编程日记 2025/5/12 5:38:29

PHP语言laravel框架中基于Redis的异步队列使用实践与原理

在 Laravel 中&#xff0c;基于 Redis 的异步队列是通过 Laravel 的队列系统与 Redis 服务结合来实现的。这种队列机制允许你将任务推送到队列中&#xff0c;并由后台工作进程异步处理这些任务。这样&#xff0c;你就可以将耗时的操作&#xff08;如发送邮件、处理视频、数据同…...

编程日记 2025/5/14 5:27:00

Element-plus自动导入

安装 npm i element-plus 自动引入 1. 安装两个插件 npm install -D unplugin-vue-components unplugin-auto-import2. 配置插件 vue3项目修改vite.config.js&#xff0c;把两个插件添加入即可&#xff0c;注意:不是覆盖原有配置 Vite // vite.config.js import { define…...

编程日记 2025/5/15 2:52:28

贪心算法（常见贪心模型）

常见贪心模型 简单排序模型 最小化战斗力差距 题目分析&#xff1a; #include <bits/stdc.h> using namespace std;const int N 1e5 10;int n; int a[N];int main() {// 请在此输入您的代码cin >> n;for (int i 1;i < n;i) cin >> a[i];sort(a1,a1n);…...

编程日记 2025/5/14 14:06:41

碰一碰发视频后端源码技术开发详解，支持OEM

一、引言 碰一碰发视频作为一种新颖的交互方式&#xff0c;在前端为用户带来便捷体验的同时&#xff0c;后端技术起着至关重要的支撑作用。后端负责管理视频资源、处理 NFC 标签信息与视频的关联逻辑、用户数据的存储与分析以及与前端的高效通信&#xff0c;确保整个系统稳定、…...

编程日记 2025/5/12 3:22:26

Python vs PHP：哪种语言更适合网页抓取

本文将比较 Python 和 PHP&#xff0c;以帮助读者确定哪种语言更适合他们的需求。文章将探讨两种语言的优点和缺点&#xff0c;并根据读者的经验水平分析哪种语言可能更容易上手。接下来&#xff0c;文章将深入探讨哪种语言在抓取网页数据方面更胜一筹。 简而言之&#xff0c;…...

编程日记 2025/5/10 20:30:53

SpringBoot 新特性

优质博文&#xff1a;IT-BLOG-CN 2.1.0新特性最低支持jdk8,支持tomcat9 对响应式编程的支持&#xff0c;spring-boot-starter-webflux starter POM可以快速开始使用Spring WebFlux&#xff0c;它由嵌入式Netty服务器支持 1.5.8 2.1.0/2.7.0/3.0.0 Configuration propertie…...

编程日记 2025/5/10 22:50:02

NAT 技术如何解决 IP 地址短缺问题？

NAT 技术如何解决 IP 地址短缺问题&#xff1f; 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 随着互联网的普及和发展&#xff0c;IP 地址的需求量迅速增加。尤其是 IPv4 地址&…...

编程日记 2025/5/11 1:57:03

微积分复习(微分方程)

1,一阶微分方程 可分离的微分方程: 可以把x和y分列等号两边,然后求积分可以解决 齐次方程和准齐次方程 要求是 :yf(y/x),也就是没有单独的x项,我们可以通过设ty/x来统一变量方便我们运算 准齐次方程就是常数项不统一,我们可以将Xxa,Yyb来消灭常数项进而转化为齐次形式…...

编程日记 2025/5/15 4:28:42

动态规划子序列问题系列一＞等差序列划分II

题目&#xff1a; 解析&#xff1a; 1.状态表示&#xff1a; 2.状态转移方程&#xff1a; 这里注意有个优化 3.初始化&#xff1a; 4.填表顺序&#xff1a; 5.返回值&#xff1a; 返回dp表总和 代码&#xff1a; public int numberOfArithmeticSlices(int[] nums) {in…...

编程日记 2025/5/12 2:48:21

【连续学习之SSL算法】2018年论文Selfless sequential learning

1 介绍 年份&#xff1a;2018 期刊&#xff1a; arXiv preprint Aljundi R, Rohrbach M, Tuytelaars T. Selfless sequential learning[J]. arXiv preprint arXiv:1806.05421, 2018. 本文提出了一种名为SLNID&#xff08;Sparse coding through Local Neural Inhibition and…...

编程日记 2025/5/11 17:34:33

【FastAPI】中间件

【FastAPI】中间件 一、概述二、作用2.1 日志记录与监控2.2 身份验证与授权2.3 CORS&#xff08;跨域资源共享&#xff09;2.4 Gzip压缩2.5 会话管理2.6 自定义功能2.7 执行顺序 三、 总结四、相关链接 一、概述 FastAPI的中间件提供了一种强大的机制&#xff0c;允许开发者在…...

编程日记 2025/5/12 12:27:18

文档大师：打造一站式 Word 报告解决方案1

前言 在政府、医院、银行、财务以及销售等领域&#xff0c;常常需要创建各种报告文件来展开工作汇报&#xff0c;譬如季度销售报告、年度总结报告、体检报告和保险合同等。在没有报表工具支持之前&#xff0c;这类报告主要通过 Word 制作&#xff0c;费时费力且难以维护&#…...

编程日记 2025/5/12 17:13:02

再谈c++线性关系求值

目的 线性关系是最简单的一种关系&#xff0c;在编程当中应用非常多&#xff0c;所以&#xff0c;再说一次线性关系。 线性关系的定义是这样的&#xff1a; 两个变量之间存在一次方函数关系&#xff0c;就称它们之间存在线性关系。正比例关系是线性关系中的特例&#xff0c;反…...

编程日记 2025/5/6 20:56:35

【ES6复习笔记】Class类（15）

介绍 ES6 提供了更接近传统语言的写法&#xff0c;引入了 Class&#xff08;类&#xff09;这个概念&#xff0c;作为对象的模板。通过 class 关键字&#xff0c;可以定义类。基本上&#xff0c;ES6 的 class 可以看作只是一个语法糖&#xff0c;它的绝大部分功能&#xff0c;…...

编程日记 2025/5/9 18:19:23

AppAgent 源码 (xml 解析)

1. 数据准备 adb shell uiautomator dump /sdcard/output.xml # 获取手机ui界面的xml文件 adb pull /sdcard/output.xml output.xml # 将手机上的xml文件拉取到电脑上具体的xml文件&#xff1a; <?xml version1.0 encodingUTF-8 standaloneyes ?> <hierarchy ro…...

编程日记 2025/5/7 10:55:40

Oracle 11G还有新BUG？ORACLE 表空间迷案！

前段时间遇到一个奇葩的问题&#xff0c;在开了SR和oracle support追踪两周以后才算是有了不算完美的结果&#xff0c;在这里整理出来给大家分享。 1.问题描述 12/13我司某基地MES全厂停线&#xff0c;系统卡死不可用&#xff0c;通知到我排查&#xff0c;查看alert log看到是…...

编程日记 2025/5/6 3:46:40

FreeSwitch中启用WebRTC

在FreeSwitch中启用WebRTC需要进行一系列配置。以下是详细的步骤&#xff1a; 1. 安装必要的依赖&#xff1a; 确保安装了支持WebRTC的依赖库&#xff0c;如libsrtp。 2. 配置SIP Profile&#xff1a; 编辑 conf/sip_profiles/internal.xml 文件&#xff0c;添加或修改以下内…...

编程日记 2025/5/12 22:37:50

力扣矩阵-算法模版总结

lc-73.矩阵置零-(时隔14天)-12.27 思路&#xff1a;(23min22s) 1.直接遍历遇0将行列设0肯定不行&#xff0c;会影响后续判断&#xff0c;题目又要求原地算法&#xff0c;那么进一步考虑是否可以将元素为0&#xff0c;其行列需要设为0的位置给存储下来&#xff0c;最后再遍历根据…...

编程日记 2025/5/8 5:00:29

服务端高并发分布式结构演进之路

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 服务端高并发分布式结构演进之路 收录于专栏[redis] 本专栏旨在分享学习Redis的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 概述 …...

编程日记 2025/5/1 13:54:14

虚拟机桥接模式

主机Win10,虚拟机xp 1.虚拟机设置中选择桥接模式 2.在虚拟机菜单&#xff1a;编辑>虚拟机网络编辑&#xff0c;点击“更改设置”&#xff0c;可以看到三个网卡&#xff0c;这三个网卡分别对应不同的网络共享模式。桥接模式须使用VMnet0&#xff0c;如果没看到这个网卡&…...

编程日记 2025/5/11 14:04:18

JVM调优实践篇

理论篇 1多功能养鱼塘&#xff0d;JVM内存 大鱼塘O&#xff08;可分配内存&#xff09;&#xff1a; JVM可以调度使用的总的内存数&#xff0c;这个数量受操作系统进程寻址范围、系统虚拟内存总数、系统物理内存总数、其他系统运行所占用的内存资源等因素的制约。 小池塘A&a…...

编程日记 2025/5/12 11:24:42

SpeedTree学习笔记总结

SpeedTree是一款业界领先的三维树木植被建模软件&#xff0c;特别适用于游戏开发和影视制作。 一、基础操作 旋转&#xff1a;鼠标左键 平移&#xff1a;鼠标中键 缩放&#xff1a;鼠标中键滚动 Trunks树干节点 Branches树枝 Cap给树干封口 Frond创建大树叶 Decorations…...

编程日记 2025/5/12 8:57:26

【MuJoCo和PhysX】

MuJoCo 与 Unity 的 PhysX 引擎的主要区别 应用领域&#xff1a; MuJoCo&#xff1a;主要用于机器人学、强化学习、生物力学等领域&#xff0c;擅长处理多自由度、复杂动力学问题&#xff0c;尤其适合进行高精度的物理仿真。 Unity PhysX&#xff1a;主要用于游戏开发、虚拟现…...

编程日记 2025/5/11 21:49:42

HTML制作一个普通的背景换肤案例2024版

一&#xff0c;完整的代码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>换肤</t…...

编程日记 2025/5/4 3:51:55

python学opencv|读取图像（二十一）使用cv2.circle()绘制圆形进阶

【1】引言 前序已经掌握了使用cv2.circle()绘制圆形的基本操作&#xff0c;相关链接为&#xff1a; python学opencv|读取图像&#xff08;二十&#xff09;使用cv2.circle()绘制圆形-CSDN博客 由于圆形本身绘制起来比较简单&#xff0c;因此可以自由操作的空间也就大&#x…...

编程日记 2025/5/4 15:15:17

qt QZipReader详解

1、概述 QZipReader 是 Qt 中用于从 .zip 文件中读取和提取文件内容的类。它提供了便捷的方法来访问压缩包中的文件和目录&#xff0c;并允许你解压缩单个或多个文件。通过 QZipReader&#xff0c;你可以以编程方式读取 .zip 文件中的内容&#xff0c;并提取它们到目标目录中。…...

编程日记 2025/5/11 0:27:12

开发场景中Java 集合的最佳选择

在 Java 开发中&#xff0c;集合类是处理数据的核心工具。合理选择集合&#xff0c;不仅可以提高代码效率&#xff0c;还能让代码更简洁。本篇文章将重点探讨 List、Set 和 Map 的适用场景及优缺点&#xff0c;帮助你在实际开发中找到最佳解决方案。 一、List&#xff1a;有序存…...

编程日记 2025/5/8 11:29:52

顶顶通呼叫中心中间件mod_cti模块安全增强，预防盗打风险(mod_cti基于FreeSWITCH)

文章目录 前言联系我们mod_cti版本支持安全加强说明 前言 FreeSWITCH暴露在公网最大的风险就是被不法之人盗打 出现盗打的主要原因以下几点&#xff1a; 分机密码太简单或者密码泄露了拨号方案配置不合理sofia配置错误 所以我们给顶顶通呼叫中心中间件添加了安全加强功能&am…...

编程日记 2025/5/11 9:10:30

bash shell的条件语句

&#xff5e; script% touch if.sh &#xff5e; script% chmod 755 if.sh1.if-then-fi #!/usr/bin/env bashFOOD$1 if [ $FOOD"apple" ] thenecho The food is $FOOD fi exit 0~ script % ./if.sh apple The food is apple如果要将多条语句写在一行&#xff0c;可以…...

编程日记 2025/5/13 6:42:54

拦截器Interceptor与过滤器Filter

拦截器Interceptor 定义&#xff1a; SpringMVC内置拦截机制,允许在请求被目标方法处理的前后进行拦截&#xff0c;执行一些额外操作&#xff1b;比如&#xff1a;权限验证&#xff0c;日志记录&#xff0c;数据共享等。 实现步骤 1、自定义拦截器 Component public class …...

编程日记 2025/5/3 22:33:12

水电站视频智能监控系统方案设计与技术应用方案

一、背景需求 水电站作为国家重要的能源基地&#xff0c;其安全运行对于保障能源供应和社会稳定具有重要意义。然而&#xff0c;传统的人工监控方式存在着诸多问题&#xff0c;如人力成本高、监控范围有限、反应不及时等。因此&#xff0c;水电站急需引进一种先进的视频智能监控…...

编程日记 2025/5/14 12:36:08

教师管理系统

大概功能&#xff1a; 1.显示所有教师 2.按姓名查找教师 3.按工号查找教师 4.增加教师 5.删除教师 6.退出 数据会保存到 txt 文件里面 姓名&#xff1a;必须是中文 手机号码&#xff1a;必须是11位&#xff0c;必须是数字 效果展示&#xff1a; 代码展示&#xff1a; Teache…...

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

nexus docker安装

#nexus docker 安装 docker pull sonatype/nexus3 mkdir -p /data/nexus-data docker run -itd -p 8081:8081 --privilegedtrue --name nexus3 \ -v /data/nexus-data:/var/nexus-data --restartalways docker.io/sonatype/nexus3 #访问 http://192.168.31.109:8081/ 用户名&am…...

编程日记 2025/5/11 4:04:26

canvas之进度条

canvas之进度条 效果&#xff1a; 封装的组件 <template><div class"circle" :style"{ width: props.radius px, height: props.radius px }"><div class"circle-bg" :style"{ width: props.radius - 5 px, height: pr…...

编程日记 2025/5/9 18:19:26

【ES6复习笔记】Promise对象详解（12）

1. 什么是 Promise&#xff1f; Promise 是 JavaScript 中处理异步操作的一种机制&#xff0c;它可以让异步操作更加容易管理和控制。Promise 对象代表一个异步操作的最终完成或失败&#xff0c;并提供了一种方式来处理操作的结果。 2. Promise 的基本语法 Promise 对象有三…...

编程日记 2025/5/5 9:13:16

前端Python应用指南（五）用FastAPI快速构建高性能API

《写给前端的python应用指南》系列&#xff1a; &#xff08;一&#xff09;快速构建 Web 服务器 - Flask vs Node.js 对比&#xff08;二&#xff09;深入Flask&#xff1a;理解Flask的应用结构与模块化设计&#xff08;三&#xff09;Django vs Flask&#xff1a;哪种框架适…...

编程日记 2025/4/28 17:41:45

c#多线程之生产者-消费者模型

在 C# 中实现 生产者-消费者模式&#xff0c;通常需要多个线程来处理数据的生产和消费。我们可以使用 Queue<T> 来作为存储数据的队列&#xff0c;并使用 Thread、Mutex 或 Monitor 来确保线程安全。BlockingCollection<T> 是 C# 提供的一个线程安全的集合&#xf…...

编程日记 2025/5/11 14:04:59