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

Web开发：一个可拖拽的模态框（HTML、CSS、JavaScript）

news 文章来源：https://blog.csdn.net/m0_65029152/article/details/140320083 2024/9/22 13:28:31

目录

一、需求描述

二、实现效果

三、完整代码

四、实现过程

1、HTML 页面结构

2、CSS 元素样式

3、JavaScript动态控制

（1）获取元素

（2）显示\隐藏遮罩层与模态框

（3）实现模态框拖动效果

一、需求描述

实现一个可以拖拽的模态框；

  • 点击打开按钮，显示模态框和遮罩层；
  • 点击关闭按钮或遮罩层，隐藏模态框和遮罩层；
  • 在模态框的标题栏按下并移动鼠标，模态框跟随鼠标移动（拖拽效果）；

二、实现效果

1、点击按钮显示遮罩层和模态框

2、在模态框标题栏按下并移动鼠标，模态框跟随移动

3、点击关闭按钮或者遮罩层隐藏模态框

三、完整代码

【test.html】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>可拖拽的模态框</title><style>* {margin: 0;padding: 0;caret-color: transparent;}.open-btn {display: inline-block;margin: 60px;padding: 10px 20px;font-size: 16px;color: #fff;background-color: #409eff;border: none;border-radius: 8px;}.modal-box {display: none;position: fixed;top: 120px;left: 60px;width: 400px;min-height: 200px;padding: 10px;background: #fff;border-radius: 8px;box-shadow: 0 0 4px 1px #acacac;z-index: 99999;}.modal-title {text-align: center;font-size: 18px;font-weight: 700;padding: 20px;border-bottom: 1px solid #ddd;cursor: move;}.modal-body {margin: 20px 0;}.close-btn {position: absolute;top: 6px;right: 6px;width: 18px;height: 18px;background-image: url("D:\\test\\close.svg");background-size: cover;}.mask {display: none;width: 100vw;height: 100vh;position: fixed;top: 0px;left: 0px;background: rgba(0, 0, 0, .3);}</style>
</head><body><button class="open-btn">打开模态框</button><div class="mask"></div><div class="modal-box"><div class="modal-title">一个可以拖拽的模态框</div><div class="modal-body">内容区域不能拖到</div><div class="close-btn" /></div>
</body>
<script>// 获取打开按钮var openBtn = document.querySelector(".open-btn");// 获取模态框var modalBox = document.querySelector(".modal-box");// 获取模态框标题var modalTitle = document.querySelector(".modal-title")// 获取关闭按钮var closeBtn = document.querySelector(".close-btn");// 获取遮罩层var maskBox = document.querySelector(".mask");// 2、显示\隐藏遮罩层与模态框// 2.1、点击打开按钮，显示模态框和遮罩层openBtn.addEventListener('click', function () {maskBox.style.display = "block";modalBox.style.display = "block";})// 2.2、点击关闭按钮 或者遮罩层 隐藏模态框和遮罩层closeBtn.addEventListener('click', function () {maskBox.style.display = "none";modalBox.style.display = "none";})maskBox.addEventListener('click', function () {maskBox.style.display = "none";modalBox.style.display = "none";})// 3、拖动模态框// 3.1 鼠标按下modalTitle.addEventListener('mousedown', function (e) {// 获取鼠标起始位置坐标var mouseX = e.pageX;var mouseY = e.pageY;// 模态框的初始左边距 上边距var modalBoxX = modalBox.offsetLeft;var modalBoxY = modalBox.offsetTop;// 3.2 鼠标移动 计算模态框的移动距离modalTitle.addEventListener('mousemove', moveMouse);// 3.3 鼠标弹起 移除鼠标移动事件modalTitle.addEventListener('mouseup', function () {modalTitle.removeEventListener('mousemove', moveMouse)})// 鼠标移动事件回调function moveMouse(e) {// 模态框移动的边距 = 模态框的起始边距 + 鼠标的相对移动值;modalBox.style.left = modalBoxX + (e.pageX - mouseX) + 'px';modalBox.style.top = modalBoxY + (e.pageY - mouseY) + 'px';}})
</script></html>

四、实现过程

1、HTML 页面结构

  • 一个按钮【button元素】，用来点击显示模态框和遮罩层；
  • 一个遮罩层【div元素】；
  • 一个模态框【div元素】，其中包含模态框的标题【div元素】、内容【div元素】和关闭按钮【div元素】；
<body><button class="open-btn">打开模态框</button><div class="mask"></div><div class="modal-box"><div class="modal-title">一个可以拖拽的模态框</div><div class="modal-body">内容区域不能拖到</div><div class="close-btn" /></div>
</body>

2、CSS 元素样式

（1）按钮样式

根据自己的喜好自行添加按钮的样式即可；

.open-btn {display: inline-block;margin: 60px;padding: 10px 20px;font-size: 16px;color: #fff;background-color: #409eff;border: none;border-radius: 8px;
}

（2）遮罩层样式 

  • 先不用设置遮罩层的display为none，先让它显示出来，便于观察；
  • 设置遮罩层的宽高分别为 100vw 和 100vh ，占满浏览器的整个窗口（根据浏览器窗口大小自适应，始终占满）；
  • 遮罩层使用固定定位【 position: fixed; 】，使其不受其他元素的位置影响；
.mask {/* display: none; */position: fixed;top: 0px;left: 0px;width: 100vw;height: 100vh;background: rgba(0, 0, 0, .3);
}

 

（3）模态框样式

  • 模态框跟遮罩层一样，不用设置display为none；
  • 模态框也使用固定定位【 position: fixed; 】，使其不受其他元素的位置影响；
  • 模态框的标题设置cursor属性为move，当鼠标移动到模态框的标题位置时，会显示移动样式；
  • 模态框的关闭按钮，使用的是div元素，将其定位到模态框的右上角，并设置其背景为svg图标；
.modal-box {/* display: none; */position: fixed;top: 120px;left: 60px;width: 400px;min-height: 200px;padding: 10px;background: #fff;border-radius: 8px;box-shadow: 0 0 4px 1px #acacac;z-index: 99999;
}
.modal-title {text-align: center;font-size: 18px;font-weight: 700;padding: 20px;border-bottom: 1px solid #ddd;cursor: move;
}.modal-body {margin: 20px 0;
}.close-btn {position: absolute;top: 6px;right: 6px;width: 18px;height: 18px;background-image: url("D:\\test\\close.svg");background-size: cover;
}

3、JavaScript动态控制

（1）获取元素

将页面中需要操作的元素都进行获取；

这里使用的是querySelector()方法来获取元素，是JavaScript中获取dom元素的方式之一；

<script>// 1、获取页面元素// 获取打开按钮var openBtn = document.querySelector(".open-btn");// 获取模态框var modalBox = document.querySelector(".modal-box");// 获取模态框标题var modalTitle = document.querySelector(".modal-title")// 获取关闭按钮var closeBtn = document.querySelector(".close-btn");// 获取遮罩层var maskBox = document.querySelector(".mask");......
</script>

（2）显示\隐藏遮罩层与模态框

在控制遮罩层和模态框的显示与隐藏之前，需要先将其display属性设为none；

.mask {display: none;......
}.modal-box {display: none;......
}

根据案例需求，可以知道：

  • 遮罩层和模态框的显示与隐藏是同时的，模态框显示则遮罩层显示，模态框隐藏则遮罩层隐藏；
  • 当点击【打开模态框】按钮时，进行显示，所以需要给这个按钮注册点击事件，完成相应功能；
  • 当点击模态框中的【关闭按钮】或者遮罩层时，进行隐藏，所以需要给关闭按钮和遮罩层都注册鼠标点击事件，完成相应功能；
<script>......// 2、显示\隐藏遮罩层与模态框// 2.1、点击打开按钮，显示模态框和遮罩层openBtn.addEventListener('click', function () {maskBox.style.display = "block";modalBox.style.display = "block";})// 2.2、点击关闭按钮 或者遮罩层 隐藏模态框和遮罩层closeBtn.addEventListener('click', function () {maskBox.style.display = "none";modalBox.style.display = "none";})maskBox.addEventListener('click', function () {maskBox.style.display = "none";modalBox.style.display = "none";})......
</script>

（3）实现模态框拖动效果

根据案例需求,分析可知：

  • 模态框采用的是固定定位【 position: fixed;】，改变其 top 和 left 值就相当于是在移动了；
  • 模态框的移动距离实际就是鼠标的移动距离，加上模态框的起始位置坐标；
  • 鼠标的移动距离实际就是鼠标按下的位置，与鼠标移动时位置的差值；

注册 mousedown 事件，鼠标按下，得到鼠标在模态框内的坐标，即起始位置；

注册 mousemove 事件，鼠标移动，获得最新的鼠标位置，计算移动距离；

注册 mouseup 事件，鼠标弹起，停止拖拽，解除鼠标移动事件；

注意：

  • mousedown 、mousemove 、mouseup 触发的事件源是模态框的标题栏；
  • mousemove、mouseup 是在鼠标按下事件的基础上（ 要写到mousedown 事件里面 ）；
<script>......// 3、拖动模态框// 3.1 鼠标按下modalTitle.addEventListener('mousedown', function (e) {// 获取鼠标起始位置坐标var mouseX = e.pageX;var mouseY = e.pageY;// 模态框的初始左边距 上边距var modalBoxX = modalBox.offsetLeft;var modalBoxY = modalBox.offsetTop;// 3.2 鼠标移动 计算模态框的移动距离modalTitle.addEventListener('mousemove', moveMouse);// 3.3 鼠标弹起 移除鼠标移动事件modalTitle.addEventListener('mouseup', function() {modalTitle.removeEventListener('mousemove', moveMouse)})// 鼠标移动事件回调function moveMouse(e) {// 模态框移动的边距 = 模态框的起始边距 + 鼠标的相对移动值;modalBox.style.left = modalBoxX + (e.pageX - mouseX) + 'px';modalBox.style.top = modalBoxY + (e.pageY - mouseY) + 'px';}})
</script>

=========================================================================

每天进步一点点~！

记录下前端这个一个小知识~~！ 

相关文章：

Web开发：一个可拖拽的模态框（HTML、CSS、JavaScript）

目录 一、需求描述 二、实现效果 三、完整代码 四、实现过程 1、HTML 页面结构 2、CSS 元素样式 3、JavaScript动态控制 &#xff08;1&#xff09;获取元素 &#xff08;2&#xff09;显示\隐藏遮罩层与模态框 &#xff08;3&#xff09;实现模态框拖动效果 一、需求…...

编程日记 2024/7/23 18:40:46

【深度学习】fooocusapi，docker，inpainting图像

基础镜像制作来源 fooocusapi接口官方写的&#xff1a; docker run -d --gpusall \-e NVIDIA_DRIVER_CAPABILITIEScompute,utility \-e NVIDIA_VISIBLE_DEVICESall \-p 8888:8888 konieshadow/fooocus-api会下载一些模型&#xff0c;下载完后推这个镜像 docker commit 4dfd1…...

编程日记 2024/7/23 18:38:44

算法017：二分查找

二分查找. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/binary-search/ 二分查找&#xff0c;其实是双指针的一种特殊情况&#xff0c;但是时间复杂度极低&#…...

编程日记 2024/7/23 18:33:41

谷粒商城实战笔记-37-前端基础-Vue-基本语法插件安装

文章目录 一&#xff0c;v-model1&#xff0c;双向绑定2&#xff0c;vue的双向绑定2.1 html元素上使用指令v-model2.2 model中声明对应属性2.3&#xff0c;验证view绑定modelmodel绑定view 完整代码 二&#xff0c;v-on1&#xff0c;指令简介2&#xff0c;在button按钮中添加v-…...

编程日记 2024/7/23 18:30:37

mybatis中的缓存（一级缓存、二级缓存）

文章目录 前言一、MyBatis 缓存概述二、一级缓存1_初识一级缓存2_一级缓存命中原则1_StatementId相同2_查询参数相同3_分页参数相同4_sql 语句5_环境 3_一级缓存的生命周期1_缓存的产生2_缓存的销毁3_网传的一些谣言 4_一级缓存核心源码5_总结 三、二级缓存1_开启二级缓存2_二级…...

编程日记 2024/7/23 18:29:37

实现自动化采购：食堂采购系统源码开发详解

本篇文章&#xff0c;笔者将详细介绍食堂采购系统的开发过程&#xff0c;从需求分析、系统设计到实现和测试&#xff0c;为您全面解析如何构建一个高效的自动化采购系统。 一、需求分析 1.采购计划管理 2.供应商管理 3.订单管理 4.库存管理 5.财务管理 6.数据分析与报告 …...

编程日记 2024/7/23 18:26:33

linux、windows、macos清空本地DNS缓存

文章目录 Linux&#xff1a;Windows&#xff1a;macOS&#xff1a; Linux&#xff1a; 对于使用systemd的操作系统&#xff08;如CentOS 7、Ubuntu 16.04&#xff09;&#xff0c;可以使用以下命令重启systemd-resolved服务来清除缓存&#xff1a; sudo systemctl restart sys…...

编程日记 2024/7/23 18:21:29

领夹麦克风哪个品牌好，电脑麦克风哪个品牌好，热门麦克风推荐

​在信息快速传播的时代&#xff0c;直播和视频创作成为了表达与交流的重要方式。对于追求卓越声音品质的创作者而言&#xff0c;一款性能卓越的无线麦克风宛如一把利剑。接下来&#xff0c;我要为大家介绍几款备受好评的无线麦克风&#xff0c;这些都是我在实际使用中体验良好…...

编程日记 2024/7/23 18:15:23

【第5章】Spring Cloud之Nacos服务注册和服务发现

文章目录 前言一、提供者1. 引入依赖2.配置 Nacos Server 地址3. 开启服务注册 二、消费者1. 引入依赖2.配置 Nacos Server 地址3. 开启服务注册 三、服务列表四、服务发现1. 获取服务列表2. 测试2.1 获取所有服务2.2 根据服务名获取服务信息 五、更多配置项总结 前言 本节通过…...

编程日记 2024/7/23 18:14:20

Springboot 启动时Bean的创建与注入（一）-面试热点-springboot源码解读-xunznux

Springboot 启动时Bean的创建与注入&#xff0c;以及对应的源码解读 文章目录 Springboot 启动时Bean的创建与注入&#xff0c;以及对应的源码解读构建Web项目流程图&#xff1a;堆栈信息&#xff1a;堆栈信息简介堆栈信息源码详解1、main:10, DemoApplication (com.xun.demo)2…...

编程日记 2024/7/23 18:13:19

单调栈（随缘复习到了，顺手刷了）

也是不知道为什么突然又复习到单调栈了&#xff0c;所以顺手刷了三道题&#xff0c;总结一下 P6503 [COCI2010-2011#3] DIFERENCIJA 思路&#xff1a;这题是要求每个子区间里面的最大值和最小值的差&#xff0c;我们一开始想的必然是纯暴力呀&#xff0c;但是一看这数据&#…...

编程日记 2024/7/23 18:12:17

学习测试10-3自动化 web自动化

web自动化 chrome驱动下载地址&#xff1a; https://registry.npmmirror.com/binary.html?pathchromedriver/ https://googlechromelabs.github.io/chrome-for-testing/#stable观察Google版本&#xff0c;下相应的驱动 运行代码试试&#xff0c;成功Google就会弹出 from se…...

编程日记 2024/7/23 18:09:15

安防视频监控EasyCVR视频汇聚平台修改配置后无法启动的原因排查与解决

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台基于云边端一体化架构&#xff0c;兼容性强、支持多协议接入&#xff0c;包括国标GB/T 28181协议、部标JT808、GA/T 1400协议、RTMP、RTSP/Onvif协议、海康Ehome、海康SDK、大华SDK、华为SDK、宇视SDK、乐橙SDK、萤石云SD…...

编程日记 2024/7/23 18:08:13

爬虫学习2：爬虫爬取网页的信息与图片的方法

爬虫爬取网页的信息与图片的方法 爬取人物信息 import requestshead {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0" } # 这是get请求带参数的模式…...

编程日记 2024/7/23 18:00:04

MySQL定时备份数据，并上传到oss

1.环境准备 1.安装阿里云的ossutil 2.安装mysql 2.编写脚本 脚本内容如下 #!/bin/bash # 数据库的配置信息&#xff0c;根据自己的情况进行填写 db_hostlocalhost db_usernameroot db_passwordroot db_namedb_root # oss 存贮数据的bucket地址 bucket_namerbsy-backup-buck…...

编程日记 2024/7/23 17:59:02

极速删除 node_modules 仅3 秒（）

今天教大家如何快速删除 node_modules 依赖的一个小秘诀&#xff0c;告别繁琐&#xff01;&#xff01;&#xff01; 前言 作为前端开发者&#xff0c;相信大家都曾经历过删除 node_modules 文件夹时的漫长等待。 尤其是在处理那些依赖库繁多的项目时&#xff0c;删除操作…...

编程日记 2024/7/23 17:58:01

vue this.$refs 动态拼接

业务需要&#xff0c;refs是不固定的 <vxe-grid refgridWarehouse v-bind"gridWarehouseOptions" v-if"tableHeight" :height"tableHeight":expand-config"{iconOpen: vxe-icon-square-minus, iconClose: vxe-icon-square-plus}"c…...

编程日记 2024/7/23 17:54:58

一次搞定！中级软件设计师备考通关秘籍

大家好&#xff0c;我是小欧&#xff01; 今天我们来聊聊软考这个话题。要是你准备参加计算机技术与软件专业技术资格&#xff08;软考&#xff09;&#xff0c;那么这篇文章就是为你量身定做的。话不多说&#xff0c;咱们直接进入正题。 什么是软考&#xff1f; 软考&#xf…...

编程日记 2024/7/23 17:52:56

第十六讲 python中的序列-列表简介-特点-常用方法-创建-添加-删除-访问-切片-排序-复制-反转

目录 1. 序列的本质和内存结构 2.列表 2.1 列表简介 2.2 列表的特点 2.3 列表对象的常用方法大全： 2.4 列表的创建 2.4.1 使用方括号 [] 2.4.2 使用 list() 函数 2.4.3 使用 range() 函数 2.4.3.1 range的基本用法 2.4.3.2 返回值 2.4.3.3 range的使用例子 2.4.3.4 range的使…...

编程日记 2024/7/23 17:51:54

大模型日报 2024-07-22

大模型日报 2024-07-22 大模型资讯 谷歌将在ICML 2024展示机器学习研究成果 摘要: 谷歌研究人员将在ICML 2024会议上展示他们在机器学习领域的探索&#xff0c;从理论到应用&#xff0c;构建解决深层问题的ML系统。 代理符号学习&#xff1a;优化AI系统符号组件的框架 摘要: 大…...

编程日记 2024/7/23 17:50:52

Electron 的open-file事件

在 Electron 中，open-file 事件是一个重要的事件，它允许开发者在应用程序已经运行的情况下，通过文件打开请求（如双击文件或在命令行中使用 open 命令打开文件）来捕获文件路径。以下是对 open-file 事件的详细解析： 触发条件 应用已经打开。用户通过双击与应用程序关联的…...

编程日记 2024/7/23 17:48:49

前端面试 vue 接口权限控制

接口权限目前一般采用jwt的形式来验证&#xff0c;没有通过的话一般返回401&#xff0c;跳转到登录页面重新进行登录 对于 jwt的理解 &#xff08;前端接口权限的控制主要通过接口权限配置和JWT&#xff08;‌Json Web Token&#xff09;‌技术来实现。‌ 首先&#xff0c;‌…...

编程日记 2024/7/23 17:47:48

【DevOps系列】构建Devops系统

开始介绍 那就着手开始干吧。先介绍一下我们的工具链。 主要工具&#xff1a;GitHub、Jenkins、Kubernetes、Ansible、Prometheus和JMeter 着手动 1. 设置GitHub作为源代码仓库 登录GitHub: 打开浏览器并访问 https://github.com&#xff0c;使用您的GitHub账户登录。 创建…...

编程日记 2024/7/23 17:45:46

ABAP打印WORD的解决方案

客户要求按照固定格式输出到WORD模板中，目前OLE和DOI研究了均不太适合用于这种需求。 cl_docx_document类可以将WORD转化为XML文件，利用替换字符串方法将文档内容进行填充同 时不破坏WORD现有格式。 首先需要将WORD的单元格用各种预定义的字符进行填充，为后续替换作准备…...

编程日记 2024/7/23 17:41:38

emr部署hive并适配达梦数据库

作者&#xff1a;振鹭 一、达梦 用户、数据库初始化 1、创建hive的元数据库 create tablespace hive_meta datafile /dm8/data/DAMENG/hive_meta.dbf size 100 autoextend on next 1 maxsize 2048;2、创建数据库的用户 create user hive identified by "hive12345&quo…...

编程日记 2024/7/23 17:38:34

王春城：怎么用精益思维重塑企业战略规划格局？

当下&#xff0c;企业战略规划的灵活性和适应性变得至关重要。传统的战略规划方法往往过于僵化和静态&#xff0c;难以应对市场的不确定性和变化。因此&#xff0c;引入精益思维来重塑企业战略规划格局&#xff0c;成为了许多企业寻求突破和创新的途径。具体步骤如深圳天行健企…...

编程日记 2024/7/23 17:34:30

git reset

git reset [--soft | --mixed | --hard] [HEAD] 表格版 原始内容reset前reset命令reset后本地工作区暂存区本地仓库本地工作区暂存区本地仓库本地工作区暂存区本地仓库READMEREADMEREADMEREADMEREADMEREADME--soft HEADREADMEREADMEREADMEa.txta.txtb.txtb.txtb.txtb.txtc.tx…...

编程日记 2024/7/23 17:29:22

E17.【C语言】练习：sizeof和strlen的辨析

先回顾http://t.csdnimg.cn/aYHl6 1. char acX[] "abcdefg"; char acY[] { a,b,c,d,e,f,g}; 以下说法正确的是( ) A.数组acX和数组acY等价 B.数组acX和数组acY的长度相同 C.sizeof(acX)>sizeof (acY) D.strlen (acX)>strlen (acY) 分析&#xff1a;…...

编程日记 2024/7/23 17:27:19

便携气象站：科技助力气象观测

在科技飞速发展的今天&#xff0c;便携气象站以其轻便、高效、全面的特点&#xff0c;正逐渐改变着气象观测的传统模式。这款小巧而强大的设备&#xff0c;不仅为气象学研究和气象灾害预警提供了有力支持&#xff0c;更为户外活动、农业生产等领域带来了诸多便利。 便携气象站是…...

编程日记 2024/7/23 17:25:17

php 存储复杂的json格式查询（如：经纬度）

在开发中&#xff0c;有时我们可能存了一些复杂json格式不知道怎么查。我这里提供给大家参考下&#xff1a; 一、先上表数据格式&#xff08;location字段的possiton经纬度以逗号分开的&#xff09; {"title":"澳海文澜府","position":"11…...

编程日记 2024/7/23 17:24:16

UDP网口(1)概述

文章目录 1.计算机网络知识在互联网中的应用2.认识FPGA实现UDP网口通信3.FPGA实现UDP网口通信的方案4.FPGA实现UDP网口文章安排5.传送门 1.计算机网络知识在互联网中的应用 以在浏览器中输入淘宝网为例&#xff0c;介绍数据在互联网是如何传输的。我们将要发送的数据包称作A&a…...

编程日记 2024/7/23 17:22:13

Linux - 进程的概念、状态、僵尸进程、孤儿进程及进程优先级

进程基本概念 课本概念&#xff1a;在编程或软件工程的上下文中&#xff0c;进程通常被视为正在执行的程序的实例。当你启动一个应用程序时&#xff0c;操作系统会为这个程序创建一个进程。每个进程都有自己的独立内存空间&#xff0c;可以运行自己的指令序列&#xff0c;并可能…...

编程日记 2024/7/23 17:20:11

Gradle依赖报告：项目依赖树的X光机

Gradle依赖报告&#xff1a;项目依赖树的X光机 在复杂的软件项目中&#xff0c;依赖管理是确保应用正常构建和运行的关键。Gradle作为一个强大的构建工具&#xff0c;提供了依赖报告功能&#xff0c;帮助开发者分析和理解项目的依赖树。本文将详细介绍如何在Gradle中使用依赖报…...

编程日记 2024/7/23 17:16:07

开源XDR-SIEM一体化平台 Wazuh (1)基础架构

简介 Wazuh平台提供了XDR和SIEM功能&#xff0c;保护云、容器和服务器工作负载。这些功能包括日志数据分析、入侵和恶意软件检测、文件完整性监控、配置评估、漏洞检测以及对法规遵从性的支持。详细信息可以参考Wazuh - Open Source XDR. Open Source SIEM.官方网站 Wazuh解决…...

编程日记 2024/7/23 17:14:04

从零开始：构建基于深度学习的实时跌倒检测系统（UI界面+YOLO代码+数据集）

注意看文末的结局与声明 一、引言 1. 项目背景与动机 在老年人和高危职业环境中&#xff0c;跌倒是一种常见的事故&#xff0c;可能导致严重的伤害甚至致命。实时跌倒检测系统可以及时发现并报警&#xff0c;提供紧急救助。通过深度学习技术&#xff0c;可以提高跌倒检测的准…...

编程日记 2024/7/23 17:13:03

【策略模式在项目中的实际应用】

业务场景 最最近项目中有这样的一个业务场景&#xff1a; 用户下单->管理员审核->配送员接单->配送中->送达–>签收->完成 整个业务以这种流程的形式存在&#xff0c;每个流程状态的业务不一样&#xff0c;考虑到多种状态如果直接写一个接口肯定会嵌套太多…...

编程日记 2024/7/23 17:10:58

昇思25天学习打卡营第14天|计算机视觉

昇思25天学习打卡营第14天 文章目录 昇思25天学习打卡营第14天FCN图像语义分割语义分割模型简介网络特点数据处理数据预处理数据加载训练集可视化 网络构建网络流程 训练准备导入VGG-16部分预训练权重损失函数自定义评价指标 Metrics 模型训练模型评估模型推理总结引用 打卡记录…...

编程日记 2024/7/23 17:08:54

将json数组格式转成数组

start cmd [ 27 01 f7 01 24 38 02 b7 42 6e ee 2f 69 46 72 21 74 44 c4 22 7a 92 d8 6a de 66 61 b1 1e 2f de ee 5c 31 57 db df 01 31 2d c9 01 01 c0 FB ] set_ulpk {“jsonrpc”:“2.0”,“type”:2,“id”:0,“method”:“method”,“message”:{“VALUE”:[56,2,183,66…...

编程日记 2024/7/23 17:07:51

接口测试之测试原则、测试用例、测试流程详解

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、接口的介绍 软件测试中&#xff0c;常说的接口有两种&#xff1a;图形用户接口&#xff08;GUI&#xff0c;人与程序的接口&#xff09;、应用程序编程接口&…...

编程日记 2024/7/23 17:04:48

证书上的服务器名错误解决方法

方法 win r &#xff0c;输入mmc 点击文件——>添加/删除管理单元 找到证书——> 添加 根据自己的存放选择存放位置 点击控制台根节点——> 受信任的根证书颁发机构——>导入 若还出现问题&#xff0c;则参考https://blog.csdn.net/mm120138687/article/details/…...

编程日记 2024/7/23 17:01:42

前端：上传2进制图片

1、let formData new FormData(); 2、添加要传的字段&#xff1a;formData.append("avatarfile", data); &#xff08;key,value&#xff09; 3、上传文件 function uploadImg() {// 1定义FormDatalet formData new FormData();// 2添加字段formData.append("…...

编程日记 2024/7/23 16:59:40

web前端 React 框架面试200题（三）

面试题 65. 在使用 React Router时&#xff0c;如何获取当前页面的路由或浏览器中地址栏中的地址&#xff1f; 参考回答&#xff1a; 在当前组件的 props中&#xff0c;包含 location属性对象&#xff0c;包含当前页面路由地址信息&#xff0c;在 match中存储当前路由的参数等…...

编程日记 2024/7/23 16:58:40

交流负载箱：电力系统的节能利器

交流负载箱是模拟电网中实际负载的装置&#xff0c;它能够精确地模拟各种电器设备的耗电情况&#xff0c;为电力系统的节能提供了重要的工具。在电力系统中&#xff0c;交流负载箱的应用非常广泛&#xff0c;它可以用于电力系统的设计、运行和维护&#xff0c;以及电力设备的测…...

编程日记 2024/7/23 16:57:38

【思科】链路聚合实验配置和背景

【思科】链路聚合实验配置和背景 背景链路聚合基本概念链路聚合聚合接口 思科链路聚合协议01.PAgP协议02.LACP协议 思科链路聚合模式LACP协议模式PAgP协议模式ON模式 实验准备配置二层链路聚合LACP协议模式SW1SW2PC1PC2查看LACP聚合组建立情况查看LACP聚合端口情况查看逻辑聚合…...

编程日记 2024/7/23 16:52:32

使用 vue-element-plus-admin 框架遇到的问题记录

项目打包遇到的问题&#xff1a; 打包语句&#xff1a;pnpm run build:pro 报错信息&#xff1a; Error: [vite]: Rollup failed to resolve import "E:/workplace_gitee/xxx/node_modules/.pnpm/element-plus2.5.5_vue3.4.15/node_modules/element-plus/es/components…...

编程日记 2024/7/23 16:51:29

从零开始手写STL库：List

从零开始手写STL库–List部分 Github链接&#xff1a;miniSTL 文章目录 从零开始手写STL库–List部分List是什么&#xff1f;List需要包含什么函数1&#xff09;基础成员函数2&#xff09;核心功能3)其他功能 基础成员函数的编写核心功能的编写其他功能编写总结 List是什么&am…...

编程日记 2024/7/23 16:50:28

蒙特卡洛采样

目录 蒙特卡洛采样的计算逻辑计算步骤：1. 定义问题2. 确定采样范围3. 生成随机样本点4. 计算函数值5. 估计期望值或积分值6. 计算误差具体示例：1. 定义问题2. 确定采样范围3. 生成随机样本点4. 计算函数值5. 估计积分值6. 计算误差总结蒙特卡洛采样是一种通过随机生成样本点来…...

编程日记 2024/7/23 16:49:27

Apache虚拟主机VirtualHost配置项详解

在Apache中，VirtualHost容器用于定义一个虚拟主机的配置，它允许在单一的物理服务器上托管多个不同的网站，每个网站可以有自己的域名、文档根目录、错误日志等。VirtualHost内的配置项非常灵活，可以包含从基本的网站信息到高级的URL重写和安全设置。 以下是一些常见的Virtu…...

编程日记 2024/7/23 16:45:23

OpenAI从GPT-4V到GPT-4O，再到GPT-4OMini简介

OpenAI从GPT-4V到GPT-4O&#xff0c;再到GPT-4OMini简介 一、引言 在人工智能领域&#xff0c;OpenAI的GPT系列模型一直是自然语言处理的标杆。随着技术的不断进步&#xff0c;OpenAI推出了多个版本的GPT模型&#xff0c;包括视觉增强的GPT-4V&#xff08;GPT-4 with Vision&…...

编程日记 2024/7/23 16:41:18

从人工巡检到智能防控：智慧油气田安全生产的新视角

一、背景需求 随着科技的飞速发展&#xff0c;视频监控技术已成为各行各业保障安全生产、提升管理效率的重要手段。特别是在油气田这一特殊领域&#xff0c;由于其工作环境复杂、安全风险高&#xff0c;传统的监控方式已难以满足实际需求。因此&#xff0c;基于视频监控AI智能…...

编程日记 2024/7/23 16:39:16