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

JavaScript前后端交互-AJAX/fetch

news 来源：原创 2025/7/1 14:36:52

摘自千峰教育kerwin的js教程

AJAX

1、AJAX 的优势

不需要插件的支持，原生 js 就可以使用
用户体验好（不需要刷新页面就可以更新数据）
减轻服务端和带宽的负担
缺点：搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到

2、AJAX 的使用

在 js 中有内置的构造函数来创建 ajax 对象
创建 ajax 对象以后，我们就使用 ajax 对象的方法去发送请求和接受响应

3、AJAX发送请求

创建AJAX对象
配置连接信息（最好不要配置成同步）
发送

const xhr = new XMLHttpRequest();// xhr 对象中的 open 方法是来配置请求信息的
// 第一个参数是本次请求的请求方式 get / post / put / ...
// 第二个参数是本次请求的 url 
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求方式', '请求地址', 是否异步)
xhr.open('get', './data.php')// 使用 xhr 对象中的 send 方法来发送请求
xhr.send()

4、AJAX接收响应

发送完成后，我们就需要等待服务端的消息
如果服务端正常的话，响应也能回到客户端
但是我们拿不到响应
如果想拿到响应，我们有两个前提条件
1. 本次 HTTP 请求是成功的，也就是我们之前说的 http 状态码为 200 ~ 299
2. ajax 对象也有自己的状态码，用来表示本次 ajax 请求中各个阶段

4.1、AJAX状态码

ajax 状态码 - xhr.readyState
是用来表示一个 ajax 请求的全部过程中的某一个状态
- readyState === 0：表示未初始化完成，也就是 open 方法还没有执行
- readyState === 1：表示配置信息已经完成，也就是执行完 open 之后
- readyState === 2：表示 send 方法已经执行完成
- readyState === 3：表示正在解析响应内容
- readyState === 4：表示响应内容已经解析完毕，可以在客户端使用了
这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据
所以，配合 http 状态码为 200 ~ 299
- 一个 ajax 对象中有一个成员叫做 xhr.status
- 这个成员就是记录本次请求的 http 状态码的
两个条件都满足的时候，才是本次请求正常完成

4.2、readyStateChange事件

在 ajax 对象中有一个事件，叫做 readyStateChange 事件
这个事件是专门用来监听 ajax 对象的 readyState 值改变的的行为
也就是说只要 readyState 的值发生变化了，那么就会触发该事件（所以响应过程会触发多次）

所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')xhr.send()xhr.onreadyStateChange = function () {// 每次 readyState 改变的时候都会触发该事件// 我们就在这里判断 readyState 的值是不是到 4// 并且 http 的状态码是不是 200 ~ 299if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {// 这里表示验证通过// 我们就可以获取服务端给我们响应的内容了}
}

4.3、onload事件

相比于上述事件，这个只有在xhr.readyState === 4时才会触发

xhr.onload = function () {if (xhr.status == 200) {} else of (xhr.status == 404) {}
}

4.4、responseText响应体

ajax 对象中的 responseText 成员
就是用来记录服务端给我们的响应体内容的

所以我们就用这个成员来获取响应体内容就可以

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')xhr.send()xhr.onreadyStateChange = function () {if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {// 我们在这里直接打印 xhr.responseText 来查看服务端给我们返回的内容console.log(xhr.responseText)}
}

5、发送post和get请求时如何携带参数

5.1、get请求携带参数

get 请求的参数就直接在 url 后面进行拼接就可以

const xhr = new XMLHttpRequest()
// 直接在地址后面加一个 ?，然后以 key=value 的形式传递
// 两个数据之间以 & 分割
xhr.open('get', './data.php?a=100&b=200')xhr.send()

这样服务端就能接受到两个参数
一个是 a，值是 100
一个是 b，值是 200

5.2、 post请求携带参数

post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')// 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content-type
// 告诉一下服务端我给你的是一个什么样子的数据格式
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')// 请求体直接再 send 的时候写在 () 里面就行
// 不需要问号，直接就是 'key=value&key=value' 的形式
xhr.send('a=100&b=200')

application/x-www-form-urlencoded 表示的数据格式就是 key=value&key=value

6、封装AJAX

重点：要注意header和data的数据格式处理成对应的

function queryStringify(obj) {let str = ''for (let k in obj) str += `${k}=${obj[k]}&`return str.slice(0, -1)
}// 封装 ajax
function ajax(options) {let defaultoptions = {url: "",method: "GET",async: true,data: {},headers: {},success: function () { },error: function () { }}// 默认值合并，保证所有参数都有效let { url, method, async, data, headers, success, error } = {...defaultoptions,...options}// 当传的是对象，且设置header也是json时，将传的对象{key:value}转化为jsonif (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {data = JSON.stringify(data)}else {// 以下情况需要处理// 1. 传的是对象，但是header设置的xxx-form-urlencoded// 2. 传的直接就是表单（不设置的话默认是form编码） name=123&age=10data = queryStringify(data)}// 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息if (/^get$/i.test(method) && data) url += '?' + data// 4. 发送请求const xhr = new XMLHttpRequest()xhr.open(method, url, async)xhr.onload = function () {if (!/^2\d{2}$/.test(xhr.status)) {error(`错误状态码:${xhr.status}`)return }// 执行解析try {let result = JSON.parse(xhr.responseText)success(result)} catch (err) {error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')}}// 设置请求头内的信息for (let k in headers) xhr.setRequestHeader(k, headers[k])if (/^get$/i.test(method)) {xhr.send()} else {xhr.send(data)}
}

ajax({url:"http://localhost:3000/users",method:"GET",async:true,// 这里header默认是form编码，但是传的对象，所以走else逻辑data:{username:"kerwin",password:"123"}, headers:{},success:function(res){console.log(res)},error:function(err){console.log(err)}
})

7、回调地狱

当一个回调函数嵌套一个回调函数的时候
就会出现一个嵌套结构
当嵌套的多了就会出现回调地狱的情况
比如我们发送三个 ajax 请求
- 第一个正常发送
- 第二个请求需要第一个请求的结果中的某一个值作为参数
- 第三个请求需要第二个请求的结果中的某一个值作为参数
```
ajax({url: '我是第一个请求',success (res) {// 现在发送第二个请求ajax({url: '我是第二个请求'，data: { a: res.a, b: res.b },success (res2) {// 进行第三个请求ajax({url: '我是第三个请求',data: { a: res2.a, b: res2.b },success (res3) { console.log(res3) }})}})}
})
```
  - 当代码成为这个结构以后，已经没有维护的可能了
  - 所以我们要把代码写的更加的艺术一些

8、promise

promise 是一个 ES6 的语法
承诺的意思，是一个专门用来解决异步 回调地狱 的问题

语法：

new Promise(function (resolve, reject) {
// resolve 表示成功的回调
// reject 表示失败的回调
}).then(function (res) {// 成功的函数
}).catch(function (err) {// 失败的函数
})

promise 就是一个语法
我们的每一个异步事件，在执行的时候
都会有三个状态，执行中 / 成功 / 失败

因为它包含了成功的回调函数

所以我们就可以使用 promise 来解决多个 ajax 发送的问题

new Promise(function (resolve, reject) {ajax({url: '第一个请求',success (res) {resolve(res)}})
}).then(function (res) {// 准备发送第二个请求return new Promise(function (resolve, reject) {ajax({url: '第二个请求',data: { a: res.a, b: res.b },success (res) {resolve(res)}})})
}).then(function (res) {ajax({url: '第三个请求',data: { a: res.a, b: res.b },success (res) {console.log(res)}})
})

9、 async/await

async/await 是一个 es7 的语法
这个语法是 回调地狱的终极解决方案

语法：

async function fn() {const res = await promise对象
}

可以把异步代码写的看起来像同步代码
只要是一个 promiser 对象，那么我们就可以使用 async/await 来书写

async function fn() {const res = await new Promise(function (resolve, reject) {ajax({url: '第一个地址',success (res) {resolve(res)}})})// res 就可以得到请求的结果const res2 = await new Promise(function (resolve, reject) {ajax({url: '第二个地址',data: { a: res.a, b: res.b },success (res) {resolve(res)}})})const res3 = await new Promise(function (resolve, reject) {ajax({url: '第三个地址',data: { a: res2.a, b: res2.b },success (res) {resolve(res)}})})// res3 就是我们要的结果console.log(res3)
}

这种方式如果要捕获错误，可以使用try-catch方式

fetch

XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。

兼容性不好 polyfill: https://github.com/camsong/fetch-ie8，所以还是推荐封装ajax

fetch("http://localhost:3000/users").then(res=>res.json()).then(res=>{console.log(res)})fetch("http://localhost:3000/users",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({username:"kerwin",password:"123"})}).then(res=>res.json()).then(res=>{console.log(res)})fetch("http://localhost:3000/users/5",{method:"PUT",headers:{"content-type":"application/json"},body:JSON.stringify({username:"kerwin",password:"456"})}).then(res=>res.json()).then(res=>{console.log(res)})fetch("http://localhost:3000/users/5",{method:"DELETE"}).then(res=>res.json()).then(res=>{console.log(res)})

//错误处理
fetch("http://localhost:3000/users1").then(res=>{if(res.ok){return res.json()}else{// 手动拒绝return Promise.reject({status:res.status,statusText:res.statusText})}}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})

结语

我写过的基于React的项目中，一般会使用将axios（另个一将xhr封装的npm包）二次封装的方式，结合框架进行使用。

JavaScript前后端交互-AJAX/fetch

摘自千峰教育kerwin的js教程 AJAX 1、AJAX 的优势不需要插件的支持，原生 js 就可以使用用户体验好（不需要刷新页面就可以更新数据）减轻服务端和带宽的负担缺点： 搜索引擎的支持度不够，因为数据都不在页面上&#xf…...

编程日记 2025/7/1 14:36:52

2025 网络安全学习路线非常详细推荐学习

关键词：网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线首先咱们聊聊，学习网络安全方向通常会有哪些问题 1、打基础时间太长学基础花费很长时间，光语言都有几门，有些人会倒在学习 linux 系统及命令的路上&#…...

编程日记 2025/6/27 23:52:46

尝试把clang-tidy集成到AWTK项目

前言项目经过一段时间的耕耘终于进入了团队开发阶段，期间出现了很多问题，其中一个就是开会讨论团队的代码风格规范，目前项目代码风格比较混乱，有的模块是驼峰，有的模块是匈牙利，后面经过讨论，…...

编程日记 2025/6/27 11:25:06

04树 + 堆 + 优先队列 + 图（D1_树（D17_综合刷题练习））

目录 1. 二叉树的前序遍历（简单） 1.1. 题目描述 1.2. 解题思路方法一：递归（推荐使用） 方法二：非递归（扩展思路） 2. 二叉树的中序遍历（中等） 2.1. 题目…...

编程日记 2025/7/1 11:16:25

C++ Primer 数组

欢迎阅读我的【CPrimer】专栏专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…...

编程日记 2025/7/1 14:20:45

Linux(Centos)安装allnnlp失败,jsonnet报错

Linux安装allnnlp失败,jsonnet报错问题分析并解决1. 什么是 Software Collection (SCL)？2. 安装步骤2.1 安装 SCL 仓库支持2.2 安装 Devtoolset-7 提供的 C 编译器2.3 启用 Devtoolset-7 环境2.4 验证安装 3. 永久启用 Devtoolset-7 环境问题执行pip install al…...

编程日记 2025/7/1 14:16:32

小程序设计和开发：要如何明确目标和探索用户需求？

一、明确小程序的目标确定业务目标首先，需要明确小程序所服务的业务领域和目标。例如，是一个电商小程序，旨在促进商品销售；还是一个服务预约小程序，方便用户预订各类服务。明确业务目标有助于确定小程序的核心功能和…...

编程日记 2025/6/27 14:31:28

C#面试常考随笔12：游戏开发中常用的设计模式【C#面试题（中级篇）补充】

C#面试题（中级篇），详细讲解，帮助你深刻理解，拒绝背话术！-CSDN博客简单工厂模式优点： 根据条件有工厂类直接创建具体的产品客户端无需知道具体的对象名字，可以通过配置文件创建…...

编程日记 2025/6/30 12:30:51

napalm ‘NXOSDriver‘ object has no attribute ‘port‘ 解决方案（随手记）

解决方案（仍然使用ssh作为访问方式） 使用napalm时，对于Cisco Nexus设备，默认采用的是443的api去访问获取数据，如果需要使用ssh的方式获取，需要特别指定get_network_driver(nxos_ssh) 使用443 https api的…...

编程日记 2025/6/30 9:11:53

顺序表与vector

一、顺序表的模拟实现 1.顺序表的实现方式按照数组的申请方式，有以下两种实现方式： （1）数组采用静态分配，此时的顺序表称为静态顺序表。 （2）数组采用动态分配，此时的顺序表称为动…...

编程日记 2025/6/28 2:56:04

Spring 面试题【每日20道】【其三】

1、Spring 中的 Profile 注解的作用是什么？ 中等 Profile 注解在Spring框架中用于根据不同的环境配置文件（profiles）来激活或忽略某些Bean的注册。它允许开发者定义逻辑以区分不同环境下的bean定义，例如开发、测试和生产环境。 …...

编程日记 2025/6/29 11:08:32

作业day7

请使用条件变量实现2生产者2消费者模型，注意1个生产者在生q产的时候，另外一个生产者不能生产 #include <stdio.h> #include <stdlib.h> #include <pthread.h> #include <unistd.h>#define BUFFER_SIZE 5int buffer[BUFFER_SIZE]…...

编程日记 2025/7/1 14:18:11

后盾人JS--继承

继承是原型的继承 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </hea…...

编程日记 2025/6/28 1:16:14

基于CY8CKIT-149 BLE HID设备实现及PC控制功能开发(BLE HID+CapSense)

目录项目介绍硬件介绍项目设计开发环境总体流程图BLE HID触摸按键与滑条功能展示项目总结 👉 【Funpack4-1】基于CY8CKIT-149 BLE HID设备实现及PC控制功能开发 👉 Github: EmbeddedCamerata/CY8CKIT-149_ble_hid_keyboard 项目介绍基于英飞凌 CY8CK…...

编程日记 2025/6/28 1:11:31

工业级激光测距飞行时间法TOF 相位法多频调制的本质！

激光测距仪中使用的相位法飞行时间（Phase-based Time-of-Flight, ToF）是一种通过测量调制光信号的相位差来计算距离的高精度方法。以下是详细解释： 一、核心原理：用“波的延迟”测距离想象你向一堵墙拍手，通过回声的…...

编程日记 2025/6/29 18:35:43

014-STM32单片机实现矩阵薄膜键盘设计

1.功能说明本设计主要是利用STM32驱动矩阵薄膜键盘，当按下按键后OLED显示屏上会对应显示当前的按键键值，可以将此设计扩展做成电子秤、超市收银机、计算器等需要多个按键操作的单片机应用。 2.硬件接线模块管脚STM32单片机管脚矩阵键盘行1PA0矩阵键盘…...

编程日记 2025/6/27 17:51:08

flowable expression和json字符串中的双引号内容

前言最近做项目，发现了一批特殊的数据，即特殊字符"，本身输入双引号也不是什么特殊的字符，毕竟在存储时就是正常字符，只不过在编码的时候需要转义，转义符是\，然而转义符\也是特殊字符&…...

编程日记 2025/6/30 17:48:32

关于Internet Download Manager(IDM)强制下载合并相关二次开发

目录前言强制下载视频强制合并迁移下载列表免责声明附录前言那个下载工具IDM不说了，确实有很多便捷的功能，不过也有一些限制常见的包括但不限于： 1.无法下载有版权保护的视频（不管真假） 2.有时候下载…...

编程日记 2025/6/30 1:11:45

在Vue3 + Vite 项目中使用 Tailwind CSS 4.0

文章目录首先是我的package.json根据官网步骤VS Code安装插件验证是否引入成功参考资料首先是我的package.json {"name": "aplumweb","private": true,"version": "0.0.0","type": "module","s…...

编程日记 2025/6/29 10:21:08

Notepad++消除生成bak文件

设置(T) ⇒ 首选项... ⇒ 备份 ⇒ 勾选 "禁用" 勾选禁用就不会再生成bak文件了 notepad怎么修改字符集编码格式为gbk 如图所示...

编程日记 2025/6/28 5:37:42

[mmdetection]fast-rcnn模型训练自己的数据集的详细教程

本篇博客是由本人亲自调试成功后的学习笔记。使用了mmdetection项目包进行fast-rcnn模型的训练，数据集是自制图像数据。废话不多说，下面进入训练步骤教程。注：本人使用linux服务器进行展示，Windows环境大差不差。另外&#xff0…...

编程日记 2025/7/1 12:59:57

汽车自动驾驶AI

汽车自动驾驶AI是当前汽车技术领域的前沿方向，以下是关于汽车自动驾驶AI的详细介绍： 技术原理感知系统：自动驾驶汽车通过多种传感器（如激光雷达、摄像头、雷达、超声波传感器等）收集周围环境的信息。AI算法对这些传感…...

编程日记 2025/6/29 11:01:51

信息学奥赛一本通 2101：【23CSPJ普及组】旅游巴士(bus) | 洛谷 P9751 [CSP-J 2023] 旅游巴士

【题目链接】 ybt 2101：【23CSPJ普及组】旅游巴士(bus) 洛谷 P9751 [CSP-J 2023] 旅游巴士【题目考点】 1. 图论：求最短路Dijkstra, SPFA 2. 动态规划 3. 二分答案 4. 图论：广搜BFS 【解题思路】解法1：Dijkstra堆优化 …...

编程日记 2025/6/29 20:42:40

零基础洛谷刷题记录 Day01 2024.11.18 Day02 2024.11.25 Day03 2024.11.26 Day04 2024.11.28 Day05 2024.11.29 Day06 2024 12.02 Day07 2024.12.03 Day08 2024 12 05 Day09 2024.12.07 Day10 2024.12.09 Day11 2024.12.10 Day12 2024.12.12 Day13 2024.12.16 Day14 2024.12.1…...

编程日记 2025/6/27 16:48:10

minikube 的 Kubernetes 入门教程--Ollama

让我们在本地 Kubernetes 中部署 Ollama（llama3.2） Ollama 安装方式有多样，是可选的，因为有minikube环境，我在 Kubernetes 中Deployment它。调用Ollama镜像，也可以用 Ollama CLI 去运行（run&am…...

编程日记 2025/6/27 23:53:52

【字节青训营-7】：初探 Kitex 字节微服务框架（使用ETCD进行服务注册与发现）

本文目录一、Kitex概述二、第一个Kitex应用三、IDL四、服务注册与发现一、Kitex概述长话短说，就是字节跳动内部的 Golang 微服务 RPC 框架，具有高性能、强可扩展的特点，在字节内部已广泛使用。如果对微服务性能有要求，又希望…...

编程日记 2025/6/30 23:20:46

Docker技术相关学习三

一、Docker镜像仓库管理 1.docker仓库：用于存储和分发docker镜像的集中式存储库，开发者可以将自己创建的镜像推送到仓库中也可以从仓库中拉取所需要的镜像。 2.docker仓库： 公有仓库（docker hub）：任何人都可…...

编程日记 2025/6/28 2:58:13

浏览器查询所有的存储信息，以及清除的语法

要在浏览器的控制台中查看所有的存储（例如 localStorage、sessionStorage 和 cookies），你可以使用浏览器开发者工具的 "Application" 标签页。以下是操作步骤： 1. 打开开发者工具在 Chrome 或 Edge 浏览器中&#xf…...

编程日记 2025/6/27 8:31:36

生成式AI安全最佳实践 - 抵御OWASP Top 10攻击 (上)

今天小李哥将开启全新的技术分享系列，为大家介绍生成式AI的安全解决方案设计方法和最佳实践。近年来，生成式 AI 安全市场正迅速发展。据 IDC 预测，到 2025 年全球 AI 安全解决方案市场规模将突破 200 亿美元，年复合增长率超过 30%…...

编程日记 2025/6/29 18:06:56

mysql 学习8 函数，字符串函数，数值函数，日期函数，流程函数

函数一字符串函数二数值函数三日期函数四流程函数...

编程日记 2025/6/27 23:53:56

WSL2中安装的ubuntu搭建tftp服务器uboot通过tftp下载

Windows中安装wsl2，wsl2里安装ubuntu。 1. Wsl启动后 1）Windows下ip ipconfig 以太网适配器 vEthernet (WSL (Hyper-V firewall)): 连接特定的 DNS 后缀 . . . . . . . : IPv4 地址 . . . . . . . . . . . . : 172.19.32.1 子网掩码 . . . . . . . .…...

编程日记 2025/6/29 13:15:46

7.2.背包DP

背包DP 在C中，背包动态规划（Knapsack DP） 是解决资源分配类问题的核心算法范式，尤其在处理物品选择与容量限制的组合优化问题时表现优异。以下是针对不同背包类型的详细解析与代码实现： 一、背包DP问题分类类型特点…...

编程日记 2025/7/1 10:33:18

芝法酱学习笔记（2.6）——flink-cdc监听mysql binlog并同步数据至elastic-search和更新redis缓存

一、需求背景在有的项目中，尤其是进销存类的saas软件，一开始为了快速把产品做出来，并没有考虑缓存问题。而这类软件，有着复杂的业务逻辑。如果想在原先的代码中，添加redis缓存，改动面将非常大&#xff0c…...

编程日记 2025/6/28 0:57:21

pandas习题 071：字典元素列表构造 DataFrame

（编码题）以下有一个列表嵌套字典 data，列表中的每个字典 fields 中的列表为每行数据的值，另有一个 col 为列名，利用这两个数据构造一个 DataFrame。 data = [{fields: [2024-10-07T21:22:01, USER-A, 21, 0,...

编程日记 2025/6/27 23:53:14

FFmpeg rtmp推流直播

文章目录 rtmp协议RTMP协议组成RTMP的握手过程RTMP流的创建RTMP消息格式Chunking(Message 分块) rtmp服务器搭建Nginx服务器配置Nginx服务器 librtmp库编译推流 rtmp协议 RTMP（Real Time Messaging Protocol）是由Adobe公司基于Flash Player播放器对应的…...

编程日记 2025/6/27 23:53:12

北京门头沟区房屋轮廓shp的arcgis数据建筑物轮廓无偏移坐标测评

在IT行业中，地理信息系统（GIS）是用于处理、分析和展示地理空间数据的重要工具，而ArcGIS则是GIS领域中的一款知名软件。本文将详细解析标题和描述中提及的知识点，并结合“门头沟区建筑物数据”这一标签，深入…...

编程日记 2025/6/27 23:52:56

Verilog基础（一）：基础元素

verilog基础我先说，看了肯定会忘，但是重要的是这个过程，我们知道了概念，知道了以后在哪里查询。语法都是术，通用的概念是术。所以如果你有相关的软件编程经验，那么其实开启这个学习之旅，你会感…...

编程日记 2025/6/28 6:29:55

Games104——游戏引擎Gameplay玩法系统：基础AI

这里写目录标题寻路/导航系统NavigationWalkable AreaWaypoint NetworkGridNavigation Mesh（寻路网格）Sparse Voxel Octree Path FindingDijkstra Algorithm迪杰斯特拉算法A Star（A*算法） Path Smoothing Steering系统Crowd Simu…...

编程日记 2025/6/29 19:08:33

vue生命周期及其作用

vue生命周期及其作用 1. 生命周期总览 2. beforeCreate 我们在new Vue()时，初始化一个Vue空的实例对象，此时对象身上只有默认的声明周期函数和事件，此时data,methods都未被初始化 3. created 此时，已经完成数据观测&#xff0…...

编程日记 2025/6/27 8:30:54

数据分析师使用Kutools for Excel 插件

数据分析师使用Kutools for Excel 插件 Kutools for Excel 是一款功能强大的 Excel 插件，旨在提高 Excel 用户的工作效率，简化复杂的操作。它提供了超过 300 个增强功能，帮助用户快速完成数据管理、格式化、排序、分析等任务，特别…...

编程日记 2025/7/1 12:22:00

毫秒级响应的VoIP中的系统组合推荐

在高并发、低延迟、毫秒级响应的 VoIP 场景中，选择合适的操作系统组合至关重要。以下是针对 Ubuntu linux-lowlatency、CentOS Stream kernel-rt 和 Debian 自定义 PREEMPT_RT 的详细对比及推荐： 1. 系统组合对比特性Ubuntu linux-lowlatencyCentO…...

编程日记 2025/7/1 8:35:51

unordered_map/set的哈希封装

【C笔记】unordered_map/set的哈希封装 🔥个人主页：大白的编程日记 🔥专栏：C笔记文章目录【C笔记】unordered_map/set的哈希封装前言一. 源码及框架分析二.迭代器三.operator[]四.使用哈希表封装unordered_map/set后言前言哈…...

编程日记 2025/6/27 23:52:57

表格标签的使用

一.表格标签 1.1表格标签的作用用来显示和展示数据，不是用来布局页面的。 1.2表格的基本语法 <table> //用于定义表格标签 <tr> // table row 用于定义表格中的行，必须嵌套在<table> </table>标签中 <td>单元格内的文…...

编程日记 2025/6/28 5:27:52

python算法和数据结构刷题[5]：动态规划

动态规划（Dynamic Programming, DP）是一种算法思想，用于解决具有最优子结构的问题。它通过将大问题分解为小问题，并找到这些小问题的最优解，从而得到整个问题的最优解。动态规划与分治法相似，但区别在于动态…...

编程日记 2025/6/30 18:18:55

【cocos creator】【模拟经营】餐厅经营demo

下载：【cocos creator】模拟经营餐厅经营...

编程日记 2025/7/1 0:53:20

编程AI深度实战：给vim装上AI

系列文章： 编程AI深度实战：私有模型deep seek r1，必会ollama-CSDN博客编程AI深度实战：自己的AI，必会LangChain-CSDN博客编程AI深度实战：给vim装上AI-CSDN博客编程AI深度实战：火的编程AI&…...

编程日记 2025/6/29 23:37:49

信息学奥赛一本通 2088：【22CSPJ普及组】逻辑表达式(expr) | 洛谷 P8815 [CSP-J 2022] 逻辑表达式

【题目链接】 ybt 2088：【22CSPJ普及组】逻辑表达式(expr) 洛谷 P8815 [CSP-J 2022] 逻辑表达式【题目考点】 1. 表达式树：中缀表达式建树可以看该问题信息学奥赛一本通 1356：计算(calc) 了解中缀表达式建树过程。【解题思路】解法…...

编程日记 2025/6/30 2:01:47

Linux系统管理

文章目录一、进程与服务二、systemctl基本语法操作三、系统运行级别Linux进程运行级别查看当前运行级别修改当前运行级别四、关机重启命令一、进程与服务守护进程与服务是一个东西。二、systemctl 基本语法 systemctl start|stop|restart|status 服务名查看服务的方法…...

编程日记 2025/6/28 5:47:42

CTFSHOW-WEB入门-命令执行71-77

题目：web 71 题目：解题思路：分析可知highlight_file() 函数被禁了，先想办法看看根目录：cvar_export(scandir(dirname(‘/’))); 尝试一下发现很惊奇：（全是？）这种情况我也…...

编程日记 2025/6/30 12:57:12

[MRCTF2020]Ez_bypass1(md5绕过)

[MRCTF2020]Ez_bypass1(md5绕过) 这道题就是要绕过md5强类型比较，但是本身又不相等： md5无法处理数组，如果传入的是数组进行md5加密，会直接放回NULL，两个NuLL相比较会等于true； 所以?id[]1&gg…...

编程日记 2025/6/27 23:52:59