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

微信小程序实现图片拖拽调换位置效果 -- 开箱即用

news 来源：原创 2025/5/12 3:01:24

在编写类似发布朋友圈功能的功能时，需要实现图片的拖拽排序，删除图片等功能。

一、效果展示

**博主的小程序首页也采用了该示例代码，可以在威信中搜索：我的百宝工具箱
在这里插入图片描述

二、示例代码

1.1、在自己的小程序中创建组件

1.2、组件源码

wxml代码

<view class="drag-container"><view wx:for="{{dragImgList}}" wx:key="id"style="transform: translate({{index === currentIndex ? tranX : item.tranX}}px, {{index === currentIndex ? tranY : item.tranY}}px); z-index: {{index === currentIndex ? 10 : 1}}; width: {{previewSize}}px; height: {{previewSize}}px;" class="drag-item drag-item-transition" mark:index="{{index}}" mark:key="{{item.key}}" catch:longpress="longPress" catch:touchmove="touchMove" catch:touchend="touchEnd"><image class="drag-item-img" src="{{item.src}}" mode="aspectFill"/><view catch:tap="deleteImg" mark:key="{{item.key}}" class="drag-item-delete"><view class="drag-item-delete_default" style="{{deleteStyle}}">x</view></view></view><view bindtap="uploadImage" class="drag-item drag-upload" hidden="{{dragImgList.length >= maxCount}}" style="transform: translate({{uploadPosition.tranX}}px, {{uploadPosition.tranY}}px); width: {{previewSize}}px; height: {{previewSize}}px;"><text>+</text></view>
</view>

wxss代码

.drag-container {position: relative;left: 30rpx;top: 20rpx;
}.drag-item {position: absolute;top: 0;left: 0;
}.drag-item-transition {transition: transform 0.1s
}.drag-item-img {width: 100%;height: 100%;
}.drag-item-delete {position: absolute;top: 0;right: 0;
}.drag-item-delete_default {display: flex;width: 21px;height: 15px;line-height: 10px;justify-content: center;background-color: rgba(0, 0, 0, 0.7);border-radius: 0 0 0 12px;color: #FEFEFE;
}.drag-upload {display: flex;justify-content: center;align-items: center;border: 2px dashed silver;width: 100%;height: 100%;box-sizing: border-box;font-size: 70px;
}
.drag-upload text{margin-top: -20%;color: silver;
}

js代码

Component({properties: {// 每个格子的大小 100*100previewSize: {type: Number,value: 100},// 默认图片列表defaultImgList: {type: Array,value: [],observer(t) {if (t?.length && !this.data.dragImgList.length) {const e = this.getDragImgList(t);this.setUploaPosition(e.length), this.setData({dragImgList: e})}}},// 最大个数maxCount: {type: Number,value: 9},// 每行列数columns: {type: Number,value: 3},// 每个格子之间的间隔gap: {type: Number,value: 9},deleteStyle: {type: String,value: ""}},data: {dragImgList: [],containerRes: {top: 0,left: 0,width: 0,height: 0},currentKey: -1,currentIndex: -1,tranX: 0,tranY: 0,uploadPosition: {tranX: 0,tranY: 0}},lifetimes: {ready() {this.createSelectorQuery().select(".drag-container").boundingClientRect((({top: t,left: e}) => {this.setData({"containerRes.top": t,"containerRes.left": e})})).exec()}},methods: {longPress(t) {const e = t.mark.index,{pageX: a,pageY: i} = t.touches[0],{previewSize: s,containerRes: {top: n,left: r}} = this.data;this.setData({currentIndex: e,tranX: a - s / 2 - r,tranY: i - s / 2 - n})},touchMove(t) {if (this.data.currentIndex < 0) return;const {pageX: e,pageY: a} = t.touches[0], {previewSize: i,containerRes: {top: s,left: n}} = this.data, r = e - i / 2 - n, o = a - i / 2 - s;this.setData({tranX: r,tranY: o});const h = t.mark.key,g = this.getMoveKey(r, o);h !== g && this.data.currentKey !== h && (this.data.currentKey = h, this.replace(h, g))},getMoveKey(t, e) {const {dragImgList: a,previewSize: i,columns: s} = this.data, n = (t, e) => {const a = Math.round(t / i);return a >= e ? e - 1 : a < 0 ? 0 : a}, r = s * n(e, Math.ceil(a.length / s)) + n(t, s);return r >= a.length ? a.length - 1 : r},replace(t, e) {const a = this.data.dragImgList;a.forEach((a => {t < e ? a.key > t && a.key <= e ? a.key-- : a.key === t && (a.key = e) : t > e && (a.key >= e && a.key < t ? a.key++ : a.key === t && (a.key = e))})), this.getListPosition(a)},getListPosition(t) {const {previewSize: e,columns: a,gap: i} = this.data, s = t.map((t => (t.tranX = (e + i) * (t.key % a), t.tranY = Math.floor(t.key / a) * (e + i), t)));this.setData({dragImgList: s}), this.updateEvent(s)},touchEnd() {this.setData({tranX: 0,tranY: 0,currentIndex: -1}), this.data.currentKey = -1},updateEvent(t) {const e = [...t].sort(((t, e) => t.key - e.key)).map((t => t.src));this.triggerEvent("updateImageList", {list: e})},async uploadImage() {let {dragImgList: t,maxCount: e} = this.data;try {const a = await wx.chooseMedia({count: e - t.length,mediaType: ["image"]}),i = this.getDragImgList(a?.tempFiles?.map((({tempFilePath: t}) => t)) || [], !1);t = t.concat(i), this.setUploaPosition(t.length), this.setData({dragImgList: t}), this.updateEvent(t)} catch (t) {console.log(t)}},getContainerRect(t) {const {columns: e,previewSize: a,maxCount: i,gap: s} = this.data, n = t === i ? t : t + 1, r = Math.ceil(n / e);return {width: e * a + (e - 1) * s,height: r * a + s * (r - 1)}},getDragImgList(t, e = !0) {let {dragImgList: a,previewSize: i,columns: s,gap: n} = this.data;return t.map(((t, r) => {const o = (e ? 0 : a.length) + r;return {tranX: (i + n) * (o % s),tranY: Math.floor(o / s) * (i + n),src: t,id: o,key: o}}))},setUploaPosition(t) {const {previewSize: e,columns: a,gap: i} = this.data, s = {tranX: t % a * (e + i),tranY: Math.floor(t / a) * (e + i)}, {width: n,height: r} = this.getContainerRect(t);this.setData({uploadPosition: s,"containerRes.width": n,"containerRes.height": r})},deleteImg(t) {const e = t.mark.key,a = this.data.dragImgList.filter((t => t.key !== e));a.forEach((t => {t.key > e && t.key--})), this.getListPosition(a), this.setUploaPosition(a.length)}}
});

json代码

{"component": true,"usingComponents":{}
}

1.3、在自己的小程序中新建page

1.4、新建page的源码

wxml代码

<view><wxDragImgdefaultImgList="{{imgList}}"previewSize="{{120}}"maxCount="{{9}}"columns="{{3}}"gap="{{10}}"bind:updateImageList="updateImageList"></wxDragImg>
</view>

js代码

Page({data: {imgList: []},onLoad() {},updateImageList(e) {console.log(e)}
})

json代码

{"usingComponents": {"wxDragImg": "../wx-drag-img"}
}

微信小程序实现图片拖拽调换位置效果 -- 开箱即用

在编写类似发布朋友圈功能的功能时，需要实现图片的拖拽排序，删除图片等功能。一、效果展示 **博主的小程序首页也采用了该示例代码，可以在威信中搜索：我的百宝工具箱二、示例代码 1.1、在自己的小程序中创建组件 1.2、组件…...

编程日记 2025/5/12 3:01:24

提问在Django编写异步视图的时候会出现 AssertionError: Expected a Response, HttpResponse or HttpStreamingResponse to be returned from the view 或者 TypeError: sync_to_async can only be applied to sync functions. 诸如此类的错误的时候一般发生在异步视图中…...

编程日记 2025/5/11 21:03:06

C++：类和对象（2）

1. 类的默认成员函数： 类的默认成员函数就是用户没有显示实现，编译器会自动生成的成员函数称为默认成员函数。一个类，我们不写的情况下编译器会默认生成6个默认成员函数（构造函数，析构函数，拷贝构造函数&a…...

编程日记 2025/5/12 2:37:16

.NET用C#导入Excel数据到数据库

将Excel文件中的数据导入到数据库中不仅能够提升数据处理的效率和准确性，还能极大地促进数据分析和决策制定的过程。尤其在企业级应用中，Excel作为数据输入和初步整理的工具非常普遍，但其功能对于复杂查询、大规模数据管理和跨部门的数据共享…...

编程日记 2025/5/6 12:31:27

市场上显卡型号需求分析

两个平台统计：（关键词统计，仅做参考） GPU型号｜平台 github(提交量/万) huggingface（模型量/个） H100 6.6 210 A100 17.2 483 V100 14.4 484 4090 27.3 31 3090 11.1 92 在git…...

编程日记 2025/5/12 1:45:35

IO模型分类

IO模型分类简单了解阻塞I/O 当用户程序执行read，线程被阻塞，等待两个过程，内核数据准备好和数据从内核态拷贝到用户态。read才返回非阻塞I/O 非阻塞的read请求在还没准备好数据就返回，期间程序不断轮询内核直到数据准备完…...

编程日记 2025/5/9 21:13:12

使用API有效率地管理Dynadot域名，查看域名优惠信息

前言 Dynadot是通过ICANN认证的域名注册商，自2002年成立以来，服务于全球108个国家和地区的客户，为数以万计的客户提供简洁，优惠，安全的域名注册以及管理服务。 Dynadot平台操作教程索引（包括域名邮箱&…...

编程日记 2025/5/6 0:08:59

QT 中 QMessageBox 的简单用法

效果思路 // 创建一个question弹出对话框，添加两个按钮：Yes和NoQMessageBox *box new QMessageBox(QMessageBox::Question, "提示", "确认删除的信息吗？", QMessageBox::Yes | QMessageBox::No, this);box->button(…...

编程日记 2025/5/12 2:38:18

2024-12-6-sklearn学习（4）支持向量机吴楚东南坼，乾坤日夜浮。

文章目录 sklearn学习(4) 支持向量机4.1 分类4.1.1 多元分类4.1.2 得分和概率4.1.3 非均衡问题 4.2 回归4.3 密度估计, 异常（novelty）检测4.4 复杂度4.5 使用诀窍(Tips on Practical Use)4.6 核函数4.6.1 自定义核4.6.1.1 使用 python 函数作为内核4.6.1…...

编程日记 2025/5/10 17:53:17

Linux 正确关机方式详解

在Linux系统中，正确地关机是一个重要的操作，它不仅影响到系统的数据完整性，还可能影响到其他用户的工作。本文将详细介绍Linux系统中的各种关机方式，包括它们的使用场景和具体命令。为什么需要正确关机在DOS和Windows系统中&a…...

编程日记 2025/5/12 1:59:16

React Portals 有什么用

React Portals是React提供的一种机制，它允许开发者将组件渲染到DOM树中的不同位置，而不受组件层次结构的限制。React Portals的主要用途和优势包括以下几个方面： 用途和优势处理全局UI元素 React Portals允许将UI元素渲染到应用的根DOM之外…...

编程日记 2025/5/12 2:05:28

光学偏振的基础知识

前言与目录 XXX 目录一、二、三、一、总结光的偏振光具有三个基本特性，即波长、强度和偏振。光的波长很容易理解，以常见的可见光为例，波长范围为380~780nm。光的强度也很容易理解，一束光的强弱可以通过功率的大小来表征…...

编程日记 2025/5/12 1:23:20

小程序 - 计算器

小程序交互练习 - 计算器小程序目录计算器功能描述准备工作创建项目配置导航栏创建utils目录 math.js文件内容 calc.js文件内容页面内容页面样式内容页面脚本事件功能截图总结计算器在日常生活中，计算器是人们广泛使用的工具&#xff0…...

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

软件架构：从传统单体到现代微服务的技术演变

1.引言在软件开发中，架构设计不仅仅是程序员的技术任务，它更是一个项目成功的关键。无论是小型应用还是大型分布式系统，软件架构都直接影响着系统的可维护性、可扩展性、性能和稳定性。理解软件架构的必要性，能够帮助开发人员做…...

编程日记 2025/5/12 1:25:27

CTF之密码学（rot密码）

ROT加密算法，也被称为Caesar加密，是一种简单的字母替换加密算法。以下是对ROT加密算法的详细介绍： 一、基本原理 ROT加密算法通过将字母表中的每个字母向后（或向前）移动固定的位置来加密文本。选择一个固定的偏移量&…...

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

linux安装nodejs管理器，并配置node、npm 软链接

一，安装nodejs管理器注意——不同版本，可能有问题亲测这个版本，安装后，npm正常使用——v20.10.0 二，配置软链接——快速访问——不要多些空格（会出现invalid option错误） ln -s /www/server…...

编程日记 2025/5/8 5:31:54

Linux 环境下 PostgreSQL 常用命令操作指南

在 Linux 系统中，PostgreSQL 配备了一系列实用命令以进行数据库操作。具体如下： 注意事项：若采用 docker 部署，需预先进入 docker 容器。进入 docker 容器命令： docker exec -it 容器名 bash 向容器内复制本地文件命…...

编程日记 2025/5/12 2:50:50

Implicit style-content separation using lora

1.Introduction 图像风格化，这个任务涉及根据某些风格参考改编图像的风格，这些参考可以是基于文本或基于图像的，同时保持其内容不变，内容指的是图像的语义信息和结构，而风格通常指的是视觉特征和模式，例如颜色和纹理。这是一个有挑战的任务，因为风格和内容之间的强关联…...

编程日记 2025/5/11 20:18:18

网易博客旧文-----如何在WINDOWS下载安卓（android）源代码并和eclipse做关联

如何在WINDOWS下载安卓（android）源代码并和eclipse做关联 2013-02-05 17:27:16| 分类： 安卓开发 | 标签： |举报 |字号大中小订阅编写安卓程序时，有时想看看安卓某些类的实现，但默认情况下环境是不带的。…...

编程日记 2025/5/12 3:00:19

Qt入门9——绘图

基本概念虽然Qt已经内置了很多的控件,但是不能保证现有控件就可以应对所有场景. 很多时候我们需要更强的"DIY"能力； Qt 提供了画图相关的API,可以允许我们在窗口上绘制任意的图形形状,来完成更复杂的界面设计。绘图api核心类： 类说明QPaint…...

编程日记 2025/5/7 4:14:48

漫画之家系统：Spring Boot框架下的漫画版权保护

摘要随着信息技术和网络技术的飞速发展，人类已进入全新信息化时代，传统管理技术已无法高效，便捷地管理信息。为了迎合时代需求，优化管理效率，各种各样的管理系统应运而生，各行各业相继进入信息管理时代&a…...

编程日记 2025/5/12 2:58:12

K8S服务突然中断无法访问：报The node had condition: [DiskPressure]异常

一、背景程序在运行过程中，突然无法访问，发现后台接口也无法访问；查看kuboard，发现报如下异常：The node had condition: [DiskPressure]. 继续查看磁盘使用率，发现系统盘使用率已经高达93%。问题前后呼应…...

编程日记 2025/5/10 10:22:18

5.11【机器学习】

先是对图像进行划分划分完后， 顺序读取文件夹，在文件夹里顺序读取图片， 卷积层又称为滤波器，通道是说滤波器的个数，黑白通道数为1，RGB通道个数为3 在输入层，对于输入层而言，滤波…...

编程日记 2025/5/12 2:35:10

JavaWeb开发12

登陆拦截会话技术会话：用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应会话跟踪：一种维护浏览器状态的方法，服务器需要识…...

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

《乌合之众》笔记

1.集体会降智，会互相传染 2.群体是无名氏，因此没必要承担责任。约束个人的责任感消失 3.有意识人格的消失，无意识人格的得势，思想和感情因为暗示和互相传染而转向一个共同的方向，以及立刻把暗示的观念转化为行动的倾…...

编程日记 2025/5/12 1:46:36

[241206] X-CMD 发布 v0.4.15：env 升级，mirror 支持华为/腾讯 npm 镜像，pb-wayland 剪贴板

目录 X-CMD 发布 v0.4.15📃Changelog📦 env|pkg🪞 mirror📑 pb🎨 theme|starship|ohmyposh🤖 chat📝 man✅ 升级指南 X-CMD 发布 v0.4.15 📃Changelog 📦 env|pkg 新增…...

编程日记 2025/5/12 1:23:20

Vue前端开发-路由跳转及带参数跳转

在Vue 3中，由于没有实例化对象this，因此，无法通过this去访问 $route对象，而是通过导入一个名为 useRouter 的方法，执行这个方法后，返回一个路由对象，通过这个路由对象就可以获取到当前路由中的信…...

编程日记 2025/5/11 4:07:20

AI赋能：构建安全可信的智能电子档案库

在档案的政策与法规上，《中华人民共和国档案法》2020年修订新增，对电子档案的合法要件、地位和作用、安全管理要求和信息化系统建设等方面作出了明确规定，保障数字资源的安全保存和有效利用。日前，国家档案局令第22号公布《电子…...

编程日记 2025/5/5 23:41:47

时间序列绘图1

用到的包 #时间序列预测 library(forecast) #数据可视化 library(ggplot2) #包含《Forecasting: Principles and Practice》第三版中使用的数据集和函数 library(fpp3)时间序列图 #提取1990年及以后的零售贸易职位的数据，并选择月份和就业人数 us_employment |>…...

编程日记 2025/5/8 11:46:43

云计算.运维.面试题

1、计算机能直接识别的语言（ C ）。 A、汇编语言 B、自然语言 C、机器语言 D、高级语言 2、应用软件是指（ D ）。 A、所有能够使用的软件 B、能被各应用单位共同使用的某种软件 C、所有计算机上都应使用的基本软件D、专门为某一应用目的而编制的软件 3、计算机的显示器是一…...

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

Bootstrap-HTML（三）Bootstrap5列表组全解析

Bootstrap-HTML（三）Bootstrap5列表组全解析前言（一）HTML 列表基础回顾1.无序列表2.有序列表3.定义列表二、无样式的有序列表和无序列表内联列表三、Bootstrap5 列表组1.基础的列表组2.设置禁用和活动项3.链接项的列表组4.移除列…...

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

黑马程序员MybatisPlus/Docker相关内容

Day01 MP相关知识 1. mp配置类： 2.条件构造器： 具体的实现例子： ①QuerryWapper： ②LambdaQueryWrapper: 3.MP的自定义SQL 4.MP的Service层的实现 5.IService下的Lambda查询原SQL语句的写法： Lambda 查询语句的…...

编程日记 2025/5/7 5:18:59

01_Node.js入门 (黑马)

01_Node.js入门知识点自测从 index.js 出发，访问到 student/data.json 的相对路径如何写? A：../public/teacher/data.json B：./public/student/data.json C：../student/data.json <details><summary>答案</sum…...

编程日记 2025/5/12 0:10:15

在Java中使用Apache POI导入导出Excel（六）

本文将继续介绍POI的使用，上接在Java中使用Apache POI导入导出Excel（五） 使用Apache POI组件操作Excel（六） 43、隐藏和取消隐藏行使用 Excel，可以通过选择该行（或行）来隐藏工作表…...

编程日记 2025/5/9 17:50:22

黑马微服务开发与实战学习笔记_MybatisPlus_P2核心功能

系列博客目录文章目录系列博客目录Part1:条件构造器案例基于QueryWrapper的查询案例基于UpdateWrapper的查询条件构造器的用法总结 Part2:自定义SQL案例1案例2解决方案 Part3:IService接口IService接口基本用法实战案例准备工作开始基本用法实战IService的Lambda查询实战批…...

编程日记 2025/5/10 2:26:58

华为云域名网站修改DNS服务器教程

修改单个域名的DNS服务器登录域名注册控制台。进入“域名列表”页面。在域名列表中，单击“域名”列的待修改DNS服务器的域名。进入域名信息页面。图1 域名信息在域名信息页面，单击“DNS服务器”后的“修改”，进入“修改DNS服务器”页面。图2 修改DNS服务器在…...

编程日记 2025/5/5 3:29:23

Redis 基础、Redis 应用

Redis 基础什么是 Redis？ Redis （REmote DIctionary Server）是一个基于 C 语言开发的开源 NoSQL 数据库（BSD 许可）。与传统数据库不同的是，Redis 的数据是保存在内存中的（内存数据库&#xf…...

编程日记 2025/5/7 2:04:22

三分钟掌握MySQL-MVCC底层原理

MVCC介绍 mvcc是mysql为了解决脏读、不可重复读等事务之间读写问题而诞生的；它替代了一些场景下的低效锁，在保证隔离性的基础上，提升了读取效率和并发性。 MVCC实现在mysql中mvcc是基于mysql的undo log和readview来实现的。 undo log 在…...

编程日记 2025/5/9 1:46:08

CSS 快速上手

目录一. CSS概念二. CSS语法 1. 基本语法规范 2. CSS的三种引入方式 (1) 行内样式 (2) 内部样式表 (3) 外部样式表 3. CSS选择器 (1) 标签选择器 (2) 类选择器 (3) id选择器 (4) 通配符选择器 (5) 复合选择器 <1> 空格 <2> 没有空格 <3> &q…...

编程日记 2025/5/6 15:40:03

51c视觉~YOLO~合集4

我自己的原文哦~ https://blog.51cto.com/whaosoft/12512597 1、Yolo8 1.1、检测PCB元件技术世界正在以惊人的速度发展，而这种转变的核心是一个革命性的工具 — 计算机视觉。它最有趣的应用之一是电子印刷电路板 （PCB） 的检测和分析。本文…...

编程日记 2025/5/9 2:02:02

深入浅出：PHP函数的定义与使用

文章目录前言什么是函数定义函数语法示例调用函数示例参数传递按值传递示例按引用传递示例默认参数示例可变数量的参数示例返回值示例变量作用域全局作用域示例局部作用域示例静态作用域示例匿名函数示例闭包示例递归函数示例内置函数常见内置函数示例用户自定义函数示…...

编程日记 2025/5/8 6:34:43

前端调试实践

作者：效能研发部黄泽平前言在日常调试问题中，相信我们很多人都是用console去排查相关的问题，虽然问题也可以排查出来，但是有时它的效率并不高。这篇文章主要讲解关于断点和一些日常调试技巧的内容，方便你在日后调…...

编程日记 2025/5/5 21:51:14

芯科科技突破性超低功耗Wi-Fi 6和低功耗蓝牙5.4模块加速设备部署

致力于以安全、智能无线连接技术，建立更互联世界的全球领导厂商Silicon Labs（亦称“芯科科技”，今日宣布推出SiWx917Y超低功耗Wi-Fi 6和低功耗蓝牙（Bluetooth LE）5.4模块。作为成功的第二代无线开发平台的新产品&…...

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

Matlab自学笔记四十三：使用函数拆分日期时间型数据的子信息：年、月、日、时、分、秒

使用函数拆分日期时间型数据的子信息：年、月、日、时、分、秒，函数包括年year，季度quarter，月month，周week，日day，时hour，分minute，秒second，年月日ymd&#…...

编程日记 2025/5/5 18:10:21

【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处？

【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处？ 重要性：★★★ 💯 NLP Github 项目： NLP 项目实践：fasterai/nlp-project-practice 介绍：该仓库围绕着 NLP 任务模型的设计、训练、优化…...

编程日记 2025/5/10 8:48:11

【Python爬虫实战】轻量级爬虫利器：DrissionPage之SessionPage与WebPage模块详解

🌈个人主页：易辰君-CSDN博客 🔥 系列专栏：https://blog.csdn.net/2401_86688088/category_12797772.html 目录前言一、SessionPage （一）SessionPage 模块的基本功能 （二）基本使…...

编程日记 2025/5/6 11:03:15

python查找大文件

完整代码，不仅会捕获错误，还会输出大于 1MB 文件的大小（以 MB 为单位），并跳过访问受限或已删除的文件。代码 import os# 查找当前目录及子目录下大于 1MB 的文件，并输出文件大小 for root, dirs, files in os.walk(.):for name in files:...

编程日记 2025/4/10 2:31:24

秒懂：使用js验证hash, content hash , chunk hash的区别

一、使用js验证hash, content hash , chunk hash的区别 1、计算一般的 Hash（以简单字符串为例） 使用crypto-js库来进行哈希计算，需提前引入npm install crypto-js库。 crypto-js： 是一个JavaScript加密算法库，用于实…...

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

RabbitMQ消息可靠性保证机制6--可靠性分析

在使用消息中间件的过程中，难免会出现消息错误或者消息丢失等异常情况。这个时候就需要有一个良好的机制来跟踪记录消息的过程（轨迹溯源），帮助我们排查问题。在RabbitMQ中可以使用Firehose实现消息的跟踪，Firehose可…...

编程日记 2025/5/2 4:11:40

【NoSQL数据库】MongoDB数据库——集合和文档的基本操作（创建、删除、更新、查询）

目录一、MongoDB数据库原理二、MongoDB数据库和集合基本操作（增删改查） 三、MongoDB数据库的文档基本操作（增删改） 四、学习笔记往期文章：【NoSQL数据库】MongoDB数据库的安装与卸载-CSDN博客一、MongoDB数据…...

编程日记 2025/5/9 18:27:58