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

前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（三）

news 2025/6/9 11:44:48

知者乐水，仁者乐山。

XMLHttpRequest

AJAX原理 - XMLHttpRequest

前面与服务器交互使用的不是axios吗？

ajax并不等于axios

我们使用的axios的内部，实际上对XHR对象/原理的封装

为什么还要学习ajax？

①在一些静态网站项目中，与服务器交互只有一到两处，可以采用XHR对象，几行代码就能与服务器交互；

②也能了解axios内部是如何与服务器交互，了解axios内部原理。

使用 XMLHttpRequest

使用XMLHttpRequest实践获取数据，代码如下：

返回的是对象结构的json字符串。

以前使用axios请求返回的不是一个对象吗，这里为何是json字符串？

前面使用axios，会帮你把json字符串转成对象。

这里需要自己转化，JSON.parse()

以前axios请求的结果，里面有很多对key和value，包括data，去哪了？

axios内部把结果转化完以后，挂载到结果对象（有很多其他key和value）的data属性下。

这里响应结果为简单对象的json字符串，还需要自己转化。

转化后使用它（取出数据，拼接展示）：

总结：

XMLHttpRequest - 查询参数

携带查询参数

案例

打印查询参数对象转化得来的查询参数字符串，出现的%××%××%××不是乱码，

它叫做url编码，

为什么要进行url编码，因为url网址有个规定，只能出现英文数字以及特殊符号。

那为什么浏览器上边的搜索框/地址栏有中文？

因为浏览器会对其进行格式化，可显示中文；

但是当在代码中，和服务器沟通时，传递的url网址需要在网络进行传输，

就会进行一种编码（url编码）

在url解码网站中进行解码

案例实操代码/效果：

<!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. 使用XHR对象，查询地区列表const xhr = new XMLHttpRequest()xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)xhr.addEventListener('loadend', () => {console.log(xhr.response)const data = JSON.parse(xhr.response)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})xhr.send()})</script>
</body></html>

XMLHttpRequest - 数据提交

实操代码：

<!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', 'http://hmajax.itheima.net/api/register')xhr.addEventListener('loadend', () => {console.log(xhr.response)})// 设置请求头-告诉服务器内容类型（JSON字符串）xhr.setRequestHeader('Content-Type', 'application/json')// 准备提交的数据const userObj = {username: 'itheima007',password: '7654321'}const userStr = JSON.stringify(userObj)// 设置请求体，发起请求xhr.send(userStr)})</script>
</body></html>

可以在“网络”中标头看到我们的请求头设置，

可以在“网络”中载荷看到我们的请求体携带数据，

重复提交会被提醒，“账号被占用”

Promise

认识promise

语法：

1.借助浏览器内置的promise构造函数，并传入一个回调函数，promise提供了resolve和reject两个函数。

在回调函数中执行异步代码，异步代码有了结果之后可以做一个判断，成功调用resolve方法，失败调用reject方法。

2.promise对象使用then方法，传入回调函数，接受promise对象内成功的结果。

3.继续使用catch方法，传入回调函数，接受promise对象内失败的结果。

实操代码：

<!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管理异步任务*/// 1. 创建Promise对象const p = new Promise((resolve, reject) => {// 2. 执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功结果')reject(new Error('模拟AJAX请求-失败结果'))}, 2000)})// 3. 获取结果p.then(result => {console.log(result)}).catch(error => {console.log(error)})</script>
</body></html>

总结：

Promise - 三种状态

迅速打开控制台查看，发现promise在高压柜台为“pending”

promise创建时，构造函数传入的回调函数里的代码会立刻执行，先于console.log(p)。

如果等到resolve结果打印出来再查看，状态变为fullfilled

总结：

使用Promise + XHR 获取省份列表

如果请求结果直接在promise构造函数的参数回调函数中打印

promise对象的一个好处：异步结果有成功与失败

调用resolve和reject关联结果处理函数，在then和catch回调中做后续处理

xhr如何判断响应成功还是失败？——响应状态码

打印xhr对象，我们可以看到status属性

如果响应状态码是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>案例_使用Promise+XHR_获取省份列表</title>
</head><body><p class="my-p"></p><script>/*** 目标：使用Promise管理XHR请求省份列表*  1. 创建Promise对象*  2. 执行XHR异步代码，获取省份列表*  3. 关联成功或失败函数，做后续处理*/// 1. 创建Promise对象const p = new Promise((resolve, reject) => {// 2. 执行XHR异步代码，获取省份列表const xhr = new XMLHttpRequest()xhr.open('GET', 'http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', () => {// xhr如何判断响应成功还是失败的？// 2xx开头的都是成功响应状态码if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})// 3. 关联成功或失败函数，做后续处理p.then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {// 错误对象要用console.dir详细打印console.dir(error)// 服务器返回错误提示消息，插入到p标签显示document.querySelector('.my-p').innerHTML = error.message})</script>
</body></html>

成功的情况：

失败的情况（url添加无用多余数字字符）：

在浏览器控制台查看请求，

状态码变成404

响应结果为h1标签，

错误对象比较特殊，要用console.dir进行详细打印

①使用console.log进行打印（对象无法展开查看其属性和方法）

②使用console.dir进行打印

将错误响应结果插入到p标签

封装简易版 axios

简易初始版

<!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. 定义myAxios函数，接收配置对象，返回Promise对象*  2. 发起XHR请求，默认请求方法为GET*  3. 调用成功/失败的处理程序*  4. 使用myAxios函数，获取省份列表展示*/// 1. 定义myAxios函数，接收配置对象，返回Promise对象function myAxios(config) {return new Promise((resolve, reject) => {// 2. 发起XHR请求，默认请求方法为GETconst xhr = new XMLHttpRequest()xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {// 3. 调用成功/失败的处理程序if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}// 4. 使用myAxios函数，获取省份列表展示myAxios({url: 'http://hmajax.itheima.net/api/province'}).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>

修改支持传递查询参数

<!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: 'http://hmajax.itheima.net/api/area',params: {pname: '辽宁省',cname: '大连市'}}).then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')})</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>封装_简易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) {// 2. 转换数据类型，在send中发送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: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username: 'itheima999',password: '666666'}}).then(result => {console.log(result)}).catch(error => {console.dir(error)})})</script>
</body></html>

案例 - 天气预报

核心代码：

/*** 目标1：默认显示-北京市天气*  1.1 获取北京市天气数据*  1.2 数据展示到页面*/
// 获取并渲染城市天气函数
function getWeather(cityCode) {// 1.1 获取北京市天气数据myAxios({url: 'http://hmajax.itheima.net/api/weather',params: {city: cityCode}}).then(result => {console.log(result)const wObj = result.data// 1.2 数据展示到页面// 阳历和农历日期const dateStr = `<span class="dateShort">${wObj.date}</span><span class="calendar">农历&nbsp;<span class="dateLunar">${wObj.dateLunar}</span></span>`document.querySelector('.title').innerHTML = dateStr// 城市名字document.querySelector('.area').innerHTML = wObj.area// 当天气温const nowWStr = `<div class="tem-box"><span class="temp"><span class="temperature">${wObj.temperature}</span><span>°</span></span></div><div class="climate-box"><div class="air"><span class="psPm25">${wObj.psPm25}</span><span class="psPm25Level">${wObj.psPm25Level}</span></div><ul class="weather-list"><li><img src="${wObj.weatherImg}" class="weatherImg" alt=""><span class="weather">${wObj.weather}</span></li><li class="windDirection">${wObj.windDirection}</li><li class="windPower">${wObj.windPower}</li></ul></div>`document.querySelector('.weather-box').innerHTML = nowWStr// 当天天气const twObj = wObj.todayWeatherconst todayWStr = `<div class="range-box"><span>今天：</span><span class="range"><span class="weather">${twObj.weather}</span><span class="temNight">${twObj.temNight}</span><span>-</span><span class="temDay">${twObj.temDay}</span><span>℃</span></span></div><ul class="sun-list"><li><span>紫外线</span><span class="ultraviolet">${twObj.ultraviolet}</span></li><li><span>湿度</span><span class="humidity">${twObj.humidity}</span>%</li><li><span>日出</span><span class="sunriseTime">${twObj.sunriseTime}</span></li><li><span>日落</span><span class="sunsetTime">${twObj.sunsetTime}</span></li></ul>`document.querySelector('.today-weather').innerHTML = todayWStr// 7日天气预报数据展示const dayForecast = wObj.dayForecastconst dayForecastStr = dayForecast.map(item => {return `<li class="item"><div class="date-box"><span class="dateFormat">${item.dateFormat}</span><span class="date">${item.date}</span></div><img src="${item.weatherImg}" alt="" class="weatherImg"><span class="weather">${item.weather}</span><div class="temp"><span class="temNight">${item.temNight}</span>-<span class="temDay">${item.temDay}</span><span>℃</span></div><div class="wind"><span class="windDirection">${item.windDirection}</span><span class="windPower">${item.windPower}</span></div></li>`}).join('')// console.log(dayForecastStr)document.querySelector('.week-wrap').innerHTML = dayForecastStr})
}// 默认进入网页-就要获取天气数据（北京市城市编码：'110100'）
getWeather('110100')/*** 目标2：搜索城市列表*  2.1 绑定input事件，获取关键字*  2.2 获取展示城市列表数据*/
// 2.1 绑定input事件，获取关键字
document.querySelector('.search-city').addEventListener('input', (e) => {console.log(e.target.value)// 2.2 获取展示城市列表数据myAxios({url: 'http://hmajax.itheima.net/api/weather/city',params: {city: e.target.value}}).then(result => {console.log(result)const liStr = result.data.map(item => {return `<li class="city-item" data-code="${item.code}">${item.name}</li>`}).join('')console.log(liStr)document.querySelector('.search-list').innerHTML = liStr})
})/*** 目标3：切换城市天气*  3.1 绑定城市点击事件，获取城市code值*  3.2 调用获取并展示天气的函数*/
// 3.1 绑定城市点击事件，获取城市code值
document.querySelector('.search-list').addEventListener('click', e => {if (e.target.classList.contains('city-item')) {// 只有点击城市li才会走这里const cityCode = e.target.dataset.codeconsole.log(cityCode)// 3.2 调用获取并展示天气的函数getWeather(cityCode)}
})

前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（三）

知者乐水，仁者乐山。 XMLHttpRequest AJAX原理 - XMLHttpRequest 前面与服务器交互使用的不是axios吗？ ajax并不等于axios 我们使用的axios的内部，实际上对XHR对象/原理的封装为什么还要学习ajax？ ①在一些静态网站项目中…...

编程日记 2023/11/10 0:04:52

Android 12 S 系统开机流程分析 - SetupSelinux（二）

Android 12 S 系统开机流程分析-FirstStageMain（一） 本文接着上文开始讲解，上文中最后一步执行后会执行init启动过程中的第二步SetupSelinux(Selinux配置阶段)，这样又会走到main.cpp中的main方法。目录 1. SetupSelinux 1.1 …...

编程日记 2023/11/10 0:03:52

高速信号PCB布局怎么布？(电子硬件)

对于高速信号，pcb的设计要求会更多，因为高速信号很容易收到其他外在因素的干扰，导致实际设计出来的东西和原本预期的效果相差很多。所以在高速信号pcb设计中，需要提前考虑好整体的布局布线，良好的布局可以很好的决定布…...

编程日记 2023/11/10 0:02:51

vue 子页面通过暴露属性，实现主页面的某事件的触发

目录 1.前言2.代码2-1 子页面2-2 主页面 1.前言需求：当我在子页面定义了一个定时器，点击获取验证码，计时器开始倒计时，在这个定时器没有走完，退出关闭子页面，再次进入子页面，定时器此时会被刷…...

编程日记 2023/11/10 0:01:50

计算机丢失mfc140.dll是什么意思？附送修复教程

mfc140.dll是Microsoft Foundation Classes（MFC）库的一部分，是一种动态链接库（DLL）文件。MFC库是Microsoft提供的一种C编程框架，它为开发者提供了许多方便的工具和类，以简化Windows应用程序的开…...

编程日记 2023/11/10 0:00:49

R语言将向量横向转换为单行数据框，随后整合数量不确定的数据框

vector1 c(1, “karthik”, “IT”) names(vector1) c(“id”, “name”, “branch”) df data.frame(as.list(vector1)) print(df) 先给向量的元素命名，然后转换为列表，最后转换为数据框。我的需求大概是这个样子：数量不确定的仅有单行…...

编程日记 2023/11/9 23:59:48

怎么测试websocket接口

在部分业务中，我们需要使用长连接，我们可以使用http长连接或者websocket，开发结束后难免会遇到测试问题，这里推荐2个，一个是postman，一个是网站 postman 测试网站测这边推荐测试网站，支持ws/w…...

编程日记 2023/11/9 23:58:47

21 移动网络的前世今生

1、移动网络的发展历程发展过程就是：2G,3G,4G,5G的过程，用2G看txt，用3G看jpg，用4G看avi。 2、2G网络手机本来是用来打电话的，不是用来上网的，所以原来在2G时代，上网使用的不是IP网络&#…...

编程日记 2023/11/9 23:57:47

里氏替换原则

定义:子类对象能够替换程序中父类对象出现的任何地方，并且*保证原来程序的逻辑行为不变及正确性不被破坏*。 public class Transporter {private HttpClient httpClient;public Transporter(HttpClient httpClient) {this.httpClient httpClient;}public Response…...

编程日记 2023/11/9 23:56:46

【JS】Chapter11-正则阶段案例

站在巨人的肩膀上黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 （十一）正则&阶段案例 1. 正则表达式 1.1 介绍正则表达式（Regular Expression&#xff0…...

编程日记 2023/11/9 23:52:40

跨时钟域（Clock Domain Crossing，CDC）

本文参考：http://t.csdnimg.cn/VHga2 【数字IC基础】跨时钟域（CDC，Clock Domain Crossing）_ReRrain的博客-CSDN博客同步设计：所有设计使用同一时钟源，频率相位可预知。异步设计：设计中有两…...

编程日记 2023/11/9 23:51:39

PTA古风排版

中国的古人写文字，是从右向左竖向排版的。本题就请你编写程序，把一段文字按古风排版。输入格式： 输入在第一行给出一个正整数N（<100），是每一列的字符数。第二行给出一个长度不超过1000的非空字符串&a…...

编程日记 2023/11/9 23:50:37

SQL 注入漏洞详解

SQL 注入漏洞详解漏洞描述 sql注入漏洞是指恶意用户在应用与数据库交互的地方利用非法的操作获取数据库内容从以下两点分析: 没有对用户输入的数据进行充分的过滤和验证，导致一些用户利用此漏洞向数据库插入恶意sql语句非法请求数据库从而获得一些敏感数据在与数…...

编程日记 2023/11/9 23:49:36

关于阿里云 ACK ingress部分补充

强调： 本文只是作为记录,过一段时间会删除跟唐老师学习网络一 Nginx Ingress管理 ① 流量走向需求： 应用绑定LoadBalance,会自动创建或使用SLBeip:port --> nodeport_ip:port --> service_ip:port --> pod_ip:port 支持的注解通过…...

编程日记 2023/11/9 23:48:35

轻量封装WebGPU渲染系统示例＜22＞- 渲染到纹理(RTT)(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/RTTTest.ts 当前示例运行效果: 此示例基于此渲染系统实现，当前示例TypeScript源码如下: export class RTTTest {private mRscene new RendererScene()…...

编程日记 2023/11/9 23:47:32

官方Redis视图化工具Redisinsight

一、下载最新版本的 docker pull redislabs/redisinsight mkdir /data/redisinsight docker run -d -u root -p 8001:8001 -v /etc/localtime:/etc/localtime -v /data/redisinsight:/db --restartunless-stopped redislabs/redisinsight:latest 二、浏览器打开 http://192…...

编程日记 2023/11/9 23:46:31

Vue+Django REST framework 打造生鲜电商项目课程下载树大根深

VueDjango REST framework 打造生鲜电商项目链接：https://pan.baidu.com/s/1kEDxPsoTYSVWPYB2H0jbBw?pwd6666 提取码：6666Django是高水准的Python编程语言驱动的一个开源模型．视图，控制器风格的Web应用程序框架，它…...

编程日记 2023/11/9 23:45:31

react中遇到的分页问题

问题： 1.使用useState时不能够进行当前页码的改变，数据不会随着页码变化 2.删除当前页的最后一条数据时，页码返回上一页但是数据为空解决： 1.由于useState和useRef的区别那我们就不考虑使用useState 2.再删除的逻辑当中添加判断条…...

编程日记 2023/11/9 23:44:28

变电站自动化系统中的安全措施分析及应用-安科瑞

安科瑞电气股份有限公司上海嘉定 201801 摘要：阐述变电运行中的问题，电气自动化系统与安全运行措施，包括自动控制设备的投入，电气自动化与计算机技术相、设备数据的采集与处理、自动化系统的升级、人工智能技术的应用。关键…...

编程日记 2023/11/9 23:43:26

【MongoDB】索引 – 文本索引

一、准备工作这里准备一些数据 db.books.insertMany([{_id: 1, name: "Java", description: "java 入门图书", translation: [{ language: "english", description: "java basic book" }]},{_id: 2, name: "C", descript…...

编程日记 2023/11/9 23:42:25

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（上）

概述在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...

编程新知 2025/6/9 9:23:17

【优选算法】分治

一：颜色分类 class Solution { public:void sortColors(vector<int>& nums) {// 三指针法int n nums.size();int left -1, right n, i 0;while(i < right){if(nums[i] 0) swap(nums[left], nums[i]);else if(nums[i] 2) swap(nums[--right], num…...

编程新知 2025/6/9 8:05:44

kafka（windows）

目录介绍下载配置测试介绍 Kafka是一个分布式流媒体平台，类似于消息队列或企业信息传递系统。下载 Kafka对于Zookeeper是强依赖，所以安装Kafka之前必须先安装zookeeper 官网：Apache Kafka 下载此安装包并解压配置新建log…...

编程新知 2025/6/9 7:18:39

Go语言--语法基础5--基本数据类型--输入输出（1）

I : input 输入操作格式化输入 scanf O ： output 输出操作格式化输出 printf 标准输入》键盘设备》 Stdin 标准输出》显示器终端》 Stdout 异常输出》显示器终端》 Stderr 1 、输入语句 Go 语言的标准输出流在打印到屏幕时有些参数跟别的语言…...

编程新知 2025/6/9 5:40:23

如何使用 HTML、CSS 和 JavaScript 随机更改图片颜色

原文：如何使用 HTML、CSS 和 JavaScript 随机更改图片颜色 | w3cschool笔记 （请勿标记为付费！！！！） 在网页开发中，为图片添加动态效果可以显著提升用户体验。今天，我将向…...

编程新知 2025/6/9 5:01:36

关于GitHub action云编译openwrt

特别声明：此教程仅你有成功离线编译的经验后，使用下列教程更佳不建议没有任何成功经验的人进行云编译 1、准备工作使用GitHub云编译模板 GitHub - jxjxcw/build_openwrt: 利用Actions在线云编译openwrt固件，适合官方源码，lede，lienol和immortalwrt源码，支持X86，电…...

编程新知 2025/6/9 2:17:49