前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（三）
知者乐水，仁者乐山。
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">农历 <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？ ①在一些静态网站项目中…...
Android 12 S 系统开机流程分析 - SetupSelinux（二）
Android 12 S 系统开机流程分析-FirstStageMain（一） 本文接着上文开始讲解，上文中最后一步执行后会执行init启动过程中的第二步SetupSelinux(Selinux配置阶段)，这样又会走到main.cpp中的main方法。 目录 1. SetupSelinux 1.1 …...
高速信号PCB布局怎么布？(电子硬件)
对于高速信号，pcb的设计要求会更多，因为高速信号很容易收到其他外在因素的干扰，导致实际设计出来的东西和原本预期的效果相差很多。 所以在高速信号pcb设计中，需要提前考虑好整体的布局布线，良好的布局可以很好的决定布…...
vue 子页面通过暴露属性，实现主页面的某事件的触发
目录 1.前言2.代码2-1 子页面2-2 主页面 1.前言 需求：当我在子页面定义了一个定时器，点击获取验证码，计时器开始倒计时，在这个定时器没有走完，退出关闭子页面，再次进入子页面，定时器此时会被刷…...
计算机丢失mfc140.dll是什么意思？附送修复教程
mfc140.dll是Microsoft Foundation Classes（MFC）库的一部分，是一种动态链接库（DLL）文件。MFC库是Microsoft提供的一种C编程框架，它为开发者提供了许多方便的工具和类，以简化Windows应用程序的开…...
R语言将向量横向转换为单行数据框，随后整合数量不确定的数据框
vector1 c(1, “karthik”, “IT”) names(vector1) c(“id”, “name”, “branch”) df data.frame(as.list(vector1)) print(df) 先给向量的元素命名，然后转换为列表，最后转换为数据框。 我的需求大概是这个样子：数量不确定的仅有单行…...
怎么测试websocket接口
在部分业务中，我们需要使用长连接，我们可以使用http长连接或者websocket，开发结束后难免会遇到测试问题，这里推荐2个，一个是postman，一个是网站 postman 测试网站 测这边推荐测试网站，支持ws/w…...
21 移动网络的前世今生
1、移动网络的发展历程 发展过程就是：2G,3G,4G,5G的过程，用2G看txt，用3G看jpg，用4G看avi。 2、2G网络 手机本来是用来打电话的，不是用来上网的，所以原来在2G时代，上网使用的不是IP网络&#…...
里氏替换原则
定义:子类对象能够替换程序中父类对象出现的任何地方，并且*保证原来程序的逻辑行为不变及正确性不被破坏*。 public class Transporter {private HttpClient httpClient;public Transporter(HttpClient httpClient) {this.httpClient httpClient;}public Response…...
【JS】Chapter11-正则阶段案例
站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 （十一）正则&阶段案例 1. 正则表达式 1.1 介绍 正则表达式（Regular Expression࿰…...
跨时钟域（Clock Domain Crossing，CDC）
本文参考：http://t.csdnimg.cn/VHga2 【数字IC基础】跨时钟域（CDC，Clock Domain Crossing）_ReRrain的博客-CSDN博客 同步设计：所有设计使用同一时钟源，频率相位可预知。 异步设计：设计中有两…...
PTA古风排版
中国的古人写文字，是从右向左竖向排版的。本题就请你编写程序，把一段文字按古风排版。 输入格式： 输入在第一行给出一个正整数N（<100），是每一列的字符数。第二行给出一个长度不超过1000的非空字符串&a…...
SQL 注入漏洞详解
SQL 注入漏洞详解 漏洞描述 sql注入漏洞是指恶意用户在应用与数据库交互的地方利用非法的操作获取数据库内容从以下两点分析: 没有对用户输入的数据进行充分的过滤和验证，导致一些用户利用此漏洞向数据库插入恶意sql语句非法请求数据库从而获得一些敏感数据在与数…...
关于阿里云 ACK ingress部分补充
强调： 本文只是作为记录,过一段时间会删除 跟唐老师学习网络 一 Nginx Ingress管理 ① 流量走向 需求： 应用绑定LoadBalance,会自动创建或使用SLBeip:port --> nodeport_ip:port --> service_ip:port --> pod_ip:port 支持的注解 通过…...
轻量封装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()…...
官方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…...
Vue+Django REST framework 打造生鲜电商项目课程下载树大根深
VueDjango REST framework 打造生鲜电商项目 链接：https://pan.baidu.com/s/1kEDxPsoTYSVWPYB2H0jbBw?pwd6666 提取码：6666Django是高水准的Python编程语言驱动的一个开源模型．视图，控制器风格的Web应用程序框架，它…...
react中遇到的分页问题
问题： 1.使用useState时不能够进行当前页码的改变，数据不会随着页码变化 2.删除当前页的最后一条数据时，页码返回上一页但是数据为空 解决： 1.由于useState和useRef的区别那我们就不考虑使用useState 2.再删除的逻辑当中添加判断条…...
变电站自动化系统中的安全措施分析及应用-安科瑞
安科瑞电气股份有限公司 上海嘉定 201801 摘要：阐述变电运行中的问题，电气自动化系统与安全运行措施，包括自动控制设备的投入，电气自动 化与计算机技术相、设备数据的采集与处理、自动化系统的升级、人工智能技术的应用。 关键…...
【MongoDB】索引 – 文本索引
一、准备工作 这里准备一些数据 db.books.insertMany([{_id: 1, name: "Java", description: "java 入门图书", translation: [{ language: "english", description: "java basic book" }]},{_id: 2, name: "C", descript…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
探索Selenium：自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
适应性Java用于现代 API：REST、GraphQL 和事件驱动
在快速发展的软件开发领域，REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名，不断适应这些现代范式的需求。随着不断发展的生态系统，Java 在现代 API 方…...
【C++】纯虚函数类外可以写实现吗？
1. 答案 先说答案，可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）
题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...
Electron简介（附电子书学习资料）
一、什么是Electron？ Electron 是一个由 GitHub 开发的 开源框架，允许开发者使用 Web技术（HTML、CSS、JavaScript） 构建跨平台的桌面应用程序（Windows、macOS、Linux）。它将 Chromium浏览器内核 和 Node.j…...
本地部署drawDB结合内网穿透技术实现数据库远程管控方案
文章目录 前言1. Windows本地部署DrawDB2. 安装Cpolar内网穿透3. 实现公网访问DrawDB4. 固定DrawDB公网地址 前言 在数字化浪潮席卷全球的背景下，数据治理能力正日益成为构建现代企业核心竞争力的关键因素。无论是全球500强企业的数据中枢系统，还是初创…...