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

HTML5拖拽API学习托拽排序和可托拽课程表

news 来源：原创 2025/8/6 6:57:41

文章目录

- - 前言
  - 拖拽API核心概念
  - 拖拽式使用流程
  - 例子
  - 注意事项
  - 综合例子🌰 可拖拽课程表
  - 拖拽排序

前言

前端拖拽功能让网页元素可以通过鼠标或触摸操作移动。HTML5 提供了标准的拖拽API，简化了拖放操作的实现。以下是拖拽API的基本使用指南：

拖拽API核心概念

draggable属性：设置元素的draggable="true"属性，允许用户拖动该元素。

    <div draggable="true">可拖动元素</div>

dragstart事件：拖动开始时触发，可以设置拖动数据。

    const draggableElement = document.querySelector('div');draggableElement.addEventListener('dragstart', (event) => {event.dataTransfer.setData('text/plain', '拖动数据');});

dragover事件：拖动元素在目标区域上方时触发，需要调用event.preventDefault()以允许放置。

    const dropZone = document.querySelector('#dropZone');dropZone.addEventListener('dragover', (event) => {event.preventDefault(); // 允许放置});

drop事件：拖动元素放置到目标区域时触发，可以获取拖动数据。

    dropZone.addEventListener('drop', (event) => {event.preventDefault();const data = event.dataTransfer.getData('text/plain');console.log('放置的数据:', data);});

dragend事件：拖动操作结束时触发，用于清理拖动状态或重置样式。

draggableElement.addEventListener('dragend', () => {draggableElement.style.backgroundColor = ''; // 重置样式});

拖拽式使用流程

设置可拖拽元素：在HTML中为元素添加draggable="true"属性。
处理拖拽开始事件：在dragstart事件中设置拖拽数据。
设置目标区域：通过dragover事件处理，允许放置操作。
处理放置事件：在drop事件中获取数据并处理放置逻辑。
清理拖拽操作：在dragend事件中清理元素样式或状态。

例子

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽示例</title><style>#dragElement {width: 100px; height: 100px; background-color: skyblue; cursor: move; text-align: center; line-height: 100px;}#dropZone {width: 300px; height: 300px; border: 2px dashed #aaa; margin-top: 50px; text-align: center; line-height: 300px; color: #888;}</style></head><body><div id="dragElement" draggable="true">拖我</div><div id="dropZone">在这里放置</div><script>const dragElement = document.getElementById('dragElement');const dropZone = document.getElementById('dropZone');dragElement.addEventListener('dragstart', (event) => {console.log('拖拽开始');event.dataTransfer.setData('text/plain', 'Hello, 拖拽');event.target.style.backgroundColor = 'orange';});dropZone.addEventListener('dragover', (event) => {console.log('拖拽进入');event.preventDefault();});dropZone.addEventListener('drop', (event) => {console.log('拖拽放下');event.preventDefault();const data = event.dataTransfer.getData('text/plain');dropZone.innerHTML = `放置了：${data}`;});dragElement.addEventListener('dragend', (event) => {console.log('拖拽结束');event.target.style.backgroundColor = 'skyblue';});</script></body></html>

注意事项

兼容性：大多数现代浏览器支持HTML5拖拽API，但老旧浏览器如IE8及以下不支持。
样式：可以通过设置样式增强用户体验，如改变光标或透明度。
文件拖放：HTML5还支持拖拽文件到浏览器特定区域，可以通过event.dataTransfer.files获取文件数据。

综合例子🌰 可拖拽课程表

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>可拖拽课程表</title><style>body {margin: 0;padding: 20px;}.schedule-container {display: flex;gap: 20px;max-width: 1400px;margin: 0 auto;}.schedule-table {flex: 1;display: grid;grid-template-columns: 100px repeat(7, 1fr);gap: 2px;background-color: #fff;border: 1px solid #ddd;height: fit-content;}.time-column {background-color: #f8f9fa;padding: 10px;text-align: center;font-weight: bold;}.header-row {background-color: #f8f9fa;padding: 10px;text-align: center;font-weight: bold;}.course-list {width: 250px;padding: 15px;border: 1px solid #ddd;background-color: #f8f9fa;border-radius: 8px;height: fit-content;}.course-list h3 {margin-top: 0;margin-bottom: 15px;color: #333;}#available-courses {display: flex;flex-direction: column;gap: 10px;}</style></head><body><div class="schedule-container"><div class="schedule-table"><!-- 表头 --><div class="header-row">时间</div><div class="header-row">周一</div><div class="header-row">周二</div><div class="header-row">周三</div><div class="header-row">周四</div><div class="header-row">周五</div><div class="header-row">周六</div><div class="header-row">周日</div></div><!-- 课程列表 --><div class="course-list"><h3>可选课程</h3><div id="available-courses"><!-- 这里会通过JavaScript动态生成可拖拽的课程 --></div></div></div><script src="tuozuaiApi.js"></script></body></html>

//tuozhaiApi.js
// 课程表拖拽功能实现const DragSchedule = {init() {this.scheduleTable = document.querySelector('.schedule-table');this.availableCourses = document.getElementById('available-courses');this.createTimeSlots();this.createSampleCourses();this.cells = document.querySelectorAll('.schedule-cell');this.courses = document.querySelectorAll('.course-item');this.bindEvents();this.loadScheduleState();},createTimeSlots() {// 创建时间段（第一节课从8:00开始）const times = ['8:00-8:45', '8:55-9:40', '9:50-10:35', '10:45-11:30','13:30-14:15', '14:25-15:10', '15:20-16:05', '16:15-17:00'];times.forEach((time, index) => {// 添加时间列const timeCell = document.createElement('div');timeCell.className = 'time-column';timeCell.textContent = `第${index + 1}节\n${time}`;this.scheduleTable.appendChild(timeCell);// 添加每一天的课程格子for (let day = 0; day < 7; day++) {const cell = document.createElement('div');cell.className = 'schedule-cell';cell.setAttribute('data-time', index);cell.setAttribute('data-day', day);this.scheduleTable.appendChild(cell);}});},createSampleCourses() {const sampleCourses = [{ id: 1, name: '高等数学', color: '#ff9999' },{ id: 2, name: '大学英语', color: '#99ff99' },{ id: 3, name: '程序设计', color: '#9999ff' },{ id: 4, name: '物理实验', color: '#ffff99' },{ id: 5, name: '体育课', color: '#ff99ff' }];sampleCourses.forEach(course => {const courseElement = document.createElement('div');courseElement.className = 'course-item';courseElement.setAttribute('data-course-id', course.id);courseElement.setAttribute('draggable', true); // 添加draggable属性courseElement.textContent = course.name;courseElement.style.backgroundColor = course.color;this.availableCourses.appendChild(courseElement);});},bindEvents() {// 为每个课程添加拖拽事件this.courses.forEach(course => {course.ondragstart = (e) => {e.target.classList.add('dragging');e.dataTransfer.setData('text/plain', e.target.getAttribute('data-course-id'));};course.ondragend = (e) => {e.target.classList.remove('dragging');};});// 为每个单元格添加放置事件this.cells.forEach(cell => {cell.ondragover = (e) => {e.preventDefault();e.currentTarget.classList.add('drag-over');};cell.ondragleave = (e) => {e.currentTarget.classList.remove('drag-over');};cell.ondrop = this.handleDrop.bind(this);});},saveScheduleState() {const scheduleState = {};this.cells.forEach((cell, index) => {const courseElement = cell.querySelector('.course-item');if (courseElement) {scheduleState[index] = courseElement.getAttribute('data-course-id');}});localStorage.setItem('scheduleState', JSON.stringify(scheduleState));},loadScheduleState() {const savedState = localStorage.getItem('scheduleState');if (savedState) {const scheduleState = JSON.parse(savedState);Object.entries(scheduleState).forEach(([cellIndex, courseId]) => {const cell = this.cells[cellIndex];const courseElement = document.querySelector(`[data-course-id="${courseId}"]`);if (cell && courseElement) {const newCourse = courseElement.cloneNode(true);newCourse.setAttribute('draggable', true);newCourse.ondragstart = (e) => {e.target.classList.add('dragging');e.dataTransfer.setData('text/plain', e.target.getAttribute('data-course-id'));};newCourse.ondragend = (e) => {e.target.classList.remove('dragging');};cell.appendChild(newCourse);}});}},handleDrop(e) {e.preventDefault();const cell = e.currentTarget;cell.classList.remove('drag-over');const courseId = e.dataTransfer.getData('text/plain');const courseElement = document.querySelector(`[data-course-id="${courseId}"]`);// 如果课程已经在其他单元格中，创建一个副本const newCourse = courseElement.cloneNode(true);newCourse.setAttribute('draggable', true);newCourse.ondragstart = (e) => {e.target.classList.add('dragging');e.dataTransfer.setData('text/plain', e.target.getAttribute('data-course-id'));};newCourse.ondragend = (e) => {e.target.classList.remove('dragging');};// 检查单元格是否已有课程if (cell.querySelector('.course-item')) {const existingCourse = cell.querySelector('.course-item');cell.removeChild(existingCourse);}cell.appendChild(newCourse);// 保存课程表状态this.saveScheduleState();}};// 添加更多样式const style = document.createElement('style');style.textContent = `.schedule-cell {min-height: 80px;border: 1px solid #ddd;padding: 8px;background-color: #fff;}.course-item {padding: 8px;margin: 4px;border-radius: 4px;cursor: move;color: #fff;text-shadow: 1px 1px 1px rgba(0,0,0,0.2);box-shadow: 2px 2px 4px rgba(0,0,0,0.1);}.dragging {opacity: 0.5;}.drag-over {background-color: #e9ecef;}.time-column {white-space: pre-line;font-size: 12px;}`;document.head.appendChild(style);// 初始化拖拽功能document.addEventListener('DOMContentLoaded', () => {DragSchedule.init();});

拖拽排序

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽排序示例</title><style>.sortable-list {width: 300px;margin: 20px auto;padding: 0;}.sortable-item {list-style: none;background-color: #f0f0f0;margin: 5px 0;padding: 10px 15px;border-radius: 4px;cursor: move;transition: background-color 0.3s;}.sortable-item.dragging {opacity: 0.5;background-color: #e0e0e0;}.sortable-item:hover {background-color: #e8e8e8;}</style></head><body><ul class="sortable-list"><li class="sortable-item" draggable="true">项目 1</li><li class="sortable-item" draggable="true">项目 2</li><li class="sortable-item" draggable="true">项目 3</li><li class="sortable-item" draggable="true">项目 4</li><li class="sortable-item" draggable="true">项目 5</li></ul><script>const sortableList = document.querySelector('.sortable-list');let draggingItem = null;// 为每个列表项添加拖拽事件监听器document.querySelectorAll('.sortable-item').forEach(item => {item.addEventListener('dragstart', handleDragStart);item.addEventListener('dragend', handleDragEnd);item.addEventListener('dragover', handleDragOver);item.addEventListener('drop', handleDrop);});function handleDragStart(e) {draggingItem = this;this.classList.add('dragging');// 设置拖拽效果e.dataTransfer.effectAllowed = 'move';e.dataTransfer.setData('text/plain', ''); // 必须调用setData才能在Firefox中触发drop}function handleDragEnd(e) {this.classList.remove('dragging');draggingItem = null;}function handleDragOver(e) {e.preventDefault();if (this === draggingItem) return;// 获取鼠标位置相对于当前项的位置const rect = this.getBoundingClientRect();const midY = rect.top + rect.height / 2;if (e.clientY < midY) {// 如果鼠标在元素上半部分，就插入到当前元素之前sortableList.insertBefore(draggingItem, this);} else {// 如果鼠标在元素下半部分，就插入到当前元素之后sortableList.insertBefore(draggingItem, this.nextSibling);}}function handleDrop(e) {e.preventDefault();}</script></body></html>

HTML5拖拽API学习托拽排序和可托拽课程表

文章目录前言拖拽API核心概念拖拽式使用流程例子注意事项综合例子🌰 可拖拽课程表拖拽排序前言前端拖拽功能让网页元素可以通过鼠标或触摸操作移动。HTML5 提供了标准的拖拽API，简化了拖放操作的实现。以下是拖拽API的基本使用指南： 拖拽…...

编程日记 2025/8/6 6:57:41

sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面

sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面前言 -r 等效 -E , 启用扩展正则表达式 -E是新叫法,更统一,能增强可移植性 , 但老系统,比如 CentOS-7 的 sed 只能用 -r ### Ubuntu24.04-E, -r, --regexp-extendeduse extended regular expressions in the script(fo…...

编程日记 2025/8/5 17:51:33

CSS中Flex布局应用实践总结

① 两端对齐比如要求ul下的li每行四个，中间间隔但是需要两段对齐，如下图所示： 这是除了基本的flex布局外，还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。 .hl_list{width: 100%;display: flex;align-items…...

编程日记 2025/8/3 23:09:06

【前端】CSS修改div滚动条样式

示例分别是滚动条默认样式和修改后的样式代码 <div class"video-list"><div class"list-item" onclick"videoinfo(100)"><img src"/index/images/coverimg/方和谦.png"><div class"txt">国医大…...

编程日记 2025/8/6 6:56:38

鸿蒙多线程开发——线程间数据通信对象02

1、前言本文的讨论是接续鸿蒙多线程开发——线程间数据通信对象01的讨论。在上一篇文章中，我们讨论了常规的JS对象(普通JSON对象、Object、Map、Array等)、ArrayBuffer。其中讨论了ArrayBuffer的复制传输和转移传输方式。下面，我们将讨论SharedArra…...

编程日记 2025/8/6 6:54:12

Kotlin的data class

在 Kotlin 中，data class 是一种专门用来存储数据的类。与普通类相比，data class 提供了简化数据存储的语法，并且自动生成了一些常用的方法，例如 toString()、equals()、hashCode() 和 copy()。 1. 定义 data class data class …...

编程日记 2025/8/3 22:54:00

Proxy 在 JavaScript的用法

Proxy 是 JavaScript 提供的一个构造函数，用于创建一个“代理对象”。这个代理对象可以拦截目标对象的基本操作，例如读取属性、赋值、删除、调用函数等。通过它，我们可以修改或扩展对象的默认行为。 Proxy 的基本语法 const proxy = new Proxy(target, handler);target：被…...

编程日记 2025/7/31 15:10:35

vue3的attr透传属性详解和使用法方式。以及在css样式的伪元素中实现

在 Vue 3 和 TypeScript 中，属性透传（attr pass-through）是指将组件的属性传递到其根元素或某个子元素中。这个概念在开发可复用的组件时非常有用，尤其是当你希望将父组件的属性动态地传递给子组件的某个 DOM 元素时。在 Vue 3 …...

编程日记 2025/8/6 6:53:49

《人工智能深度学习的基本路线图》

《人工智能深度学习的基本路线图》基础准备阶段数学基础： 线性代数：深度学习中大量涉及矩阵运算、向量空间等概念，线性代数是理解和处理这些的基础。例如，神经网络中的权重矩阵、输入向量的运算等都依赖于线性代数知识。学习内容…...

编程日记 2025/8/6 5:00:02

Matlab 答题卡方案

在现代教育事业的飞速发展中，考试已经成为现代教育事业中最公平的方式方法，而且也是衡量教与学的唯一方法。通过考试成绩的好与坏，老师和家长可以分析出学生掌握的知识多少和学习情况。从而老师可以了解到自己教学中的不足来改进教学的方式方…...

编程日记 2025/8/4 7:26:16

[Unity]TileMap开发，TileMap地图缝隙问题

环境： windows11 unity 2021.3.14f1c1 tilemap使用的图是美术已经拼接到一起的整图，块与块之间没有留缝隙问题： TileMap地图直接在Unity中使用时，格子边缘会出现缝隙，移动或缩放地图时较明显。解决方案&#x…...

编程日记 2025/8/6 6:53:50

pnpm : 无法加载文件 D:\Tool\environment\NodeAndNvm\node\pnpm.ps1，因为在此系统上禁止运行脚本。

问题在终端(cmd)输入 pnpm -v，报错如下 pnpm : 无法加载文件 D:\Tool\environment\NodeAndNvm\node\pnpm.ps1，因为在此系统上禁止运行脚本。解决 1. 在终端输入get-ExecutionPolicy(查看执行策略/权限) 输出如下： # (受限的) Restricte…...

编程日记 2025/8/4 14:00:02

redis的map底层数据结构分别什么时候使用哈希表（Hash Table）和压缩列表（ZipList）

在Redis中，Hash数据类型的底层数据结构可以是压缩列表（ZipList）或者哈希表（HashTable）。这两种结构的使用取决于特定的条件： 1. **使用ZipList的条件**： - 当Hash中的数据项（即f…...

编程日记 2025/8/5 20:47:44

通达OA前台submenu.php存在SQL注入漏洞(CVE-2024-10600)

通达OA前台submenu.php存在SQL注入漏洞(CVE-2024-10600) pda/appcenter/submenu.php 未包含inc/auth.inc.php且 $appid 参数未用’包裹导致前台SQL注入影响范围 v2017-v11.6 fofa app"TDXK-通达OA" && icon_hash"-759108386"poc http://url…...

编程日记 2025/8/5 18:43:23

Flutter：photo_view图片预览功能

导入SDK photo_view: ^0.15.0单张图片预览，支持放大缩小 import package:flutter/material.dart; import package:photo_view/photo_view.dart;... ...class _MyHomePageState extends State<MyHomePage>{overrideWidget build(BuildContext context) {return…...

编程日记 2025/8/1 14:36:11

C++结构型设计模式之使用抽象工厂来创建和配置桥接模式的例子

下面是一个使用抽象工厂模式来创建和配置桥接模式的示例，场景是创建不同操作系统的窗口（Window）及其对应的实现（WindowImpl）。我们将通过抽象工厂来创建不同操作系统下的窗口和实现。代码示例 #include <iostrea…...

编程日记 2025/8/4 22:56:13

智能合约运行原理

点个关注吧！！ 用一句话来总结，智能合约就像是一个自动售货机：你投入硬币（触发条件），选择商品（执行合约），然后机器就会自动给你商品（执行结果&…...

编程日记 2025/8/4 14:04:52

Unity3D基于ECS的游戏逻辑线程详解

前言 Unity3D是一款非常流行的游戏开发引擎，其采用的是组件实体系统（ECS）架构，这种架构可以让游戏开发者更加高效地管理游戏逻辑线程。本文将详细介绍Unity3D基于ECS的游戏逻辑线程，并给出技术详解以及代码实现。对…...

编程日记 2025/8/5 1:33:31

GIT 操作

全局设置 git config --global user.name "用户名" git config --global user.email "用户邮箱" 创建仓库 mkdir 项目目录 cd 项目目录 git init touch README.md git add README.md git commit -m "first commit" git remote add origin GIT…...

编程日记 2025/8/4 21:22:46

佛山三水戴尔R740服务器黄灯故障处理

1：佛山三水某某大型商场用户反馈一台DELL PowerEdge R740服务器近期出现了黄灯警告故障，需要冠峰工程师协助检查故障灯原因。 2：工程师协助该用户通过笔记本网线直连到服务器尾部的IDRAC管理端口，默认ip 192.168.0.120 密码一般在…...

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

系统性能优化方法论详解：从理解系统到验证迭代

在当今的企业级和云计算环境中，系统性能优化已成为提升竞争力的关键因素。本文将对系统优化的步骤进行深入解析，帮助读者系统化地进行性能优化，从而显著提升系统的整体表现。流程概述: 系统性能优化的流程可以分为以下几个关键步骤&#x…...

编程日记 2025/7/31 19:17:16

241120学习日志——[CSDIY] [InternStudio] 大模型训练营 [09]

CSDIY：这是一个非科班学生的努力之路，从今天开始这个系列会长期更新，（最好做到日更），我会慢慢把自己目前对CS的努力逐一上传，帮助那些和我一样有着梦想的玩家取得胜利！！&…...

编程日记 2025/8/4 9:27:59

MySQL创建和管理触发器

1.在教务管理系统数据库d_eams的course表中，创建一个插入事件触发器tr_course，添加一条课程信息时，显示提示信息。 delimiter %% create trigger tr_course after insert on course for each row begin set tr_i 操作成功！; end…...

编程日记 2025/8/3 20:51:50

uniapp rpx兼容平板

问题: 使用uniapp开发平板端时, rpx/upx 内容过小, 没有适应屏幕原因: uniapp 默认支持最大设备宽度为960px 而平板宽度超出了960 uniapp官方文档https://uniapp.dcloud.io/collocation/pages?idglobalstyle 解决: // pages.json 文件： {//..."globalSt…...

编程日记 2025/8/5 19:26:43

mysql 唯一键

在数据库中，唯一键（Unique Key）是一种约束条件，用于确保表中的某一列或多列组合的数据具有唯一性。这意味着在这列或这些列中不能有两个相同的值。唯一键的主要目的是保证数据的完整性和准确性，防止重复记录的插入。 …...

编程日记 2025/8/4 11:27:51

C++设计模式行为模式———迭代器模式

文章目录一、引言二、迭代器模式三、总结一、引言迭代器模式是一种行为设计模式， 让你能在不暴露集合底层表现形式 （列表、栈和树等） 的情况下遍历集合中所有的元素。C标准库中内置了很多容器并提供了合适的迭代器，尽管我们不…...

编程日记 2025/7/27 21:25:05

Flutter：SlideTransition位移动画，Interval动画延迟

配置vsync，需要实现一下with SingleTickerProviderStateMixinclass _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// 定义 AnimationControllerlate AnimationController _controller;overridevoid initState() {super.…...

编程日记 2025/8/1 11:15:49

Ruby Socket 编程

Ruby Socket 编程 Ruby 是一种动态、开放源代码的编程语言，以其简洁明了的语法和强大的功能而受到许多开发者的喜爱。在 Ruby 中，Socket 编程是一种重要的网络编程技术，它允许程序员创建可以在网络中通信的程序。本文将详细介绍 Ruby Socket 编程的基础知识，包括如何创建 …...

编程日记 2025/8/3 11:39:15

内容安全与系统构建加速，助力解决生成式AI时代的双重挑战

内容安全与系统构建加速，助力解决生成式AI时代的双重挑战 0. 前言1. PRCV 20241.1 大会简介1.2 生成式 Al 时代的内容安全与系统构建加速 2. 生成式 AI2.1 生成模型2.2 生成模型与判别模型的区别2.3 生成模型的发展 3. GAI 内容安全3.1 GAI 时代内容安全挑战3.2 图像…...

编程日记 2025/8/3 19:21:25

基于Vue的微前端架构实现与挑战

引言微前端架构作为一种新兴的前端开发方案，能够有效解决大型应用的复杂性问题。本文将详细探讨基于Vue实现微前端的具体方案及其面临的挑战。什么是微前端？ 微前端是一种将前端应用分解成一系列更小、更易管理的独立应用的架构模式。每个子应用可以…...

编程日记 2025/7/31 1:37:44

UE5 DownloadImage加载jpg失败的解决方法

DownloadImage加载jpg失败的解决方法现象解决方案具体方法现象用UE自带的 DownloadImage 无法下载成功，从 failure 引脚出来。接入一个由监控器自动保存起的图像，有些可以正常加载成功，有些无法加载成功。经调查问题出现在，…...

编程日记 2025/8/1 15:13:18

Consumer Group

不，kafka-consumer-groups.sh 脚本本身并不用于创建 Consumer Group。它主要用于管理和查看 Consumer Group 的状态和详情，比如列出所有的 Consumer Group、查看特定 Consumer Group 的详情、删除 Consumer Group 等。 Consumer Group 是由 Kafka 消费者…...

编程日记 2025/8/5 7:40:27

[开源] SafeLine 好用的Web 应用防火墙(WAF)

SafeLine，中文名 “雷池”，是一款简单好用, 效果突出的 Web 应用防火墙(WAF)，可以保护 Web 服务不受黑客攻击一、简介雷池通过过滤和监控 Web 应用与互联网之间的 HTTP 流量来保护 Web 服务。可以保护 Web 服务免受 SQL 注入、XSS、代码注…...

编程日记 2025/8/3 21:59:20

vue3 路由守卫

在Vue 3中，路由守卫是一种控制和管理路由跳转的机制。它允许你在执行导航前后进行一些逻辑处理，比如权限验证、数据预取等，从而增强应用的安全性和效率。路由守卫分为几种不同的类型，每种类型的守卫都有其特定的应用场景。其实路…...

编程日记 2025/8/4 5:40:26

unigui 登陆界面

新建项目，因为我的Main页面做了其他的东西，所以我在这里新建一个form File -> New -> From(Unigui) -> 登录窗体添加组件：FDConnection，FDQuery，DataSource，Unipanel和几个uniedit，…...

编程日记 2025/8/4 8:40:49

Ubuntu，openEuler，MySql安装

文章目录 Ubuntu什么是Ubuntu概述Ubuntu版本简介桌面版服务器版部署系统新建虚拟机安装系统部署后的设置设置root密码关闭防火墙启用允许root进行ssh安装所需软件制作快照网络配置Netplan概述配置详解配置文件DHCP静态IP设置软件安装方法apt安装软件作用常用命令配置apt源 d…...

编程日记 2025/7/29 8:03:30

LLM( Large Language Models)典型应用介绍 1 -ChatGPT Large language models

ChatGPT 是基于大型语言模型（LLM）的人工智能应用。 GPT 全称是Generative Pre-trained Transformer。-- 生成式预训练变换模型： Generative（生成式）：可以根据输入生成新的文本内容，例如回答问题…...

编程日记 2025/8/2 16:49:44

deepin系统下载pnpm cnpm等报错

deepin系统下载pnpm cnpm等报错 npm ERR! request to https://registry.npm.taobao.org/pnpm failed, reason: certificate has expired 报错提示证书过期，执行以下命令 npm config set registry https://registry.npmmirror.com下载pnpm npm install pnpm -g查…...

编程日记 2025/7/27 21:28:14

RPC-健康检测机制

什么是健康检测？ 在真实环境中服务提供方是以一个集群的方式提供服务，这对于服务调用方来说，就是一个接口会有多个服务提供方同时提供服务，调用方在每次发起请求的时候都可以拿到一个可用的连接。健康检测，能帮助从连…...

编程日记 2025/8/4 1:32:18

数据结构-二叉树_堆

目录 1.二叉树的概念编辑1.1树的概念与结构 1.2树的相关语 1.3 树的表示 2. ⼆叉树 2.1 概念与结构 2.2 特殊的⼆叉树 2.2.2 完全⼆叉树 2.3 ⼆叉树存储结构 2.3.1 顺序结构 2.3.2 链式结构 3. 实现顺序结构⼆叉树 3.2 堆的实现 3.2.2 向下调整算法 1.二叉树的概…...

编程日记 2025/8/3 14:45:26

“无关紧要”的小知识点：“xx Packages Are Looking for Funding”——npm fund命令及运行机制

“无关紧要”的小知识点：“xx Packages Are Looking for Funding”——npm fund 命令及运行机制在 Node.js 和 npm 生态系统中，开源项目的持续发展和维护常常依赖于贡献者的支持和资助。为了让开发者更容易了解他们依赖的项目哪些有资金支持选项&#…...

编程日记 2025/8/1 8:50:43

【案例】---Hutool提取excel文档

目录一、前言二、提取excel文档2.1、核心代码一、前言引用jar包 <dependency><groupId>cn.hutool</groupId>...

编程日记 2025/8/4 17:32:34

GPT-1.0、GPT-2.0、GPT-3.0参数对比

以下是 GPT-1.0、GPT-2.0、GPT-3.0 的模型参数对比表格： 模型GPT-1.0GPT-2.0GPT-3.0参数数量117M1.5B175B层数12 层12 - 48 层96 层嵌入维度768768 - 160012,288注意力头数1212 - 2596上下文长度51210242048词汇表大小约 40,00050,00050,000训练数据BooksCorpus (约…...

编程日记 2025/8/6 1:20:59

鸿蒙网络编程系列48-仓颉版UDP回声服务器示例

1. UDP回声服务器简介回声服务器指的是这样一种服务器，它接受客户端的连接，并且把收到的数据原样返回给客户端，本系列的第2篇文章《鸿蒙网络编程系列2-UDP回声服务器的实现》中基于ArkTS语言在API 9的环境下实现了UDP回声服务器&#xff0c…...

编程日记 2025/8/4 20:51:24

110. UE5 GAS RPG 实现玩家角色数据存档

在这篇，我们实现将玩家数据保存到存档内。增加保存玩家属性玩家属性默认的等级，经验值，可分配的技能点和属性点。还有一些角色基础属性也需要保存，回忆一下，我们是如何实现玩家的属性的，我们是通过多个…...

编程日记 2025/8/2 12:27:04

Excel - VLOOKUP函数将指定列替换为字典值

背景：在根据各种复杂的口径导出报表数据时，因为关联的表较多、数据量较大，一行数据往往会存在三个以上的字典数据。为了保证导出数据的效率，博主选择了导出字典code值后，在Excel中处理匹配字典值。在查询百度之后&am…...

编程日记 2025/8/5 1:36:09

多线程并发造成的数据重复问题解决方案参考(笔记记录)

一、添加 MySQL 组合唯一索引，需要注意什么坑？ 在 MySQL 中，创建组合唯一索引（Composite Unique Index）时，需要注意以下一些容易踩的坑： 1. 字段顺序影响索引使用问题：组合唯一索…...

编程日记 2025/8/5 10:06:34

使用uniapp开发微信小程序使用uni_modules导致主包文件过大，无法发布的解决方法

在使用uniapp开发微信小程序时候，过多的引入uni_modules的组件库，会导致主包文件过大，导致无法上传微信小程序，主包要求大小不超过1.5MB.分包大小每个不能超过2M。解决方法：分包。 1.对每个除了主页面navbar的页面进…...

编程日记 2025/8/5 4:47:25

01_MinIO部署（Windows单节点部署/Docker化部署）

单节点-Windows环境安装部署在Windows环境安装MinIO，主要包含两个东西： MinIO Server（minio.exe）：应用服务本身MinIO Client（mc.exe）：MinIO客户端工具（mc）…...

编程日记 2025/7/31 22:34:28

uniapp微信小程序转发跳转指定页面

onShareAppMessage 是微信小程序中的一个重要函数，用于自定义转发内容。当用户点击右上角的菜单按钮，并选择“转发”时，会触发这个函数。开发者可以在这个函数中返回一个对象，用于定义分享卡片的标题、图片、路径等信息。使用场…...

编程日记 2025/8/5 1:21:25