当前位置: 首页 > article >正文

前端学习10—Ajax

1 AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML

通过 AJAX 可以在浏览器中向服务器发送异步请求,最大优势为:无刷新获取数据

AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式

优点:

  1. 可以无需刷新页面而与服务器进行通信
  2. 允许根据用户事件(鼠标、键盘、文档等事件)来更新部分页面内容

缺点:

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(同源)
  3. SEO(搜索引擎优化)不友好

1.1 XML 简介

XML(可扩展标记语言),被设计用来传输和存储数据,XML 和 HTML 类似,不同的是 HTML 中都是预定义标签,而 XML 中没有预定义标签,全都是自定义标签,用来表示一些数据

比如有个学生数据:name = "孙悟空"; age = 18; gender = "男";
用 XML 表示:<student><name>孙悟空</name><age>18</age><gender></gender></student>

但现在已经被 JSON 取代了

JSON 表示:{"name": "孙悟空","age": 18,"gender": "男"}

1.2 HTTP 协议请求报文和响应文本结构

HTTP(超文本传输协议),协议详细规定了浏览器与万维网服务器之间相互通信的规则约定

请求报文:

行	    POST  BV1WC4y1b78y?spm_id_from=3  HTTP/1.1
头       Host:atguigu.comCookie:name=guiguContent-type:application/x-www-form-urlencodedUser-Agent:chrome 83
空行
体		username=admin&password=admin(get请求时,请求体为空;post请求时,请求体可以为空)

响应报文:

行	    HTTP/1.1  200  OK
头       Content-type:text/html;charset=utf-8Content-length: 2048Content-encoding: gzip
空行
体		<html><head></head><body><h1>尚硅谷</h1></body></html>

Chrome 网络控制台查看通信报文

在这里插入图片描述

1.3 Node.js 安装

去官网找相应版本下载安装即可

检验是否安装成功:命令行中输入 node -v

出现 node 安装版本即可

1.4 express 框架

  1. 安装 express 包

    npm init --yes

    npm i express

  2. express 的基本使用

// 1. 引入 express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request:对请求报文的封装
// response:对响应报文的封装
app.get('/', (request, response) => {// 设置响应response.send('Hello Express');
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务器已经启动,8000 端口监听中...');
})

终端输入 node espress基本使用.js 运行

浏览器 http://127.0.0.1:8000/ 看到运行结果:
在这里插入图片描述

1.5 nodemon 自动重启工具安装

终端输入:

npm install -g nodemon

终端运行

npx nodemon server.js

2 案例准备

get.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#responseMsg {width: 200px;height: 200px;border: 2px solid peachpuff;}</style>
</head><body><button>点击发送请求</button><div id="responseMsg"></div>
</body></html>

server.js

// 1. 引入 express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request:对请求报文的封装
// response:对响应报文的封装
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应response.send('Hello Express');
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务器已经启动,8000 端口监听中...');
})

2.1 请求的基本操作

get.html

<script>// 获取元素const btn = document.querySelectorAll('button')[0];const responseMsg = document.querySelector('#responseMsg');// 绑定事件btn.addEventListener('click', function() {// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置请求方法和 URLxhr.open('GET', 'http://127.0.0.1:8000/server');// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回来的结果xhr.onreadystatechange = function() {// 判断(服务器返回了所有的结果)if(xhr.readyState === 4) {// 判断响应状态码// 2xx:成功if(xhr.status >= 200 && xhr.status < 300) {console.log(xhr);responseMsg.textContent = xhr.response;}}}})
</script>
  • onreadystatechange:监听函数,实例的属性发生变化时,就会执行这个函数
  • readyState:实例对象的当前状态,通信过程中,每当实例对象发生状态变化,他的属性值就会一直改变。只读且只包含以下五种状态
    • 0:XMLHttpRequest 实例已经生成,但是实例的方法还没有被调用
    • 1:方法已经调用,但是实例的方法还没有调用,仍然可以使用实例的方法,设定 HTTP 请求的头信息
    • 2:实例的方法已经调用,并且服务器返回的头信息和状态码已经收到
    • 3:正在接收服务器传来的数据体(body 部分)
    • 4:服务器返回的数据已经完全接收,或者本次接收已经失败
  • status:服务器回应的 HTTP 状态码
    • 200:ok,访问正常
    • 301:永久移动
    • 302:暂时移动
    • 304:未修改
    • 307:暂时重定向
    • 401:未授权
    • 403:禁止访问
    • 404:未发现指定网址
    • 500:服务器发生错误
  • response:服务器返回的数据体(HTTP 回应的 body 部分)

2.2 设置请求参数

// 2. 初始化 设置请求方法和 URL
xhr.open('GET', 'http://127.0.0.1:8000/server?username=andy&password=123');

2.3 发送 Post 请求

html 中发送 POST 请求

// 2. 初始化 设置请求方法和 URL
xhr.open('POST', 'http://127.0.0.1:8000/server?');

server.js 增加 post 请求响应

// 3. 创建路由规则
// request:对请求报文的封装
// response:对响应报文的封装
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应response.send('Hello Express');
});
app.post('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send('Hello Ajax Post');
})
  • server.js 文件发生改变的时候,需要重新开启服务

2.4 Post 设置请求体

// 3. 发送
// xhr.send('username=andy&password=123');
xhr.send('username:andy&password:123');

2.5 设置请求头信息

html 中设置请求头

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', 'lxlu');

server.js 中设置响应体

// 响应头
response.setHeader('Access-Control-Allow-Headers', '*');
  • setRequestHeader():设置浏览器发送的 HTTP 请求的头信息,如果该方法多次调用,设定同一个字段,每次调用的值都会被合并成一个单一的值发送

2.6 服务器响应 JSON 数据

server.js

// 可以接收任意类型的请求
app.all('/json-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 响应头response.setHeader('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name: 'andy',age: 18};// 对对象进行字符串转换let str = JSON.stringify(data);// 设置响应体response.send(str);
})

对接收到的 JSON 数据进行手动转换 JSON.parse()

// 发送请求
const xhr = new XMLHttpRequest();
// 初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
// 发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);// responseMsg.innerHTML = xhr.response;// 手动对数据转换let data = JSON.parse(xhr.response);responseMsg.innerHTML = data.name;}}
}

可以设置响应体数据类型,从而避免手动转换

在这里插入图片描述

2.7 IE 缓存问题

IE 缓存问题:IE 浏览器会将 ajax 请求的返回结果作为缓存,如果再遇到相同的 ajax 请求,就直接在缓存中取结果,这样就得不到最新的服务器响应结果(chrom 浏览器可以实时更新)

解决方法:只要每次请求的 url 不一样,IE 就会认为不是同一个请求,就可以重新请求服务器(在 url 后面加上一个时间戳参数)

xhr.open('GET', 'http://127.0.0.1:8000/ie?t=' + Date.now());

在这里插入图片描述

2.8 请求超时于网络异常处理

模拟给服务器发送请求超时的情况,3s 后返回响应结果

app.get('/delay', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应setTimeout(() => {response.send('网络请求超时');}, 3000);
});

请求超时与网络异常的处理

// 超时设置 2s
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function() {alert('网络异常,请稍后重试');
}
// 网络异常回调
xhr.onerror = function() {alert('你的网络似乎出了点问题')
}
  • timeout:多少毫秒后,如果请求仍然没有得到结果,就会自动终止
  • ontimeout:监听函数,如果发生 timeout 事件,就会执行这个监听函数(timeout 的监听函数)
  • onerror:请求失败的监听函数

2.9 取消请求

取消请求发生在已经发送了请求,但是还没有返回请求结果,这时可以设置取消请求:

<body><button class="send">发送请求</button><button class="cancel">取消请求</button>
</body>
<script>const send = document.querySelector('.send');const cancel = document.querySelector('.cancel');let xhr = null;		// 注意这里是用 let,不是 const(const 的值是不能改的)send.addEventListener('click', function() {xhr = new XMLHttpRequest();xhr.open('GET', 'http://127.0.0.1:8000/delay');xhr.send();})cancel.addEventListener('click', function() {xhr.abort();})
</script>
  • abort():终止已经发出的 HTTP 请求,调用这个方法后,readyState 属性变为 4,status 属性变为 0

2.10 重复请求问题

设置一个标识变量 isSending,当点击发送按钮时,判断 isSending 的布尔值,如果为 true,表示正在发送,需要取消请求,创建新的请求

let xhr = null;
// 标识变量
let isSending = false;send.addEventListener('click', function() {if(isSending) {     // 如果正在发送,就取消请求,创建一个新的请求xhr.abort();}xhr = new XMLHttpRequest();isSending = true;   // 修改标识变量的值xhr.open('GET', 'http://127.0.0.1:8000/delay');xhr.send();xhr.onreadystatechange = function() {if(xhr.readyState === 4) {// 修改标识变量isSending = false;}}
})
cancel.addEventListener('click', function() {xhr.abort();
})

3 jQuery 发送 AJAX 请求

引入 jQuery:(BootCDN --> jquery --> 复制 <script> 标签)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

get / post 请求: . g e t ( u r l , [ d a t a ] , [ c a l l b a c k ] , [ t y p e ] ) 、 .get(url, [data], [callback], [type])、 .get(url,[data],[callback],[type]).post(url, [data], [callback], [type])

  • url:请求的 URL 地址
  • data:请求携带的参数
  • callback:载入成功时回调函数
  • type:设置返回内容格式,xml、html、script、json、text、_default
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><title>Document</title>
</head>
<body><h2>jQuery发送AJAX请求</h2><button>GET请求</button><button>POST请求</button><button>通用性方法ajax</button>
</body>
<script>// 发送GET请求$('button').eq(0).click(function() {$.get('http://127.0.0.1:8000/jquery-server', {id: 3, name: 'andy'}, function(data) {console.log(data);}, 'json');})// 发送POST请求$('button').eq(1).click(function() {$.post('http://127.0.0.1:8000/jquery-server', {id: 3, name: 'andy'}, function(data) {console.log(data);}, 'json');})// 利用AJAX发送$('button').eq(2).click(function(){$.ajax({// urlurl: 'http://127.0.0.1:8000/jquery-server',// 参数data: {id: 3, name: 'andy'},// 请求类型type: 'GET',// 响应体结果dataType: 'json',// 成功的回调success: function(data) {console.log(data);},// 超时时间timeout: 2000,// 失败的回调error: function(){console.log('出错啦!!')},// 头信息headers: {a: 121}})})
</script>
</html>

server.js

// jQuery 服务
app.all('/jquery-server', (request, response) => {response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// response.send('Hello jQuery');let data = {id: 3, name: 'andy'};response.send(JSON.stringify(data));
});

4 Axios 发送 AJAX 请求

引入 axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get(url[, config])

axios.post(url[, data[, config]])

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><title>Document</title>
</head>
<body><button>GET请求</button><button>POST请求</button><button>AJAX请求</button>
</body>
<script>const btns = document.querySelectorAll('button');// 配置 baseUrlaxios.defaults.baseURL = 'http://127.0.0.1:8000';btns[0].onclick = function() {// GET 请求axios.get('/axios-server', {// url 参数params: {id: 12,nickName: 'candy'},// 请求头信息headers: {name: 'lxlu',age: 18}}).then((value) => {console.log(value);});}btns[1].addEventListener('click', function() {// POST 请求axios.post('/axios-server',{username: 'admin',password: 123}, {params: {id: 121,nickName: 'kun'},headers: {height: 175,weight: 60} })})btns[2].onclick = function() {// axios函数发送AJAX请求axios({method: 'POST',url: '/axios-server',params: {vip: 88,level: 15},headers: {a: 100,b: 200},data: {username: 'admin',password: 'admin'}}).then( response => {// 响应状态码console.log(response.status);// 响应状态字符串console.log(response.statusText);// 响应头信息console.log(response.headers);// 响应体console.log(response.data);})}
</script>
</html>

server.js

// axios 服务
app.all('/axios-server', (request, response) => {response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// response.send('Hello jQuery');let data = {id: 3, name: 'andy'};response.send(JSON.stringify(data));
});

5 fetch 发送 AJAX 请求

fetch无需安装,是window的内置方法;fetch对象属于全局对象,可以直接调用,它的返回结果是一个 promise 对象,但是请求的数据在第二个 .then 中才能获取,error可以使用catch统一进行处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>AJAX请求</button>
</body>
<script>const btn = document.querySelector('button');btn.onclick = function(){fetch('http://127.0.0.1:8000/fetch-server', {// 请求方法method: 'POST',// 请求头headers: {name: 'lxlu'},// 请求体body: 'username=admin&password=123'}).then(response => {// return response.text();return response.json();}).then(response => {console.log(response);});}
</script>
</html>

server.js

// fetch 服务
app.all('/fetch-server', (request, response) => {response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');let data = {id: 3, name: 'andy'};response.send(JSON.stringify(data));
});

6 同源策略

同源策略是一种约定,它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互,是用于隔离潜在恶意文件的关键安全机制。

同源:协议、域名、端口号必须相同

违背同源策略就是跨域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>Hello</h1><button>点击获取用户数据</button>
</body>
<script>const btn = document.querySelector('button');btn.onclick = function() {const xhr = new XMLHttpRequest();// 因为满足同源策略,所以 url 可以简写xhr.open('GET', '/data');xhr.send();xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);}}}}
</script>
</html>
const express = require('express');const app = express();app.get('/home', (request, response) => {// 响应一个页面response.sendFile(__dirname + '/home.html');
});app.get('/data', (request,response) => {response.send('用户数据');
})app.listen(9000, ()=>{console.log('服务已经启动');
})

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.1 jsonp

6.2 CORS

通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行

相关文章:

前端学习10—Ajax

1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML&#xff0c;就是异步的 JS 和 XML 通过 AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大优势为&#xff1a;无刷新获取数据 AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准组合在一起使用的新方…...

list的常见接口使用

今天&#xff0c;我们来讲解一下C关于STL标准库中的一个容器list的常见接口。 在我们之前c语言数据结构中&#xff0c;我们已经了解过了关于链表的知识点了&#xff0c;那么对于现在理解它也是相对来说比较容易的了。 数据结构--双向循环链表-CSDN博客 1. 定义与包含头文件 …...

一维差分数组

2.一维差分 - 蓝桥云课 问题描述 给定一个长度为 n 的序列 a。 再给定 m 组操作&#xff0c;每次操作给定 3 个正整数 l, r, d&#xff0c;表示对 a_{l} 到 a_{r} 中的所有数增加 d。 最终输出操作结束后的序列 a。 ​​Update​​: 由于评测机过快&#xff0c;n, m 于 20…...

再次重拾jmeter之踩坑

1.添加“csv数据文件设置”&#xff0c;运行时提示 java.lang.IllegalArgumentException: Filename must not be null or empty检查多次后才发现因为我运行的是整个线程组&#xff0c;所以对应http请求下不能包括空的csv文件 2. 填写ip时不能加/&#xff0c;要在路径里加&…...

Flink的 RecordWriter 数据通道 详解

本文从基础原理到代码层面逐步解释 Flink 的RecordWriter 数据通道&#xff0c;尽量让初学者也能理解。 1. 什么是 RecordWriter&#xff1f; 通俗理解 RecordWriter 是 Flink 中负责将数据从一个任务&#xff08;Task&#xff09;发送到下游任务的组件。想象一下&#xff0c;…...

4-6记录(B树)

找左边右下或者右边左下 转化成了前驱后继的删除 又分好几种情况&#xff1a; 1. 只剩25&#xff0c;小于2&#xff0c;所以把父亲拉到25旁边&#xff0c;兄弟的70顶替父亲 对于25&#xff0c;25的后继就是70&#xff0c;25后继的后继是71&#xff08;中序遍历) 2. 借左子树…...

06软件测试需求分析案例-添加用户

给职业顾问部的老师添加用户密码后&#xff0c;他们才能登录使用该软件。只有admin账户具有添加用户、修改用户信息、删除用户的权利。admin是经理或团队的第一个人的账号&#xff0c;后面招一个教师就添加一个账号。 通读需求是提取信息&#xff0c;提出问题&#xff0c;输出…...

Nacos服务发现和配置管理

目录 一、Nacos概述 1. Nacos 简介 2. Nacos 特性 2.1 服务发现与健康监测 2.2 动态配置管理 2.3 动态DNS服务 2.4 其他关键特性 二、 服务注册和发现 2.1 核心概念 2.2 Nacos注册中心 2.3 Nacos单机模式 2.4 案例——服务注册与发现 2.4.1 父工程 2.4.2 order-p…...

【KWDB 创作者计划】第一卷:基础架构篇

以下是KWDB技术白皮书第一卷&#xff1a;基础架构篇的完整内容展示&#xff0c;包含要求的三个核心章节的深度解析。我们将以技术严谨性结合可读性的方式呈现&#xff0c;实际交付时会进一步扩展示意图和代码示例。 目录 ​KWDB技术白皮书卷一&#xff1a;基础架构篇 ​1. 数…...

对接日本金融市场数据全指南:K线、实时行情与IPO新股

一、日本金融市场特色与数据价值 日本作为全球第三大经济体&#xff0c;其金融市场具有以下显著特点&#xff1a; 成熟稳定&#xff1a;日经225指数包含日本顶级蓝筹股独特交易时段&#xff1a;上午9:00-11:30&#xff0c;下午12:30-15:00&#xff08;JST&#xff09;高流动性…...

【愚公系列】《高效使用DeepSeek》066-纠纷解决话术

🌟【技术大咖愚公搬代码:全栈专家的成长之路,你关注的宝藏博主在这里!】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主! 👉 江湖人称"愚公搬代码",用七年如一日的精神深耕技术领域,以"…...

操作系统 3.1-内存使用和分段

如何简单使用内存 这张幻灯片展示了计算机如何开始执行程序的基本过程&#xff0c;涉及到存储器、指令寄存器&#xff08;IR&#xff09;、运算器和控制器等计算机组件。 存储器&#xff1a;程序被加载到内存中。图中显示了一个指令 mov ax, [100]&#xff0c;它的作用是将内存…...

禅道MCP Server开发实践与功能全解析

一、简介 1、MCP Server核心定义 MCP Server&#xff08;Meta Command Protocol Server&#xff09;是一种基于客户端-服务器架构的轻量级服务程序&#xff0c;采用统一的mcp协议格式&#xff0c;通过连接多样化数据源和工具为AI应用提供扩展能力。它作为中间层&#xff0c;实…...

Spring Boot 3.5新特性解析:自动配置再升级,微服务开发更高效

&#x1f4dd; 摘要 Spring Boot 3.5作为Spring生态的最新版本&#xff0c;带来了多项令人振奋的改进。本文将深入解析其中最核心的自动配置增强特性&#xff0c;以及它们如何显著提升微服务开发效率。通过详细的代码示例和通俗易懂的讲解&#xff0c;您将全面了解这些新特性在…...

GNSS静态数据处理

1 安装数据处理软件&#xff1a;仪器之星&#xff08;InStar &#xff09;和 Trimble Business Center 做完控制点静态后&#xff0c;我们需要下载GNSS数据&#xff0c;对静态数据进行处理。在处理之前需要将相关软件在自己电脑上安装好&#xff1a; 仪器之星&#xff08;InS…...

java家政APP源码,家政预约平台源码,家电上门维修、家电上门清洗

家政上门预约服务APP源码&#xff0c;开发功能涵盖了用户注册与登录、家政服务分类与选择、预约管理、支付与交易、地图与导航、评价与反馈、个人信息管理、消息通知、营销工具以及数据分析等多个方面。这些功能的实现不仅提高了家政服务的便捷性和效率&#xff0c;还为用户提供…...

LangGraph 架构详解

核心架构组件 LangGraph 的架构建立在一个灵活的基于图的系统上&#xff0c;使开发者能够定义和执行复杂的工作流。以下是主要架构组件&#xff1a; 1. 状态管理系统 LangGraph 的核心是其强大的状态管理系统&#xff0c;它允许应用程序在整个执行过程中维护一致的状态&…...

【LLM基础】Megatron-LM相关知识(主要是张量并行机制)

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了Megatron-LM的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于Megatron-LM相关材料进行的&#xff0c;每个知识点的修正和深入…...

动力电池自动点焊机:新能源汽车制造的智能焊接利器

在新能源汽车产业蓬勃发展的今天&#xff0c;动力电池作为其核心部件&#xff0c;其性能与安全性直接关系到整车的续航里程和使用寿命。而动力电池的制造过程中&#xff0c;焊接工艺是至关重要的一环。这时&#xff0c;动力电池自动点焊机便以其高效、精准、智能的特点&#xf…...

解决vcpkg使用VS2022报错问题

转自个人博客&#xff1a;解决vcpkg使用VS2022报错问题 最近&#xff0c;在把Visual Studio2019完全更新到最新Visual Studio2022后&#xff0c;原使用的vcpkg无法正常安装包&#xff0c;会报如下与Visual Studio 2022相关的错误&#xff1a; error: in triplet x64-windows-m…...

Next.js 简介

Next.js 是一个由 Vercel 开发的基于 React 的 Web 开发框架&#xff0c;旨在简化 React 应用的开发流程&#xff0c;提供更好的性能和开发体验。 &#x1f31f; Next.js 的核心特点 1. 文件系统路由&#xff08;File-system Routing&#xff09; 在 pages/ 目录中创建文件就…...

一文详解ffmpeg环境搭建:Ubuntu系统ffmpeg配置nvidia硬件加速

在Ubuntu系统下安装FFmpeg有多种方式,其中最常用的是通过apt-get命令和源码编译安装。本文将分别介绍这两种方式,并提供安装过程。 一、apt-get安装 使用apt-get命令安装FFmpeg是最简单快捷的方式,只需要在终端中输入以下命令即可: # 更新软件包列表 sudo apt-get updat…...

MySQL逻辑架构有什么?

1. MySQL逻辑架构分层 MySQL的逻辑架构可分为三层&#xff08;自上而下&#xff09;&#xff1a; 连接层&#xff08;Client Layer&#xff09;服务层&#xff08;Server Layer&#xff09;存储引擎层&#xff08;Storage Engine Layer&#xff09; -----------------------…...

AI应用企业研发方案

一、引言 在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度融入各个行业&#xff0c;推动着企业的创新与变革。对于医药流通行业批发公司而言&#xff0c;面对日益激烈的市场竞争和不断变化的客户需求&#xff0c;借助AI技术提升企业的…...

【15】Strongswan watcher详解2

watcher的核心业务函数watch&#xff1a; &#xff08;1&#xff09;如果count为0&#xff0c;没有要监听的句柄&#xff0c;则watcher状态设置为WATCHER_STOPPED&#xff0c;返回&#xff0c;返回值为JOB_REQUEUE_NONE&#xff0c;这会返回到“【11】Strongswan processor 详解…...

linux shell编程之条件语句(二)

目录 一. 条件测试操作 1. 文件测试 2. 整数值比较 3. 字符串比较 4. 逻辑测试 二. if 条件语句 1. if 语句的结构 (1) 单分支 if 语句 (2) 双分支 if 语句 (3) 多分支 if 语句 2. if 语句应用示例 (1) 单分支 if 语句应用 (2) 双分支 if 语句应用 (3) 多分支 …...

uniapp uni-collapse动态切换数据时高度不能自适应

需单独调用方法更新 this.$nextTick(() > {if (this.$refs.collapseBox) {this.$refs.collapseBox.resize()} })...

递归?递推?

前言&#xff1a;递归、递推是两种非常常见基础的算法了&#xff0c;但我之前忘了从这基础的先讲起了&#xff0c;大家应该也都略有了解吧&#xff01;今天突然想写点相关延伸内容&#xff0c;所以还是完整介绍一些吧 递归 递归是一种通过函数调用自身解决问题的算法。在递归…...

蓝桥杯--结束

冲刺题单 基础 一、简单模拟&#xff08;循环数组日期进制&#xff09; &#xff08;一&#xff09;日期模拟 知识点 1.把月份写为数组&#xff0c;二月默认为28天。 2.写一个判断闰年的方法&#xff0c;然后循环年份的时候判断并更新二月的天数 3.对于星期数的计算&#…...

【ChCore Lab 01】Bomb Lab 拆炸弹实验(ARM汇编逆向工程)

文章目录 1. 前言2. 实验代码版本问题3. 关于使用问题4. 宏观分析5. read_line 函数介绍6. phase_0 函数6.1. read_int 函数6.2. 回到 phase_0 函数继续分析6.3. 验证结果 7. phase_1 函数7.2. 验证结果 8. phase_2 函数8.1. read_8_numbers 函数8.2. 回到 phase_2 函数继续分析…...