目录

一.XMLHttpRequest

二.XMLHttpRequest——查询参数

三.案例——地区查询

四.XMLHttpRequest_数据提交

五.Promise

六.Promise三种状态

七.Promiseee+XHR获取省份列表（案例）

八.封装-简易axios-获取省份列表

九.封装-简易axios-获取地区列表

十.封装-简易axios-注册用户 

一.XMLHttpRequest

1.XMLHttpRequest定义：

        XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在AJAX 编程中被大量使用。

2.关系：axios内部采用XMLHttpRequest与服务器交互

3.使用

  • 创建XMLHttpRequest对象
const xhr = new XMLRequest()
xhr.open('请求方法','请求URL网址')
xhr.addEventListener('loadend', ()=>{console.log(xhr.response)
})
xhr.send()
  • 配置请求方法和请求URL地址
  • 监听loadend事件，接受响应结果
  • 发起请求

4.案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XMLHttpRequest_基础使用</title>
</head><body><p class="my-p8"></p>
<script>/*** 目标：使用XMLHttpRequest对象与服务器通信*  1. 创建 XMLHttpRequest 对象*  2. 配置请求方法和请求 url 地址*  3. 监听 loadend 事件，接收响应结果*  4. 发起请求*/const xhr = new XMLHttpRequest()xhr.open('GET', 'https://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', ()=> {console.log(xhr.response)//转换为了对象const  data = JSON.parse(xhr.response)console.log(data.list.join('<br>'))document.querySelector('.my-p8').innerHTML = data.list.join('<br>')})xhr.send()</script>
</body></html>

二.XMLHttpRequest——查询参数

1.定义：浏览器提供给服务i的额外信息，让服务器返回浏览器想要的数据

2.语法：http://xxxx.com/xxxx/xxxx?参数名1 = 值1 & 参数名2 = 值2

3.案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XMLHttpRequest_查询参数</title>
</head><body>
<p class="hello"></p>
<script>/*** 目标：使用XHR携带查询参数，展示某个省下属的城市列表*/const xhr = new XMLHttpRequest();xhr.open('GET', 'https://hmajax.itheima.net/api/city?pname=辽宁省');xhr.addEventListener('loadend', () => {console.log(xhr.response);const data = JSON.parse(xhr.response);console.log(data.list.join('<br>'));document.querySelector('.hello').innerHTML = data.list.join('<br>')})xhr.send();
</script>
</body></html>

三.案例——地区查询

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_地区查询</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body>
<div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>/*** 目标: 根据省份和城市名字, 查询对应的地区列表*///1.查询按钮绑定点击事件document.querySelector('.sel-btn').addEventListener('click', ()=>{//2.获取输入框的值const pname = document.querySelector('.province').valueconst cname = document.querySelector('.city').value//3.组织查询参数到字符串const qOBJ = {pname,cname}const paramsOBJ = new URLSearchParams(qOBJ)const queryString = paramsOBJ.toString()console.log(queryString)//4.清空现有列表document.querySelector('.list-group').innerHTML = '<li class="list-group-item">加载中...</li>'//5.使用fetch查询地区列表fetch(`https://hmajax.itheima.net/api/area?${queryString}`).then(response => {if (!response.ok) {throw new Error('网络响应不正常')}return response.json()}).then(data => {console.log(data)// 使用反引号创建模板字符串const htmlStr = data.list.map(areaName => {return `<li class="list-group-item">${areaName}</li>`}).join('')console.log(htmlStr)document.querySelector('.list-group').innerHTML = htmlStr}).catch(error => {console.error('查询失败:', error)document.querySelector('.list-group').innerHTML = `<li class="list-group-item text-danger">查询失败: ${error.message}</li>`})})
</script>
</body>
</html>

四.XMLHttpRequest_数据提交

1.需求：通过XHR提交用户名和密码，完成注册功能

请求头设置Content-Type：application/json

请求体携带JSON字符串

const xhr = new XMLHttpRequest()
xhr.open('请求方法','请求URL网址')
xhr.addEventListener('loadend',()=>{console.log(xhr.response)
})
//告诉服务器，我传递的内容类型，是JSON字符串
xhr.setRequestHeader('Content-Type','application/json')
//准备数据并转成JSON字符串
const user = {username:'用户名'， password:'密码'}
const userStr = JSON.stringify(user)
//发送请求体
xhr.send(userStr)

2.案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XMLHttpRequest_数据提交</title>
</head><body>
<button class="reg-btn">注册用户</button>
<script>/*** 目标：使用xhr进行数据提交-完成注册功能*/document.querySelector('.reg-btn').addEventListener('click', () => {const xhr = new XMLHttpRequest()xhr.open('POST','https://hmajax.itheima.net/api/register')xhr.addEventListener('loadend',()=>{console.log(xhr.response)})
//告诉服务器，我传递的内容类型，是JSON字符串xhr.setRequestHeader('Content-Type','application/json')
//准备数据并转成JSON字符串const user = {username:'huopengzhao', password:'123456'}const userStr = JSON.stringify(user)
//发送请求体xhr.send(userStr)})
</script>
</body></html>

五.Promise

1.定义：Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值

2.好处：

  • 逻辑更清晰
  • 了解axios函数内部的运行机制
  • 能够解决回调函数低于问题
//1.创建promise对象
const p = new Promise((resolve, reject) =>{//2.执行异步任务-并传递结果//成功调用：resolve（值）触发then()执行//失败调用：reject（值）触发catch（）执行})
//3.接受结果
p.then(result =>{//成功
}).catch（error=》{//失败
}）

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>认识Promise</title>
</head><body>
<script>/*** 目标：使用Promise管理异步任务*/const p = new Promise((resolve, reject) => {//执行异步代码setTimeout(() => {//成功调用resolve（.then接受），失败调用reject（.catch接受）//resolve('模拟AJAX请求成功')reject(new Error('模拟AJAX请求失败'))},2000)})//3.获取结果p.then((result) => {console.log(result)}).catch((error) => {console.log(error)})
</script>
</body></html>

六.Promise三种状态

1.作用：了解Promise对象如何关联的处理函数，以及代码执行顺序

2.概念：一个promise对象必将处于以下几种状态

（Promise对象一旦被兑现/拒绝就是已敲定，状态无法再被改变）

  • 待定（pending）：初始状态，既没有兑现，也没有拒绝
  • 已兑现（fulfilled）：意味着操作成功完成
  • 已拒绝（rejected）：意味着操作失败

3.案例

 /*** 目标：认识Promise状态*/// 1. 创建Promise对象(pending-待定状态)const p = new Promise((resolve, reject) => {console.log('Promise对象开始执行')// 2. 执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功结果')//resolve()=>'fulfilled状态-已兑现'=>then()//reject()=>'rejected状态-已拒绝'=>catch()reject(new Error('模拟AJAX请求-失败结果'))}, 2000)})console.log(p)// 3. 获取结果p.then(result => {console.log(result)}).catch(error => {console.log(error)})

七.Promiseee+XHR获取省份列表（案例）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例_使用Promise+XHR_获取省份列表</title>
</head>
<body>
<p class="hello"></p><script>const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()xhr.open('GET', 'https://hmajax.itheima.net/api/province')xhr.addEventListener('load', () => {if (xhr.status >= 200 && xhr.status < 300) {try {const response = JSON.parse(xhr.response)resolve(response)} catch (e) {reject(new Error('解析JSON失败'))}} else {reject(new Error(`请求失败: ${xhr.status}`))}})xhr.addEventListener('error', () => {reject(new Error('网络请求失败'))})xhr.send()})p.then(result => {console.log(result)if (result.list && Array.isArray(result.list)) {document.querySelector('.hello').innerHTML = result.list.join('<br>')} else {throw new Error('返回数据格式不正确')}}).catch(error => {console.error(error)document.querySelector('.hello').innerHTML = `加载失败: ${error.message}`})
</script>
</body>
</html>

八.封装-简易axios-获取省份列表

需求：基于Promise+XHR封装myAxios函数，获取省份列表

步骤：

  1. 定义myAxios函数，接收配置对象，返回Promise对象
  2. 发起XHR请求，默认请求方法为GET
  3. 调用成功/失败的处理程序
  4. 使用myAxios函数，获取省份列表展示
function myAxios(config){return new Promise((resolve,reject) =>{//xhr请求//调用成功/失败的处理程序
})
}
myAxios（{url:'目标资源地址'
}）.then(result => {}).catch(error => {})

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>封装_简易axios函数_获取省份列表</title>
</head><body>
<p class="hello"></p>
<script>/*** 目标：封装_简易axios函数_获取省份列表*  1. 定义myAxios函数，接收配置对象，返回Promise对象*  2. 发起XHR请求，默认请求方法为GET*  3. 调用成功/失败的处理程序*  4. 使用myAxios函数，获取省份列表展示*/function myAxios(config){return new Promise((resolve,reject) =>{//xhr请求//调用成功/失败的处理程序const xhr = new XMLHttpRequest()xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if(xhr.status >= 200 && xhr.status < 300){resolve(JSON.parse(xhr.responseText))}else {reject(new Error(xhr.response))}})xhr.send()})}myAxios({url:'https://hmajax.itheima.net/api/province'}).then(result => {console.log(result)document.querySelector('.hello').innerHTML = result.list.join('<br>')}).catch(error => {console.log(error)document.querySelector('.hello').innerHTML = error.message})
</script>
</body></html>

九.封装-简易axios-获取地区列表

需求：修改myAxios函数支持传递查询参数，获取‘辽宁省’，‘大连市’对应地区列表展示

要求

  1. myAxios函数调用后，传入params选项
  2. 基于URLSearchParams转换查询字符串
  3. 使用自己封装的myAxios函数展示地区列表
function myAxios(config){return new Promise((resolve, reject) => {//XHR请求 - 判断params选项，携带查询参数//调用成功/失败的处理程序
})
}myAxios（{url:'目标自已按地址'，params：{参数名1：值1，参数名2：值2}
}）

代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>封装_简易axios函数_获取地区列表</title>
</head><body>
<p class="my-p"></p>
<script>/*** 目标：封装_简易axios函数_获取地区列表*  1. 判断有params选项，携带查询参数*  2. 使用URLSearchParams转换，并携带到url上*  3. 使用myAxios函数，获取地区列表*/function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()//1.判断params选项，是否携带查询参数if(config.params){//2.使用URLSearchParams转换，并携带到url上const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()//把查询参数字符串，拼接在url？后面config.url += `?${queryString}`}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}
//3.使用myAxios函数，获取地区列表myAxios({url:'https://hmajax.itheima.net/api/area',params:{pname: '辽宁省',cname: '大连市'}}).then(result =>{console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error =>{console.log(error)document.querySelector('.my-p').innerHTML = error.message})</script>
</body></html>

十.封装-简易axios-注册用户 

需求：修改myAxios函数支持传递请求体数据，完成注册用户功能

步骤：

  1. myAxios函数调用后，判断data选项
  2. 转换数据类型，在send方法中发送
  3. 使用自己封装的myAxios函数完成注册用户功能
function myAxios(config){return new Promise((resolve, reject) => {//XHR请求 - 判断data选项，携带查询参数//调用成功/失败的处理程序
})
}myAxios（{url:'目标自已按地址'，data：{参数名1：值1，参数名2：值2}
}）

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>封装_简易axios函数_注册用户</title>
</head><body>
<button class="reg-btn">注册用户</button>
<script>/*** 目标：封装_简易axios函数_注册用户*  1. 判断有data选项，携带请求体*  2. 转换数据类型，在send中发送*  3. 使用myAxios函数，完成注册用户*/function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()if (config.params) {const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()config.url += `?${queryString}`}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})//1.判断data选项，是否携带请求体if (config.data) {const jsonStr = JSON.stringify(config.data)xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)}else{//如果没有请求体数据，就正常发起请求xhr.send()}})}document.querySelector('.reg-btn').addEventListener('click', () => {//3.使用myAxios函数，完成注册用户myAxios({url:'https://hmajax.itheima.net/api/register',method:'POST',data:{username:'huopengzhao',password:'123456'}}).then(result => {console.log(result)}).catch(error => {console.log(error)})})
</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/93180.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/93180.shtml
英文地址，请注明出处：http://en.pswp.cn/web/93180.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解决 pip 安装包时出现的 ReadTimeoutError 方法 1: 临时使用镜像源（单次安装）

解决 pip 安装包时出现的 ReadTimeoutError 方法 1: 临时使用镜像源（单次安装）

解决 pip 安装包时出现的 ReadTimeoutError 当您在使用 pip 安装 Python 包时遇到 pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(hostfiles.pythonhosted.org, port443): Read timed out. 错误时&#xff0c;这通常是由于网络问题导致的连接超时。P…
阅读更多...
Linux下使用Samba 客户端访问 Samba 服务器的配置（Ubuntu Debian）

Linux下使用Samba 客户端访问 Samba 服务器的配置（Ubuntu Debian）

在 Linux 系统中&#xff0c;Samba 提供了与 Windows 系统文件共享的便利方式。本文将详细介绍在 Ubuntu 和 Debian 系统下如何安装 Samba 客户端、访问共享资源&#xff0c;并实现远程目录挂载和开机自动挂载。 文章参考自&#xff08;感谢分享&#xff09;&#xff1a;https…
阅读更多...
解决dedecms文章默认关键字太短的问题

解决dedecms文章默认关键字太短的问题

在管理文章或软件的时候&#xff0c;大家在添加关键字和内容摘要的时候&#xff0c;是不是对这样的情况感到比较的郁闷&#xff0c;我的关键字设定的明明非常的好&#xff0c;可是添加或修改后&#xff0c;会被无缘无故的截去很多&#xff0c;想必大家也都非常的明白&#xff0…
阅读更多...
K8s-kubernetes(二)资源限制-详细介绍

K8s-kubernetes(二)资源限制-详细介绍

K8s如何合理规定对象资源使用 基本概念 Kubernetes中&#xff0c;占用资源的最小单元为单个PodKubernetes中&#xff0c;资源占用主要针对服务器的CPU、内存 为什么要做资源限制 对于Kubernetes集群而言&#xff0c;所有Pod都会占用K8s集群所在服务器的资源&#xff0c;如果不做…
阅读更多...
量子神经网络：从NISQ困境到逻辑比特革命的破局之路

量子神经网络：从NISQ困境到逻辑比特革命的破局之路

——解析2025千比特时代开发者的机遇与行动框架 引言：量子计算的“20比特魔咒”与千比特悖论 当开发者被建议“避免在>20量子比特电路训练”时，富士通却宣布2025年实现10,000物理比特系统。这一矛盾揭示了量子计算从NISQ时代向FTQC时代跃迁的核心逻辑：千比特突破非为直接…
阅读更多...
react+vite-plugin-react-router-generator自动化生成路由

react+vite-plugin-react-router-generator自动化生成路由

前言&#xff1a;react项目实际使用中有很多提升性能与功能的插件&#xff0c;今天来说一说vite里面提供的vite-plugin-react-router-generator&#xff0c;他主要提供了自动生成路由的功能&#xff0c;配合我们的loadable/component可以实现路由的懒加载与统一管理。1、实现效…
阅读更多...
服务器查看 GPU 占用情况的方法

服务器查看 GPU 占用情况的方法

在 Linux 系统中查看 GPU 占用情况&#xff0c;主要取决于你的 GPU 类型&#xff08;NVIDIA/AMD&#xff09;&#xff0c;以下是常用方法&#xff1a; 一、NVIDIA GPU&#xff08;最常用&#xff0c;如 RTX 系列、Tesla 系列&#xff09; 使用 NVIDIA 官方工具 nvidia-smi&…
阅读更多...
【Docker实战进阶】Docker 实战命令大全

【Docker实战进阶】Docker 实战命令大全

Docker 实战命令大全 Docker 实战场景&#xff0c;以 Nginx 为核心示例&#xff0c;梳理容器生命周期、镜像管理、网络配置、数据持久化及 Compose 编排的核心命令与最佳实践。 一、容器生命周期管理 1. 基础生命周期命令 docker run - 创建并启动容器 核心功能&#xff1a;基于…
阅读更多...
PyCharm 2025.2：面向工程师的 AI 工具

PyCharm 2025.2：面向工程师的 AI 工具

引言 随着人工智能技术的快速发展&#xff0c;AI 工程师对开发工具的需求也在不断提升。PyCharm 2025.2 版本带来了革命性的 AI 工具包&#xff0c;将 AI 开发所需的实验、调试、评估和部署功能原生集成到 IDE 中。这一重大更新不仅提升了开发效率&#xff0c;也为 AI 工程师提…
阅读更多...
爬虫逆向--Day15--核心逆向案例2(Python逆向实现请求加密、请求堆栈、拦截器关键字)

爬虫逆向--Day15--核心逆向案例2(Python逆向实现请求加密、请求堆栈、拦截器关键字)

一、逆向案例之Python逆向实现请求加密//具体代码如下 function l(t, e) {return t.toString().toUpperCase() > e.toString().toUpperCase() ? 1 : t.toString().toUpperCase() e.toString().toUpperCase() ? 0 : -1}function u(t) {for (var e Object.keys(t).sort(l)…
阅读更多...
时序数据库市场前景分析

时序数据库市场前景分析

1. 引言随着物联网&#xff08;IoT&#xff09;、工业互联网、金融科技、智慧城市等领域的快速发展&#xff0c;数据呈现爆发式增长&#xff0c;其中时间序列数据&#xff08;Time-Series Data&#xff09;占据了重要地位。时序数据库&#xff08;Time-Series Database, TSDB&a…
阅读更多...
【网络安全测试】Burp Suite使用指导、配置及常见问题介绍（有关必回）

【网络安全测试】Burp Suite使用指导、配置及常见问题介绍（有关必回）

Burp Suite 是**渗透测试领域事实上的标准工具**&#xff0c;尤其擅长Web应用与API安全测试。针对AI系统&#xff0c;它主要用于测试模型API、管理后台等Web接口。以下是专业级使用指南&#xff1a;---### **一、 核心模块与功能概览**| **模块** | **核心功能** | **AI测试重点…
阅读更多...
iOS 26 一键登录失效：三大运营商 SDK 无法正常获取手机号

iOS 26 一键登录失效：三大运营商 SDK 无法正常获取手机号

近期&#xff0c;不少开发者和用户反馈&#xff0c;在升级到 iOS 26 系统后&#xff0c;App 内的 一键登录功能无法正常使用。无论是移动、电信还是联通的 SDK&#xff0c;都会出现无法获取手机号的情况&#xff0c;导致用户需要改用短信验证码或手动输入手机号完成登录。问题现…
阅读更多...
OpenLayers与Vue.js结合实现前端地图应用

OpenLayers与Vue.js结合实现前端地图应用

OpenLayers与Vue.js结合实现前端地图应用 下面我将为您展示如何将OpenLayers与Vue.js结合创建一个功能丰富的前端地图应用。这个教程包含了基础地图展示、标记点、地图控件以及交互功能。 实现结果 实现思路 在Vue项目中集成OpenLayers库创建基础地图视图和OSM图层添加标记点…
阅读更多...
VisDrone数据集，专为无人机视觉任务打造

VisDrone数据集，专为无人机视觉任务打造

在农业巡查、环保监测、安防布控等广阔天地&#xff0c;无人机&#xff08;UAV&#xff09;早已超越了“拍照打卡”的酷炫标签&#xff0c;成为不可或缺的智能之眼。然而&#xff0c;当计算机视觉模型从地面“抬头”望向无人机视角时&#xff0c;迎接它的却是截然不同的挑战&am…
阅读更多...
【Python】Python 函数基本介绍（详细版）​

【Python】Python 函数基本介绍（详细版）​

Python 函数基本介绍&#xff08;详细版&#xff09;​ 文章目录Python 函数基本介绍&#xff08;详细版&#xff09;​前言一、函数的创建​1.1 函数名的命名规则​1.2 函数的创建​1.3 函数的调用​二、函数的参数​2.1 形参和实参​2.2 位置参数​2.3 关键字参数​2.4 默认参…
阅读更多...
【前端Vue】log-viewer组件的使用技巧

【前端Vue】log-viewer组件的使用技巧

目录 修改行号和组件的样式 修改高亮显示的内容和颜色 **log-viewer组件合集** 【前端Vue】如何优雅地展示带行号的日志文件或文本内容&#xff08;log-viewer组件的使用&#xff09; 【前端Vue】使用log-viewer组件时的踩坑记录 【前端Vue】log-viewer组件的使用技巧 【前…
阅读更多...
OpenCV Python——报错AttributeError: module ‘cv2‘ has no attribute ‘bgsegm‘，解决办法

OpenCV Python——报错AttributeError: module ‘cv2‘ has no attribute ‘bgsegm‘，解决办法

Python在使用 bgsubmog cv2.bgsegm.createBackgroundSubtractorMOG() 去除背景&#xff0c;报错AttributeError: module ‘cv2‘ has no attribute ‘bgsegm‘ 报错原因&#xff1a;使用的python环境中没有安装扩展包contrib 可以通过pip或者conda安装 pip install opencv-con…
阅读更多...
react + i18n：国际化

react + i18n：国际化

注意版本 我这是旧版 react react 16.8.6 i18next 20.6.1 react-i18next 11.18.6文件&#xff1a;zh.json {“hello”: "你好" }文件&#xff1a;en.json {“hello”: "hello" }文件&#xff1a;i18n.tsx import i18n from i18next; import { initRea…
阅读更多...
lesson38：MySQL数据库核心操作详解：从基础查询到高级应用

lesson38：MySQL数据库核心操作详解：从基础查询到高级应用

目录 引言 一、条件查询&#xff1a;精准筛选数据 1.1 基本语法 1.2 比较运算符 1.3 逻辑运算符 1.4 特殊条件查询 1.4.1 模糊查询&#xff08;LIKE&#xff09; 1.4.2 IN和NOT IN 1.4.3 BETWEEN AND 1.4.4 IS NULL和IS NOT NULL 二、聚合函数&#xff1a;数据统计与…
阅读更多...
最新文章

Copyright @ 2022~2023