首页 > 其他分享 >HTML5 拖拽 API 深度解析

HTML5 拖拽 API 深度解析

时间：2024-12-06 23:57:28浏览次数：7  
标签：slot 课程 拖拽 API 时间段 HTML5 课程表 event

在这里插入图片描述

一、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);
    }
}

在这里插入图片描述

七、总结

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

标签：slot,课程,拖拽,API,时间段,HTML5,课程表,event
From： https://blog.csdn.net/2403_88459347/article/details/144302796

相关文章

  • API接口简介：让前后端无缝沟通
    背景介绍：在今天的互联网世界，前后端分离的架构已经成为常态，而在这其中，API接口的作用至关重要。作为前后端沟通的桥梁，API接口确保了数据的顺利传递和业务逻辑的执行。而很多刚入门的编程爱好者可能跟我刚开始学习一样对这个概念一知半解，现在，我们就来聊聊API接口，它是如何工作的，以......
  • [深入探索Brave Search API：使用实例和应用指南]
    #深入探索BraveSearchAPI：使用实例和应用指南##引言随着隐私保护和数据收集问题日益受到关注，越来越多的用户和开发者开始寻找替代传统搜索引擎的解决方案。BraveSearch作为一款新兴搜索引擎，凭借其独立的网络索引和隐私友好的设计，吸引了很多人的关注。本文将深入探讨......
  • 如何在x86模拟器和鸿蒙API9如何使用MQTT模块ohos_mqtt
    目录引言安装失败的原因如何编译so文件的x86_64版本下载源代码 安装NDK代码编译安装MQTT软件包避免MQTT软件包自动升级设置libs客户端程序的编写运行测试结语参考文献引言在上周的博客（如何在鸿蒙API9和x86模拟器中使用MQTT-CSDN博客）中介绍了我的学生有个需求......
  • 探索API代理的力量：如何让文档加载器在全球畅通无阻
    探索API代理的力量：如何让文档加载器在全球畅通无阻引言在现代软件开发中，文档加载器不仅仅是数据处理的核心组件，它们还承担着跨平台、跨地域的数据获取任务。然而，很多开发者都会面临相同的挑战：如何在不同的地域环境下，稳定地访问和加载数据？这篇文章将带您深入探讨通过API代......
  • 利用pdf.js +FastAPI+openai-TTS 搭建 在线PDF 文档语音阅读服务
    之前一直用NuturalReader阅读英文pdf，校准英文单词发音的准确性，无奈NuturalReader的LLM真人语音价格太贵了，一年要有110刀。实在肉疼。最近基于ManyiAPI聚合接口站：https://api.manyi88.top，ManyiAPI注册链接（注册优惠）可以直接调用openai的tts服务，就有了自己写个在线语音阅读pd......
  • 利用MeiliSearch和OpenAI API打造智能搜索系统
    利用MeiliSearch和OpenAIAPI打造智能搜索系统简介在本文中，我们将展示如何结合使用MeiliSearch和OpenAI的API来创建一个智能搜索系统。MeiliSearch是一款开源、高性能的搜索引擎，而OpenAI提供了强大的自然语言处理（NLP）模型。通过这两个工具，我们可以实现高效而智能的文本搜索......
  • HTML5系列（14）-- 链接与资源关系指南
    前端技术探索系列：HTML5链接与资源关系指南......
  • win32 API编程之GDI绘图
    一、GDI简介1）什么是设备上下文2）设备上下文类型3）常见的GDI对象4）windows坐标系5）GDI绘图步骤二、获取DC的3种方法1）获取DC的3种方法2）PAINTSTRUCT结构3）BeginPaint函数4）EndPaint函数5）GetDC函数6）GetWindowDC函数7）三种方式的区别8）代码实例#include<windows.h......
  • 一个api接口从请求数据到请求结束共与服务器进行了几次交互？
    一个API接口从请求数据到请求结束，前端与服务器通常进行两次交互：请求(Request):前端发送请求到服务器。这是第一次交互。请求中包含了请求方法(例如GET,POST,PUT,DELETE等),URL,以及任何必要的请求数据(例如表单数据,JSON数据等)。响应(Response):服务器处......
  • 探索 Vue 的 API 风格：选项式 API 与组合式 API 全解析
    目录探索Vue的API风格：选项式API与组合式API全解析一、VueAPI风格概述（一）选项式API（二）组合式API二、组合式API详细解析（一）使用前提（二）声明响应式变量（三）声明函数（四）声明钩子函数（五）将数据绑定到HTML元素（六）处理事件绑定（七）易错点提醒三、组合式API示例演......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99