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

前端笔记-Axios

news 来源：原创 2025/7/28 7:54:26

Axios学习目标

Axios与API交互	1、Axios配置与使用
	2、请求/响应拦截器
	3、API设计模式（了解RESTful风格即可）

学习参考：起步 | Axios中文文档 | Axios中文网

什么是Axios

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专门用于浏览器和 Node.js 环境。

其核心特性有如下：

跨平台支持：
- 在浏览器中通过 XMLHttpRequest 发送请求
- 在 Node.js 中通过 http 模块发送请求
Promise API：
- 所有请求都返回 Promise 对象
- 支持 async/await 语法
自动转换：
- 自动转换请求和响应数据（如 JSON 转换）
- 可自定义转换逻辑
拦截器系统：
- 请求和响应拦截
- 可用于添加认证头、处理错误等
取消请求：
- 支持取消正在进行的请求
- 使用 CancelToken 或 AbortController

经常使用于：

前端应用与 RESTful API 交互
需要统一处理 HTTP 请求的大型应用
需要请求拦截（如添加认证头）的应用
需要取消请求功能的复杂交互应用
同构应用（既在浏览器又在服务器运行）

配置与使用

安装

使用 npm:

npm install axios

使用cdn：

https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>

示例：

服务器端：

const express = require('express');
//创建应用对象
const app = express();// 添加请求体解析
app.use(express.json());
app.use(express.urlencoded({ extended: true }));//创建路由规则// Axios请求
app.all('/axios-server', (req, res) => {// 设置响应头res.setHeader('Access-Control-Allow-Origin', '*');res.setHeader('Access-Control-Allow-Headers', '*');// 设置响应体const data ={name:'axios发送的请求'};res.send(JSON.stringify(data));//res.send('Its Axios Qusetion!');
}); // 404处理
app.use((req, res) => {res.status(404).send('Not Found');
});//监听端口启动服务
app.listen(8000, () => {console.log('Server is running on port 8000');
});

html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>axios 发送AJAX请求</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">Axios 发送AJAX请求</h2><button class="btn btn-primary">GET</button><button class="btn btn-danger">POST</button><button class="btn btn-info">通用型</button></div><script>const btns = document.querySelectorAll("button");// GET请求示例btns[0].onclick = function() {axios.get('http://127.0.0.1:8000/axios-server', {params: { a: 100,b: 200},//请求头信息headers:{name:'value',age:20}}).then(function(response) {console.log(response.data);}).catch(function(error) {console.error('请求失败:', error);});};// POST请求示例btns[1].onclick = function() {axios.post('http://127.0.0.1:8000/axios-server', {username: 'admin',password: '123456'}).then(function(response) {console.log(response.data);});};// 通用AJAX请求示例btns[2].onclick = function() {axios({method: 'POST',url: 'http://127.0.0.1:8000/axios-server',data: {key1: 'value1',key2: 'value2'}}).then(function(response) {console.log(response.data);});};</script>
</body>
</html>

可以直接浏览器打开代码查看一下F12控制台的信息，这里不做重点讲解，只了解使用。

请求/响应拦截器

请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {/*** 在发送请求前做些什么* config对象包含请求的所有配置信息* 可以在这里统一处理以下内容：* 1. 添加认证token* 2. 添加公共参数* 3. 显示loading状态* 4. 记录请求日志*/// 添加认证tokenconst token = localStorage.getItem('authToken');if (token) {config.headers.Authorization = `Bearer ${token}`;}// 添加时间戳防止缓存if (config.method === 'get') {config.params = config.params || {};config.params._t = Date.now();}// 必须返回修改后的configreturn config;},function (error) {/*** 对请求错误做些什么* 通常是在请求配置出错时触发* 比如config格式不正确等*/console.error('请求配置错误:', error);// 返回一个被拒绝的Promise，会进入catch流程return Promise.reject(error);}
);

响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {/*** 对响应数据做点什么* 2xx范围内的状态码都会触发这个函数* 可以在这里：* 1. 统一处理响应数据格式* 2. 隐藏loading状态* 3. 处理业务特定的状态码*/// 直接返回response.data，简化后续处理return response.data;// 或者根据业务状态码进一步处理if (response.data.code === 200) {return response.data.data;} else {// 业务逻辑错误return Promise.reject(response.data.message);}},function (error) {/*** 对响应错误做点什么* 超出2xx范围的状态码都会触发这个函数* 可以在这里：* 1. 统一处理错误* 2. 根据状态码跳转页面* 3. 显示错误提示*/// 错误对象结构说明if (error.response) {// 请求已发出，服务器返回了错误状态码const { status, data } = error.response;switch (status) {case 401:// 未授权，跳转到登录页window.location.href = '/login';break;case 403:// 禁止访问，显示权限不足提示showToast('权限不足，请联系管理员');break;case 404:// 资源不存在showToast('请求的资源不存在');break;case 500:// 服务器错误showToast('服务器内部错误，请稍后再试');break;default:// 其他错误showToast(`请求错误: ${status}`);}// 可以在这里记录错误日志logError(error);} else if (error.request) {// 请求已发出但没有收到响应console.error('无响应:', error.request);showToast('网络连接异常，请检查网络');} else {// 设置请求时发生了错误console.error('请求配置错误:', error.message);showToast('请求配置错误');}// 继续抛出错误，让调用者可以处理return Promise.reject(error);}
);

API设计模式与RESTful最佳实践

RESTful API设计原则详解

1. 资源导向设计：

使用名词而非动词表示资源（如/users而不是/getUsers）
资源使用复数形式（如/articles而不是/article）
层级关系表达：/users/123/posts表示用户123的所有帖子

2. HTTP方法语义：

方法	语义	幂等性	安全性	请求体	典型状态码	适用场景
GET	获取资源	✔️ 是	✔️ 是	❌ 无	200 OK 404 Not Found	查询数据、获取资源详情
POST	创建资源	❌ 否	❌ 否	✔️ 有	201 Created 400 Bad Request	创建新资源、提交表单
PUT	替换/完整更新资源	✔️ 是	❌ 否	✔️ 有	200 OK 204 No Content	全量更新（需传完整字段）
PATCH	部分更新资源	❌ 否	❌ 否	✔️ 有	200 OK 422 Unprocessable Entity	增量更新（只需传修改字段）
DELETE	删除资源	✔️ 是	❌ 否	❌ 无	204 No Content 404 Not Found	删除指定资源

3. 状态码使用指南：

// 2xx 成功
200 OK - 常规成功响应
201 Created - 资源创建成功
204 No Content - 成功但无返回内容// 4xx 客户端错误
400 Bad Request - 请求格式错误
401 Unauthorized - 需要认证
403 Forbidden - 无权限访问
404 Not Found - 资源不存在// 5xx 服务器错误
500 Internal Server Error - 服务器内部错误
503 Service Unavailable - 服务不可用

完整API封装示例

// src/api/auth.js - 认证相关APIimport axios from './axiosInstance';export default {/*** 用户登录* @param {Object} credentials - 登录凭据* @param {string} credentials.username - 用户名* @param {string} credentials.password - 密码* @returns {Promise} 包含用户数据的Promise*/login(credentials) {return axios.post('/auth/login', credentials).then(response => {// 登录成功处理const { token, user } = response.data;// 存储token到本地存储localStorage.setItem('authToken', token);// 返回用户数据return user;});},/*** 用户注销* @returns {Promise} 空Promise*/logout() {// 清除本地tokenlocalStorage.removeItem('authToken');// 调用服务器注销接口return axios.post('/auth/logout');},/*** 获取当前用户信息* @returns {Promise} 包含用户信息的Promise*/getCurrentUser() {return axios.get('/auth/me').then(response => response.data);}
};// src/api/users.js - 用户管理APIimport axios from './axiosInstance';export default {/*** 获取用户列表* @param {Object} [params] - 查询参数* @param {number} [params.page=1] - 页码* @param {number} [params.limit=10] - 每页数量* @returns {Promise} 包含用户列表和分页信息的Promise*/getUsers(params = { page: 1, limit: 10 }) {return axios.get('/users', { params }).then(response => ({users: response.data.items,pagination: response.data.pagination}));},/*** 创建新用户* @param {Object} userData - 用户数据* @returns {Promise} 包含新用户信息的Promise*/createUser(userData) {return axios.post('/users', userData).then(response => response.data);},/*** 更新用户信息* @param {number} id - 用户ID* @param {Object} updates - 更新字段* @param {boolean} [partial=false] - 是否部分更新* @returns {Promise} 包含更新后用户信息的Promise*/updateUser(id, updates, partial = false) {const method = partial ? 'patch' : 'put';return axios[method](`/users/${id}`, updates).then(response => response.data);},/*** 删除用户* @param {number} id - 用户ID* @returns {Promise} 空Promise*/deleteUser(id) {return axios.delete(`/users/${id}`);}
};

在Vue组件中使用API的示例

// src/components/UserList.vueimport userAPI from '@/api/users';
import authAPI from '@/api/auth';export default {data() {return {users: [],currentUser: null,loading: false,pagination: {page: 1,limit: 10,total: 0}};},async created() {// 组件创建时获取当前用户和用户列表await this.fetchCurrentUser();await this.fetchUsers();},methods: {// 获取当前登录用户async fetchCurrentUser() {try {this.currentUser = await authAPI.getCurrentUser();} catch (error) {console.error('获取用户信息失败:', error);this.$router.push('/login');}},// 获取用户列表async fetchUsers() {this.loading = true;try {const { users, pagination } = await userAPI.getUsers({page: this.pagination.page,limit: this.pagination.limit});this.users = users;this.pagination = {...this.pagination,total: pagination.total};} catch (error) {console.error('获取用户列表失败:', error);this.$message.error('加载用户列表失败，请重试');} finally {this.loading = false;}},// 删除用户async handleDelete(userId) {try {await this.$confirm('确定要删除这个用户吗？', '提示', {type: 'warning'});await userAPI.deleteUser(userId);// 删除成功后刷新列表this.fetchUsers();this.$message.success('删除用户成功');} catch (error) {if (error !== 'cancel') {console.error('删除用户失败:', error);this.$message.error('删除用户失败');}}},// 切换页码handlePageChange(page) {this.pagination.page = page;this.fetchUsers();}}
};

总结：Axios最佳实践

配置管理：
- 使用axios.create()创建不同用途的实例
- 将基础URL、超时时间等配置集中管理
拦截器使用：
- 请求拦截器处理认证、公共参数
- 响应拦截器统一处理错误和返回数据
API封装：
- 按功能模块组织API
- 为每个方法添加清晰的JSDoc注释
- 统一返回Promise便于调用
错误处理：
- 区分网络错误、服务器错误和业务错误
- 在拦截器和具体调用处分层处理
RESTful设计：
- 遵循资源导向原则
- 正确使用HTTP方法和状态码
- 保持接口风格一致

前端笔记-Axios

Axios学习目标 Axios与API交互1、Axios配置与使用2、请求/响应拦截器3、API设计模式（了解RESTful风格即可） 学习参考：起步 | Axios中文文档 | Axios中文网什么是Axios Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专…...

编程日记 2025/7/28 7:54:26

【EasyPan】MySQL主键与索引核心作用解析

【EasyPan】项目常见问题解答（自用&持续更新中…）汇总版 MySQL主键与索引核心作用解析一、主键（PRIMARY KEY）核心作用 1. 数据唯一标识 -- 创建表时定义主键 CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,use…...

编程日记 2025/7/26 11:58:12

基于RK3588+FPGA+AI YOLO的无人船目标检测系统（一）概述

无人船在海洋监测、资源勘测、海上安全和科学研究等领域扮演着关键角色， 提升了海上任务的执行效率和安全性。在这一过程中，环境感知技术和目标检测技术相辅相成，共同构建了系统的核心功能。随着人工智能行业的迅速发展，各种…...

编程日记 2025/7/27 5:31:13

无人船 | 图解基于PID控制的路径跟踪算法(以全驱动无人艇WAMV为例)

目录 1 PID控制基本原理2 基于全驱动运动学的PID控制3 跟踪效果分析 1 PID控制基本原理 PID控制是一种常用的经典控制算法，其应用背景广泛，例如工业自动化控制：温度控制、压力控制、流量控制、液位控制等过程控制系统多采用PID闭环&#x…...

编程日记 2025/7/28 7:52:52

为什么RPN经过的候选框处理后，要使用rcnn来进行候选框的分类和回归操作?

一句大白话总结：RPN是广撒网捕鱼，RCNN是细化鱼的分类和具体尺寸在目标检测任务中，RPN（区域提议网络） 生成的候选框需要经过 RCNN（如 Fast R-CNN、Faster R-CNN） 进行分类和回归，这…...

编程日记 2025/7/28 7:21:15

代码实战保险花销预测

文章目录摘要项目地址实战代码（初级版）实战代码（进阶版） 摘要本文介绍了一个完整的机器学习流程项目，重点涵盖了多元线性回归的建模与评估方法。项目详细讲解了特征工程中的多项实用技巧，包括&#xff1…...

编程日记 2025/7/27 1:33:11

8.1 线性变换的思想

一、线性变换的概念当一个矩阵 A A A 乘一个向量 v \boldsymbol v v 时，它将 v \boldsymbol v v “变换” 成另一个向量 A v A\boldsymbol v Av. 输入 v \boldsymbol v v，输出 T ( v ) A v T(\boldsymbol v)A\boldsymbol v T(v)Av. 变换 T T T…...

编程日记 2025/7/27 5:31:03

PythonWeb

参考：如何安装 Django |Django 文档 |姜戈一、框架搭建 1、安装Django框架 pip3 install django 2、查看是否安装成功 pip3 show django 这样显示就是成功了 3、初始化项目你想在哪个路径就 cd到哪个路径下输入一下命令就可以 django-admin startproject my…...

编程日记 2025/7/27 4:19:52

【大模型ChatGPT +DeepSeeK+python】最新AI赋能Python长时序植被遥感动态分析、物候提取、时空变异归因及RSEI生态评估

在遥感技术与人工智能深度融合的2025年，AI大模型正重塑长时序植被遥感数据分析范式。从Landsat/Sentinel卫星数据的智能化去云处理，到MODIS植被产品的AI辅助质量控制，以ChatGPT 、DeepSeeK为代表的大模型技术已成为提升遥感数据处理效率与精度…...

编程日记 2025/7/27 7:10:20

精益数据分析（11/126）：辨别虚荣指标，挖掘数据真价值

精益数据分析（11/126）：辨别虚荣指标，挖掘数据真价值大家好！在创业和数据分析的学习道路上，我一直希望能和大家携手前行、共同进步。今天，咱们接着深入研读《精益数据分析》，这次聚…...

编程日记 2025/7/28 7:49:15

Time to event ：Kaplan-Meier曲线、Log Rank检验与Shiny R

代码： # 创建数据框 data_a <- data.frame( usubjid = c(1- 1, 1- 2, 1- 3, 1- 4, 1- 5, 1- 6, 1- 7, 1- 8, 1- 9, 1-10, 2- 1, 2- 2, 2- 3, 2- 4, 2- 5, 2- 6, 2- 7, 2- 8, 2- 9, 2-10), cnsr = c(0,1,0,1,0,1,0,0,0,1,…...

编程日记 2025/7/28 7:50:57

线上救急-AWS限频

线上救急-AWS限频问题在一个天气炎热的下午，我正喝着可口可乐，悠闲地看着Cursor生成代码，忽然各大群聊中出现了加急➕全体的消息，当时就心里一咯噔，点开一看，果然，线上服务出问题&#xff0…...

编程日记 2025/7/28 7:51:59

JavaWeb学习打卡-Day1-分层解耦、Spring IOC、DI

三层架构 Controller（控制层）：接收前端发送的请求，对请求进行处理，并响应数据。Service（业务逻辑层）：处理具体的业务逻辑。DAO（数据访问层/持久层）&#xff…...

编程日记 2025/7/27 5:30:57

【LeetCode】1.两数之和

目录 📚 题目概要🧰 前置知识🚧 问题难点🔑 关键思路步骤拆解 💻 代码实现代码注释 📊 复杂度分析❗ 易错点与测试案例易错点测试案例 🔗 总结与扩展模式归纳核心思维 📚 题目概要在…...

编程日记 2025/7/27 5:30:55

mongodb 存储数据的具体实现方式

MongoDB 存储数据的具体实现方式涉及数据模型、存储引擎、分片机制等多个核心模块，以下是其实现原理的详细分析： 一、数据模型 1.1 文档型数据模型‌ MongoDB 使用 BSON格式存储数据，支持键值对、嵌套文档和数组等复杂结构。 1.2 无模式设…...

编程日记 2025/7/28 7:50:02

【手机】vivo手机应用声音分离方案

文章目录前言方案前言尝试分离vivo手机音乐与其他应用的声音方案最佳方案：网易云音乐设置内关闭音量均衡上传不同的白噪音，成功 goodlock，主要适用于三星手机，vivo不一定适用 app volume control ，可行...

编程日记 2025/7/27 5:30:53

多级缓存架构，让系统更快的跑起来！

大家好，今天，咱们来聊聊一个超级实用的话题——多级缓存架构。别一听“架构”俩字就头大，我保证，这篇文章既有趣又易懂，让你秒变缓存小达人！一、多级缓存，为啥这么火？在互联网的汪洋大海里，数据就是咱们的宝藏。但每次从数据库里捞数据，都跟挖宝藏似的，慢得很！…...

编程日记 2025/7/27 5:30:51

Vibracostic EDI 需求分析

Vibracostic 是德国Freudenberg集团旗下全球领先的减振与噪音控制技术公司，专注于为汽车及工业领域提供高效振动管理和隔音解决方案，客户涵盖宝马、奔驰、特斯拉等主流车企。 Vibracostic EDI 需求分析供应商接收Vibracostic发来的DELFOR交付预测报文…...

编程日记 2025/7/28 7:50:57

基于超启发鲸鱼优化算法的混合神经网络多输入单输出回归预测模型 HHWOA-CNN-LSTM-Attention

基于超启发鲸鱼优化算法的混合神经网络多输入单输出回归预测模型 HHWOA-CNN-LSTM-Attention 随着人工智能技术的飞速发展，回归预测任务在很多领域得到了广泛的应用。尤其在金融、气象、医疗等领域，精确的回归预测模型能够为决策者提供宝贵的参考信息。为…...

编程日记 2025/7/28 7:48:22

Linux卸载删除gitlab

1、停止 gitlab服务 gitlab-ctl stop 2、卸载 gitlab（社区版） rpm -e gitlab-ce 或者 yum remove gitlab-ce 3、查看 gitlab 进程 ps aux | grep gitlab 4、杀掉gitlab service进程，该进程与runsvdir相关（带有好多..........…...

编程日记 2025/7/27 5:30:46

高品质性价比之王-特伦斯便携钢琴V10

在电子钢琴选购过程中，预算与品质的平衡常常让消费者感到纠结。但特伦斯 V10 88 键可折叠电子钢琴的出现，为广大音乐爱好者带来了惊喜，亲民的价格实现了高品质的音乐体验。先看便携性，同价位的电子钢琴大多体型庞大&#xff0c…...

编程日记 2025/7/27 7:10:18

解决方案评测｜告别复杂配置！基于阿里云云原生应用开发平台CAP快速部署Bolt.diy

写在前面的话突然看到上线了关于Bolt.new开源版本的解决方案测评，其实心里还是挺高兴的，我最早接触到Bolt.new的时候应该是在去年的11月份，当时是撰写了一篇名为一种基于通义千问prompt辅助Qwen2.5-coder-32bBolt.newv0Cursor的无代码对话…...

编程日记 2025/7/27 7:10:16

python测试框架之pytest

Pytest pytest 基础使用pytest安装pytest的测试case收集规则pytest - fixture的使用skip and xfailpytest - 属性标记测试函数pytest - 参数化测试pytest - mock/monkeypatch的使用pytest - 运行方式pytest - 运行方式/命令pytest - 处理测试失败的case pytest - 测试输出捕获 …...

编程日记 2025/7/27 7:10:13

uni-app 开发企业级小程序课程

课程大小：7.7G 课程下载：https://download.csdn.net/download/m0_66047725/90616393 更多资源下载：关注我备注：缺少两个视频5-14 tabs组件进行基本的数据展示和搜索历史处理searchData的删除操作 1-1导学.mp4 2-10小程序内…...

编程日记 2025/7/28 7:53:39

深度图可视化

import cv2# 1.读取一张深度图 depth_img cv2.imread("Dataset_depth/images/train/1112_0-rgb.png", cv2.IMREAD_UNCHANGED) print(depth_img.shape) cv2.imshow("depth", depth_img) # (960, 1280) print(depth_img)# 读取一张rgb的图片做对比 input_p…...

编程日记 2025/7/27 7:10:09

Java实现希尔排序算法

1. 希尔排序原理图解希尔排序是插入排序的一种高效改进版本，通过比较和交换间隔较远的元素来减少数据的移动次数。以下是希尔排序的步骤： 1. 选择初始间隔：通常选择数组长度的一半作为初始间隔。 2. 分组和插入排序：将数组分成若…...

编程日记 2025/7/27 7:10:07

Apache RocketMQ 荣获 2024 开源创新榜单“年度开源项目

持续深耕 RocketMQ 领域，更多实战避坑指南、源码解析、最佳实践，已整理至「RocketMQ 中文社区」 🔍 近日，以“新纪天工、开物焕彩——致敬开源的力量”为活动主题的“重大科技成就发布会（首场）”在国家科技…...

编程日记 2025/7/27 7:10:05

2025年智慧交通与能源技术国际会议（ITNET 2025）

The 2nd International Conference on Intelligent Transportation and Energy Technology 一、大会信息会议简称：ITNET 2025 大会时间：(以官网为准） 大会地点：中国南京收录检索：提交Ei Compendex,CPCI,CNKI,Google…...

编程日记 2025/7/27 7:10:03

Spring Boot 集成 Redis 实战总结

Spring Boot 集成 Redis 实战总结一、基础集成与配置依赖引入 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>默认使用 Lettuce 作为连接池&#xf…...

编程日记 2025/7/26 13:45:29

ubuntu18.04启动不了修复

参考: 虚拟机里的Ubuntu18.4启动时进入到grub rescue救援模式（无法正常进入到系统），ls查看后只有一个硬盘和分区，且无法找到/boot/grub文件【已解决】_ubuntu grub rescue-CSDN博客本人fdisk错误使用,导致了grub启动不了第一步…...

编程日记 2025/7/27 7:09:59

人类行为的原动力是自我保存-来自ChatGPT

自我保存（Self-Preservation）确实可以说是人类行为最原始、最底层的驱动力。简单来说： 无论我们做什么，表面看动机五花八门，实际上归根到底都绕不开活下去、保护自己。 💡 从不同层面理解这个观点&#…...

编程日记 2025/7/27 7:09:57

退役淘汰的硬盘数据安全处置不可忽视-硬盘数据抹除清零

在信息化时代，硬盘作为数据存储的核心载体，其退役处理直接关系到信息安全，淘汰硬盘中往往留存大量敏感信息，若处置不当，极易引发数据泄露风险，造成难以挽回的损失。因此，建立规范的硬盘数据销毁…...

编程日记 2025/7/27 7:09:55

创建 Node.js Playwright 项目：从零开始搭建自动化测试环境

一、环境准备在开始创建 Playwright 项目之前，确保你的电脑上已经安装了以下工具： Node.js：Playwright 依赖于 Node.js 环境，确保你已经安装了最新版本的 Node.js。可以通过以下命令检查是否安装成功： node -v npm -…...

编程日记 2025/7/27 7:09:53

1+X： Python程序开发职业技能等级要求（初级）练习资料分享

以下将根据表1中Python程序开发职业技能等级要求（初级）的不同工作领域和任务，分别给出练习代码或操作步骤。 Python基础编程开发环境搭建操作步骤：以Windows系统为例，首先从Python官方网站（https://www…...

编程日记 2025/7/27 7:09:50

【漏洞复现】CVE-2024-38856（ApacheOfbiz RCE）

【漏洞复现】CVE-2024-38856（ApacheOfbiz RCE） 1. 漏洞描述 Apache OFBiz 是一个开源的企业资源规划（ERP）系统。它提供了一套企业应用程序，用于集成和自动化企业的许多业务流程。这个漏洞是由于对 CVE-2023-51467 的…...

编程日记 2025/7/27 7:09:48

【React】获取元素距离页面顶部的距离

文章目录代码实现代码实现 import { useEffect, useRef, useState } from react;const DynamicPositionTracker () > {const [distance, setDistance] useState(0);const divRef useRef(null);useEffect(() > {const targetDiv divRef.current;if (!targetDiv) re…...

编程日记 2025/7/27 7:09:46

【Markdown】【HTML】在Markdown中实现康奈尔笔记模式（右侧留白）

文章目录 HTML表格——康奈尔笔记法标签解释<table> 相关标签文本内容标签注释标签最低限度应了解的HTML标签 (Essential HTML Tags)结构标签 (Structure Tags)文本标签 (Text Tags)列表标签 (List Tags)链接和图片 (Links and Images)格式化 (Formatting)表格 (Tables)…...

编程日记 2025/7/27 7:09:44

Go语言中的Context

目录 Go语言中的Context 1. Context的基本概念 1.1 Context的核心作用 2. Context的基本用法 2.1 创建Context 背景Context 可取消的Context 带有超时的Context 2.2 在Goroutine间传递Context 2.3 获取Context的值为Context添加自定义数据访问Context中的值 3. C…...

编程日记 2025/7/27 7:09:42

基于Python的图片/签名转CAD小工具开发方案

基于Python的图片/签名转CAD工具开发方案一、项目背景传统设计流程中，设计师常常需要将手写签名或扫描图纸转换为CAD格式。本文介绍如何利用Python快速开发图像矢量化工具，实现： 📷 图像自动预处理✏️ 轮廓精确提取⚙️ 参数…...

编程日记 2025/7/27 7:09:40

uniapp微信小程序：WIFI设备配网之TCP/UDP开发AP配网

一、AP配网技术原理 1.1 配网模式选择 AP配网（SoftAP模式）是IoT设备配网成功率最高的方案之一 1、其核心原理： 设备端：启动AP模式（如SSID格式YC3000_XXXX，默认IP192.168.4.1）手…...

编程日记 2025/7/27 7:09:38

docker部署seata

seata版本：2.0.0 使用eureka作为注册中心，mysql作为存储拉取镜像 docker pull seataio/seata-server:2.0.0mysql建表语句可从 github下载sql脚本 -- seata_server.branch_table definition CREATE TABLE branch_table (branch_id bigint NOT NULL,…...

编程日记 2025/7/27 7:09:36

JVM 内存分布详解

/*** 示例类，展示各种成员在JVM中的存储位置*/ public class MemoryDistributionExample {// 1. 实例变量（普通成员变量） - 存储在堆内存的对象实例中private int instanceVar 10;private String instanceRef "Instance Reference&quo…...

编程日记 2025/7/27 7:09:34

AR行业应用案例与NXP架构的结合

1. 工业巡检AR头盔场景示例：宁德核电基地使用AR智能头盔进行设备巡检，通过实时数据叠加和远程指导，将工作效率提升35%。头盔需处理传感器数据、图像渲染和低延迟通信1。 NXP架构支持： 协处理器角色：NXP i.MX RT系列M…...

编程日记 2025/7/28 7:20:37

OpenCV 图形API（49）颜色空间转换-----将 NV12 格式的图像数据转换为 BGR 颜色空间函数NV12toBGR()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述将图像从NV12（YUV420p）颜色空间转换为BGR。该函数将输入图像从NV12颜色空间转换为RGB。Y、U和V通道值的常规范围是0到25…...

编程日记 2025/7/27 7:09:29

Transformer中Post-Norm和Pre-Norm如何选择？

pre-norm: x n 1 x n f ( n o r m ( x n ) ) x_{n1}x_nf(norm(x_n)) xn1xnf(norm(xn)) 其中第二项的方差由于有 norm 是不随层数变化的，于是 x 的方差会在主干上随层数积累。到了深层以后，单层对主干的影响可以视为小量，而不同层的 …...

编程日记 2025/7/27 7:09:27

jvm-描述符与特征签名的区别

在Java虚拟机（JVM）中，存储的是方法签名，而不是仅仅方法描述符。方法签名包含了方法的参数类型和返回值类型的信息，而方法描述符通常指的是仅包含参数类型的那部分信息。为了更清晰地理解这两者的区别以及它们如何在JVM…...

编程日记 2025/7/27 7:09:25

JVM有什么调优参数？

-Xms：堆最小值 -Xmx：堆最大值。-Xms与-Xmx 的单位默认字节都是以k、m做单位的。通常这两个配置参数相等，避免每次空间不足，动态扩容带来的影响。 -Xmn：新生代大小 -Xss：每个线程池的栈大小。在jdk5以上…...

编程日记 2025/7/27 7:09:23

QT：Qt5 串口模块 (QSerialPort) 在 VS2015 中正确关闭串口避免被占用

以下是使用 Qt5 串口模块 (QSerialPort) 在 VS2015 中正确关闭串口避免被占用的完整示例代码： #include <QSerialPort> #include <QDebug>// 创建全局或类成员变量（推荐使用智能指针） QSerialPort *serialPort nullptr; // 打开…...

编程日记 2025/7/27 7:09:21

14.QT-多元素控件|QListWidget|QTableWidget|QTreeWidget(C++)

Qt中提供的多元素控件有: QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeView 以QTableWidget和QTableView为例. QTableView是基于MVC设计的控件.QTableView⾃⾝不持有数据.使⽤QTableView的时候需要⽤⼾创建⼀个Model对象(⽐如 QStandardModel ),并且把Model…...

编程日记 2025/7/27 7:09:19

单页面应用的特点,什么是路由,VueRouter的下载,安装和使用,路由的封装抽离,声明式导航的介绍和使用

文章目录一.什么是单页面应用?二.什么是路由?生活中的路由和Vue中的路由三.VueRouter(重点)0.引出1.介绍2.下载与使用(5个基本步骤2个核心步骤)2.1 五个基本步骤2.2 两个核心步骤一.什么是单页面应用? 定义和特点:所有功能都在一个HTML中实现示例:网易云音乐多页面应…...

编程日记 2025/7/27 7:09:17