HTML5 拖拽 API 深度解析

在这里插入图片描述

一、HTML5 拖拽 API 深度解析

1.1 背景与发展

HTML5 的拖拽 API 是为了解决传统拖拽操作复杂而设计的。传统方法依赖鼠标事件和复杂的逻辑计算，而 HTML5 提供了标准化的拖拽事件和数据传递机制，使得开发者能够快速实现从一个元素拖拽到另一个元素的交互。

1.2 拖拽 API 的核心工作原理

HTML5 拖拽 API 的核心包括以下几个步骤：

  1. 定义可拖拽元素
    设置 HTML 元素的 draggable 属性为 true：

    <div id="drag-item" draggable="true">可拖拽元素</div>

  2. 处理拖拽事件
    拖拽相关事件包括：

    • dragstart：拖拽开始。
    • drag：拖拽中（可用于实时显示位置）。
    • dragend：拖拽结束。
    • dragover：目标区域悬停。
    • drop：放置到目标区域。

  3. 数据传递机制
    使用 dataTransfer 对象存储拖拽时传递的数据：

    event.dataTransfer.setData("text/plain", event.target.id);

1.3 dataTransfer 对象详解

dataTransfer 是 HTML5 拖拽 API 的核心对象，用于在拖拽操作中传递数据。常用方法包括：

  • setData(format, data)：设置数据。
  • getData(format)：获取数据。
  • clearData()：清除数据。

示例：

function dragStart(event) {event.dataTransfer.setData("text/plain", event.target.id);
}

二、需求分析

2.1 用户场景与功能拆解

实现一个课程表的核心目标是简化用户的课程安排操作，同时提供良好的交互体验。为了实现这些目标，我们需要从多个角度拆解用户的场景和功能需求。

2.1.1 用户场景
  1. 学生场景
    • 学生可以根据自己的课程需求，自由安排每周的课程表。例如，用户可以将数学课安排在周一上午 9 点，并在拖拽过程中动态调整课程顺序。
    • 用户希望避免时间冲突，例如将两个课程拖到同一时间段，系统应该给出明确的提示，并阻止冲突安排。
    • 需要课程表的持久化功能，用户希望安排好的课程表能在下次打开页面时自动加载，而不需要重新编辑。
  2. 教师场景
    • 教师可以拖动课程安排授课时间，避免重复调整。
    • 支持批量拖动课程，例如一门课分为多个时间段，可以快速将课程拖放到多个时间段中。
    • 教师需要避免误操作，例如误将课程拖到错误时间段的功能需要撤销或调整。
  3. 管理员场景
    • 课程管理员可以通过后台数据动态生成课程表，支持根据学生或教师的需求提供个性化课程安排模板。
    • 拖拽交互需要支持多角色数据权限控制。例如，管理员可能需要调整多个学生的课程安排，但不能修改教师的授课时间。
2.1.2 功能拆解

为了满足上述用户场景，我们可以将课程表的功能需求拆解如下：

  1. 基础功能：拖拽课程到时间段
    • 课程表需要左侧提供可拖拽的课程元素。
    • 时间表按天和时间段分为多个区域，允许用户将课程拖拽到指定时间段中。
    • 拖拽时提供即时的视觉反馈，例如高亮显示拖拽目标区域。
  2. 冲突检测与提示
    • 在同一时间段只能安排一门课程，如果用户尝试将多个课程拖入同一时间段，系统应实时检测冲突，并通过提示框、警告样式或动画效果提醒用户。
    • 课程安排冲突时，课程返回初始位置，不影响其他已安排的课程。
  3. 数据持久化
    • 使用 localStorage 或后端 API 保存用户的课程安排。用户关闭页面后再次打开时，可以加载之前的安排。
    • 支持导出课程表为 JSON 格式，便于与后端系统对接。
  4. 撤销与重置
    • 用户可以撤销最近一次操作，将课程恢复到拖拽前的位置。
    • 提供一键重置功能，清空当前所有课程安排。
  5. 扩展功能
    • 支持移动端操作，例如触摸屏拖拽课程到时间段。
    • 多用户支持，允许不同用户登录后加载属于自己的课程表。
    • 添加课程备注功能，用户可以为每门课程添加备注信息，例如课室、教师等。

2.2 课程表的交互设计

2.2.1 界面布局
  1. 左侧课程列表
    • 左侧为垂直排列的课程列表，包含所有可供拖拽的课程。每个课程元素以方块形式显示课程名称，颜色区分课程类型（例如数学为蓝色，英语为绿色）。
    • 列表支持滚动，便于在大量课程中快速找到目标课程。
  2. 右侧时间表
    • 时间表按周展示，分为多个天（如周一至周五）。每一天分为固定的时间段（如上午、下午、晚上）。
    • 每个时间段是一个可拖拽的目标区域，当用户拖拽课程到该区域时，显示高亮边框。
    • 时间段内显示当前安排的课程。如果没有课程，显示占位文本（例如“拖拽课程到此处”）。
2.2.2 视觉反馈设计
  1. 拖拽反馈
    • 当用户开始拖拽课程时，课程元素变为半透明状态，表示该课程已被选中。
    • 鼠标移动到目标时间段时，时间段高亮显示，表示可以放置课程。
  2. 冲突提示
    • 如果拖拽课程到已被占用的时间段，时间段边框变为红色，显示错误提示“时间冲突”。
    • 放置失败时，课程返回到原位置，并弹出警告提示。
  3. 保存状态提示
    • 用户点击保存按钮后，显示“保存成功”提示，并在页面顶部显示保存时间。
2.2.3 用户操作流程

以下是典型的用户交互流程：

  1. 用户浏览左侧课程列表，选择需要安排的课程（例如“数学”）。
  2. 拖动课程到右侧时间表的目标时间段（如周一上午 9 点）。
    • 如果时间段为空，课程成功放置。
    • 如果时间段已被占用，课程返回到原位置，并显示冲突提示。
  3. 用户点击“保存”按钮，将当前课程安排保存到本地或后端。
  4. 刷新页面后，课程表根据保存的数据自动加载。
2.2.4 交互案例分析

以下为几个典型交互案例及其逻辑设计：

  1. 成功放置课程
    • 场景：用户将“数学”课程拖动到周一上午 9 点，时间段为空。
    • 预期行为：
      • 时间段接收“数学”课程，课程从左侧列表消失。
      • 课程表更新，显示“数学”课程。
  2. 时间冲突
    • 场景：用户尝试将“英语”课程拖动到已被“数学”课程占用的时间段。
    • 预期行为：
      • 显示冲突提示，时间段边框变为红色。
      • 课程返回原位置，用户需要重新选择时间段。
  3. 保存并恢复
    • 场景：用户完成课程安排后，点击“保存”按钮。
    • 预期行为：
      • 数据保存到 localStorage 或后端。
      • 用户刷新页面后，课程表自动加载之前保存的内容。

2.2.5 功能模块化设计

为确保代码结构清晰，我们将课程表功能划分为以下模块：

  1. 课程管理模块
    • 负责加载、显示和操作课程列表。
    • 提供课程数据的动态加载与更新接口。
  2. 时间表模块
    • 负责生成右侧时间表的布局和交互逻辑。
    • 提供时间段与课程的关联关系管理。
  3. 拖拽模块
    • 监听拖拽事件，处理数据传递与放置逻辑。
    • 提供冲突检测与错误提示功能。
  4. 数据存储模块
    • 负责课程表数据的保存与加载。
    • 支持本地存储和后端接口两种方式。
  5. UI 反馈模块
    • 提供高亮、动画等视觉反馈功能。
    • 集成错误提示与状态消息展示

三、实现课程表：详细代码与逐步讲解

3.1 静态 HTML 结构

首先，课程表的静态HTML结构需要清晰地定义课程列表和时间表。以下是完整的HTML结构：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>课程表实现</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 20px;display: flex;flex-direction: row;justify-content: space-between;}.courses, .schedule {border: 1px solid #ccc;border-radius: 5px;padding: 10px;background: #f9f9f9;}.courses {width: 200px;}.course {background: lightblue;margin: 5px 0;padding: 10px;cursor: move;text-align: center;border: 1px solid #007bff;border-radius: 5px;}.schedule {flex: 1;display: flex;flex-direction: column;}.day {margin-bottom: 15px;}.day h3 {margin: 0;padding: 5px;background: #007bff;color: white;text-align: center;border-radius: 5px;}.time-slot {border: 1px dashed #ccc;padding: 20px;margin: 5px 0;background: #fff;border-radius: 5px;text-align: center;}.time-slot:hover {border-color: #007bff;}</style>
</head>
<body><div class="courses"><h3>课程列表</h3><div class="course" id="course1" draggable="true">数学</div><div class="course" id="course2" draggable="true">英语</div><div class="course" id="course3" draggable="true">历史</div></div><div class="schedule"><div class="day" id="monday"><h3>周一</h3><div class="time-slot" ondrop="drop(event)" ondragover="allowDrop(event)">09:00 - 10:00</div><div class="time-slot" ondrop="drop(event)" ondragover="allowDrop(event)">10:00 - 11:00</div></div><div class="day" id="tuesday"><h3>周二</h3><div class="time-slot" ondrop="drop(event)" ondragover="allowDrop(event)">09:00 - 10:00</div><div class="time-slot" ondrop="drop(event)" ondragover="allowDrop(event)">10:00 - 11:00</div></div></div><script src="drag-drop.js"></script>
</body>
</html>

展开

解释：

  • 课程列表：左侧区域，使用.courses类来定义。课程通过.course类定义为可拖拽的元素。
  • 时间表：右侧区域，使用.schedule类定义。分为天（如周一、周二），每天包含多个时间段.time-slot。

3.2 样式优化

在基本结构样式的基础上，我们添加了一些视觉效果：

  1. 课程元素：
    • 使用圆角边框和浅蓝背景区分课程。
    • 鼠标悬停时增加光标样式反馈。
  2. 时间段：
    • 使用虚线边框表示空闲区域。
    • 鼠标悬停时，边框颜色变为蓝色，提示用户该区域可放置课程。

3.3 JavaScript 功能实现

3.3.1 拖拽功能基础实现

拖拽操作分为三个核心事件：dragstart、dragover 和 drop。

// 开始拖拽：记录被拖拽元素的ID
function dragStart(event) {event.dataTransfer.setData("text/plain", event.target.id);console.log(`开始拖拽：${event.target.id}`);
}// 允许放置：阻止默认行为
function allowDrop(event) {event.preventDefault();
}// 放置到目标区域
function drop(event) {event.preventDefault();const courseId = event.dataTransfer.getData("text/plain");const course = document.getElementById(courseId);// 检查目标是否为空if (event.target.classList.contains("time-slot") && event.target.children.length === 0) {event.target.appendChild(course);console.log(`课程 ${courseId} 已放置到时间段`);} else {alert("时间段已被占用！");}
}

核心逻辑分析：

  1. dragStart：
    • 当用户开始拖拽课程时，将课程的ID存入dataTransfer对象中，以便在drop事件中获取。
  2. allowDrop：
    • 默认情况下，HTML元素不允许拖拽放置。通过event.preventDefault()，显式允许拖拽操作。
  3. drop：
    • 当课程放置到时间段中时，检查时间段是否为空。
    • 如果为空，则将课程追加到目标时间段；否则，提示冲突。
3.3.2 冲突检测与用户反馈

为了防止时间冲突，我们在放置时加入检测逻辑：

function drop(event) {event.preventDefault();const courseId = event.dataTransfer.getData("text/plain");const course = document.getElementById(courseId);if (event.target.classList.contains("time-slot")) {if (event.target.children.length === 0) {event.target.appendChild(course);event.target.style.borderColor = "green"; // 提供成功反馈} else {alert("时间段已被占用，请选择其他时间！");event.target.style.borderColor = "red"; // 提供错误反馈setTimeout(() => {event.target.style.borderColor = "#ccc"; // 恢复边框颜色}, 1000);}}
}
3.3.3 数据持久化

我们使用localStorage实现课程表数据的保存和加载。

保存课程表：

function saveSchedule() {const scheduleData = {};document.querySelectorAll(".time-slot").forEach((slot, index) => {if (slot.children.length > 0) {scheduleData[index] = slot.children[0].id;}});localStorage.setItem("schedule", JSON.stringify(scheduleData));alert("课程表已保存！");
}

加载课程表：

function loadSchedule() {const scheduleData = JSON.parse(localStorage.getItem("schedule"));if (scheduleData) {Object.keys(scheduleData).forEach((index) => {const courseId = scheduleData[index];const slot = document.querySelectorAll(".time-slot")[index];const course = document.getElementById(courseId);slot.appendChild(course);});}
}
window.onload = loadSchedule;

保存按钮：
在HTML中添加保存按钮：

<button onclick="saveSchedule()">保存课程表</button>

3.4 测试与调试

  1. 功能测试：
    • 拖拽课程到空闲时间段，课程应正确显示。
    • 同一时间段不能安排多个课程。
    • 保存后刷新页面，课程表应自动恢复。
  2. 错误处理：
    • 如果localStorage不可用，提示用户保存失败。
    • 当用户拖拽到非法区域（非.time-slot），课程应回到原位。

通过这些实现，我们完成了课程表的核心功能，包括拖拽、冲突检测和数据持久化。接下来可以进行扩展，例如响应式布局、动画效果等。

四、高级功能扩展

在基础功能实现的基础上，我们可以通过数据持久化、响应式设计、高级用户交互等功能进一步扩展课程表的能力。以下是详细的高级功能扩展方案。

4.1 数据持久化

数据持久化是课程表的重要功能，用户可以保存课程表的当前状态并在刷新或重新打开页面时自动加载。

4.1.1 保存课程表到 localStorage

以下代码将课程表中的数据保存为 JSON 格式并存储到浏览器的 localStorage：

function saveSchedule() {const slots = document.querySelectorAll(".time-slot");const schedule = {}; // 用于保存课程安排的数据slots.forEach((slot, index) => {if (slot.children.length > 0) {schedule[index] = slot.children[0].id; // 保存课程 ID 与时间段索引的对应关系}});localStorage.setItem("schedule", JSON.stringify(schedule));alert("课程表已成功保存！");
}
4.1.2 加载课程表数据

当页面加载时，我们可以读取 localStorage 中保存的课程表数据并自动将课程安排到对应的时间段中：

function loadSchedule() {const schedule = JSON.parse(localStorage.getItem("schedule"));if (schedule) {Object.keys(schedule).forEach(index => {const courseId = schedule[index];const course = document.getElementById(courseId);const slot = document.querySelectorAll(".time-slot")[index];if (course && slot) {slot.appendChild(course); // 恢复课程到对应的时间段}});}
}// 在页面加载时调用 loadSchedule
window.onload = loadSchedule;
4.1.3 删除课程表数据

增加一个功能，用于清空保存的课程表数据：

function clearSchedule() {localStorage.removeItem("schedule");alert("课程表数据已清空！");location.reload(); // 刷新页面以恢复默认状态
}

扩展按钮：
在 HTML 中添加保存和清除按钮：

<button onclick="saveSchedule()">保存课程表</button>
<button onclick="clearSchedule()">清除课程表</button>

4.2 响应式设计与移动端适配

4.2.1 响应式布局

在移动设备上，课程表应能自动调整布局。例如，将时间表从横向排列改为纵向排列。以下是适配方案：

/* 针对桌面端 */
.schedule {display: flex;justify-content: space-between;
}/* 针对移动端 */
@media (max-width: 600px) {.schedule {flex-direction: column; /* 将时间表改为纵向排列 */}.time-table {margin-bottom: 20px;}
}
4.2.2 触摸屏支持

在触摸屏上使用原生拖拽可能不够友好，可以使用 JavaScript 手势库（如 Hammer.js）来支持触摸拖动。例如：

// 简单触摸拖动示例（需要引入手势库）
let draggedElement = null;function touchStart(event) {draggedElement = event.target; // 记录触摸的课程元素
}function touchMove(event) {const touch = event.touches[0];draggedElement.style.position = "absolute";draggedElement.style.left = `${touch.pageX}px`;draggedElement.style.top = `${touch.pageY}px`;
}function touchEnd(event) {draggedElement.style.position = "static"; // 放置后恢复原样draggedElement = null;
}

绑定触摸事件到课程元素：

document.querySelectorAll('.course').forEach(course => {course.addEventListener('touchstart', touchStart);course.addEventListener('touchmove', touchMove);course.addEventListener('touchend', touchEnd);
});

4.3 增强交互反馈

4.3.1 拖拽动画效果

在拖拽时为课程添加动画效果，使用户操作更流畅：

.course {transition: transform 0.2s ease; /* 拖拽时平滑移动 */
}.course.dragging {opacity: 0.5;transform: scale(1.2); /* 放大效果 */
}

在拖拽事件中添加样式：

function dragStart(event) {event.target.classList.add("dragging");event.dataTransfer.setData("text/plain", event.target.id);
}function dragEnd(event) {event.target.classList.remove("dragging");
}

绑定事件：

document.querySelectorAll('.course').forEach(course => {course.addEventListener('dragstart', dragStart);course.addEventListener('dragend', dragEnd);
});
4.3.2 高亮目标区域

当拖拽课程悬停到时间段时，为时间段添加高亮效果：

.time-slot.drag-over {background-color: #e0f7fa;border-color: #007bff;
}

在 dragover 和 dragleave 事件中添加逻辑：

function allowDrop(event) {event.preventDefault();event.target.classList.add("drag-over");
}function dragLeave(event) {event.target.classList.remove("drag-over");
}

绑定事件：

document.querySelectorAll('.time-slot').forEach(slot => {slot.addEventListener('dragover', allowDrop);slot.addEventListener('dragleave', dragLeave);
});

五、性能优化与最佳实践

5.1 DOM 操作优化

频繁操作 DOM 会导致性能瓶颈，尤其是在课程表元素较多时。以下是优化策略：

5.1.1 使用 DocumentFragment

批量操作时使用 DocumentFragment，减少重绘和重排：

function createSchedule(days, timeSlots) {const fragment = document.createDocumentFragment();days.forEach(day => {const dayContainer = document.createElement('div');dayContainer.className = 'day';const header = document.createElement('h3');header.textContent = day;dayContainer.appendChild(header);timeSlots.forEach(slot => {const timeSlot = document.createElement('div');timeSlot.className = 'time-slot';timeSlot.setAttribute('ondrop', 'drop(event)');timeSlot.setAttribute('ondragover', 'allowDrop(event)');timeSlot.textContent = slot;dayContainer.appendChild(timeSlot);});fragment.appendChild(dayContainer);});document.querySelector('.schedule').appendChild(fragment);
}
5.1.2 减少事件监听

避免为每个课程或时间段单独绑定事件，改为事件委托：

document.querySelector('.schedule').addEventListener('dragover', event => {if (event.target.classList.contains('time-slot')) {allowDrop(event);}
});document.querySelector('.schedule').addEventListener('drop', event => {if (event.target.classList.contains('time-slot')) {drop(event);}
});

六、拓展应用场景

6.1 文件拖拽上传

拖拽文件上传是拖拽 API 的常见应用场景：

const dropZone = document.getElementById('drop-zone');dropZone.addEventListener('dragover', event => {event.preventDefault();dropZone.classList.add('drag-over');
});dropZone.addEventListener('drop', event => {event.preventDefault();dropZone.classList.remove('drag-over');const files = event.dataTransfer.files;// 显示文件列表Array.from(files).forEach(file => {console.log(`上传文件：${file.name}`);});
});

HTML:

<div id="drop-zone" style="border: 2px dashed #ccc; padding: 20px; text-align: center;">将文件拖到此处上传
</div>

6.2 看板系统

在看板系统中，用户可以将任务卡片拖放到不同列（如待办、进行中、已完成）：

function dropTask(event) {const taskId = event.dataTransfer.getData('text/plain');const task = document.getElementById(taskId);if (event.target.classList.contains('task-column')) {event.target.appendChild(task);}
}

在这里插入图片描述

七、总结

通过高级功能扩展，课程表的功能变得更加强大和实用。我们实现了数据持久化、响应式设计、触摸屏支持、拖拽动画等功能，并探讨了性能优化策略和其他应用场景（如文件上传和看板系统）。这些功能的实现使得课程表不仅限于简单的拖拽交互，还可以扩展为复杂的多功能应用。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/63294.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

3D 生成重建017-StyleGaussian用文本或图像对你的3DGS内容进行风格迁移

3D 生成重建017-StyleGaussian用文本或图像对你的3DGS内容进行风格迁移

3D 生成重建017-StyleGaussian用文本或图像对你的3DGS内容进行风格迁移 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 论文 “StyleGaussian: Instant 3D Style Transfer with Gaussian Splatting” 介绍了一种新颖的3D风格迁移方法 StyleGaussian&#xff0c;该方法通…
阅读更多...
如何查看电脑的屏幕刷新率？

如何查看电脑的屏幕刷新率？

1、按一下键盘的 win i 键&#xff0c;打开如下界面&#xff0c;选择【系统】&#xff1a; 2、选择【屏幕】-【高级显示设置】 如下位置&#xff0c;显示屏幕的刷新率&#xff1a;60Hz 如果可以更改&#xff0c;则选择更高的刷新率&#xff0c;有助于电脑使用起来界面更加流…
阅读更多...
【JVM】JVM基础教程（一）

【JVM】JVM基础教程（一）

目录 初识JVM JVM是什么&#xff1f; JVM的功能 解释、即时编译和运行 内存管理 常见的JVM JVM虚拟机规范 HotSpot的发展历程 JVM的组成 字节码文件详解 应用场景 以正确姿势打开字节码文件 ​编辑字节码文件的组成 基本信息 Magic魔数 主副版本号 常量池 接口…
阅读更多...
Linux内核查询CONFIG_xxx配置项的方法

Linux内核查询CONFIG_xxx配置项的方法

前言&#xff1a; 嵌入式开发中经常会查看运行的内核都打开了哪些编译选项&#xff0c;这里提供2种方法&#xff1a; 查看编译环境的.config文件查看正在运行的Linux文件系统中的 /proc/config.gz 文件 编译环境的.config不赘述&#xff0c;下面主要介绍如何简单使用 /proc/c…
阅读更多...
Neo4j (desktop) 使用记录

Neo4j (desktop) 使用记录

1. neo4j community 使用 第一次使用Neo4j&#xff0c;根据网上的教程安装并配置了community版本&#xff0c; 在终端使用 neo4j.bat console 可以正常打开网页端 但是&#xff0c; 使用 neo4j start , neo4j stop 时会提示 ‘neo4j’ 时非法指令&#xff0c;无法识别 查明原…
阅读更多...
【JAVA】Java高级：数据库监控与调优：SQL调优与执行计划的分析

【JAVA】Java高级：数据库监控与调优：SQL调优与执行计划的分析

作为Java开发工程师&#xff0c;理解SQL调优和执行计划的分析是至关重要的。这不仅可以帮助我们提高数据库查询的效率&#xff0c;还能减少系统资源的消耗&#xff0c;提升整体应用的性能。 1. SQL调优的重要性 随着数据量的增加和用户请求的增多&#xff0c;数据库的性能问题…
阅读更多...
Web3.0：连接分布式未来的纽带

Web3.0：连接分布式未来的纽带

随着技术的不断进步&#xff0c;Web3.0正逐渐成为人们关注的焦点。作为Web的下一代&#xff0c;Web3.0将引领我们进入一个全新的数字时代&#xff0c;重新定义了我们与互联网的关系 Web3.0&#xff0c;也称为“分布式Web”&#xff0c;是互联网的下一代演进。它不仅是信息的传…
阅读更多...
2024年认证杯SPSSPRO杯数学建模C题(第一阶段)云中的海盐解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模C题(第一阶段)云中的海盐解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 C题 云中的海盐 原题再现&#xff1a; 巴黎气候协定提出的目标是&#xff1a;在2100年前&#xff0c;把全球平均气温相对于工业革命以前的气温升幅控制在不超过2摄氏度的水平&#xff0c;并为1.5摄氏度而努力。但事实上&#xff0c;许多之前的…
阅读更多...
throw error； 执行不通过怎么返回解决

throw error； 执行不通过怎么返回解决

子页 async save() { if (this.node.type dataSource) { try { await this.$refs.dataFormDataSource.validate(); // 验证通过&#xff0c;执行后续操作 } catch (error) { this.$message.error(数据源参数验证不通过) throw error; return; } } } 调用页面&#xff1a; a…
阅读更多...
【Mac】安装Gradle

【Mac】安装Gradle

1、说明 Gradle 运行依赖 JVM&#xff0c;需要先安装JDK&#xff0c;Gradle 与 JDK的版本对应参见&#xff1a;Java Compatibility IDEA的版本也是有要求Gradle版本的&#xff0c;二者版本对应关系参见&#xff1a;Third-Party Software and Licenses 本次 Gradle 安装版本为…
阅读更多...
项目代码第2讲：从0实现LoginController.cs，UsersController.cs、User相关的后端接口对应的前端界面

项目代码第2讲：从0实现LoginController.cs，UsersController.cs、User相关的后端接口对应的前端界面

一、User 1、使用数据注解设置主键和外键 设置主键&#xff1a;在User类的U_uid属性上使用[Key]注解。 设置外键&#xff1a;在Order类中&#xff0c;创建一个表示外键的属性&#xff08;例如UserU_uid&#xff09;&#xff0c;并使用[ForeignKey]注解指定它引用User类的哪个…
阅读更多...
使用mtools搭建MongoDB复制集和分片集群

使用mtools搭建MongoDB复制集和分片集群

mtools介绍 mtools是一套基于Python实现的MongoDB工具集&#xff0c;其包括MongoDB日志分析、报表生成及简易的数据库安装等功能。它由MongoDB原生的工程师单独发起并做开源维护&#xff0c;目前已经有大量的使用者。 mtools所包含的一些常用组件如下&#xff1a; mlaunch支…
阅读更多...
nginx不允许静态文件被post请求显示405 not allowed

nginx不允许静态文件被post请求显示405 not allowed

在单独站点的配置文件中 添加error_page 405 200 $request_uri; 即可&#xff01;
阅读更多...
golang 汉字转拼音

golang 汉字转拼音

导入包 # 支持多音字&#xff0c;音调标识等 go get github.com/mozillazg/go-pinyin简单示例 func Test() {// 配置选项opts : pinyin.NewArgs()opts.Style pinyin.Normal // 设置拼音的样式&#xff08;普通拼音&#xff09;var test_text "你好世界"test_piny…
阅读更多...
MFC扩展库BCGControlBar Pro v36.0新版亮点：黑色主题中的自动反转图标

MFC扩展库BCGControlBar Pro v36.0新版亮点：黑色主题中的自动反转图标

BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。 我们的组件可以轻松地集成到您的应用程序中&#xff0c;并为您节省数百个开发和调试时间。 BCGControlBar专业版 v36.0已全新发布了&#xff0c;这个版本在黑暗主题中添加自动图标反转、新增一个全新的S…
阅读更多...
MFC工控项目实例三十五读取数据库数据

MFC工控项目实例三十五读取数据库数据

点击按钮打开文件夹中的数据文件生成曲线 相关代码 void CSEAL_PRESSUREDlg::OnTesReport() {CFileDialog dlgOpen(TRUE/*TRUE打开&#xff0c;FALSE保存*/,0,0,OFN_NOCHANGEDIR|OFN_FILEMUSTEXIST,"All Files(mdb.*)|*.*||",//文件过滤器NULL);CString mdb_1, m…
阅读更多...
jwt 与 sessionid 的区别及应用场景

jwt 与 sessionid 的区别及应用场景

在现代 Web 应用中&#xff0c;JWT&#xff08;JSON Web Token&#xff09;和SessionID是两种常用的用户认证和状态管理机制。本文从两者的原理、区别、优缺点以及适用场景展开分析&#xff0c;结合常见问题提出了最佳实践建议&#xff0c;帮助开发者更好地选择和使用。 JWT与S…
阅读更多...
反向传播算法中的误差项

反向传播算法中的误差项

背景 在反向传播算法中&#xff0c;我们需要计算每个神经元的误差项&#xff0c;以便更新网络中的权重。对于输出层的神经元&#xff0c;误差项的计算公式如下&#xff1a; 其中&#xff1a; E是损失函数&#xff08;例如均方误差&#xff09;。 zk 是输出层神经元的加权输入&a…
阅读更多...
数学建模之RSR秩和比综合评价法（详细）

数学建模之RSR秩和比综合评价法（详细）

RSR秩和比综合评价法 一、概述 秩和比法(Rank-sum ratio&#xff0c;简称RSR法)是我国学者田凤调于1988年提出的&#xff0c;田教授是我国杰出的卫生统计学家&#xff0c;该方法最初提出时用于解决医学卫生领域的综合评价问题&#xff0c;后经各领域学者的补充和完善&#xf…
阅读更多...
android WebRtc 无法推流以及拉流有视频无声音问题

android WebRtc 无法推流以及拉流有视频无声音问题

最近在开发使用WebRtc进行视频通话和语音通话&#xff0c;我使用的设备是MTK的手机&#xff0c;期间后台的技术人员几乎没法提供任何帮助&#xff0c;只有接口和测试的web端&#xff0c;有遇到不能推流。推流成功网页端有画面有声音&#xff0c;但是安卓端有画面&#xff0c;没…
阅读更多...
最新文章

Copyright @ 2022~2023