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

vue-cropper实现图片裁剪

news 来源：原创 2025/7/14 16:09:25

一、什么是vue-cropper？

Vue-Cropper 是一个基于 Vue.js 的图片裁剪组件库，专为 Web 应用设计。当你在网上搜索的时候发现还有一个叫cropper的库，下面是他们的区别：

特性	cropper.js	vue-cropper
框架依赖	纯 JavaScript，无框架依赖	专为 Vue.js 设计
包体积	~200 KB (含样式)	~45 KB (压缩后)
API 调用方式	原生 DOM 操作	Vue 组件式 API
响应式支持	需手动实现	原生支持 Vue 响应式
功能完整性	基础裁剪+扩展插件	基础裁剪+常用扩展
学习曲线	较高（需熟悉原生 API）	较低（Vue 开发者友好）
社区生态	GitHub 32k+ Star	GitHub 3.5k+ Star
移动端支持	需额外配置	原生优化

vue-cropper的优势：

• 纯前端实现，减轻服务器压力

• 响应式设计，完美适配移动端

• 灵活的配置选项

• 实时预览功能

• 支持多种输出格式

我正在开发的项目是基于vue3的，所以就对于vue-cropper进行讲解

二、快速上手

安装

//npm 安装
npm install vue-cropper
//yarn 安装
yarn add vue-cropper

引入

//Vue 3 组件内引入npm install vue-cropper@next
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
//Vue3 全局引入import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'const app = createApp(App)
app.use(VueCropper)
app.mount('#app')

示例代码

<template><div class="container"><input type="file" @change="handleFileChange" /><vue-cropperref="cropper":img="imageSrc":auto-crop="false":aspect-ratio="16/9"/><button @click="getResult">获取裁剪结果</button></div>
</template><script setup>
import { ref } from 'vue'const imageSrc = ref('')
const cropper = ref(null)const handleFileChange = (e) => {const file = e.target.files[0]const reader = new FileReader()reader.onload = (e) => {imageSrc.value = e.target.result}reader.readAsDataURL(file)
}const getResult = () => {cropper.value.getCropBlob(blob => {const formData = new FormData()formData.append('file', blob)// 上传逻辑...})
}
</script>

三、配置详解

基础配置项

const options = reactive({img: '',          // 图片源地址outputSize: 1,    // 输出质量（0-1）outputType: 'png',// 输出格式：png | jpeg | webpinfo: true,       // 显示裁剪信息canScale: true,   // 允许缩放autoCrop: true,   // 自动生成裁剪框fixed: false,     // 固定裁剪框尺寸fixedNumber: [4, 3], // 固定比例 [宽, 高]full: false       // 是否全屏模式
})

比例锁定实践

固定16:9的案例：

<vue-cropper:fixed="true":fixed-number="[16, 9]":img="imageSrc"@realTime="handlePreview"
/>

输出格式控制

const outputOptions = {types: ['png', 'jpeg', 'webp'],quality: {jpeg: 0.8,webp: 0.7}
}const handleExport = (type) => {cropper.value.getCropData(type, (dataURL) => {const link = document.createElement('a')link.download = `cropped.${type}`link.href = dataURLlink.click()})
}

四、案例

用户头像上传组件

<template><div class="avatar-editor"><n-uploadaccept="image/*":before-upload="handleUpload"><n-button>选择头像</n-button></n-upload><n-modal v-model:show="showCropper"><n-card style="width: 600px"><vue-cropperref="cropper":img="tempImage":fixed="true":fixed-number="[1, 1]":output-size="0.8"/><div class="action-buttons"><n-button @click="rotate(-90)">左旋转</n-button><n-button @click="rotate(90)">右旋转</n-button><n-button @click="saveAvatar">保存</n-button></div></n-card></n-modal></div>
</template><script setup>
// 完整业务逻辑
const showCropper = ref(false)
const tempImage = ref('')const handleUpload = async (file) => {const reader = new FileReader()reader.onload = (e) => {tempImage.value = e.target.resultshowCropper.value = true}reader.readAsDataURL(file)return false
}const rotate = (degree) => {cropper.value.rotate(degree)
}const saveAvatar = async () => {cropper.value.getCropBlob(async (blob) => {const formData = new FormData()formData.append('avatar', blob)try {await axios.post('/api/upload-avatar', formData)message.success('头像更新成功')showCropper.value = false} catch (error) {message.error('上传失败')}})
}
</script>

五、扩展

主题自定义

/* 自定义主题 */
.vue-cropper {--crop-border: 2px dashed #f00;--preview-bg: #f8f9fa;.crop-box {box-shadow: 0 0 10px rgba(0,0,0,0.5);}.info-item {color: #1890ff;font-size: 12px;}
}

性能优化技巧

// 压缩处理函数
const optimizeImage = (blob) => {return new Promise((resolve) => {const img = new Image()img.onload = () => {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')canvas.width = 800canvas.height = (800 * img.height) / img.widthctx.drawImage(img, 0, 0, canvas.width, canvas.height)canvas.toBlob(resolve, 'image/webp', 0.8)}img.src = URL.createObjectURL(blob)})
}

移动端适配方案

<vue-cropper:touch="true":movable="false":zoom-on-touch="true":zoom-on-wheel="false"
/>

/* 移动端优化 */
@media (max-width: 768px) {.vue-cropper {--crop-box-width: 300px;--crop-box-height: 300px;.action-buttons {flex-direction: column;button {margin: 5px 0;}}}
}

六、常见问题

裁剪框比例不生效？

解决方案：

// 确保同时配置
fixed: true,
fixedNumber: [3, 2], 
aspectRatio: 3/2

图片显示变形？

处理方案：

const checkImage = (file) => {return new Promise((resolve) => {const img = new Image()img.onload = () => {const ratio = img.width / img.heightif (Math.abs(ratio - 3/2) > 0.1) {message.warning('建议选择3:2比例的图片')}resolve(true)}img.src = URL.createObjectURL(file)})
}

七、props

以下是全部的参数以及取值要求

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址, base64, blob
outputSize	裁剪生成图片的质量	1	0.1 ~ 1
outputType	裁剪生成图片的格式	jpg (需传入 jpeg)	jpeg, png, webp
info	裁剪框的大小信息	true	true, false
canScale	图片是否允许滚轮缩放	true	true, false
autoCrop	是否默认生成截图框	false	true, false
autoCropWidth	默认生成截图框宽度	容器的 80%	0 ~ max
autoCropHeight	默认生成截图框高度	容器的 80%	0 ~ max
fixed	是否开启截图框宽高固定比例	false	true, false
fixedNumber	截图框的宽高比例（开启 fixed 生效）	[1, 1]	[ 宽度 , 高度 ]
full	是否输出原图比例的截图	false	true, false
fixedBox	固定截图框大小	不允许改变	true, false
canMove	上传图片是否可以移动	true	true, false
canMoveBox	截图框能否拖动	true	true, false
original	上传图片按照原始比例渲染	false	true, false
centerBox	截图框是否被限制在图片里面	false	true, false
high	是否按照设备的 dpr 输出等比例图片	true	true, false
infoTrue	展示真实输出图片宽高	false	true, false
maxImgSize	限制图片最大宽度和高度	2000	0 ~ max
enlarge	图片根据截图框输出比例倍数	1	0 ~ max（建议不要太大）
mode	图片默认渲染方式	contain	contain, cover, 100px, 100% auto
limitMinSize	裁剪框限制最小区域	10	Number, Array, String
fillColor	导出时背景颜色填充	空	#ffffff, white

vue-cropper实现图片裁剪

一、什么是vue-cropper？ Vue-Cropper 是一个基于 Vue.js 的图片裁剪组件库，专为 Web 应用设计。当你在网上搜索的时候发现还有一个叫cropper的库，下面是他们的区别： 特性cropper.jsvue-cropper框架依赖纯 JavaScript&am…...

编程日记 2025/7/14 16:09:25

MPI，Pthreads和OpenMP等并行实验环境配置

（假设你已按照文档前面的步骤正确安装了 VMware 和 Ubuntu 20.04） 第一部分：安装 C/OpenMP/Pthreads 环境（修正后） 打开终端： 在 Ubuntu 中启动终端应用程序。更新软件包列表： sudo ap…...

编程日记 2025/6/28 20:05:44

Spring AI Advisors API：AI交互的灵活增强利器

Spring AI Advisors API：AI交互的灵活增强利器前言在当今的软件开发领域，随着人工智能技术的飞速发展，将AI融入应用程序变得越来越普遍。Spring AI作为一个强大的框架，为开发者提供了便捷的方式来实现这一目标。其中的Advisor…...

编程日记 2025/6/28 20:05:42

排序功法入门指南【江湖算法笔记】

话说江湖风云变幻，各路英雄好汉行走江湖，总得有个名号排行。若问“东邪西毒南帝北丐”谁强谁弱，总得排个座次不是？这排序之道，恰似武功秘籍，练好了能号令群雄，练岔了怕是要被笑掉大牙&#xff0…...

编程日记 2025/6/28 20:05:39

Free Draft Model！Lookahead Decoding加速大语言模型解码新路径

Free Draft Model！Lookahead Decoding加速大语言模型解码新路径大语言模型（LLMs）在当今AI领域大放异彩，但其自回归解码方式锁死了生成效率。本文将为你解读一种全新的解码算法——Lookahead Decoding，它无需Draft Mo…...

编程日记 2025/7/11 6:06:10

Spring AI 实战：第八章、Spring AI Tool Calling之与时俱进

引言：AI的"知识截止日期"尴尬如果你想问大模型"明天是星期几？"，猜猜TA会怎么答复你~ @GetMapping("/tools/simple/test") public String simpleTest() {return chatClient.prompt...

编程日记 2025/6/28 20:05:37

PyTorch数据集与数据集加载

PyTorch中的Dataset与DataLoader详解 1. Dataset基础 Dataset是PyTorch中表示数据集的抽象类，我们需要继承它并实现两个关键方法： from torch.utils.data import Datasetclass CustomDataset(Dataset):def __init__(self, data, labels):""…...

编程日记 2025/6/29 6:55:57

探秘 Git 底层原理：理解版本控制的基石

Git 是一款开源的分布式版本控制系统，在软件开发领域广泛应用，能有效管理项目的版本变更，Git 已经成为了版本控制的代名词。日常使用中，我们通过git commit提交代码，用git push推送变更，这些便捷操作背后&a…...

编程日记 2025/7/7 18:25:12

chili3d调试10 网页元素css node deepwiki 生成圆柱体生成零件图片

.input是input的外框，.input input是input的内框沙雕全部input都换成textarea了自己的方法用接口定义，把自己的方法pub出去，定义在内部拉出去只是取个值这其实是mainwindow端pub回来的窗口pub端把数据pub回 mainwindow端让mainwindow端…...

编程日记 2025/6/29 7:52:30

【计网】互联网的组成

回顾： 互联网(Internet)：它是一个专有名词，是一个特定的互连网，它是指当下全球最大的、最开放的、由众多网络相互连接而形成的特定的的互连网，采用TCP/IP协议族作为通信规则。一、互联网的组成部分从互联网的工作方…...

编程日记 2025/6/29 7:36:23

Go语言接口实现面对对象的三大特征

一.知识回顾在 Go 语言中，接口是一种强大的抽象机制，它允许我们定义一组方法签名，任何类型只要实现了这些方法，就被视为实现了该接口。接口的实现是隐式的，这意味着类型不需要显式声明它实现了某个接口，只…...

编程日记 2025/6/29 7:34:40

TS 字面量类型

str是string类型l str2是常量，类型是字面量类型用途：配合联合类型确定更严谨精确的可选值利恩...

编程日记 2025/6/29 8:14:25

langchain中 callbacks constructor实现

目录代码代码解释代码结构代码功能类似例子代码 from typing import Any, Dict, Listfrom langchain_openai import ChatOpenAI from langchain_core.callbacks import BaseCallbackHandler from langchain_core.messages import BaseMessage from langchain_core.outputs …...

编程日记 2025/6/29 5:11:32

小土堆pytorch--tensorboard的使用

小土堆pytorch--tensorboard的使用小土堆pytorch--tensorboard的使用0.介绍1.使用tensorboard绘制 y x 等简单函数1.1 相应的代码1.2 对上述代码的解释1.3 可能遇到的问题1.3.1 问题1.3.2 解决方法 2.使用tensorboard加载数据集中的图片2.1 相应代码2.2 对上述代码的解释2.2.…...

编程日记 2025/6/29 6:37:47

从 0 到 1：使用 Jetpack Compose 和智能自动化实现高效 Android UI 开发

现代 Android UI 开发正逐步从命令式 XML 向声明式 Compose 转变。Compose 凭借其简洁、高效、易测试的特点，能够让开发者更专注于界面和业务逻辑，而不必陷入大量模板化的代码。手把手带你构建一个完整的 Todo List 应用，并演示如何借助自动化…...

编程日记 2025/6/29 7:56:26

学习黑客 week1周测复盘

Day 7 – 周测 & 复盘今天任务： 完成 10 道快测题，涵盖 Week 1 的核心知识点：《CIA 三要素》、OWASP Top 10、MITRE ATT&CK、NIST RMF、Linux 权限、TCP/IP、网络安全法、“黑客五阶段” 与风险管理。撰写 300 字周总结&#xf…...

编程日记 2025/6/29 5:23:08

【五一培训】Day 3

Topic 1：元学习一、概念：learn to learn 区分少样本学习与元学习少样本学习（Few-shot learning）是元学习的一个重要应用，它指的是机器能够在仅有少量样本的情况下，成功地学习和泛化到新任务上。在许多现…...

编程日记 2025/7/2 22:32:10

C++继承详讲

1.继承的概念继承是实现代码复用的手段，它允许程序员在保持基类特性的基础上进行扩展，增加功能，这样产生新的类，称派生类。 2.继承和组合 1.继承体系下，子类对象包含父类的成员。组合体系下，子类对象包含…...

编程日记 2025/6/29 7:48:56

第四节：OpenCV 基础入门-第一个 OpenCV 程序：图像读取与显示

一、引言：为什么选择 OpenCV？ 在计算机视觉领域，OpenCV（Open Source Computer Vision Library）是一个开源的、跨平台的计算机视觉库，广泛应用于图像处理、模式识别、机器学习等领域。它支持多种编程语言&a…...

编程日记 2025/6/29 5:11:33

基于PHP实现的easy管理系统

easy管理系统 2.0.1 easy管理系统是一个多功能的 Web 管理平台，旨在简化项目管理、文件共享和协作流程。它集成了大创项目管理、在线文档生成、代码托管等多种功能，并提供了用户管理、系统设置、日志查看等后台管理能力。 ✨ 功能特性统一管理平台:…...

编程日记 2025/6/29 5:20:26

ios systeam introduction

Here is an in-depth look at Apple’s iOS, from its inception to its latest major release, covering architecture, core components, security, app lifecycle, development tools, and the headline features of iOS 18. iOS began life as “iPhone OS,” unveiled alo…...

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

【论文阅读】LLMOPT：一种提升优化泛化能力的统一学习框架

文章目录第一遍一、摘要二、关键词三、预知识1. 什么是优化泛化问题2. 什么是消融研究3. model alignment（模型对齐） 第二遍：了解论文论点一、研究背景与目的二、相关工作三、LLMOPT框架四、METHODOLOGY(方法论)1. 数据处理2. 学习过程3. 自…...

编程日记 2025/6/29 5:11:34

Prompt多版本测试指南：如何科学评估不同提示词的效果

对于现代AI开发来说，同一个需求，不同的提示表达方式往往会产生截然不同的结果。因此，如何设计、测试和优化提示词成为了一项关键技能。本文将深入探讨Prompt多版本测试的技术方法，帮助你系统性地评估不同提示词的效果&#xff0…...

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

每日c/c++题备战蓝桥杯（洛谷P1015 [NOIP 1999 普及组] 回文数）

洛谷P1015 [NOIP 1999 普及组] 回文数题解题目描述 P1015 回文数是NOIP 1999普及组的经典模拟题。题目要求如下： 给定一个数N（十进制）和进制K（2≤K≤16），将N转换为K进制表示后，通过以下操…...

编程日记 2025/6/29 5:22:18

最小单调子序列的长度+联通最小乘积

因为题目ICPC是英文版，基于大家都不怎么看的懂的情况下直接给大家进行题目讲解题目1： 题目分析： 构造一个长度为n的排列 p（里面的数是1-n),不能重复得 max⁡(lis(p),lds(p)) 最小。其中，lis(p)是 p 的最长递增子序…...

编程日记 2025/6/29 5:11:31

OpenHarmony平台驱动开发（一），ADC

OpenHarmony平台驱动开发（一） ADC 概述功能简介 ADC（Analog to Digital Converter），即模拟-数字转换器，可将模拟信号转换成对应的数字信号，便于存储与计算等操作。除电源线和地线之外&#…...

编程日记 2025/6/29 6:44:15

数据结构与算法：回溯

回溯先给出一些leetcode算法题，以后遇见了相关题目再往上增加主要参考代码随想录 2.1、组合问题关于去重：两种写法的性能分析需要注意的是：使用set去重的版本相对于used数组的版本效率都要低很多，大家在leetcode上提交&#x…...

编程日记 2025/7/11 22:00:24

KaiwuDB X 遨博智能 | 构建智能产线监测管理新系统

01 项目背景遨博智能作为国内协作机器人行业领军企业，深度布局制造、农业、医疗、教育、民生等场景，出货量连续四年蝉联国内第一、世界第二。随着工业自动化的蓬勃发展，遨博智能生产规模不断扩大，先后在常州、淄博等地建设完成…...

编程日记 2025/6/29 7:35:55

高等数学第三章---微分中值定理与导数的应用（§3.6 函数图像的描绘§3.7 曲率）

3.6 函数图像的描绘一、曲线的渐近线对于某些函数，其图形向无穷远处延伸时，会越来越趋近于某一条直线，这条直线被称为曲线的渐近线 (Asymptote)。 1. 定义若曲线 y f ( x ) yf(x) yf(x) 上一点 P ( x , y ) P(x, y) P(x,y) 沿曲线趋…...

编程日记 2025/6/29 8:17:48

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】4.2 数据类型转换（CAST函数/自定义函数）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL数据分析实战：数据清洗之数据类型转换（CAST函数/自定义函数）4.2 数据类型转换：让数据「格式正确，类型对…...

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

docker:制作镜像+上传镜像+拉取镜像

1.dockerfile制作镜像示例内容： 1.创建一个index.js的文件 console.log("hello world")2.在相同目录下创建名为dockerfile的文件 FROM node:alpine COPY index.js /index.js CMD node /index.js3.构建镜像 docker build -t minterra/hello-docker . …...

编程日记 2025/6/29 8:20:22

信息系统监理师第二版教材模拟题第三组（含解析）

信息系统监理师模拟题第三组（30题）监理基础理论信息系统工程监理的性质是（） A. 服务性、独立性、公正性、科学性 B. 强制性、营利性、行政性、技术性 C. 临时性、从属性、随意性、主观性 D. 单一性、封闭性、被动性、保守性答案：A 解析：监理具有服务性、独立性、公正…...

编程日记 2025/6/29 6:19:27

潮乎盲盒商城系统全开源多级分销推广海报奖品兑换试玩概率OSS云存储多端源码

一、源码描述这是一套潮乎盲盒商城源码，仿小叮当盲盒商城，后端Laravel框架前端uniappvue，前后端数据库分离，支持四端同步数据（H5小程序等），测试环境: php7.4，mysql5.6，…...

编程日记 2025/6/28 20:05:34

文章记单词 | 第64篇（六级）

一，单词释义 residence [ˈrezɪdəns] n. 住宅；居住；住所；居住期fling [flɪŋ] v. （用力地）扔，掷，抛；猛动（身体或身体部位）；急冲&a…...

编程日记 2025/6/29 8:17:47

数据同步实战篇

文章目录数据同步实战篇1. mysql数据同步1.1 mysql集群部署1.2 数据同步1.2.1 同步复制1.2.2 异步复制1.2.3 半同步复制 2. redis数据同步2.1 redis集群部署2.2 数据同步 3. mq数据同步3.1 mq集群部署3.2 数据同步 4. es数据同步4.1 es集群部署4.2 数据同步数据同步实战篇数…...

编程日记 2025/6/29 7:38:24

具身系列——Double DQN算法实现CartPole游戏（强化学习）

完整代码参考： rl/ddqn_cartpole.py 陈先生/ailib - Gitee.com 部分训练得分： Model saved to ./output/best_model.pth New best model saved with average reward: 9.6 Episode: 0 | Train Reward: 25.0 | Epsilon: 0.995 | Best Eval Avg: 9.6…...

编程日记 2025/6/29 6:59:58

以下是在 Ubuntu 上的几款PDF 阅读器，涵盖轻量级、功能丰富和特色工具：

默认工具：Evince（GNOME 文档查看器） 特点：Ubuntu 预装，轻量快速，支持基本标注和书签。安装：已预装，或手动安装： sudo apt install evince功能全面：Okular&…...

编程日记 2025/6/29 5:36:57

有关水下图像增强的论文

4.21 TEBCF：Real-World Underwater Image Texture Enhancement Model Based on Blurriness and Color Fusion 基于模糊和颜色融合的现实水下图像纹理增强模型 2022年的一篇文章，基于传统方法，基于不同的色彩方法构建了两个新的融合输入。一…...

编程日记 2025/6/29 7:56:31

Raycaster光线投射

Raycaster光线投射 3D虚拟工厂在线体验描述光线投射Raycaster，用于进行raycasting（光线投射）。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。构造器 Raycaster( origin : Vector3, dire…...

编程日记 2025/7/8 19:36:21

javaEE——单例模式

目录前言1.概念2. 实现3. 比较和改进总结前言本篇文章来介绍单例模式，并讲述在保证线程安全的前提下，单例模式的写法。 1.概念单例模式是一种设计模式，可以说是写代码的一种模板，如果在一些固定的场景下按照设计模式进行写…...

编程日记 2025/6/29 5:11:29

WSL在D盘安装Ubuntu

目录前提条件步骤一：查看可用的Linux发行版步骤二：安装Ubuntu 22.04步骤三：导出已安装的Ubuntu到D盘步骤四：注销当前Ubuntu安装步骤五：在D盘导入Ubuntu启动Ubuntu 前提条件 Windows 10或Windows 11系统已启用WSL功能…...

编程日记 2025/7/12 15:19:31

Java并发编程-多线程基础（三）

文章目录线程间通信线程间通信的核心问题volatile 关键字1. 核心特性2. 使用限制3. 示例 synchronized 关键字1. 核心特性2. 示例 volatile 与 synchronized 的对比Volatile 和 Synchronized 最佳实践线程间通信线程间通信的核心问题多个线程通过共享内存实现信息交换&am…...

编程日记 2025/7/4 4:03:38

React--》掌握react构建拖拽交互的技巧

在这篇文章中将深入探讨如何使用react-dnd，从基础的拖拽操作到更复杂的自定义功能带你一步步走向实现流畅、可控且用户友好的拖拽体验,无论你是刚接触拖拽功能的初学者还是想要精细化拖拽交互的经验开发者，都能从中找到适合自己的灵感和解决方案。目录 …...

编程日记 2025/7/14 7:15:36

【Qt】常用的类与数据类型

目录一、Qt常见基本数据类型二、Qt 字符串类应用 2.1 操作字符串 2.2 查询字符串三、QMap 类&QHash 类&QVector 类 3.1 QMap 类 3.2 QHash 类 3.3 QVector 类四、QList 类&QLinkedList 类 4.1 QList 类 4.2 QLinkedList 类 4.3 STL 风格迭代器遍历…...

编程日记 2025/6/29 5:20:08

React实现B站评论Demo

该Demo涉及的技术点 useState函数（数据驱动视图）子组件的封装条件判断回调函数的封装 1、评论数据 {"list": [{"rpid": 3,"user": {"uid": "13258165","avatar": "http://toutiao.…...

编程日记 2025/6/29 5:11:36

从实列中学习linux shell12 通过Shell脚本来优化MySQL数据库性能，特别是慢SQL跟踪和索引优化

在Shell脚本中优化MySQL数据库性能，特别是慢SQL跟踪和索引优化可以通过以下步骤实现。以下是一个结构化的解决方案，包含示例代码和详细说明： 1. 启用慢查询日志目标：动态启用慢查询日志并配置参数，收集慢SQL数据。…...

编程日记 2025/6/29 5:39:03

ES6入门---第三单元模块一：类、继承

补充： prototype 属性使您有能力向对象添加属性和方法。 object.prototype.namevalue <script>function Person(name, age){this.name name;this.age age;}/* Person.prototype.showName function(){return 名字为: ${this.name};};Person.prototype.showA…...

编程日记 2025/6/28 20:05:32

CSS 变量与原生动态主题实现

CSS 变量与原生动态主题实现 CSS 变量基础 CSS 变量（自定义属性）是 CSS 语言的一项强大功能，允许我们在样式表中定义和重用值。与 SCSS 或 LESS 等预处理器中的变量不同，CSS 变量在运行时计算，这意味着它们可以动态更…...

编程日记 2025/7/14 10:32:54

Ubuntu 安装 Docker

安装 Docker 1. 卸载旧版本（如果有） sudo apt-get remove docker docker-engine docker.io containerd runc 2. 更新 APT 包的索引 sudo apt-get update 3. 安装依赖包 sudo apt-get install -y \ca-certificates \curl \gnupg \lsb-release4. 添加…...

编程日记 2025/6/28 20:05:28

SpringMVC——第三章：获取请求数据

假设有这样一个请求：http://localhost:8080/springmvc/register?namezhangsan&password123&emailzhangsanpowernode.com 在SpringMVC中应该如何获取请求提交的数据呢？ 在SpringMVC中又应该如何获取请求头信息呢？ 在SpringMVC中又应…...

编程日记 2025/6/28 20:05:26