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

WHAT - 前端异步事件流处理场景梳理

news 来源：原创 2025/9/1 11:56:49

目录

  • 一、典型场景
  • 二、解决方案与技术选型
    • 1. 基础异步控制
    • 2. 状态管理方案
    • 3. 复杂任务调度
    • 4. 任务取消机制
    • 5. 微任务队列优化
  • 三、最佳实践建议
  • 四、工具链推荐

前端异步任务流处理是现代Web开发中常见的需求，尤其在复杂业务逻辑、高交互性应用中不可或缺。以下是常见场景及解决方案的系统性总结：

一、典型场景

  1. 多步骤流程控制

    • 场景：表单提交需先校验 → 获取数据 → 保存结果 → 显示反馈
    • 示例：登录流程（验证→获取Token→跳转）

  2. 并行任务协调

    • 场景：同时加载多个资源（图片、接口、静态文件）
    • 示例：产品详情页加载主图+缩略图+评论数据

  3. 实时交互响应

    • 场景：输入框联想建议（输入时触发搜索→动态更新结果）
    • 示例：地图应用的实时位置跟踪

  4. 任务取消与超时

    • 场景：用户取消操作（如搜索取消）或请求超时处理
    • 示例：电商搜索时取消无响应请求

  5. 状态依赖任务流

    • 场景：后续任务依赖前序任务的执行结果
    • 示例：用户选择地区后动态加载可用商品

二、解决方案与技术选型

1. 基础异步控制

  • Promise链式调用

    fetchUserData().then(validate).then(fetchProfile).catch(handleError);
    • 优点：明确任务顺序
    • 缺点：长链易读性差（“回调地狱”）

  • async/await语法糖

    async function processFlow() {try {const data = await validateInput();const result = await submitData(data);showSuccess(result);} catch (error) {handleError(error);}
}
    • 优点：同步式代码风格，可读性强
    • 缺点：无法直接取消（需结合AbortController）

2. 状态管理方案

  • Redux Toolkit + Thunk/Saga

    • 用途：集中管理异步操作状态（加载中/成功/失败）
    • 示例：
      // Saga模式处理任务流
function* fetchUserSaga(action) {yield put({ type: 'FETCH_USER_REQUEST' });const user = yield call(api.fetchUser, action.payload);yield put({ type: 'FETCH_USER_SUCCESS', payload: user });
}

  • Vuex + Actions

    // Vuex Action处理异步
actions: {async fetchPosts({ commit }) {commit('SET_LOADING', true);const posts = await api.getPosts();commit('SET_POSTS', posts);commit('SET_LOADING', false);}
}

3. 复杂任务调度

  • RxJS（Reactive Extensions）

    • 功能：合并/串联/取消多个异步流
    // 并发请求控制
const requests = [fetchA(), fetchB(), fetchC()];
const combined = forkJoin(requests).pipe(catchError(handleError),map(results => processResults(results))
);

  • Web Worker

    • 场景：CPU密集型任务（如图像压缩、数据加密）
    // 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = e => console.log(e.data);// worker.js
self.onmessage = e => {const result = heavyComputation(e.data);self.postMessage(result);
};

4. 任务取消机制

  • AbortController（浏览器原生）

    const controller = new AbortController();
const signal = controller.signal;fetch('/api/data', { signal }).then(response => response.json()).catch(error => {if (error.name === 'AbortError') {console.log('请求被取消');} else {console.error('发生错误:', error);}});// 取消任务
controller.abort();

  • Promise.race 实现超时控制

    function timeout(promise, ms) {return Promise.race([promise,new Promise(resolve => setTimeout(resolve, ms, 'TIMEOUT'))]);
}

5. 微任务队列优化

  • 使用 Promise.resolve().then() 实现微任务
    // 避免长任务阻塞主线程
setTimeout(() => {processHeavyTask();Promise.resolve().then(() => {updateUI(); // 确保在下次事件循环前更新UI});
}, 0);

三、最佳实践建议

  1. 模块化设计

    • 将异步逻辑拆分为独立函数/服务（如 apiService, taskScheduler）

  2. 统一错误处理

    • 使用全局错误边界（React Error Boundary）或中间件（Express中间件）

  3. 性能监控

    • 记录关键任务耗时（如 performance.mark() 和 measure()）

  4. 代码可测试性

    • 对异步代码使用Jest的 async/await 测试和 Mock 函数

四、工具链推荐

工具用途
AxiosHTTP请求库（支持取消/拦截器）
Redux-Saga复杂状态管理的任务协调
RxJS高阶异步流操作
Lighthouse自动化性能分析（识别长任务）

通过合理选择技术方案，可以将复杂的异步任务流转化为清晰、可维护的系统结构。实际项目中建议从简单方案（async/await + Promise）起步，逐步引入更高级工具（如RxJS）应对复杂需求。

相关文章：

WHAT - 前端异步事件流处理场景梳理

目录 一、典型场景二、解决方案与技术选型1. 基础异步控制2. 状态管理方案3. 复杂任务调度4. 任务取消机制5. 微任务队列优化 三、最佳实践建议四、工具链推荐 前端异步任务流处理是现代Web开发中常见的需求，尤其在复杂业务逻辑、高交互性应用中不可或缺。以下是常见…...

编程日记 2025/9/1 11:56:49

PHP 包含（Include）机制详解

PHP 包含（Include）机制详解 在PHP编程中，include和require是两个非常基础的函数，用于在脚本中包含其他文件。它们在模块化编程中发挥着至关重要的作用，使得代码更易于维护和扩展。本文将详细介绍PHP的包含机制，包括其工作原理、使用方法以及最佳实践。 一、PHP 包含机制…...

编程日记 2025/8/19 18:45:00

Metal学习笔记十：光照基础

光和阴影是使场景流行的重要要求。通过一些着色器艺术，您可以突出重要的对象、描述天气和一天中的时间并设置场景的气氛。即使您的场景由卡通对象组成，如果您没有正确地照亮它们，场景也会变得平淡无奇。 最简单的光照方法之一是 Phong 反射模…...

编程日记 2025/8/25 3:33:55

MongoDB 高级索引

MongoDB 高级索引 摘要 在数据库管理中，索引是提高查询效率的关键因素。MongoDB，作为一款流行的NoSQL数据库，其索引功能尤为强大。本文将深入探讨MongoDB的高级索引特性，包括复合索引、部分索引、文本索引、地理空间索引等，旨在帮助数据库管理员和开发者更好地利用Mongo…...

编程日记 2025/8/20 2:35:25

从DNS到TCP：DNS解析流程和浏览器输入域名访问流程

1 DNS 解析流程 1.1 什么是DNS域名解析 在生活中我们会经常遇到域名，比如说CSDN的域名www.csdn.net，百度的域名www.baidu.com,我们也会碰到IP，现在目前有的是IPV4，IPV6。那这两个有什么区别呢？IP地址是互联网上计算机…...

编程日记 2025/8/29 23:12:45

【JQuery—前端快速入门】JQuery 基础语法

JQuery JQuery是一个快速、简洁且功能丰富的JavaScript框架; 1. 引入依赖 使用JQuery需要先引入对应的库&#xff1b; 在使用 JQuery CDN 时&#xff0c;只需要在 HTML 文档中加入如下代码 <script src"https://code.jquery.com/jquery-3.7.1.min.js"></s…...

编程日记 2025/8/28 4:59:26

即梦AI发布新数字人模型OmniHuman-1

简介 随着人工智能技术的发展&#xff0c;特别是深度学习和自然语言处理的进步&#xff0c;AI在内容创作领域的应用越来越广泛。字节跳动作为一家领先的科技公司&#xff0c;一直在探索如何利用AI技术来提升用户体验和创造力。OmniHuman-1模型正是在这种背景下诞生的&#xff…...

编程日记 2025/8/29 3:15:26

ARM CM3核 压栈流程

STM32F103 使用 ARM Cortex-M3 内核&#xff0c;与 STM32F013&#xff08;Cortex-M0&#xff09;相比&#xff0c;其压栈行为有所不同&#xff0c;主要体现在异常自动压栈和**手动压栈&#xff08;函数调用&#xff09;**两方面。 1. 进入异常/中断时的自动压栈 当 STM32F103 …...

编程日记 2025/8/24 14:51:51

WHAT - RxJS 异步事件流处理

目录 RxJS 关键概念简单示例常用操作符1. 创建 Observables2. 转换操作符&#xff08;map&#xff09;3. 过滤操作符&#xff08;filter&#xff09;4. 合并多个流&#xff08;mergeMap&#xff09; 适用于 React & TypeScriptReact 组件中使用 RxJS RxJS 是一个用于处理异…...

编程日记 2025/8/31 22:57:24

vue组合式API中prop

*一、了解(事件与$emit) 一个组件需要显示声明它所接受的props，这样才知道外部传入的那些是props，那些是透传attribute。 在<script setup>单文件组件中，props可以使用defineProps()宏来声明，defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需…...

编程日记 2025/8/30 16:07:31

【HarmonyOS Next】自定义Tabs

背景 项目中Tabs的使用可以说是特别的频繁&#xff0c;但是官方提供的Tabs使用起来&#xff0c;存在tab选项卡切换动画滞后的问题。 原始动画无法满足产品的UI需求&#xff0c;因此&#xff0c;这篇文章将实现下面页面滑动&#xff0c;tab选项卡实时滑动的动画效果。 实现逻…...

编程日记 2025/8/31 7:09:09

算法 并查集

目录 前言 一 并查集的思路 二 并查集的代码分析 三 实操我们的代码 四 并查集的代码优化 总结 前言 并查集主要是用来求解集合问题的&#xff0c;用来查找集合还有就是合并集合&#xff0c;可以把这个运用到最小生成树里面 一 并查集的思路 1 并查集的相关的操作…...

编程日记 2025/8/28 21:47:03

EP 架构：未来主流方向还是特定场景最优解？

DeepSeek MoE架构采用跨节点专家并行&#xff08;EP&#xff09;架构&#xff0c;在提升推理系统性能方面展现出巨大潜力。这一架构在发展进程中也面临诸多挑战&#xff0c;其未来究竟是会成为行业的主流方向&#xff0c;还是仅适用于特定场景&#xff0c;成为特定领域的最优解…...

编程日记 2025/8/27 13:35:05

记忆化搜索与动态规划：原理、实现与比较

记忆化搜索和动态规划是解决优化问题的两种重要方法&#xff0c;尤其在处理具有重叠子问题和最优子结构性质的问题时非常有效。 目录 1. 记忆化搜索&#xff08;Memoization&#xff09; 定义&#xff1a; 实现步骤&#xff1a; 示例代码&#xff08;斐波那契数列&#xff0…...

编程日记 2025/8/31 0:59:11

LLMR//https://github.com/microsoft/llmr?locale=zh-cn

https://github.com/microsoft/llmr?localezh-cn Introduction 这个 repo 包含 LLMR 中描述的代码&#xff0c;实现了混合现实框架的大型语言模型。 此软件包是“用语言创造世界”的原型&#xff0c;它允许通过自然语言实时创建具有视觉、行为和交互元素的对象、工具和场景…...

编程日记 2025/8/27 14:18:21

Free Auto Clicker - 在任意位置自动重复鼠标点击

“想让鼠标自己动起来&#xff0c;解放双手去做更有趣的事&#xff1f;”Free Auto Clicker 就像你的数字小助手&#xff0c;能在任意位置自动重复点击鼠标。从玩游戏到刷网页&#xff0c;这款免费工具让你告别枯燥的重复操作&#xff0c;效率瞬间起飞&#xff01; 你有没有想…...

编程日记 2025/8/30 14:20:53

高考數學。。。

2024上 具体来说&#xff0c;直线的参数方程可以写为&#xff1a; x1t y−t z1t 二、简答题(本大题共5小题&#xff0c;每小题7分&#xff0c;共35分。) 12.数学学习评价不仅要关注结果评价&#xff0c;也要关注过程评价。简要说明过程评价应关注哪几个方面。…...

编程日记 2025/8/16 10:28:17

MWC 2025｜紫光展锐联手美格智能发布5G通信模组SRM812

在2025年世界移动通信大会&#xff08;MWC 2025&#xff09;期间&#xff0c;紫光展锐携手美格智能正式推出了基于紫光展锐V620平台的第二代5G Sub6G R16模组SRM812&#xff0c;以超高性价比方案&#xff0c;全面赋能合作伙伴&#xff0c;加速5G规模化应用在各垂直领域的全面落…...

编程日记 2025/8/26 7:50:43

5分钟快速搭建一个 SpringBoot3 + MyBatis-Plus 工程项目

环境 idea 2023.3.5 jdk 17 mysql 8 创建SpringBoot工程 创建SpringBoot工程&#xff0c;这里有两种方式可选&#xff0c;一种是使用idea提供的Spring Initializr自动创建&#xff0c;一种是通过Maven Archetype手动创建 自动创建SpringBoot工程 使用Spring Initializr创建…...

编程日记 2025/8/26 18:10:54

深度学习-大白话解释循环神经网络RNN

目录 一、RNN的思想 二、RNN的基本结构 网络架构 ​关键点 三、RNN的前向传播 四、RNN的挑战：梯度爆炸和梯度消失 问题分析 ​示例推导 五、LSTM：RNN的改进 核心组件 ​网络架构 3. LSTM 的工作流程 4. 数学公式总结 5. LSTM 的优缺点 ​优点 ​缺点 6. LSTM 的…...

编程日记 2025/8/27 1:33:56

20.＜Spring图书管理系统①（登录+添加图书）＞

PS&#xff1a;关于接口定义 接口定义&#xff0c;通常由服务器提供方来定义。 1.路径&#xff1a;自己定义 2.参数&#xff1a;根据需求考虑&#xff0c;我们这个接口功能完成需要哪些信息。 3.返回结果&#xff1a;考虑我们能为对方提供什么。站在对方角度考虑。 我们使用到的…...

编程日记 2025/8/29 22:31:38

windows下使用Hyper+wsl实现ubuntu下git的平替

文章目录 前言一、安装Hyper、wsl1. 安装Hyper2. 安装wsl 二、配置Hyper三、安装并使用git总结 前言 众所周知&#xff0c;Ubuntu下安装git只需执行sudo apt install git即可使用默认终端拉取代码&#xff0c;但是Windows上使用git既没有linux便捷&#xff0c;又没有MacOS优雅…...

编程日记 2025/8/31 20:09:22

Python在实际工作中的运用-提取Pdf文件内容

Pdf文件是我们日常工作中经常会遇到的一种文件格式&#xff0c;对于这种文件的提取 pdfplumber 库可以非常出色的完成处理工作&#xff0c;它是一个纯 Python 第三方库&#xff0c;适合 python 3.x 版本&#xff0c;通常用来查看pdf各类信息&#xff0c;能有效提取文本、表格&…...

编程日记 2025/8/30 0:09:44

Python+Vue+数据可视化的考研知识共享平台（源码+论文+讲解+安装+调试+售后）

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 程序介绍 近些年来&#xff0c;科技以一种近乎狂飙突进的态势呈爆发式发展&#xff0c;成果之丰硕…...

编程日记 2025/9/1 6:39:15

VirtualBox虚拟机MacOS从Big Sur升级到Sequoia（失败）

VirtualBox虚拟机里安装好Big Sur版本&#xff0c;尝试升级到Sequoia&#xff0c;但是最终失败了。 软件升级 直接在系统偏好-软件更新里可以看到提示&#xff0c;提示可以升级到15版本Sequoia 点击同意&#xff0c;看能不能升级到Sequoia吧。升级前先用时光做了备份。 升级…...

编程日记 2025/8/20 8:19:17

深度学习---卷积神经网络

一、卷积尺寸计算公式 二、池化 池化分为最大池化和平均池化 最常用的就是最大池化&#xff0c;可以认为最大池化不需要引入计算&#xff0c;而平均池化需要引出计算&#xff08;计算平均数&#xff09; 每种池化还分为Pooling和AdaptiveAvgPool Pooling(2)就是每2*2个格子…...

编程日记 2025/8/30 16:07:34

深入解析网络协议：从OSI七层模型到HTTP与TCP/IP的关系

在网络的世界里&#xff0c;理解不同协议如何协同工作以实现高效、可靠的通信至关重要。无论是构建动态的Web应用&#xff0c;还是进行复杂的网络编程&#xff0c;对基础协议的理解都是不可或缺的。本文首先介绍OSI七层模型&#xff0c;这是一个为网络系统设计提供通用参考框架…...

编程日记 2025/8/27 9:37:08

链表-相关面试算法题

目录 面试题 02.04. 分割链表 面试题 02.05. 链表求和 面试题 02.06. 回文链表 面试题 02.07. 链表相交 面试题 02.04. 分割链表 面试题 02.04. 分割链表 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点…...

编程日记 2025/8/30 14:38:19

CSS Overflow 属性详解

CSS Overflow 属性详解 在网页设计和开发中，CSS Overflow 属性是一个非常重要的特性，它决定了当内容超出其容器大小时应该如何处理。本文将详细介绍 CSS Overflow 属性的相关知识，包括其语法、作用、常用属性值以及一些实际应用场景。 1. CSS Overflow 属性概述 CSS Over…...

编程日记 2025/8/27 3:32:35

一、MySQL备份恢复

一、MySQL备份恢复 1.1 MySQL日志管理 数据库中数据丢失或被破坏可能原因 误删除数据库 数据库工作时&#xff0c;意外断电或程序意外终止 由于病毒造成的数据库损坏或丢失 文件系统损坏后&#xff0c;系统进行自检操作 升级数据库时&#xff0c;命令语句不严格 设备故…...

编程日记 2025/8/26 18:46:40

Python-04BeautifulSoup网络爬虫

2025-03-04-BeautifulSoup网络爬虫 记录BeautifulSoup网络爬虫的核心知识点 文章目录 2025-03-04-BeautifulSoup网络爬虫 [toc]1-参考网址2-学习要点3-核心知识点1. 安装2. 导入必要的库3. 发送 HTTP 请求4. 创建 BeautifulSoup 对象5. 解析 HTML 内容5.1 查找标签5.2 根据属性…...

编程日记 2025/8/30 6:58:42

记录uniapp小程序对接腾讯IM即时通讯无ui集成（2）

完成以上步骤之后开始进行登录&#xff0c;登陆就需要账号。这个账号我们可以在腾讯云中创建。 有了账号之后开始去小程序进行登陆操作。腾讯云接口文档 这里除了帐号还需要一个校验值userSig正常项目开发这个字段可以在登陆后让后端返回&#xff0c;现在是测试我们直接去控制…...

编程日记 2025/8/23 2:15:11

DE2115实现4位全加器和3-8译码器（FPGA)

一、配置环境 1、Quartus 18.1安装教程 软件&#xff1a;Quartus版本&#xff1a;Quartus 18.1语言&#xff1a;英文大小&#xff1a;5.78G安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.0GHz 内存4G(或更高&#xff09; 下载通道①百度网盘丨64位下载…...

编程日记 2025/8/27 10:49:46

大白话面试中应对自我介绍

在面试中&#xff0c;自我介绍是开场的关键环节&#xff0c;它就像你递给面试官的一张“个人名片”&#xff0c;要让面试官快速了解你并对你产生兴趣。下面详细讲讲应对自我介绍的要点及回答范例。 一、自我介绍的时间把控 一般面试中的自我介绍控制在1 - 3分钟比较合适。时间…...

编程日记 2025/8/22 8:25:57

【JavaScript—前端快速入门】JavaScript 综合案例 — 猜数字

JavaScript 综合案例—猜数字 预期效果 需求 完成基本的页面布局在文本框输入数字后&#xff0c;点击"猜"按钮&#xff0c;结果那一行会显示"猜大了"或者"猜小了"每猜一次&#xff0c;就会增加一次猜的次数猜到数字后&#xff0c;结果显示要猜的…...

编程日记 2025/8/28 19:42:06

X Window---图形接口

摘抄自 鸟哥的linux私房菜 基础篇 第四版 有鉴于图形用户接口(Graphical User Interface, GUI) 的需求日益加重&#xff0c;在 1984 年由 MIT 与其他第三方首次发表了 X Window System &#xff0c;并且更在 1988 年成立了非营利性质的 XFree86 这个组织。所谓的XFree86 其实是…...

编程日记 2025/8/27 16:54:22

CSS浮动详解

1. 浮动的简介 浮动是用来实现文字环绕图片效果的 2.元素浮动后会有哪些影响 对兄弟元素的影响&#xff1a; 后面的兄弟元素&#xff0c;会占据浮动元素之前的位置&#xff0c;在浮动元素的下面&#xff1b;对前面的兄弟 无影响。 对父元素的影响&#xff1a; 不能撑起父元…...

编程日记 2025/8/28 6:51:17

shell脚本编程实践第2天

1 内容格式化 1.1 输出格式化 1.1.1 echo解读 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结、三个方面来学习。 基础知识 命令简介 echo命令的功能是将内容输出到默认显示设备&#xff0c;一般起到一个提示的作用。OPTIONS&#xff1a; -n 不要在最后自…...

编程日记 2025/8/31 13:47:18

wgcloud-server端部署说明

Wgcloud 是一款开源的轻量级服务器监控系统&#xff0c;支持多平台&#xff0c;可对服务器的 CPU、内存、磁盘、网络等指标进行实时监控。 以下是 Wgcloud Server端的详细部署步骤&#xff1a; 环境准备 服务器&#xff1a; 至少准备两台服务器&#xff0c;一台作为监控端&a…...

编程日记 2025/8/30 10:22:35

AES/CBC/PKCS5Padding加密

1、加密代码如下 public static String encryptAEs_CBC(String data,String key,byte[] iv) {Cipher cipher = null;try {cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");//位数不够，自动补一个长度int blocksize = cipher.getBlockSize();byte[] dataBytes …...

编程日记 2025/8/31 5:30:56

9.8 Visual Studio 2022安装Qt 和安装graphic

1.安装Qt 1. 安装Qt 首先打开Visual Studio&#xff0c;然后创建一个项目&#xff0c;再在最上面的一行依次打开“扩展-->管理扩展”&#xff0c;再在搜索框内搜索“QT”&#xff0c;显示如下界面&#xff1a; 再在右边QT右边有个“在浏览器中查看”&#xff0c;打开后出现…...

编程日记 2025/8/30 16:52:01

【C++设计模式】第四篇：建造者模式（Builder）

注意&#xff1a;复现代码时&#xff0c;确保 VS2022 使用 C17/20 标准以支持现代特性。 分步骤构造复杂对象&#xff0c;实现灵活装配 1. 模式定义与用途 核心目标&#xff1a;将复杂对象的构建过程分离&#xff0c;使得同样的构建步骤可以创建不同的表示形式。 常见场景&am…...

编程日记 2025/8/21 13:55:44

Spring Boot如何利用Twilio Verify 发送验证码短信？

Twilio提供了一个名为 Twilio Verify 的服务&#xff0c;专门用于处理验证码的发送和验证。这是一个更为简化和安全的解决方案&#xff0c;适合需要用户身份验证的应用。 使用Twilio Verify服务的步骤 以下是如何在Spring Boot中集成Twilio Verify服务的步骤&#xff1a; 1.…...

编程日记 2025/8/27 9:32:18

制造业中的“大数据”：如何实现精准决策？

在当今全球经济竞争日趋激烈、技术变革周期不断缩短的环境下&#xff0c;制造业面临着全新的挑战和机遇。随着信息技术的飞速发展&#xff0c;“大数据”正以前所未有的速度渗透到制造业的各个环节&#xff0c;帮助企业实现更精准的决策、更灵活的生产组织以及更敏捷的市场响应…...

编程日记 2025/8/30 11:43:50

Linux cat 命令

cat&#xff08;英文全拼&#xff1a;concatenate&#xff09;命令用于连接文件并打印到标准输出设备上&#xff0c;它的主要作用是用于查看和连接文件。 使用权限 所有使用者 语法格式 cat [选项] [文件] 参数说明&#xff1a; -n&#xff1a;显示行号&#xff0c;会在输…...

编程日记 2025/8/29 15:21:47

CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性

​ 1.flex布局 也叫弹性布局&#xff0c;是浏览器提倡的布局模型&#xff0c;非常适合结构化布局&#xff0c;提供了强大的空间分布和对齐能力&#xff0c;不会产生浮动布局中脱标现象&#xff0c;布局网页更简单&#xff0c;更灵活。 flex容器属性&#xff1a; 属性描述d…...

编程日记 2025/8/28 14:34:42

Java UDP 通信：实现简单的 Echo 服务器与客户端

在计算机网络编程中&#xff0c;UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接的传输层协议&#xff0c;它允许应用程序在不建立连接的情况下发送数据包。与 TCP 不同&#xff0c;UDP 不保证数据包的顺序、可靠性或完整性&#xff0c;但它具有低延迟和低开销…...

编程日记 2025/8/30 10:48:25

使用GitLink个人建站服务部署Allure在线测试报告

更多技术文章&#xff0c;访问软件测试社区 文章目录 &#x1f680;前言&#x1f511;开通GitLink个人建站服务1. 前提条件2. 登录GitLink平台&#xff08;https://www.gitlink.org.cn/login&#xff09;3. 进入设置>个人建站>我的站点4. 新建站点5. 去仓部进行部署6. 安…...

编程日记 2025/8/26 17:23:20

Mybatis plus异常： type `java.time.LocalDateTime` not supported by default

1、问题&#xff1a; Java数据库实体对象有字段如下&#xff1a; TableField(typeHandler JacksonTypeHandler.class) private Map<String, Object> dataDetail; 如果dataDetail中有LocalDateTime对象&#xff0c;在保存时会报如下异常&#xff1a; Caused by: com.…...

编程日记 2025/8/30 22:57:25

Django：文件上传时报错in a frame because it set ‘X-Frame-Options‘ to ‘deny‘.

即&#xff1a;使用Content-Security-Policy 1.安装Django CSP中间件&#xff1a; pip install django-csp 2.更改项目配置&#xff1a; # settings.py MIDDLEWARE [...csp.middleware.CSPMiddleware,... ]CSP_DEFAULT_SRC ("self",) CSP_FRAME_ANCESTORS (&q…...

编程日记 2025/9/1 11:17:32