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

Ajax学习笔记,第一节:语法基础

Ajax学习笔记,第一节:语法基础

一、概念

1、什么是Ajax

使用浏览器的 XMLHttpRequest 对象 与服务器通信

2、什么是axios

Axios是一个基于Promise的JavaScript库,支持在浏览器和Node.js环境中使用。相较于Ajax,Axios提供了更多的功能,如拦截请求和响应、转换请求和响应数据、取消请求等,
这使得开发者能够更方便地处理和管理HTTP请求。Axios相较于Ajax兼容性更好,支持现代浏览器,而Ajax在一些旧版本浏览器中可能会出现一些兼容性问题。在安全性方面,Axios支持防御XSRF(跨站请求伪造),而Ajax本身并不直接支持这一防御机制。

3、认识URL

·URL的组成:协议,域名,资源路径
(URL 组成有很多部分,我们先掌握这3个重要的部分即可)

在这里插入图片描述

·http协议,超文本传输协议。规定了浏览器和服务器传递数据的格式·域名,标记服务器在互联网当中的方位,网络中有很多服务器,你想访问哪一台,就需要知道它的域名。·资源路径,一个服务器内有多个资源,用于标识你要访问的资源具体的位置

4、准备

https://www.apifox.cn/apidoc/project-1937884
这里 有 现成的后端服务,我们在练习时直接使用即可

二、Axios使用

1、初步使用

1> 引入 axios.js 文件到自己的网页中https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js2> 语法:axios({url: '请求路径',method: '请求方法',data:{参数名:值}}).then((res)=>{//对服务器返回的数据做处理});
<body><h3>1、省份列表</h3><p class="my-provs"></p><h3>新闻列表</h3><p class="my-news"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: "https://hmajax.itheima.net/api/province"}).then((res) => {console.log(res);if (res != undefined) {let provList = res.data.list;document.querySelector(".my-provs").innerHTML = provList.join("<br>");}});axios({url: "https://hmajax.itheima.net/api/news"}).then((res) => {console.log(res);if (res != undefined) {let newsList = res.data.data;let newsInnerHtml = "";newsList.forEach(ele => {newsInnerHtml = newsInnerHtml + " <a>" + ele.title + "</a><br><img src=" + ele.img + "><br/> ";});console.log(newsInnerHtml);document.querySelector(".my-news").innerHTML = newsInnerHtml;}})</script>
</body>

2、携带查询参数

语法:
axios({url:"请求路径",params:{//查询参数 params 或在URL后拼接成?xxx=yyy&ooo=ddd格式}
}).then((res)=>{//结果处理
});//注意:
参数中   当属性名和value位置变量名同名即可简写
<body><h3>城市列表:</h3> <input type="text" name="cityname"><input type="button" class="slt-btn" value="点我"><p class="my-city"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let cliBtn = document.querySelector(".slt-btn");cliBtn.addEventListener('click', () => {let inputVal = document.querySelector("input[name='cityname']");axios({url: "https://hmajax.itheima.net/api/city",params: {"pname": inputVal.value}}).then(res => {console.log(res);if (res != undefined) {let cityList = res.data.list;document.querySelector(".my-city").innerHTML = cityList.join("<br/>");}})});</script>
</body>

在这里插入图片描述

3、常用请求方法和数据提交

请求方法是一些固定单词的英文,例如:GET,POST,PUT,DELETE,PATCH
(这些都是http协议规定的),每个单词对应一种对服务器资源要执行的操作axios内部设置了默认请求方法就是GET
请求方法操作
GET获取数据
POST数据提交
PUT修改数据(全部)
DELETE删除数据
PATCH修改数据(部分)
#语法:
axios({url: '目标资源地址',method: '请求方法',data: {  //注意这里是data 而不是 params参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})
<body><label for="un">用户名:</label><input type="text" name="username" id="un"><label for="pwd">密码:</label><input type="password" name="password" id="pwd"><input type="button" value="注册" class="btn"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let submitBtn = document.querySelector(".btn");submitBtn.addEventListener('click', () => {let username = document.querySelector("#un").value;let password = document.querySelector("#pwd").value;if (username != undefined && password != undefined) {axios({url: "https://hmajax.itheima.net/api/register",method: 'POST',data: {  //注意这里是data 不是 paramsusername,password}}).then(res => {console.log(res.data);if (res.data == undefined) {alert("注册失败");return;}if (res.data.code == '10000') {alert("账号注册成功");} else {alert(res.data.message);}});} else {alert("请输入用户名和密码");}});</script>
</body>

4、Axios错误处理

##语法:
axios({// ...请求选项
}).then(result => {// 处理成功数据
}).catch(error => {// 处理失败错误
})
<script>let submitBtn = document.querySelector(".btn");submitBtn.addEventListener('click', () => {let username = document.querySelector("#un").value;let password = document.querySelector("#pwd").value;if (username != undefined && password != undefined) {axios({url: "https://hmajax.itheima.net/api/register",method: 'POST',data: {  //注意这里是data 不是 paramsusername,password}}).then(res => {console.log(res.data);if (res.data == undefined) {alert("注册失败");return;}if (res.data.code == '10000') {alert("账号注册成功");} else {alert(res.data.message);}}).catch(error => {console.log(error.message);console.log(error.response.data);console.log(error.response.data.message);alert(error.response.data.message);});} else {alert("请输入用户名和密码");}});</script>

5、form-serialize插件

我们前面收集表单元素的值,是一个个标签获取的
如果一套表单里有很多很多表单元素,如何一次性快速收集出来呢.
使用 form-serialize 插件提供的 serialize 函数就可以办到语法:
serialize(参数1,参数2)参数1:要获取的form表单标签对象,要求表单元素需要有name属性,用来作为收集的数据中属性名
参数2:配置对象hash:true==>收集出来是一个JS对象结构false==>收集出来是一个查询对象格式empty:true==>收集空值false==>不收集空值
<body><form action="javascript:;" class="my-form"><input type="text" name="username"><br><input type="text" name="password"><br><input type="button" class="btn" value="提交"></form><script src="./js/form-serialize.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let btn = document.querySelector(".btn");btn.addEventListener('click', () => {let myForm = document.querySelector(".my-form");const data = serialize(myForm, { hash: true, empty: false });const { username, password } = data;axios({url: "https://hmajax.itheima.net/api/login",method: "POST",data: {username,password}}).then(res => {alert(res.data.message);})})</script>
</body>

三、Ajax原理解析

1、XMLHttpRequest 简单请求

·AJAX 是浏览器与服务器通信的技术,采用 XMLHttpRequest 对象相关代码
·axios 是对 XHR 相关代码进行了封装,让我们只关心传递的接口参数#语法:
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {// 响应结果console.log(xhr.response)
})
xhr.send()
<h3>省份</h3>
<p class="my_prov"></p>
<script>//==================1、通过XMLHttpRequest实现查询省份的接口=====================//1-1、创建xhr对象const xhr = new XMLHttpRequest();//1-2、设置请求路径和方式xhr.open("GET", "http://hmajax.itheima.net/api/province");//1-3、监听回调xhr.addEventListener("loadend", () => {console.log(xhr.response);//JSON解析let res = JSON.parse(xhr.response);console.log(res);const my_prov = document.querySelector(".my_prov");my_prov.innerHTML = res.list.join("<br>")});//监听loadend事件//1-4、发送请求xhr.send();//发送请求
</script>
##拓展:
进度事件的种类:
进度事件用来描述资源加载的进度,主要由 AJAX 请求<img><audio><video><style><link>
等外部资源的加载触发,继承了ProgressEvent接口。它主要包含以下几种事件。·abort:外部资源中止加载时(比如用户取消)触发。如果发生错误导致中止,不会触发该事件。
·error:由于错误导致外部资源无法加载时触发。
·load:外部资源加载成功时触发。
·loadstart:外部资源开始加载时触发。
·loadend:外部资源停止加载时触发,发生顺序排在error、abort、load等事件的后面。
·progress:外部资源加载过程中不断触发。
·timeout:加载超时时触发。

2、XMLHttpRequest 请求参数(简单参数)

#实现::http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
const xhr2 = new XMLHttpRequest();
xhr2.open("GET", "http://hmajax.itheima.net/api/city?pname=河北省");
//1-3、监听回调
xhr2.addEventListener("loadend", () => {console.log(xhr2.response);//JSON解析let res = JSON.parse(xhr2.response);console.log(res);const my_city = document.querySelector(".my_city");my_city.innerHTML = res.list.join("<br>")
});//监听loadend事件
//1-4、发送请求
xhr2.send();//发送请求

3、XMLHttpRequest 请求参数(多个)

##语法
let queryParams = new URLSearchParams({"pname": "河北省","cname": "邯郸市"
});
let queryString = queryParams.toStrng();
//================3、通过XMLHttpRequest实现查询区县的接口(多个参数)====================const xhr3 = new XMLHttpRequest();let queryParams = new URLSearchParams({"pname": "河北省","cname": "邯郸市"});xhr3.open("GET", "https://hmajax.itheima.net/api/area?" + queryParams.toString());//1-3、监听回调xhr3.addEventListener("loadend", () => {console.log(xhr3.response);//JSON解析let res = JSON.parse(xhr3.response);console.log(res);const my_area = document.querySelector(".my_area");my_area.innerHTML = res.list.join("<br>")});//监听loadend事件//1-4、发送请求xhr3.send();//发送请求

4、XMLHttpRequest数据提交

##语法:
xhr4.setRequestHeader("Content-Type", "application/json");
let data = { "username": username, "password": password };
let dataStr = JSON.stringify(data);
xhr4.send(dataStr);
const registBtn = document.querySelector(".btn");
registBtn.addEventListener("click", function () {let username = document.querySelector("#un").value;let password = document.querySelector("#pwd").value;if (username == undefined || password == undefined) {alert("请输入用户名和密码");return;}const xhr4 = new XMLHttpRequest();xhr4.open("POST", "https://hmajax.itheima.net/api/register");xhr4.addEventListener("loadend", () => {console.log(xhr4.response);let res = JSON.parse(xhr4.response);if (res != undefined && res.code != '10000') {alert(res.message);} else {alert("账号注册成功.id为:" + res.data.id);}})xhr4.setRequestHeader("Content-Type", "application/json");let data = { "username": username, "password": password };let dataStr = JSON.stringify(data);xhr4.send(dataStr);
});

相关文章:

Ajax学习笔记,第一节:语法基础

Ajax学习笔记&#xff0c;第一节&#xff1a;语法基础 一、概念 1、什么是Ajax 使用浏览器的 XMLHttpRequest 对象 与服务器通信2、什么是axios Axios是一个基于Promise的JavaScript库&#xff0c;支持在浏览器和Node.js环境中使用。相较于Ajax&#xff0c;Axios提供了更多…...

java基础知识(常用类)

目录 一、包装类(Wrapper) (1)包装类与基本数据的转换 (2)包装类与String类型的转换 (3)Integer类和Character类常用的方法 二、String类 (1)String类介绍 1)String 对象用于保存字符串,也就是一组字符序列 2)字符串常量对象是用双引号括起的字符序列。例如:&quo…...

修改bag的frame_id的工具srv_tools

在使用数据集导航或者建图时&#xff0c;bag中的点云或者其他话题的frame_id没有和需要的对应 1.创建工作空间 2.cd xxxx/src 3.git clone https://github.com/srv/srv_tools.git cd .. catkin_make source ./devel/setup.bash rosrun bag_tools change_frame_id.py -t /要改…...

浅谈丨功能安全测试,汽车的守护者

随着新能源汽车迅猛的发展&#xff0c;各类车型频频面世&#xff0c;同时辅助驾驶/自动驾驶等智驾功能也在不断迭代&#xff0c;使得整个汽车系统的复杂性越来越高&#xff0c;最终导致消费者不得不对如今的汽车质量和安全性提出质疑。 如何打破质疑&#xff1f; 那就不得不搬…...

了解M有SQL索引

目录 索引介绍 索引的优缺点 索引底层数据结构选型 Hash表 二叉查找树(BST) AVL树 红黑树 B 树& B树 索引类型总结 主键索引(Primary Key) 二级索引 聚簇索引与非聚簇索引 聚簇索引(聚集索引) 聚簇索引介绍 聚簇索引的优缺点 非聚簇索引(非聚集索引) 非聚簇…...

进程间通信5:信号

引入 我们之前学习了信号量&#xff0c;信号量和信号可不是一个东西&#xff0c;不能混淆。 信号是什么以及一些基础概念 信号是一种让进程给其他进程发送异步消息的方式 信号是随时产生的&#xff0c;无法预测信号可以临时保存下来&#xff0c;之后再处理信号是异步发送的…...

Excel把其中一张工作表导出成一个新的文件

excel导出一张工作表 一个Excel表里有多个工作表&#xff0c;怎么才能导出一个工作表&#xff0c;让其生成新的Excel文件呢&#xff1f; 第一步&#xff1a;首先打开Excel表格&#xff0c;然后选择要导出的工作表的名字&#xff0c;比如“Sheet1”&#xff0c;把鼠标放到“She…...

python oa服务器巡检报告脚本的重构和修改(适应数盾OTP)有空再去改

Two-Step Vertification required&#xff1a; Please enter the mobile app OTPverification code: 01.因为巡检的服务器要双因子认证登录&#xff0c;也就是登录堡垒机时还要输入验证码。这对我的巡检查服务器的工作带来了不便。它的机制是每一次登录&#xff0c;算一次会话…...

微信小程序下拉刷新与上拉触底的全面教程

微信小程序下拉刷新与上拉触底的全面教程 引言 在微信小程序的开发中,用户体验至关重要。下拉刷新和上拉触底是提高用户交互体验的重要功能,能够让用户轻松获取最新数据和内容。本文将详细介绍这两个功能的实现方式,结合实际案例、代码示例和图片展示,帮助开发者轻松掌握…...

第三十九章:Grafana 概述、Docker安装与验证指南

Grafana 概述、Docker安装与验证指南 一、Grafana 概述 Grafana 是一个跨平台的开源可视化分析工具,是目前网络架构和应用分析中最流行的时序数据展示工具。它主要用于大规模指标数据的可视化展示,并支持多种数据源和丰富的可视化插件。Grafana 使用Go语言开发,具备数据监…...

使用go实现流式输出

流式输出的深度剖析 之前一直在调用openai的key&#xff0c;只是照着文档进行流式调用&#xff0c;也只知其确是流式与api有所不同&#xff0c;而未成体系深究其实现原理。 就以openai的官方流式输出为切入。 概述 流式输出&#xff08;Streaming Output&#xff09;是 HTT…...

WebSocket详解、WebSocket入门案例

目录 1.1 WebSocket介绍 http协议&#xff1a; webSocket协议&#xff1a; 1.2WebSocket协议&#xff1a; 1.3客户端&#xff08;浏览器&#xff09;实现 1.3.2 WebSocket对象的相关事宜&#xff1a; 1.3.3 WebSOcket方法 1.4 服务端实现 服务端如何接收客户端发送的请…...

元组部分介绍

元组部分 元组的基本格式与特点 #1.元组 #基本格式&#xff1a; 元组名&#xff08;元素1&#xff0c;元素2&#xff0c;元素3&#xff09; #注意&#xff1a;所有元素包含在小括号内&#xff0c;元素与元素之间用逗号隔开&#xff0c;可以是不同的元素类型 #注意&#xff1a…...

mfc100u.dll是什么?分享几种mfc100u.dll丢失的解决方法

mfc100u.dll 是一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;属于 Microsoft Foundation Classes (MFC) 库的一部分。MFC 是微软公司开发的一套用于快速开发 Windows 应用程序的 C 类库。mfc100u.dll 文件包含了 MFC 库中一些常用的函数和类的定义&#xff0c;这…...

企业数字化转型现状

国家数字经济战略背景 2018年以来&#xff0c;国家政府不断出台政策规范我国企业数字化治理市场。2018年9月颁布《关于发展数字经济稳定并扩大就业的指导意见》&#xff0c;支持建设一批数字经济创新创业孵化机构。积极推进供应链创新与应用&#xff0c;支持构建以企业为主导。…...

数据治理:在企业数据管理中的关键角色与实现路径——《DAMA 数据管理知识体系指南》读书笔记- 第 3 章

文章目录 1. 数据治理的核心内涵与战略价值2. 数据治理的驱动因素&#xff1a;不仅仅是合规3. 数据治理的组织模型&#xff1a;选择适合企业结构的运营模式4. 实施数据治理的关键步骤&#xff1a;战略、制度和文化5. 数据治理工具的选择&#xff1a;支持业务与流程的高效管理6.…...

树莓派2装FreeBSD14.1 Raspberry Pi2 install FreeBSD14.1 00000121:error:0A000086:SSL

树莓派2代的Model B采用Broadcom BCM2836 900MHz的四核SoC&#xff0c;1GB内存&#xff0c;是新一代开拓者&#xff0c;兼容1代B。相比之下&#xff0c;树莓派2的性能比1代提升6倍&#xff0c;内存翻了一番。Raspberry Pi 2不仅能跑全系列ARM GNU/Linux发行版&#xff0c;而且支…...

uniop触摸屏维修eTOP40系列ETOP40-0050

在现代化的工业与商业环境中&#xff0c;触摸屏设备已成为不可或缺的人机交互界面。UNIOP&#xff0c;作为一个知名的触摸屏品牌&#xff0c;以其高性能、稳定性和用户友好性&#xff0c;广泛应用于各种自动化控制系统、自助服务终端以及高端展示系统中。然而&#xff0c;即便如…...

uniapp+vue2重新进入小程序就清除缓存,设备需要重新扫码

代码 app.vue页面 <script>export default {onLaunch: function() {uni.removeStorageSync(equiId)}} </script>...

视频推拉流EasyDSS互联网直播点播平台技术特点及应用场景剖析

在数字科技日新月异的今天&#xff0c;视频直播和点播已经成为互联网内容传播的重要方式之一。而互联网直播点播平台EasyDSS作为功能强大的流媒体直播点播视频能力平台&#xff0c;提供了一站式的视频推拉流、转码、直播、点播、时移回放、存储等视频服务&#xff0c;广泛应用于…...

论文笔记 网络安全图谱以及溯源算法

​ 本文提出了一种网络攻击溯源框架&#xff0c;以及一种网络安全知识图谱&#xff0c;该图由六个部分组成&#xff0c;G <H&#xff0c;V&#xff0c;A&#xff0c;E&#xff0c;L&#xff0c;S&#xff0c;R>。 1|11.知识图 ​ 网络知识图由六个部分组成&#xff0c…...

抓住鸿蒙生态崛起的机遇,拥抱未来开发挑战

随着华为鸿蒙&#xff08;HarmonyOS&#xff09;的持续发展&#xff0c;鸿蒙生态正在迅速崛起&#xff0c;逐步在智能手机、智能穿戴、车载、家居等领域形成完整闭环。它不仅为开发者带来了新的机遇&#xff0c;还带来了技术上的挑战。如何抓住这些机遇并应对挑战&#xff0c;是…...

STM32WB55RG开发(5)----监测STM32WB连接状态

STM32WB55RG开发----5.生成 BLE 程序连接手机APP 概述硬件准备视频教学样品申请源码下载参考程序选择芯片型号配置时钟源配置时钟树RTC时钟配置RF wakeup时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙LED配置设置工程信息工程文件设置参考文档SVCCTL_A…...

ArcGIS应用指南:ArcGIS制作局部放大地图

在地理信息系统&#xff08;GIS&#xff09;中&#xff0c;制作详细且美观的地图是一项重要的技能。地图制作不仅仅是简单地将地理数据可视化&#xff0c;还需要考虑地图的可读性和美观性。局部放大图是一种常见的地图设计技巧&#xff0c;用于展示特定区域的详细信息&#xff…...

浅谈网络 | 传输层之TCP协议

目录 TCP 包头格式TCP 的三次握手TCP 的四次挥手TCP 的可靠性与"靠谱"的哲学TCP流量控制TCP拥塞控制 上一章我们提到&#xff0c;UDP 就像我们小时候一样简单天真&#xff0c;它相信“网之初&#xff0c;性本善&#xff0c;不丢包&#xff0c;不乱序”&#xff0c;因…...

‌Kotlin中的?.和!!主要区别

目录 1、?.和!!介绍 2、使用场景和最佳实践 3、代码示例和解释 1、?.和!!介绍 ‌Kotlin中的?.和!!主要区别在于它们对空指针的处理方式。‌ ‌?.&#xff08;安全调用操作符&#xff09;‌&#xff1a;当变量可能为null时&#xff0c;使用?.可以安全地调用其方法或属性…...

【漏洞复现】代付微信小程序系统 read.php 任意文件读取漏洞

免责声明: 本文旨在提供有关特定漏洞的信息,以帮助用户了解潜在风险。发布此信息旨在促进网络安全意识和技术进步,并非出于恶意。读者应理解,利用本文提到的漏洞或进行相关测试可能违反法律或服务协议。未经授权访问系统、网络或应用程序可能导致法律责任或严重后果…...

Python人工智能项目报告

一、实践概述 1、实践计划和目的 在现代社会&#xff0c;计算机技术已成为支撑社会发展的核心力量&#xff0c;渗透到生活的各个领域&#xff0c;应关注人类福祉&#xff0c;确保自己的工作成果能够造福社会&#xff0c;同时维护安全、健康的自然环境&#xff0c;设计出具有包…...

PyQt6+pyqtgraph折线图绘制显示

1、实现效果 2、环境&#xff1a; 确认已经安装pyqtgraph的模块&#xff0c;如果没有安装&#xff0c;使用命令安装&#xff1a; pip install pyqtgraph 3、代码实现&#xff1a; 绘制折线函数&#xff1a; import sys import random from PySide6.QtWidgets import QAppl…...

1-golang_org_x_crypto_bcrypt测试 --go开源库测试

1.实例测试 package mainimport ("fmt""golang.org/x/crypto/bcrypt" )func main() {password : []byte("mysecretpassword")hashedPassword, err : bcrypt.GenerateFromPassword(password, bcrypt.DefaultCost)if err ! nil {fmt.Println(err)…...

C语言菜鸟入门·关键字·union的用法

目录 1. 简介 2. 访问成员 2.1 声明 2.2 赋值 3. 共用体的大小 4. 与typedef联合使用 5. 更多关键字 1. 简介 共用体&#xff08;union&#xff09;是一种数据结构&#xff0c;它允许在同一内存位置存储不同的数据类型&#xff0c;但每次只能存储其中一种类型的…...

leetcode hot100【LeetCode 238.除自身以外数组的乘积】java实现

LeetCode 238.除自身以外数组的乘积 题目描述 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 …...

【测试工具JMeter篇】JMeter性能测试入门级教程(一)出炉,测试君请各位收藏了!!!

一、前言 Apache JMeter是纯Java的开源软件&#xff0c;最初由Apache软件基金会的Stefano Mazzocchi开发&#xff0c;旨在加载测试功能行为和测量性能。可以使用JMeter进行性能测试&#xff0c;即针对重负载、多用户和并发流量测试Web应用程序。 我们选择JMeter原因 是否测试过…...

嵌入式驱动开发详解3(pinctrl和gpio子系统)

文章目录 前言pinctrl子系统pin引脚配置pinctrl驱动详解 gpio子系统gpio属性配置gpio子系统驱动gpio子系统API函数与gpio子系统相关的of函数 pinctrl和gpio子系统的使用设备树配置驱动层部分用户层部分 前言 如果不用pinctrl和gpio子系统的话&#xff0c;我们开发驱动时需要先…...

使用 OpenCV 进行视频中的行人检测

在计算机视觉领域&#xff0c;行人检测是一个重要的研究方向&#xff0c;它在视频监控、自动驾驶、人机交互等领域都有着广泛的应用。本文将介绍如何使用 OpenCV 库来实现视频中的行人检测。 环境准备 首先&#xff0c;我们需要安装 OpenCV 库。可以通过以下命令来安装&#…...

py文件转pyd文件的那些坑

当编译py脚本文件发给客户使用时&#xff0c;为了保密源代码防止反编译&#xff0c;可以将py文件转换为pyd文件&#xff0c;然后使用pyinstaller工具转换为exe应用程序&#xff0c;但有时测试发现&#xff0c;py文件可以正常运行&#xff0c;转换为pyd文件后却有各种错误&#…...

go interface(接口)使用

在 Go 语言中&#xff0c;接口&#xff08;interface&#xff09;是一种抽象类型&#xff0c;它定义了一组方法&#xff0c;但是不实现这些方法。接口指定了一个对象的行为&#xff0c;而不关心对象的具体实现。接口使得代码更加灵活和可扩展。 定义接口 接口使用 type 关键字…...

前端---HTML(一)

HTML_网络的三大基石和html普通文本标签 1.我们要访问网络&#xff0c;需不需要知道&#xff0c;网络上的东西在哪&#xff1f; 为什么我们写&#xff0c;www.baidu.com就能找到百度了呢&#xff1f; 我一拼ping www.baidu.com 就拼到了ip地址&#xff1a; [119.75.218.70]…...

unsloth vlm模型Qwen2-VL、Llama 3.2 Vision微调案例

T4卡15G显卡训练 参考: https://github.com/unslothai/unsloth 按自己显卡cuda版本安装 免费colab微调代码: Qwen2-VL: https://colab.research.google.com/drive/1whHb54GNZMrNxIsi2wm2EY_-Pvo2QyKh?usp=sharing from unsloth import FastVisionModel # NEW instead …...

云网络基础- TCP/IP 协议

文章目录 典型服务模式TCP/IP 协议设置和查看IPIP地址的分类:IP地址组成: 网络位主机位组成克隆:产生一台新的虚拟机win2008 典型服务模式 • C/S,Client/Server架构 – 由服务器提供资源或某种功能 – 客户机使用资源或功能 TCP/IP 协议 • TCP/IP是最广泛支持的通信协议集合…...

【数据分享】2001-2023年我国30米分辨率冬小麦种植分布栅格数据(免费获取)

小麦、玉米、水稻等各类农作物的种植分布数据在农业、环境、国土等很多专业都经常用到&#xff01; 本次给大家分享的是我国2001-2023年逐年的30米分辨率冬小麦种植分布栅格数据&#xff01;数据格式为TIFF格式&#xff0c;数据坐标为GCS_WGS_1984。该数据包括我国11个省份的冬…...

前端预览pdf文件流

需求 后端接口返回pdf文件流&#xff0c;实现新窗口预览pdf。 解决方案 把后端返回的pdf文件流转为blob路径&#xff0c;利用浏览器直接预览。 具体实现步骤 1、引入axios import axios from axios;2、创建预览方法&#xff08;具体使用时将axios的请求路径替换为你的后端…...

【Leetcode 每日一题】146. LRU 缓存(c++)

146. LRU 缓存 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#x…...

Neural Magic 发布 LLM Compressor:提升大模型推理效率的新工具

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

QT简易项目 数据库可视化界面 数据库编程SQLITE QT5.12.3环境 C++实现

案例需求&#xff1a; 完成数据库插入&#xff0c;删除&#xff0c;修改&#xff0c;查看操作。 分为 插入&#xff0c;删除&#xff0c;修改&#xff0c;查看&#xff0c;查询 几个模块。 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget…...

为什么DDoS防御很贵?

分布式拒绝服务攻击&#xff08;DDoS攻击&#xff09;是一种常见的网络安全威胁&#xff0c;通过大量恶意流量使目标服务器无法提供正常服务。DDoS防御是一项复杂且昂贵的服务&#xff0c;本文将详细探讨为什么DDoS防御如此昂贵&#xff0c;并提供一些实用的代码示例和解决方案…...

Spring Boot3远程调用工具RestClient

Spring Boot3.2之后web模块提供了一个新的远程调用工具RestClient&#xff0c;它的使用比RestTemplate方便&#xff0c;开箱即用&#xff0c;不需要单独注入到容器之中&#xff0c;友好的rest风格调用。下面简单的介绍一下该工具的使用。 一、写几个rest风格测试接口 RestCont…...

C51相关实验

C51相关实验 LED //功能&#xff1a;1.让开发板的LED全亮&#xff0c;2,点亮某一个LED,3.让LED3以5Hz的频率闪动#include "reg52.h"#define LED P2 sbit led1 LED^1;void main(void) {LED 0xff;//LED全灭led1 0;while(1)//保持应用程序不退出{} }LED 输出端是高…...

云服务器部署springboot项目、云服务器配置JDK、Tomcat

目录 环境准备&#xff1a;JDK、Tomcat 将两个文件上传刀usr/java目录下并解压&#xff1a; 改java相关文件里的参数 执行以下命令&#xff0c;打开 profile 文件 执行以下命令&#xff0c;读取环境变量&#xff1a; 查看JDK是否安装成功&#xff1a; 改Tomcat参数 项目…...

STM32 USART串口发送

单片机学习&#xff01; 目录 前言 一、串口发送配置步骤 二、详细步骤 2.1 RCC开启USART和GPIO时钟 2.2 GPIO初始化 2.3 配置USART 2.4 开启USART 2.5 初始化总代码 三、发送数据函数设计 3.1 发送一个字节数据函数 3.2 发送一个数组函数 3.3 发送字符串函数 3.4…...