AJAX學習（2）

目錄

一.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