前端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…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
从零实现STL哈希容器：unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
elementUI点击浏览table所选行数据查看文档
项目场景： table按照要求特定的数据变成按钮可以点击 解决方案： <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）
UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...
针对药品仓库的效期管理问题，如何利用WMS系统“破局”
案例： 某医药分销企业，主要经营各类药品的批发与零售。由于药品的特殊性，效期管理至关重要，但该企业一直面临效期问题的困扰。在未使用WMS系统之前，其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...
STM32标准库-ADC数模转换器
文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”：输入模块（GPIO、温度、V_REFINT）1.4.2 信号 “调度站”：多路开关1.4.3 信号 “加工厂”：ADC 转换器（规则组 注入…...
Linux入门(十五)安装java安装tomcat安装dotnet安装mysql
安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了，系统很多命…...