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

UniApp 实现兼容 H5 和小程序的拖拽排序组件

news 来源：原创 2025/9/16 21:08:03

如何使用 UniApp 实现一个兼容 H5 和小程序的 九宫格拖拽排序组件，实现思路和关键步骤。

一、实现目标

支持拖动菜单项改变顺序
拖拽过程实时预览移动位置
拖拽松开后自动吸附回网格
兼容 H5 和小程序平台

二、功能结构拆解以及完整代码

完整代码：

<template><view class="container"><view class="menu-title">菜单列表</view><view class="grid-container"><viewclass="grid-item"v-for="(item, index) in menuList":key="index":class="{ 'active': currentIndex === index }":style="getPositionStyle(index)"@touchstart="handleTouchStart($event, index)"@touchmove.stop.prevent="handleTouchMove($event)"@touchend="handleTouchEnd"><view class="item-content"><view class="item-icon"><uni-icons :type="item.icon || 'star'" size="24"></uni-icons></view><view class="item-name">{{ item.name }}</view></view></view></view></view>
</template><script>
export default {name: 'MenuGrid',data() {return {// 菜单项列表menuList: [{ name: '首页', icon: 'home' },{ name: '消息', icon: 'chat' },{ name: '联系人', icon: 'contact' },{ name: '日历', icon: 'calendar' },{ name: '设置', icon: 'gear' },{ name: '相册', icon: 'image' },{ name: '文件', icon: 'folder' },{ name: '位置', icon: 'location' },{ name: '收藏', icon: 'star-filled' },{ name: '视频', icon: 'videocam' },{ name: '音乐', icon: 'sound' },{ name: '订单', icon: 'paperplane' }],// 网格配置columns: 4,     // 每行显示的列数itemSize: 80,   // 每个项目的大小 (单位px)itemGap: 15,    // 项目之间的间隔// 拖拽状态currentIndex: -1, // 当前拖拽的项目索引startX: 0,       // 触摸开始X坐标startY: 0,       // 触摸开始Y坐标moveOffsetX: 0,  // X轴移动的距离moveOffsetY: 0,  // Y轴移动的距离positions: [],   // 所有项目的位置isDragging: false // 是否正在拖拽}},mounted() {this.initPositions();},methods: {// 初始化所有项目的位置initPositions() {this.positions = [];const { itemSize, itemGap, columns } = this;this.menuList.forEach((_, index) => {const row = Math.floor(index / columns);const col = index % columns;// 计算项目位置this.positions.push({x: col * (itemSize + itemGap),y: row * (itemSize + itemGap),zIndex: 1});});},// 获取项目定位样式getPositionStyle(index) {if (!this.positions[index]) return '';const position = this.positions[index];const { itemSize } = this;return {transform: `translate3d(${position.x}px, ${position.y}px, 0)`,width: `${itemSize}px`,height: `${itemSize}px`,zIndex: position.zIndex || 1};},// 处理触摸开始handleTouchStart(event, index) {if (this.isDragging) return;const touch = event.touches[0];this.currentIndex = index;this.startX = touch.clientX;this.startY = touch.clientY;this.moveOffsetX = 0;this.moveOffsetY = 0;this.isDragging = true;// 提升当前项的层级this.positions[index].zIndex = 10;// 震动反馈uni.vibrateShort();},// 处理触摸移动handleTouchMove(event) {if (this.currentIndex === -1 || !this.isDragging) return;const touch = event.touches[0];// 计算移动距离const deltaX = touch.clientX - this.startX;const deltaY = touch.clientY - this.startY;this.moveOffsetX += deltaX;this.moveOffsetY += deltaY;// 更新拖拽项的位置this.positions[this.currentIndex].x += deltaX;this.positions[this.currentIndex].y += deltaY;// 更新开始位置，用于下一次移动计算this.startX = touch.clientX;this.startY = touch.clientY;// 检查是否需要交换位置this.checkForSwap();},// 处理触摸结束handleTouchEnd() {if (this.currentIndex === -1) return;// 重置拖拽项的层级if (this.positions[this.currentIndex]) {this.positions[this.currentIndex].zIndex = 1;}// 将所有项吸附到网格this.snapAllItemsToGrid();// 重置拖拽状态this.isDragging = false;this.currentIndex = -1;this.moveOffsetX = 0;this.moveOffsetY = 0;// 触发排序完成事件this.$emit('sort-complete', [...this.menuList]);},// 将所有项吸附到网格snapAllItemsToGrid() {const { itemSize, itemGap, columns } = this;this.menuList.forEach((_, index) => {const row = Math.floor(index / columns);const col = index % columns;this.positions[index] = {x: col * (itemSize + itemGap),y: row * (itemSize + itemGap),zIndex: 1};});},// 检查是否需要交换位置checkForSwap() {if (this.currentIndex === -1) return;const currentPos = this.positions[this.currentIndex];const { itemSize, itemGap } = this;let closestIndex = -1;let minDistance = Number.MAX_VALUE;// 找出与当前拖拽项距离最近的项this.positions.forEach((pos, index) => {if (index !== this.currentIndex) {// 计算中心点之间的距离const centerX1 = currentPos.x + itemSize / 2;const centerY1 = currentPos.y + itemSize / 2;const centerX2 = pos.x + itemSize / 2;const centerY2 = pos.y + itemSize / 2;const distance = Math.sqrt(Math.pow(centerX1 - centerX2, 2) +Math.pow(centerY1 - centerY2, 2));// 只考虑距离小于阈值的项const threshold = (itemSize + itemGap) * 0.6;if (distance < threshold && distance < minDistance) {minDistance = distance;closestIndex = index;}}});// 如果找到了足够近的项，交换位置if (closestIndex !== -1) {this.swapItems(this.currentIndex, closestIndex);}},// 交换两个项目swapItems(fromIndex, toIndex) {// 交换菜单列表中的项const temp = { ...this.menuList[fromIndex] };this.$set(this.menuList, fromIndex, { ...this.menuList[toIndex] });this.$set(this.menuList, toIndex, temp);// 交换位置信息[this.positions[fromIndex], this.positions[toIndex]] =[this.positions[toIndex], this.positions[fromIndex]];// 更新当前拖拽的索引this.currentIndex = toIndex;}}
}
</script><style scoped>
.container {padding: 20rpx;background-color: #f7f7f7;
}.menu-title {font-size: 32rpx;font-weight: bold;margin-bottom: 30rpx;text-align: center;
}.grid-container {position: relative;width: 100%;min-height: 500rpx;overflow: hidden;
}.grid-item {position: absolute;left: 0;top: 0;transition: transform 0.3s ease;will-change: transform;
}.grid-item.active {transition: none;transform: scale(1.05);z-index: 10;
}.item-content {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #ffffff;border-radius: 12rpx;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}.item-icon {display: flex;justify-content: center;align-items: center;margin-bottom: 10rpx;
}.item-name {font-size: 24rpx;color: #333;text-align: center;
}
</style>

整个功能可以拆分为以下几个部分：

网格布局计算：确定每个 item 的初始位置
拖拽事件绑定：监听 touchstart / touchmove / touchend
实时移动渲染：跟随手指移动改变 transform 样式
最近距离判断：判断最近的可交换项并交换
松开后归位：释放手指后吸附至新的位置

三、组件结构设计

1. 模板部分

使用 v-for 渲染菜单项，并绑定触摸事件。

<view class="grid-item"v-for="(item, index) in menuList":key="index":class="{ 'active': currentIndex === index }":style="getPositionStyle(index)"@touchstart="handleTouchStart($event, index)"@touchmove.stop.prevent="handleTouchMove($event)"@touchend="handleTouchEnd"><!-- 图标和文字 -->
</view>

2. 数据结构

menuList: 菜单数据
positions: 所有 item 的坐标信息
currentIndex: 当前拖拽的索引
startX/Y: 拖拽起始点坐标
moveOffsetX/Y: 移动的累计距离
isDragging: 是否正在拖拽中

3. 初始化位置

通过 itemSize + itemGap + columns 计算每一项的坐标。

const row = Math.floor(index / columns);
const col = index % columns;
positions.push({x: col * (itemSize + itemGap),y: row * (itemSize + itemGap),zIndex: 1
});

4. 拖拽处理流程

- 触摸开始

记录初始触摸位置
提升 z-index
设置当前拖拽 index

- 拖动中

计算当前位置偏移量
实时更新拖拽项的 transform 位置
检查距离最近的其他项是否可交换

- 拖动结束

重置拖拽状态
吸附所有项回网格对齐
发出排序完成事件

5. 交换逻辑

通过拖拽项与其它项之间的中心点距离，找到最近项，判断是否在交换阈值范围内（比如 0.6 倍 itemSize + gap），再触发 swapItems。

const distance = Math.sqrt((dx)^2 + (dy)^2);
if (distance < threshold) swapItems(fromIndex, toIndex);

四、平台兼容性说明

小程序端： 使用 touchstart, touchmove, touchend 原生事件即可
H5端： 同样支持原生事件，需使用 stop.prevent 修饰符阻止页面滚动
注意事项： 不建议使用 @mousedown 等 PC 事件，移动端表现不一致

五、性能优化建议

使用 transform: translate3d 提升动画性能
拖拽时关闭 transition，松开后再开启
将 drag 状态变化为响应式变量，避免频繁操作 DOM

六、完整效果图示例

H5端
在这里插入图片描述

小程序端
在这里插入图片描述

七、总结

本组件通过计算每个 item 的位置并绑定触摸事件，实现了拖拽排序的能力，支持吸附、交换和动态位置调整，兼容多个平台。适用于菜单管理、组件排序等场景，封装后复用性强。

如果你有更多关于 UniApp 拖拽交互的场景需求，欢迎留言讨论！

UniApp 实现兼容 H5 和小程序的拖拽排序组件

如何使用 UniApp 实现一个兼容 H5 和小程序的九宫格拖拽排序组件，实现思路和关键步骤。一、实现目标支持拖动菜单项改变顺序拖拽过程实时预览移动位置拖拽松开后自动吸附回网格兼容 H5 和小程序平台二、功能结构拆解以及完整代码完整代码： <…...

编程日记 2025/9/16 21:08:03

谷歌推出统一安全平台-一个平台实现跨云网端主动防护

👋 今天要给大家带来一个超级棒的消息！谷歌云推出了全新的“谷歌统一安全平台”，感觉我们的网络安全问题有救啦！😄 随着企业基础设施变得越来越复杂，保护它们也变得越来越难。攻击面不断扩大，安…...

编程日记 2025/9/1 14:33:41

众趣科技丨沉浸式 VR 体验，助力酒店民宿数字化营销宣传

随着旅游季的到来，各地的旅游景区开始“摩拳擦掌”推出各种活动，吸引更多游客来此游玩。自去年以来，冰雪游热度持续上升，尤其是对于满心期待的南方游客来说，哈尔滨仍是冰雪旅游的热门目的地。据美团数据显示&#xff…...

编程日记 2025/9/9 9:10:00

DAY05：【pytorch】图像预处理

1、torchvision 功能：计算视觉工具包 torchvision.transforms：常用的图像预处理方法torchvision.datasets：常用数据集的 dataset 实战，MINIST，CIFAR-10，ImageNet等torchvision.model：常用的模…...

编程日记 2025/9/16 20:59:02

真实企业级K8S故障案例：ETCD集群断电恢复与数据保障实践

背景描述某跨境电商平台生产环境使用Kubernetes（v1.23.17）管理500微服务。某日机房突发市电中断，UPS未能及时接管导致： 3节点ETCD集群（v3.5.4）全部异常掉电 Control-Plane节点无法启动api-server 业务P…...

编程日记 2025/9/16 21:06:57

rbd块设备的id修改

背景看到有这个需求，具体碰到什么场景了不太清楚，之前做过rbd的重构的研究，既然能重构，那么修改应该是比重构还要简单一点的，我们具体看下怎么操作数据结构分析 rbd的元数据信息 [rootlab104 ~]# rbd create tes…...

编程日记 2025/9/16 21:06:57

WP最主题专业的wordpress主题开发

WP最主题（wpzui.com） WP最主题是一个提供高品质WordPress主题的平台。它注重主题的设计和功能，旨在为用户提供美观且实用的主题选择。其主题通常具有良好的用户体验、丰富的自定义选项以及优化的性能，能够满足不同类型的网站搭建…...

编程日记 2025/9/16 21:01:18

HomeAssistant本地化部署结合内网穿透打造跨网络智能家居中枢

文章目录前言1. 添加镜像源2. 部署HomeAssistant3. HA系统初始化配置4. HA系统添加智能设备4.1 添加已发现的设备4.2 添加HACS插件安装设备 5. 安装cpolar内网穿透5.1 配置HA公网地址 6. 配置固定公网地址推荐前些天发现了一个巨牛的人工智能学习网站，通俗易懂…...

编程日记 2025/9/16 20:59:05

# 实时人脸性别与年龄识别：基于OpenCV与深度学习模型的实现

实时人脸性别与年龄识别：基于OpenCV与深度学习模型的实现在当今数字化时代，计算机视觉技术正以前所未有的速度改变着我们的生活与工作方式。其中，人脸检测与分析作为计算机视觉领域的重要分支，已广泛应用于安防监控、智能交互、…...

编程日记 2025/9/16 21:04:21

SAP-ABAP:SAP的Open SQL和Native SQL详细对比

在SAP ABAP开发中，Open SQL和Native SQL是两种操作数据库的方式，它们的核心区别在于可移植性、功能范围及底层实现机制。以下是详细对比： 1. Open SQL：深入解析 1.1 核心特性数据库抽象层 Open SQL 由 SAP 内核的 Database Interface (DBI) 转换为目标数据库的 SQL（如 …...

编程日记 2025/9/10 7:13:20

OpenAI-SB api接口 https://openai-sb.com/ ChatGPT与Knowledge Graph (知识图谱)分享交流 https://www.bilibili.com/video/BV1bo4y1w72m/?spm_id_from333.337.search-card.all.click&vd_source569ef4f891360f2119ace98abae09f3f 《要研究的方向和准备》 https://ww…...

编程日记 2025/9/9 21:14:08

Python设计模式：命令模式

1. 什么是命令模式？ 命令模式是一种行为设计模式，它将请求封装为一个对象，从而使您能够使用不同的请求、队列或日志请求，以及支持可撤销操作。命令模式的核心思想是将请求的发送者与请求的接收者解耦，使得两者之间的…...

编程日记 2025/9/16 21:02:49

30天学Java第八天——设计模式

装饰器模式 Decorator Pattern 装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许通过动态地添加功能来扩展对象的行为，而不需要修改原有的类。这种模式通常用于增强对象的功能，与继承相比，使用…...

编程日记 2025/9/16 6:59:45

Spring事务系列三

Spring事务的传播机制 Spring事务系列一-CSDN博客 Spring事务系列二-CSDN博客文章目录系列文章目录目录文章目录前言一、Spring事务的传播机制 Propagation.REQUIRED: Propagation.SUPPORTS: Propagation.MANDATORY: Propagation.REQUIRES_NEW: Propagation.NOT_SUPPO…...

编程日记 2025/9/16 21:05:41

文件上传做题记录

1，[SWPUCTF 2021 新生赛]easyupload2.0 直接上传php 再试一下phtml 用蚁剑连发现连不上那就只要命令执行了 2，[SWPUCTF 2021 新生赛]easyupload1.0 当然，直接上传一个php是不行的 phtml也不行，看下是不是前端验证，…...

编程日记 2025/9/16 21:00:20

机器学习的监督学习与无监督学习

机器学习主要分为监督学习和无监督学习两大类，两者的核心区别在于数据是否带有标签（Label）。以下是它们的详细对比和说明： 1. 监督学习（Supervised Learning） 定义：通过带有标签的训练数据&…...

编程日记 2025/9/16 21:06:56

C++ 入门三：函数与模板

一、内联函数：编译期嵌入的 “高效函数” 1. 什么是内联函数？ 核心特性：在编译阶段，内联函数的函数体会直接嵌入到调用它的代码中，避免了普通函数的调用开销（如压栈、跳转、返回）。语法&#…...

编程日记 2025/9/7 13:13:41

解析券商qmt的优缺点

现在已经对于大QMT进行了一步步的深入了解与学习，也已经开始积木式搭建策略，进行交易了，但是，随时不断的深入，发现的问题也越来越多。下面开始逐一解析： 首页 | 迅投知识库这是详细的说明。目前券商给大…...

编程日记 2025/9/16 21:06:57

CSE lesson2 chrony服务器

CSE lesson2 chrony服务器 timedatectl命令 NTP(network time protocal)网络时间协议，时钟服务器同步时间的时候会使用到该协议进行时间同步。 #关闭/开启时间同步服务 [rootlocalhost ~]# timedatectl set-ntp 0/1#设置时间（必须关闭时间同步服务才能…...

编程日记 2025/9/16 21:02:47

时光交响曲：杭州的科技与传统交响

故事背景故事发生在中国浙江杭州，以现代科技与文化传统的交融为背景，展现了人与自然、历史的深刻联系。在晨曦中的茶园、宁静的运河书屋、科技堤坝等地方，每个场景都充满了生机与活力，展示了科技如何赋予传统文化新的生命&#x…...

编程日记 2025/9/16 21:06:57

【大模型智能体】Agent2Agent协议加上MCP协议也许会成为未来Agent智能体系统的标配

之前在文章《基于Claude MCP协议的智能体落地示例》、《MCP(Model Context Protocol) 大模型智能体第一个开源标准协议》我们已经对MCP协议做了介绍，MCP提供了将大模型连接到不同数据源和工具的标准方式，包括内容仓库、商业工具和开发环境。以上解决的是…...

编程日记 2025/9/16 20:59:04

opencv(C++)处理图像颜色

文章目录介绍使用策略设计模式比较颜色实现方案计算两个颜色向量之间的距离1. 简单方法：曼哈顿距离计算（Manhattan Distance）2.使用 OpenCV 的 cv::norm 函数3.使用 OpenCV 的 cv::absdiff 函数错误示例使用 OpenCV 函数实现颜色检测实现方…...

编程日记 2025/9/16 21:02:47

2025年焊接与热切割作业证考试真题分享

焊接与热切割作业属于特种作业操作证考试，理论知识点专业性强、安全规范要求高，如何高效备考成为关键！【100分题库】焊接与热切割作业理论备考题库紧扣最新考试大纲，帮你系统掌握考点，一次通过考试！ 1、下…...

编程日记 2025/9/12 10:04:48

AI 代码生成工具如何突破 Java 单元测试效能天花板？

一、传统单元测试的四大痛点时间黑洞：根据 JetBrains 调研，Java 开发者平均花费 35% 时间编写测试代码覆盖盲区：手工测试覆盖率普遍低于 60%（Jacoco 全球统计数据）维护困境：业务代码变更导致 38% 的测试用…...

编程日记 2025/9/7 5:49:21

【C++游戏引擎开发】第13篇：光照模型与Phong基础实现

一、Phong模型数学原理 1.1 光照叠加公式 L = k a I a + k d I d max ⁡ ( 0 , n ⋅ l ) + k s I s max ⁡ ( 0 , r ⋅ v ) α L = k_a I_a + k_d I_d \max(0, \mathbf{n} \cdot \mathbf{l}) + k_s I_s \max(0, \mathbf{r} \cdot \mathbf{v})^\alpha L=kaIa+kdIdmax(0…...

编程日记 2025/9/15 11:29:20

如何在Android系统上单编ko？

文章目录一、先了解编译驱动需要什么？二、配置makefile1、在Android系统编译LOG上找到编译器信息（一般都会打印出来）2、基于源MK构造可独立运行的makefile3）进入docker，在此makefile目录下敲make4）最后根…...

编程日记 2025/9/15 7:53:52

虚拟dom工作原理以及渲染过程

浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用…...

编程日记 2025/9/11 5:25:51

无人机视觉定位，常用相机，及相机提供的数据信息

常用相机类型单目相机：仅使用一个摄像头进行图像采集，结构简单、成本低。它可以获取无人机前方或下方的二维图像信息，包括物体的形状、颜色、纹理等。双目相机：由两个摄像头组成，模拟人类双眼视觉原理，通…...

编程日记 2025/9/16 7:10:33

A2L文件解析

目录 1 摘要2 A2L文件介绍2.1 A2L文件作用2.2 A2L文件格式详解2.2.1 A2L文件基本结构2.2.2 关键元素与声明2.2.3 完整A2L文件示例 3 总结 1 摘要 A2L文件（也称为ASAP2文件）是ECU开发的核心接口文件，用于标定、测量和诊断的关键配置文件&…...

编程日记 2025/8/27 3:11:05

Ansible：role企业级实战

文章目录实现 nginx 角色创建task文件创建handler文件准备模板文件创建变量文件在playbook中调用角色实现 memcached 角色创建相关目录创建相关task任务准备模板文件查看目录结构在playbook中调用角色实现多角色的选择实现 nginx 角色卸载httpd，创建相关目录 a…...

编程日记 2025/9/12 8:23:24

vue2使用vue-echarts

1.先安装echarts npm i echarts 2.安装vue-echarts 安装的时候注意下对应的版本 "echarts": "5.5.0", "vue-echarts": "6.7.3",这是我安装的版本注意事项： 如果安装之后报错："export watchEffect …...

编程日记 2025/9/8 13:44:40

多光谱相机：海洋管道漏油（溢油）监测

每年海上溢油和化工管道漏油造成的污染事故和经济损失频发，在生态方面，漏油会带来导致水质恶化、生态系统破坏、食物链受损。在经济方面，会造成渔业损失、旅游业损失、航运业损失。在健康方面，会造成食品安全问题，直接…...

编程日记 2025/9/13 0:44:58

Kaggle-Digit Recognizer-(多分类+卷积神经网络CNN)

Digit Recognizer 题意： 给你每个图片的dataframe类型的数据，让你预测出每个图片可能是多少。思考： 数据处理 1.首先把数据从dadaframe转换成numpy，数据类型改为float32，并且并且展开为1维的28281的形状&#xf…...

编程日记 2025/9/16 3:41:41

jQuery多库共存

在现代Web开发中，项目往往需要集成多种JavaScript库或框架来满足不同的功能需求。然而，当多个库同时使用时，可能会出现命名冲突、功能覆盖等问题。幸运的是，jQuery提供了一些机制来确保其可以与其他库和谐共存。本文将探讨如何实现…...

编程日记 2025/9/12 5:20:33

MCU的USB接口作为 USB CDC串口输出

前言： 如下内容是和Chatgpt的问答对话。询问了Chatgpt 关于 MCU微控制器内部的USB端口作为串口输出是怎么工作的，是否需要在上位机上安装串口驱动程序等，Chatgpt解答的很好。正文： STM32 使用USB作为串行设备端口，需…...

编程日记 2025/9/8 1:30:01

VCode 的 .S 汇编文件里面的注释不显示绿色

1. 确认文件语言模式打开 .S 文件后，查看 VS Code 右下角的状态栏，确认当前文件的识别模式（如 Assembly、Plain Text 等）。如果显示为 Plain Text 或其他非汇编模式： 点击状态栏中的语言模式（如 Plain Te…...

编程日记 2025/9/16 1:31:43

【数学建模】（智能优化算法）萤火虫算法(Firefly Algorithm)详解与实现

萤火虫算法(Firefly Algorithm)详解与实现文章目录萤火虫算法(Firefly Algorithm)详解与实现前言1. 算法原理2. 算法流程3. Python实现4. 算法特点4.1 优点4.2 缺点 5. 应用领域6. 算法变种7. 总结与展望参考文献前言大家好，今天给大家介绍一种有趣且高效的群体…...

编程日记 2025/9/8 0:22:19

链路追踪组件学习

目录 1. 为啥需要链路追踪2. 常见的链路追踪组件3. 使用过的链路追踪组件3.1. Spring Cloud Sleuth3.2. Zipkin3.3. Apache SkyWalking 4. 集成Spring Cloud Sleuth框架4.1. 流程步骤4.2 sleuth工作流程 5. 集成zipKin5.1 添加 Zipkin 相关依赖5.2 安装zipkin服务5.3 配置 Zipk…...

编程日记 2025/9/15 0:48:05

# 基于OpenCV与Dlib的人脸融合技术实现

从仿射变换到人脸融合：基于OpenCV和Dlib的图像处理实践在图像处理领域，仿射变换和人脸融合是两个非常有趣且实用的技术。仿射变换可以用于图像的几何变换，而人脸融合则可以创造出令人惊叹的视觉效果。本文将通过两个具体的代码示例&#xf…...

编程日记 2025/9/9 0:46:40

多光谱相机：水环境监测（水体富营养化、黑臭水体、藻类水华）

随着全球水体污染问题日益严峻，水体富营养化、黑臭水体和藻类水华等生态危机对人类健康和水生系统构成重大威胁。传统监测手段（如人工采样、单点传感器）因效率低、覆盖不足、实时性差等局限，难以满足复杂水环境的动态监管需求。多…...

编程日记 2025/9/10 0:17:50

记录一次nginx访问前端首页，一直显示nginx首页问题(实际是nginx访问页面权限问题)

同一台服务器，nginx配置是server { listen 8081; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location /New_mh_other { alias /home/hqu/data/new_mh_other; try…...

编程日记 2025/9/15 7:37:18

windows下命名管道双端通信

实现功能 1、命名管道双端通信（异步） 2、客户端断线重连 PS：多线程版本 PipeWrapper.h #include <windows.h> #include <string> #include <vector> #include "Utils/ThreadObject.h" #include "Utils/T…...

编程日记 2025/9/10 1:27:31

Linux自行实现的一个Shell(15)

文章目录前言一、头文件和全局变量头文件全局变量二、辅助函数获取用户名获取主机名获取当前工作目录获取最后一级目录名生成命令行提示符打印命令行提示符三、命令处理获取用户输入解析命令行执行外部命令四、内建命令添加环境变量检查和执行内建命令五、初始化初始化环境…...

编程日记 2025/9/13 1:25:16

powerDesign 逆向 mysql 生成物理模型，并用VBS脚本整理comment

学习自：https://www.cnblogs.com/xmyjcs/p/8536233.html 文章目录 Reverse Engineer格式化模型执行 VBS 脚本 Reverse Engineer 下面 DBMS 可以通过 ODBC（Open Database Connectivity，开放数据库连接）连接， 需要自己先…...

编程日记 2025/9/15 1:09:41