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

vue3项目中使用CanvasEditor开箱即用(组件的形式,组件封装好了)

news 来源：原创 2025/6/22 5:47:24

canvas-editor-vue

这是canvas-editor项目的vue版本,我封装成组建了,当然了这是个已经把canvas-editor封装好的的Vue项目

项目地址GitHub地址:GitHub - aini-aini/canvas-editor-vue: this is a project than can be used in vue project as Componentthis is a project than can be used in vue project as Component - aini-aini/canvas-editor-vue https://github.com/aini-aini/canvas-editor-vue

1. 启动项目

1-1 安装依赖

 npm install

1-2 运行项目

 npm run dev

 

2.项目说明

这是一个只有一个组件的,没有配置路由,没有配置仓库一个空白项目,components目录下自由我封装好的canvas-editor的组件

项目启动以后界面如下

 

大家看到这个启动起来的项目根源码是不一样的,首先我加了一个顶部的导航栏,右边的侧边栏,左边的目录侧边栏也做了修改,这些地方会慢慢后面我会做讲解,我先告诉大家如果把这个组件用到你们的项目当中

 

3.把组件用到自己的Vue项目中(Ts项目)

第一步: 把components目录下的CanvasEditor文件夹放到你们项目中的components目录下

 

第二部:父组建中导入使用

 <script setup lang="ts">// 导入CanvasEditor.vue组件import CanvasEditor from "./components/CanvasEditor/CanvasEditor.vue";import { ref, onMounted, nextTick } from "vue";​// 定义用于接受Editor实例的变量const canvasEditorRef = ref();</script>​<template><!-- canvasEditorRef就是CanvasEditor.vue传递过来的Editor实例 --><!-- 有了这个实例以后大家还安装插件 --><CanvasEditor ref="canvasEditorRef" /></template>​<style scoped></style>

我父组建是App.vue

 

4.对于修改部分做一些说明

 <script setup lang="ts">import CanvasEditor from "./components/CanvasEditor/CanvasEditor.vue";import { ref, onMounted, nextTick } from "vue";​const canvasEditorRef = ref();onMounted(() => {nextTick(() => {const canvasEditor = canvasEditorRef.value;console.log(canvasEditor);});});</script>​<template><!--  --><CanvasEditor ref="canvasEditorRef" /></template>​<style scoped></style>
 

反正这种组件式的封装已经可以直接在Vue项目中直接使用,关于功能你们可以直接修改组件源码,源吗就在CanvasEditor里面的Src目录

 

我把源项目里面Src目录下的main.ts里面的内容放到了CanvasEditor目录下的index.ts

 

把源项目里的index.html里面的html内容放到了CanvasEditor.vue里面,并且自己做了一些修改

 

UI样式我也直接放到了CanvasEditor.vue里面的style里面

 

5.自己修改的部分代码说明

5-1 顶部菜单栏

 

下面是源码里index.html结构

 

下面是我做的一些结构调整

 

Top_menu_bar下面多了一个top_menu的div就是我添加的顶部菜单栏源码里面menu菜单栏fixed定位,占据60px的高度

我在修改后Top_menu_bar fix定位,占据100像素的高度;top_menu占据40像素,menu占据60像素,这其实很简单的,大家应该能看得懂

 
.top_menu_bar {width: 100%;height: 100px;background-color: #e1e5e9;position: fixed;top: 0;z-index: 9;border-bottom: 2px solid #e2e6ed;}​.top_menu {width: 100%;height: 40px;display: flex;align-items: center;justify-content: start;padding: 0 110px;}​.menu {width: 100%;height: 60px;/* top: 0; *//* z-index: 9; *//* position: fixed; */display: flex;align-items: center;justify-content: center;/* background: #F2F4F7; */background-color: #fff;box-shadow: 0 2px 4px 0 transparent;}

当然了菜单来功能我没有实现,大家需要的话自己实现一下,如果不需要菜单栏,那就再改源码,改回去,当然了,有一些动态计算的地方都需要改回去,所以如果要改回去的朋友注意去这些地方把100改回去

 

5-2 关于右边菜单栏

5-2-1 菜单栏是干什么的?

我有个需求就是我希望集成Ai功能实现对文档内容的提问和替换,所以其实这个就是一个Ai侧边栏工具

5-2-2 如何实现的

其实纯插件的形式实现的,功能完全独立于组件本身,大家不想用只要注释掉几行代码即可

 

CanvasEditor/src/plugin/card文件夹里就是这个插件的代码,这个功能是我自己实现的

 

用法就是首先导入这个插件

 import { cardPlugin } from "./src/plugins/card"; // 插件统一导出文件

然后挂在到Editor实例上面即可,目前我只接了一个deepseek模型(⚠️:你的模型的key自己在本地这样用用可以,但是不安全的,有泄露key的风险,需要注意)

  instance.use(cardPlugin, { apiKey: "你的deepseek模型的apikey" });

大家不想用的话,直接删除导入使用逻辑即可我现在注释掉了,再看看页面

 

我再把代码加回来,给大家演示下功能

5-2-3 功能演示

1. 菜单栏显示或隐藏

插件注册以后通过工具栏就会有这个展开或合上侧边栏的图标,点击可以进行一个隐藏或者显示

 

2. ai提问

选中一段文本,进行提问,并替换

 

 

 

3. 侧边栏拖放

我这个侧边栏是可以脱离文档流进行拖拽的

 

 

如果想要还原回去也很简单,拖动拖到离右边窗口10px以内时,这个侧边栏边框变蓝色,意思就是可以放手吸附到侧边,此时放手即可

 

 

或者

 

5-3 关于左边目录栏

这个其实改动不大,我只是加了过渡动画和改变了宽度,这个大家自己找找源码吧

5-4 关于目前文档内容

大家发现项目启动后是默认有内容的,其实内容也是通过独立的插件去渲染的

我有个需求就是我想要把一些从ai拿到的结果渲染到页面上,就得通过代码去操作了,所以对一些数据的插入我写了一个aiWrite插件来操作的,具体源码在

 

导入和使用

我是从./src/test导入了一个testFunction;这是我用来测试用的,然后把Editor实例instanca传递过去了

 

咱再来看看这个testFunction

 

大家有没有注意,这个插件注册完以后Editor实例就又了新的方法就是aiWrite;在插件内容我就给editor实力家了这个aiWrite,注册后就有这个方法了,所以页面上的内容就是这么来的

 

如果我把test Function注释掉看看

 

可以看看页面清空了

好了,今天我就分享到这里,下面我想说一说侧边栏插件,下面的内容根上面说的把canvas-editor用到Vue项目无关了

6.源码里安装右边侧边栏

我刚开始侧边栏是直接以插件的形式开发的并做了打包发不到npm上了,不过只能在源码里使用

npm包地址:@aini_ai/ai-assistant - npm

插件源码github地址:GitHub - aini-aini/canvas-editor-ai-assistant

 

我做个演示,下面这个现在是一个源码项目

 

安装我发布的插件包

 

然后在main.ts里面使用

首先导入和注册

 import cardPlugin from '@aini_ai/ai-assistant';// 在 canvas-editor 中注册插件instance.use(cardPlugin,{ apiKey: '你的seepseek模型的apiKey' })

 

再重新启动项目即可,可以看到已经有侧边栏了

 

大家需要的话可以继续修改源码去完善其功能

有问题欢迎交流

 

相关文章：

vue3项目中使用CanvasEditor开箱即用(组件的形式,组件封装好了)

canvas-editor-vue 这是canvas-editor项目的vue版本,我封装成组建了,当然了这是个已经把canvas-editor封装好的的Vue项目 项目地址GitHub地址:GitHub - aini-aini/canvas-editor-vue: this is a project than can be used in vue project as Componentthis is a project than…...

编程日记 2025/6/22 5:47:24

人体肢体工作识别-一步几个脚印从头设计数字生命——仙盟创梦IDE

人体肢体识别是借助计算机视觉、传感器等技术&#xff0c;对人体各肢体的位置、动作、姿态等进行检测与分析的技术。其在医疗健康、智能交互、运动训练、安全监控等多个领域具有重要价值&#xff0c; 示例代码 import cv2 import mediapipe as mp import numpy as np import c…...

编程日记 2025/6/2 8:16:14

【重磅】配电网智能软开关和储能联合规划

目录 1 主要内容 目标函数 数据说明 节点系统图 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现《具有源荷不平衡特性的配电网智能软开关和储能联合规划》部分模型&#xff0c;未考虑聚类分析和分布鲁棒部分&#xff0c;就智能软开关和储能联合规划部分进行了…...

编程日记 2025/6/22 5:32:34

实验6 电子邮件

实验6 电子邮件 1、实验目的 理解电子邮件系统基本结构 理解客户端和服务器端&#xff0c;以及服务器之间的通信 分析理解SMTP&#xff0c;POP3协议 2、实验环境 硬件要求&#xff1a;阿里云云主机ECS 一台。 软件要求&#xff1a;Linux/ Windows 操作系统 3、实验内容…...

编程日记 2025/6/22 5:22:31

NHANES指标推荐：OBS

文章题目&#xff1a;Association between oxidative balance score and all-cause and cancer-specific mortality among cancer survivors DOI&#xff1a;10.3389/fimmu.2025.1541675 中文标题&#xff1a;癌症幸存者氧化平衡评分与全因死亡率和癌症特异性死亡率之间的关联 …...

编程日记 2025/6/22 5:31:19

python-修改图片背景色

在Python中&#xff0c;可以使用图像处理库&#xff08;如OpenCV或Pillow&#xff09;来修改图片的背景色。通常&#xff0c;修改背景色的流程包括以下步骤&#xff1a; 1、对图片进行分割&#xff0c;识别前景和背景。 2、对背景区域进行颜色替换。 下面是两种实现方法&#x…...

编程日记 2025/6/22 5:44:52

数据结构与算法--顺序表--单链表

一 顺序表 需要指向存储位置的基地址分配一段连续的内存用length记录实际的元素的个数&#xff0c;也即顺序表的长度&#xff0c;因为顺序表是允许删除和插入元素的不需要定义数组 1.1 普通结构体数组实现版本&#xff0c;实现白色的点以一定的步长移除画面&#xff0c;大量fo…...

编程日记 2025/6/22 5:08:40

MATLAB安装全攻略：常见问题与解决方案

MATLAB安装常见问题与解决方案 一、系统兼容性验证 安装前需确认操作系统满足MATLAB版本要求&#xff1a; Windows 10版本1903及以上&#xff08;64位&#xff09;macOS Monterey 12.6及以上Ubuntu 22.04 LTS及以上 验证命令示例&#xff1a; # Linux系统验证 lsb_release…...

编程日记 2025/5/29 12:52:02

constexpr 关键字的意义(入门)

author: hjjdebug date: 2025年 05月 15日 星期四 16:03:33 CST description: constexpr 关键字的意义(入门) constexpr 是c11 引入的一个关键字, 代表了一种属性. 文章目录 1. constexpr 修饰的变量, 在编译期间就可以得到其数值.2. constexpr 修饰的函数, 可以在编译期间被调…...

编程日记 2025/5/30 0:52:03

aptitude 深度教程：从基础到生产实践

目录 一、aptitude 基础：核心概念与环境准备 1.1 aptitude 是什么？ 1.2 安装与环境配置 二、aptitude 核心操作：从命令行到交互式界面 2.1 命令行基础操作 2.2 交互式界面（TUI）入门 三、高级功能：依赖管理与版本控制 3.1 依赖冲突解决实战 3.2 版本锁定与降级 3…...

编程日记 2025/6/1 23:19:19

嵌入式开发学习日志（数据结构--双链表）Day21

一、双链表 1.定义 双向链表是在单链表的每个结点中&#xff0c;再设置一个指向其钱去节点的指针域。 2、声明文件 3、创建表头 4、头插 5、 遍历 6、尾插、 7、指定插 8、查找 9、修改 10.、删除 11、逆序 12、销毁链表 13、main.c 三、扩展&#xff1a;工程管理工具&#…...

编程日记 2025/5/24 15:38:14

抢购Python代码示例与技术解析

引言&#xff1a;抢购系统的技术挑战 在当今电子商务高度发达的时代&#xff0c;抢购活动已成为各大电商平台吸引用户的重要手段。然而&#xff0c;高并发、低延迟的抢购场景对系统设计提出了严峻挑战。本文将提供一个完整的Python抢购代码示例&#xff0c;并深入分析其技术实…...

编程日记 2025/5/29 9:15:37

undefined reference to CPUAllocatorSingleton::instance

它发生的原因是你声明了 CPUAllocatorSingleton 类中的 instance 变量&#xff0c;但没有提供它的定义。 这个错误是链接器无法找到 CPUAllocatorSingleton::instance 的定义。它发生的原因是你声明了 CPUAllocatorSingleton 类中的 instance 变量&#xff0c;但没有提供它的定…...

编程日记 2025/5/29 10:55:15

【c语言】动态内存分配

文章标题 一、为什么要进行动态内存管理二、malloc和free2.1. malloc2.2. free2.3. 举例 三、calloc和realloc3.1. calloc3.2. realloc 四、常见的动态内存错误4.1. 对NULL指针的解引用操作4.2. 对动态开辟空间的越界访问4.3. 对非动态开辟内存使用free释放4.4. 使用free释放⼀…...

编程日记 2025/5/27 6:55:29

深入理解JavaScript中的闭包：原理、应用与常见问题

引言 闭包(Closure)是JavaScript中一个既强大又容易让人困惑的概念。理解闭包对于成为一名优秀的JavaScript开发者至关重要。本文将深入探讨闭包的工作原理、实际应用场景以及常见问题&#xff0c;帮助你彻底掌握这一重要概念。 什么是闭包&#xff1f; 闭包是指那些能够访问…...

编程日记 2025/5/24 3:13:06

IPLOOK | 2025 MVNOs 世界大会：从Wi-Fi通话到卫星覆盖

2025 MVNOs 世界大会于5月12日至14日在奥地利维也纳举行&#xff0c;汇聚了来自50多个国家的550余位行业领袖&#xff0c;共同探讨移动虚拟网络运营商&#xff08;MVNO&#xff09;领域的变革趋势。本届大会聚焦数字化转型、技术创新与战略合作&#xff0c;其中IPLOOK凭借其创新…...

编程日记 2025/5/28 8:01:58

为什么elasticsearch配置文件JVM配置31G最佳

Elasticsearch的JVM堆内存配置为32GB被视为最佳实践&#xff0c;主要基于以下综合技术原理和性能优化考量&#xff1a; 1. ‌JVM指针压缩机制优化内存效率‌ 当堆内存≤32GB时&#xff0c;JVM启用‌对象指针压缩&#xff08;Compressed Ordinary Object Pointers, COOP&#…...

编程日记 2025/5/29 10:27:49

单片机开发软件

目录 纯编码 vscode Ardunio Keil 1. 集成化开发环境&#xff08;IDE&#xff09; 2. 多架构芯片支持 3. 高效的代码生成与优化 4. 强大的调试与仿真功能 5. 丰富的库函数与生态系统 6. 教育与企业级适用性 典型应用场景 半编码半图形化 STM32CUBEIED 1. 图形化配置…...

编程日记 2025/5/26 19:33:10

Java随机生成邀请码 (包含字母大小写+数字)

前言: 目前我们生成的是6位包含数字和大小写字母的随机邀请码, 并且代码中已经有了处理冲突的机制确保了邀请码的唯一性如(①生成随机邀请码后会检查数据库中是否已存在②如果存在冲突,会尝试最多10次重新生成③如果多次尝试仍失败&#xff0c;会使用"U"用户ID派生的…...

编程日记 2025/5/27 20:12:00

mybatis-plus配置逻辑删除

在实体类中标记软删除字段使用注解 TableLogic 标记该字段为软删除字段 import com.baomidou.mybatisplus.annotation.*;public class YourEntity {// ...其他字段TableLogicprivate Integer isDeleted;// getter/setter }yml配置 # 逻辑已删除值 logicDeleteValue: 2 # 逻辑…...

编程日记 2025/5/29 19:31:07

第二十五天打卡

常见报错类型 try-except-else-finally 语句 首先执行try语句&#xff0c;若正确直接执行else语句 若try语句发生错误&#xff0c;则判断错误类型&#xff0c;执行错误类型对应的except语句&#xff0c;不执行else语句 finally语句无条件执行&#xff0c;多用于资源保存&…...

编程日记 2025/5/22 9:06:02

JESD204 ip核使用与例程分析（一）

JESD204 ip核使用与例程分析（一） JESD204理解JESD204 与JESD204 PHY成对使用原因JESD204B IP核JESD204B IP核特点JESD204B IP核配置第一页第二页第三页第四页JESD204 PHY IP核配置第一页第二页JESD204理解 JESD204B是一种针对ADC、DAC设计的传输接口协议。此协议包含四层， …...

编程日记 2025/5/19 17:14:10

Synchronized详解及高频面试问答

目录 JVM简述 Synchronized详解及面试高频问答 而synchronized是什么&#xff0c;可以解决什么问题&#xff1f; synchronized怎么使用&#xff1f; 锁升级升级了什么&#xff1f; 为什么要这样做锁升级&#xff1f; 锁升级的过程是怎样的&#xff1f;为什么会有偏向锁&…...

编程日记 2025/6/2 9:11:04

【LLIE专题】基于码本先验与生成式归一化流的低光照图像增强新方法

GLARE: Low Light Image Enhancement via Generative Latent Feature based Codebook Retrieval&#xff08;2024&#xff0c;ECCV&#xff09; 专题介绍一、研究背景二、GLARE方法阶段一&#xff1a;正常光照代码本学习&#xff08;Normal-Light Codebook Learning&#xff09…...

编程日记 2025/5/29 8:35:49

26考研 | 王道 | 计算机组成原理 | 一、计算机系统概述

26考研 | 王道 | 计算机组成原理 | 一、计算机系统概述 文章目录 26考研 | 王道 | 计算机组成原理 | 一、计算机系统概述1.1 计算机的发展1.2 计算机硬件和软件1.2.1 计算机硬件的基本组成1.2.2 各个硬件的工作原理1.2.3 计算机软件1.2.4 计算机系统的层次结构1.2.5 计算机系统…...

编程日记 2025/5/29 13:14:12

Linux云计算训练营笔记day08（MySQL数据库）

Linux云计算训练营笔记day08&#xff08;MySQL数据库&#xff09; 目录 Linux云计算训练营笔记day08&#xff08;MySQL数据库&#xff09;数据准备修改更新update删除delete数据类型1.整数类型2.浮点数类型(小数)3.字符类型4.日期5.枚举: 表头的值必须在列举的值里选择拷贝表复…...

编程日记 2025/5/20 10:31:40

从基础到实习项目：C++后端开发学习指南

在当今技术快速迭代的背景下&#xff0c;后端开发作为软件工程的核心支柱持续发挥着关键作用。C凭借其卓越的性能表现和系统级控制能力&#xff0c;依然是构建高性能后端服务的首选语言之一。本文将系统性地解析现代C后端开发的核心技术体系&#xff0c;包括从语言特性精要到架…...

编程日记 2025/5/24 20:13:38

jedis+redis pipeline诡异的链接损坏、数据读取异常问题解决

文章目录 问题现象栈溢出&#xff08;不断的重连&#xff09;读取超时未知响应尝试读取损坏的链接读取到的数据和自己要读的无关&#xff0c;导致空指针、类型转换错误&#xff0c;数据读取错乱 问题写法问题分析修复注意点 问题现象 栈溢出&#xff08;不断的重连&#xff09…...

编程日记 2025/5/23 17:06:24

十、HQL：排序、联合与 CTE 高级查询

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月15日 专栏&#xff1a;Hive教程 Apache Hive 作为大数据领域主流的数据仓库解决方案&#xff0c;其查询语言 HQL (Hive Query Language) 是数据分析师和工程师日常工作的核心。除了基础的 SELECT-FROM-WHERE&#xff0c;HQ…...

编程日记 2025/6/1 17:05:03

数据结构—排序(斐波那契数列，冒泡，选择，插入，快速，归并，图，广度优先算法)

目录 一 斐波那契数列&#xff08;递归算法&#xff09; 定义 原理 二 冒泡排序 定义 排序思路 函数原型 参数详解&#xff1a; 算法分析&#xff1a; 1. 使用函数库的qsort函数 2. 自定义冒泡排序 三 选择排序 定义 排序思路 四 插入排序 定义 排序思路 五 快速…...

编程日记 2025/5/26 18:12:33

NetSuite CSV导入Item Fulfillment的功能测试

上一篇我们说过如何通过CSV导入更新IF上的Department/Class信息&#xff0c;这篇是来测试一下如果SO在Pending Fulfillment的状态下通过CSV导入IF&#xff0c;这个新版本的一个功能&#xff0c;刚好将测试的过程与结果与大家分享~ 准备文件 External ID是外部ID&#xff1b; …...

编程日记 2025/5/28 15:18:23

网络原理 | 网络基础概念复习

目录 网络中的重要概念 IP地址 端口号 协议 五元组 协议分层 OSI七层网络模型 TCP/IP 五层&#xff08;四层&#xff09;模型 网络设备所在的分层 封装和分用 网络中的重要概念 IP地址 IP地址主要用于标识网络主机、其他网络设备的网络地址。在网络数据传输中&#…...

编程日记 2025/5/29 12:13:34

Vsan数据恢复——Vsan上虚拟机不可用，虚拟机组件信息破坏的数据恢复

Vsan数据恢复环境&#xff1a; 一台采用VsSAN分布式文件系统的存储设备由于未知原因关机重启。管理员发现上层的虚拟机不可用&#xff0c;存储内的数据丢失。 Vsan数据恢复过程&#xff1a; 1、将故障存储设备断电&#xff0c;将存储内的硬盘编号后取出。硬件工程师检测后没有发…...

编程日记 2025/5/22 23:11:48

V837s-LAN8720A网口phy芯片调试

目录 前言 一、LAN8720A 芯片概述 二、硬件连接 三、设备树配置 四、内核配置 五、网口调试 总结 前言 在嵌入式系统开发中，网络连接是至关重要的一部分。v837s开发板搭载了LAN8720A系列的网口PHY芯片，用于实现以太网连接。在开发过程中，对于网口的稳定性和性能的调试至…...

编程日记 2025/5/30 3:08:17

C++（12）：using声明

目录 一、定义 二、核心用法示例 示例 1：单独引入 std::string 和 std::coun 示例 2：在局部作用域中使用 using 声明 三、对比 using namespace std（不推荐） 四、关键注意事项 1. 名称冲突问题 2. 作用域规则 3. 头文件中的陷阱 五、最佳实践总结 六、完整安全示…...

编程日记 2025/5/27 7:18:23

Xinference 命令大全：从模型部署到管理

Xinference 是一个高性能、分布式的模型推理框架，支持多种大语言模型（LLM）、嵌入模型（Embedding）和图像生成模型。本文将详细介绍 Xinference 的常用命令，涵盖模型启动、管理、监控及 API 调用，帮助你快速掌握其核心功能。 1. 安装与启动 Xinference 1.1 安装 Xinferen…...

编程日记 2025/5/24 1:43:54

如何在线免费压缩PDF文档？

PDF文件太大&#xff0c;通常是因为内部嵌入字体和图片。怎么才能将文件大小减减肥呢&#xff0c;主要有降低图片清晰度和去除相关字体两个方向来实现文档效果。接下来介绍三个免费压缩PDF实用工具。 &#xff08;一&#xff09;iLoveOFD在线转换工具 iLoveOFD在线转换工具&a…...

编程日记 2025/5/24 13:49:14

在Rocky Linux 9.5上部署MongoDB 8.0.9：从安装到认证的完整指南

mongodb 的部署 #安装依赖 yum -y install libcurl openssl #安装mongodb yum -y install https://repo.mongodb.org/yum/redhat/9/mongodb-org/8.0/x86_64/RPMS/mongodb-org-server-8.0.9-1.el9.x86_64.rpm #启动服务 systemctl start mongod.service && system…...

编程日记 2025/5/28 8:03:46

Unix Bourne Shell

本文来源 &#xff1a; 腾讯元宝 Unix Bourne Shell&#xff08;简称sh&#xff09;是Unix系统中最经典的命令行解释器&#xff08;shell&#xff09;&#xff0c;由Stephen Bourne于1977年在贝尔实验室开发&#xff0c;并成为后续众多shell&#xff08;如bash、ksh等&#xff…...

编程日记 2025/5/27 15:20:25

如何在 AWS 上构建支持 AVIF 的前端图片优化方案

一、为什么使用 AVIF 图片格式&#xff1f; 优势点 说明 高压缩率 在相似质量下&#xff0c;AVIF 文件比 JPEG/PNG/WebP 更小&#xff0c;能有效节省带宽和存储空间。 更高画质 即使在低码率下也能保持清晰细节&#xff0c;减少压缩带来的马赛克或模糊问题。 支持透明度 …...

编程日记 2025/5/22 7:43:15

Linux系统进行环境开发环境配置

一. 使用fishros(鱼香肉丝)配置开发环境 对于初学者来说&#xff0c;最难的关卡莫非是开发环境的的搭建&#xff0c;特别是在Ubuntu系统上ROS系统安装时后出现的各种报错以及失败&#xff0c;本篇博客讲述了ROS系统的一键安装过程&#xff0c;适用于18.04及以后的Ubuntu系统版本…...

编程日记 2025/5/29 13:06:41

前端npm的核心作用与使用详解

一、npm是什么？ npm（Node Package Manager） 是 Node.js 的默认包管理工具，也是全球最大的开源代码库生态系统。虽然它最初是为 Node.js 后端服务设计的，但如今在前端开发中已成为不可或缺的基础设施。通过npm，开发者可以轻松安装、管理和共享代码模块。 特性： 依赖管理…...

编程日记 2025/5/26 10:02:28

软考软件评测师——软件工程之系统维护

一、系统质量属性 可维护性 衡量软件系统适应修改的难易程度&#xff0c;包括修复缺陷、扩展功能或调整规模的效率。计算公式为&#xff1a;系统可用时间占比 1/(1平均修复时间)&#xff0c;其中平均修复时间(MTTR)指排除故障所需的平均耗时。 可靠性 vs 可用性 可靠性&…...

编程日记 2025/5/28 8:36:47

CSRF攻击 + 观测iframe加载时间利用时间响应差异侧信道攻击 -- reelfreaks DefCamp 2024

参考: https://0x90r00t.com/2024/09/30/3708/ 题目信息 有些事情最好还是保持低调。当然&#xff0c;除非你是个真正的怪胎。 注意&#xff1a;该网站通过HTTPS提供服务 标志格式&#xff1a;DCTF&#xff5b;&#xff5d;题目实现了一个类似视频网站的东西 在其提供的数据库中…...

编程日记 2025/5/29 11:43:30

火山RTC 8 SDK集成进项目中

一、SDK 集成预备工作 1、SDK下载 https://www.volcengine.com/docs/6348/75707 2、解压后 3、放在自己项目中的位置 1&#xff09;、include 2&#xff09;、lib 3)、dll 暂时&#xff0c;只需要VolcEngineRTC.dll RTCFFmpeg.dll openh264-4.dll&#xff0c; 放在intLive2…...

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

spring boot Controller 和 RestController 的区别

spring boot Controller 和 RestController 的区别 5.3.1常用注解 Spring MVC控制器中常使用的注解有如下几种。 Controller Controller 标记在类上。使用Controller 标记的类表示是Spring MVC的Controller对象。分发处理器将会扫描使用了该注解的类&#xff0c;并检测其中的…...

编程日记 2025/5/16 15:10:46

mavgenerate 在 win11 下环境搭建注意问题

开发随笔 mavgenerate 是mavlink配套的协议生成工具&#xff0c;mavgenerate 在 win11 下环境搭建注意问题&#xff1a; 1、Python 就使用文件包当中的版本&#xff0c;由于python 版本能与 future 及 pip 之间存在特定的组合关系&#xff0c;故不推荐下载使用最新版本 2、安…...

编程日记 2025/5/29 12:36:18

SSM项目集成redis、Linux服务器安装redis

在SSM&#xff08;Spring Spring MVC MyBatis&#xff09;项目中引入Redis主要分为以下步骤&#xff0c;确保配置正确并能在业务中灵活使用&#xff1a; 1. 添加Redis依赖​​ 在Maven的pom.xml中添加Spring Data Redis和Jedis&#xff08;或Lettuce&#xff09;依赖&#…...

编程日记 2025/5/27 18:57:56

sqli-labs靶场第七关——文件导出注入

一&#xff1a;目标 通过sql注入将php代码写入网站目录&#xff0c;通过这个php文件执行命令 二&#xff1a;确认前置条件 %secure_file_priv% 首先我们需要Mysql是否允许导出文件 先尝试在网页中sql注入&#xff0c;检查导出权限 ?id1)) union select 1,secure_file_pr…...

编程日记 2025/5/26 10:35:41

python使用matplotlib无法显示中文字体报错

python使用matplotlib字体报错 当我们使用python使用matplotlib总是出现报错&#xff0c;图片中文变成方框 findfont: Font family WenQuanYi Micro Hei not found. findfont: Font family Heiti TC not found. findfont: Font family [SimHei] not found. Falling back to De…...

编程日记 2025/5/25 2:19:22