前后端交互的弯弯绕绕

前后端交互：

🆗，收拾一下心情让我们来聊一聊AJax吧，随着前端的飞速发展，前后的交互也发生了天翻地覆的变化：

前后端交互的方式有很多： AJAX、表单提交、WebSocket、RESTful API、...

这对新入行的朋友很不友好，乱七八糟都不知道学什么怎么学了，学了没用？？

傻傻呼呼让人头疼😵😵本篇文章学习至： 黑马前端AJAX入门到实战 ✅

官方文档也超级细致，细致到都不用看视频都能看懂了

Axios 快速上手

Axios框架全称 Ajax – I/O – system 官方文档🔗

不是一种新技术，本质上还是对原生XMLHttpRequest的封装，用于浏览器、nodejs HTTP客户端：HTTP请求响应工具；

它基于 Promise，提供了一种简洁且强大的方式来发送异步请求，使用 Axios开发者可以轻松地发送：

GET、POST、PUT、DELETE 等 HTTP 请求，并处理响应；Axios 的主要特点包括：

  • 支持浏览器和 Node.js：在不同的环境中使用相同的 API
  • Promise-based：使得异步操作更加简洁
  • 取消请求：提供了一种方式来取消请求
  • 客户端支持防御 CSRF/XSRF：安全特性，防止跨站请求伪造
  • 转换请求数据和响应数据：自动将 JSON 数据转换为 JavaScript 对象
  • 拦截请求和响应：允许在请求或响应被 then 或 catch 处理之前拦截它们

安装使用：

常见安装方式：

  • npm安装： npm install axios 在框架中使用，本篇不涉及框架就不使用该方式；

  • 通过cdn引入： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios基础语法： Demo案例——查询全国省份接口：http://localhost:3000/area/provinceList

axios({url: '目标资源地址',
}).then(result => {// 对服务器返回的数据做后续处理
})

<!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>AxiosDemo使用:</title>
</head>
<body><!-- 目标: 使用axios库,获取省份列表数据,展示到页面上 --><!-- 1.引入axios库 --><h1>AxiosDemo使用: </h1><p class="myp" ></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2. 使用axios函数axios({url: 'http://localhost:3000/area/provinceList'}).then(result => {// 把准备好省份列表，插入到页面document.querySelector('.myp').innerHTML = result.data.provinceList.join('<br>') })</script>
</body>
</html>

在这里插入图片描述

为方便测试，本人简单定义了一个：Node+Expresss+lowdb后端服务 获取地址：示例Demo

  • 关于Node的学习： Node快速入门、Express基础Deom、Express进阶升级

常用请求方法

Ok，上述展示了Axios 最基本的用法： 一个无参的GET请求，并将结果渲染至页面，

当然我们知道前后端交互是有很多规则的，不用担心Axios都可以应付通过调整各种配置，axios实例常用配置：

  • url 请求路径
  • method 接口请求类型
  • headers 设置请求头，类型：Object
  • params 请求参数，将参数拼接在URL上，类型：Object
  • data 请求参数，将参数放到请求体中，类型：Object
  • timeout 请求超时时长，单位ms，类型：Number
  • baseURL 请求的域名，基本地址，类型：String

下面让咱们来慢慢深入了解：

URL带参：

根据省份查询下属市区： GET请求、http://localhost:3000/area/cityList?province=江苏省

方式一： 直接和上面案例一样，使用全URL，参数拼接在URL上进行请求；甚至如此简单⏬

axios('http://localhost:3000/area/cityList?province=江苏省').then(result => {console.log(result);console.log(result.data);
})

方式二：

method： 设置接口请求类型，常见的请求类型：GET(默认)、POST、PUT、DELETE、PATCH 对应服务器执行的操作；

params： 上述直接URL拼接虽然可以满足请求，但对于非固定参数值，固定URL无法满足场景，

Params会将{键:值}处理拼接URL请求：url?键=值 而使前端更方便操作，请求数据；

axios({url:'http://localhost:3000/area/cityList',method: 'GET',params: { province:'江苏省' }
}).then(result => {console.log(result);console.log(result.data);
})

路由命名：

路由命名： 是在创建路由时为其指定一个唯一的名称，这样，你就可以在代码中引用路由名称，而不是写出完整的URL路径

对于维护|管理大型应用的路由非常有帮助，当路径需要更改时，你只需要更新路由配置，而不需要修改引用该路由的每个地方

根据省份|市区查询下属区县： GET请求、http://localhost:3000/area/district/:province/:city 动态参数

查询江苏省、徐州市下属区县： GET请求、http://localhost:3000/area/district/江苏省/徐州市

//路由命名: 根据省份|市区查询下属区县
const {province,city} = { province:"江苏省",city:"徐州市" }
axios(`http://localhost:3000/area/district/${province}/${city}`).then(result => {console.log(result);console.log(result.data);
})

JSON 数据：

JSON请求： 程序开发中为了方便数据传输一种格式，通过在请求头设置：application/json 后端可以更方便解析对象；

用户注册请求： POST http://127.0.0.1:3000/users/register

请求JSON：{"userName": "wsm","Password": "000000"}

  • data： 属性中的信息将被包含在请求体中发送到服务器；
//JSON数据请求: 注册用户信息,POST请求JSON数据;
axios({url:'http://127.0.0.1:3000/users/register',method: 'POST',data: {userName: "wsm",Password: "000000"}
}).then(result =>{console.log(result);console.log(result.data);
})

表单文件上传：

文件上传： 使用 FormData 表单数据对象装入

因为文件不是以前的数字和字符串，一般需要放入 FormData 以键值对-文件流的数据传递，可以查看请求体-确认请求体结构
在这里插入图片描述

<body><!-- 文件选择元素 --><input type="file" class="upload"><img src="" alt="" class="my-img"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标：图片上传，显示到网页上 */// 文件选择元素->change改变事件document.querySelector('.upload').addEventListener('change', e => {// 1. 获取图片文件console.log(e.target.files[0])// 2. 使用 FormData 携带图片文件const fd = new FormData()fd.append('img', e.target.files[0])// 3. 提交到服务器，获取图片url网址使用axios({url: 'http://127.0.0.1:3000/users/userImg',method: 'POST',data: fd}).then(result => {console.log(result)// 取出图片url网址，用img标签加载显示const imgUrl = result.data.imgUrldocument.querySelector('.my-img').src = imgUrl})})</script>
</body>
  • data： 属性支持将FormData对象直接，发送至后端服务器；

Axios 错误处理：

接口请求，过程中难免会遇到异常错误： axios 语法中要如何处理呢？根据响应状态码?

因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上，

使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理，具体的错误处理过程如下：

  • 如果请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围，
    Axios 会捕获到一个 error.response 对象，其中包含了响应的数据、状态码和头部信息
  • 如果请求已经成功发起，但没有收到响应，error.request 也会被捕获
  • 如果在发送请求时出了问题，比如请求配置有误；

开发者可以使用 .catch() 方法来处理这些错误；

Demo用户注册请求： 部分平台对用户名有唯一的限制，对于相同的用户会错误提醒；

  • POST http://127.0.0.1:3000/users/register
  • 请求JSON：{"userName": "wsm","Password": "000000"}
//JSON数据请求: 注册用户信息,POST请求JSON数据;
axios({url:'http://127.0.0.1:3000/users/register',method: 'POST',data: {userName: "wsm",Password: "000000"}
}).then(result =>{alert('成功');console.log(result);console.log(result.data);
}).catch(error => {alert('失败');console.log(error);
})

AJax

Ajax Asynchronous JavaScript and XML：异步网络请求，Ajax能够让页面无刷新的请求数据；

在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好；

我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源；

我们只是需要修改页面的部分数据，也希望不刷新页面，因此 异步网络请求 就应运而生；

实现ajax的方式有多种： 原生XMLHttpRequest，JQuery封装Ajax，以及Axios：

  • 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦

  • JQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架；

  • Axios 是一个基于Promise 用于浏览器和Nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，它是Promise实现版本；

    Axios设计简洁，API简单，支持浏览器和Node，很好的与各种前端框架整合 因此，推荐大家在项目中使用Axios库；

学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理： 语法如下：

//创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
//配置请求
xhr.open('请求方法', '请求url网址');//监听处理响应结果: 需要声明在请求的前面;
xhr.addEventListener('loadend', () => {console.log(xhr.response)
})//发送请求
xhr.send();

XMLHttpRequest 对象： AJAX 的核心对象，它提供了在 JavaScript 中发送 HTTP 请求和接收 HTTP 响应的能力；

配置请求： 使用 open 方法配置请求的类型（如 “GET” 或 “POST”）、URL 和是否异步

发送请求： 使用 send 请求，send({});参数是通过请求体携带的数据，

而GET请求是通过请求头携带数据的，所以要把send的参数置为null

处理服务器响应： 通过监听 XMLHttpRequest 对象的 onreadystatechange 事件来处理服务器的响应

//在xhr对象执行收发数据的时候，它会经历五种状态:
//0 未初始化|未启动、1 启动,已经调用 open(),尚未调用 send();
//2 发送状态，已经调用 send()，但尚未接收到响应、3 接收 已经接收到部分响应数据
//4 完成,已经接收到全部响应数据，而且已经可以在浏览器中使用了
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status < 300 ){console.log(xhr.responseText);}
};

可以通过上述监听来进行响应处理： 当然比较麻烦，所以还有一种方式：为 XMLHttpRequest 对象添加一个事件监听器

用来监听 loadend 事件，loadend 事件在请求结束时触发，无论请求是成功还是失败；

常用请求方法：

URL带参：

查询参数原理要携带的位置和语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

原生 XHR 需要自己在 url 后面携带查询参数字符串，没有 axios 帮助我们把 params 参数拼接到 url 字符串后面了

//创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();//配置请求
xhr.open('GET', 'http://localhost:3000/area/cityList?province=江苏省');
//监听处理响应结果: 
xhr.addEventListener('loadend', () => {const data = JSON.parse(xhr.response);  //解析响应内容console.log(data);  
});
//发送请求
xhr.send();

多参数查询：

多个查询参数，如果自己拼接很麻烦： URLSearchParams 把参数对象转成“参数名=值&参数名=值“格式的字符串

// 1. 创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({参数名1: 值1,参数名2: 值2
})// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()
// 结果：参数名1=值1&参数名2=值2

上述Demo升级🆙：

//创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
//创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({ province : "江苏省" });
//配置请求
xhr.open('GET', `http://localhost:3000/area/cityList?${paramsObj.toString()}`); //拼接请求参数;
//监听处理响应结果: 
xhr.addEventListener('loadend', () => {const data = JSON.parse(xhr.response);  //解析响应内容console.log(data);  
});
//发送请求
xhr.send();

JSON 请求数据：

原生AJax请求JSON数据： 没有 axios 方便：

  • 需要手动设置请求头：Content-Type：application/json 告诉服务器端，发送的内容类型是 JSON 字符串；
  • 传递的请求体数据，也需要手动的进行JSON转换；send({k:v}); 方法中调用；
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {console.log(xhr.response)
})// 1. 告诉服务器，我传递的内容类型，是 JSON 字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 2. 准备数据并转成 JSON 字符串
const user = { userName: 'wsm', Password: '000000' }
const userStr = JSON.stringify(user)
// 3. 发送请求体数据
xhr.send(userStr)

Promise

Promise是异步编程的一种解决方案： 它代表了一个异步操作的最终完成（或失败）及其结果值

简单来说，Promise是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果

  • Promise逻辑更清晰，是axios 函数内部运作的机制，主要用来解决回调地狱：

Promise 管理异步任务，语法：

  • 创建Promise对象： new Promise; 构造函数是 同步执行的，并可以在其中定义异步任务；

    它接受一个执行器，函数作为参数，执行器函数又接受两个参数，resolve和reject

    分别用于在异步操作成功时兑现Promise，或者在出现错误时拒绝Promise

  • Promise.then 方法是异步执行，当执行器中执行resolve 触发回调函数；

  • Promise.catch 方法是异步执行，当执行器中执行reject 触发回调函数；支持链式编程，使代码结构清晰；

// 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {// 2. 执行异步任务-并传递结果// 成功调用: resolve(值) 触发 then() 执行// 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {// 成功
}).catch(error => {// 失败
})

示例代码： 使用Promise管理异步任务，通过切换调用的函数，而分别输出：then`catch`回调函数；

// 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)
})

Promise 常用函数：

  • then()：添加处理程序来处理Promise的兑现或拒绝
  • catch()：添加一个拒绝（操作失败）的回调函数，并返回一个Promise
  • finally()：添加一个事件处理器，无论Promise对象最后的状态如何都会被调用

Promise 的状态

Promise对象的状态是对异步操作的描述，Promise对象有三种状态：

  • 待定（pending）：这是Promise创建后的初始状态，在这个状态下，异步操作还没有完成，也没有失败

    Promise对象将保持这个状态直到它被兑现（fulfilled）或被拒绝（rejected）

  • 已兑现（fulfilled）：当异步操作成功完成，并且Promise对象得到了一个值时，它就会转变为兑现状态

    在这个状态下，我们可以通过then()方法设置的回调函数来获取这个值;

  • 已拒绝（rejected）：如果异步操作失败，或者在执行过程中抛出了一个错误，Promise对象就会变为拒绝状态

    在这个状态下，我们可以通过then()方法或catch()方法设置的回调函数来处理这个错误；

    但是如果程序上的错误，得通过catch()去拿到失败消息，在then()中是获取不了的；

    //then 支持多参数,eroor函数处理异常结果;
promise.then(value => { console.log('兑现:', value); },error => { console.log('拒绝:', error); }
);
//catch 处理异常结果;
promise.catch(error=>{ console.log('拒绝:', error); });

  • 三种状态：遇到resolve或者reject之前，都处于这个状态，且可以改变：

    但如果确定了状态fulfilled/reject，则结果将永远不变，不能再次修改；

Promise 结合 XHR

使用Promise➕XHR请求省份列表： 模拟 axios 函数封装，更深入了解 axios 内部运作原理

需求：基于 Promise 和 XHR 封装 myAxios 函数，获取省份列表展示到页面：

function myAxios(config) {return new Promise((resolve, reject) => {// XHR 请求// 调用成功/失败的处理程序})
}myAxios({url: '目标资源地址'
}).then(result => {}).catch(error => {})

/* 目标：封装_简易axios函数_获取省份列表 */
// 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://localhost:3000/area/provinceList'
}).then(result => {console.log(result);
}).catch(error => {console.log(error);
})

Axios回调地狱：

回调地狱 Callback Hell，有时也被称为**“金字塔厄运”：**Pyramid of Doom

指在 JavaScript 中使用回调函数嵌套过多、层级过深，导致代码难以理解、难以维护和可读性差的一种情况

  • 这种情况通常出现在处理异步操作的场景，比如文件读取、数据库查询、网络请求等：

  • 在回调地狱中，每个异步操作结果都依赖于前一个操作的完成，这就导致了大量的回调函数嵌套，形成了深层次的嵌套结构

Demo需求： 展示默认第一个省，第一个城市，第一个地区在下拉菜单中

  • 因为： 查询地区接口需要，省份|城市参数，查询城市又需要省份参数，默认省份处于第一层
  • 所以： 在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱；
// 1. 获取默认第一个省份的名字
axios({url: 'http://localhost:3000/area/provinceList'}).then(result => {const province = result.data.provinceList[0]document.querySelector('.province').innerHTML = province// 2. 获取默认第一个城市的名字axios({url: 'http://localhost:3000/area/cityList', params: { province }}).then(result => {const city = result.data.cityList[0]document.querySelector('.city').innerHTML = city// 3. 获取默认第一个地区的名字axios({url: `http://localhost:3000/area/district/${province}/${city}` }).then(result => {console.log(result)const areaName = result.data.district[0]document.querySelector('.area').innerHTML = areaName})})
}).catch(error => {console.dir(error)
})

Promise 链式解决回调地狱：

概念：依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束

细节：then() 回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果

每个 Promise 对象中管理一个异步任务，用 then 返回 Promise 对象，串联起来

好处：通过链式调用，解决回调函数嵌套问题

/**
* 目标：把回调函数嵌套代码，改成Promise链式调用结构
* 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
*/
let province = ''
// 1. 得到-获取省份Promise对象
axios({url: 'http://localhost:3000/area/provinceList'}).then(result => {province = result.data.provinceList[0]document.querySelector('.province').innerHTML = province// 2. 得到-获取城市Promise对象return axios({ url: 'http://localhost:3000/area/cityList', params: { province }})
}).then(result => {const city = result.data.cityList[0]document.querySelector('.city').innerHTML = city// 3. 得到-获取地区Promise对象return axios({url: `http://localhost:3000/area/district/${province}/${city}` })
}).then(result => {console.log(result)const areaName = result.data.district[0]document.querySelector('.area').innerHTML = areaName
})

async 函数和 await 解决回调地狱：

async 和 await 是 JavaScript 中用于简化异步编程的关键字

它们让你能够以一种更接近同步编程的方式来写异步代码，这样可以让代码更加清晰和易于维护：

Async： async 关键字用于声明一个异步函数，定义：函数声明、函数表达式前面；

  • 当你在一个函数前面加上 async，这个函数就会返回一个 Promise 对象；
  • 如果函数正常执行结束，Promise 的状态将变为 fulfilled，并且返回值会作为 Promise的结果；
  • 如果函数抛出错误，Promise 的状态将变为 rejected，并且抛出的错误会作为 Promise 的结果；

Await： await 关键字用于等待一个 Promise 完成，且只能在 async 函数内部使用；

  • 它会暂停 async 函数的执行，直到 Promise 的状态变为 fulfilled 或 rejected
  • 如果 Promise 成功解决，await 表达式的值就是 Promise 的结果
  • 如果 Promise 被拒绝，await 表达式会抛出拒绝的值
/* 目标：async和await_错误捕获 */
async function getData() {// 1. try包裹可能产生错误的代码try {const pObj = await axios({ url: 'http://localhost:3000/area/provinceList' })const province = pObj.data.provinceList[0]const cObj = await axios({ url: 'http://localhost:3000/area/cityList', params: { province } })const city = cObj.data.cityList[0]const aObj = await axios({ url: `http://localhost:3000/area/district/${province}/${city}` })const area = aObj.data.district[0]document.querySelector('.province').innerHTML = provincedocument.querySelector('.city').innerHTML = citydocument.querySelector('.area').innerHTML = area} catch (error) {// 2. 接着调用catch块，接收错误信息console.dir(error)}
}
getData();

Promise.all 静态方法

Promise.all() 方法用于将多个 Promise 实例，

包装成一个新的 Promise 实例： const p = Promise.all([p1,p2,p3]);

  • 只有p1、p2、p3的状态都变成fulfilled：

    p的状态才会变成fulfilled，p1、p2、p3的返回值组成一个数组，传递给p的回调函数；

  • 只要p1、p2、p3之中有一个被rejected：

    p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数；

let p1 = new Promise((resolve, reject) => {resolve('成功了')
})let p2 = new Promise((resolve, reject) => {resolve('success')
})let p3 = Promise.reject('失败')Promise.all([p1, p2]).then((result) => {console.log(result)               //['成功了', 'success']
}).catch((error) => {console.log(error)
})Promise.all([p1,p3,p2]).then((result) => {console.log(result)
}).catch((error) => {console.log(error)      			// 失败了，打出 '失败'
})

本文章学习资源🔗：

黑马程序员前端AJAX入门到实战 ✅

Axios 3分钟让你学会axios在vue项目中的基本用法、Axios使用方法详解，从入门到进阶 当作进阶观看：

  • ajax与XHR的理解和使用

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

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

相关文章

查看es p12证书文件过期方法

查看es p12证书文件过期方法

查看证书过期时间: openssl pkcs12 -in elastic-certificates.p12 -nokeys -out elastic-certificates.crt (需要输入证书生成时配置密码) openssl x509 -enddate -noout -in elastic-certificates.crt
阅读更多...
使用 GitOps 进行防灾 MinIO

使用 GitOps 进行防灾 MinIO

想象一下&#xff0c;您已经花费了无数小时来完善 Docker Swarm 设置&#xff0c;精心设计每项服务&#xff0c;并调整 CI/CD 管道以实现无缝自动化。现在&#xff0c;想象一下这个经过微调的系统被重置为原点&#xff0c;不是因为严重的故障或安全漏洞&#xff0c;而是因为数据…
阅读更多...
了解SD-WAN与传统WAN的区别

了解SD-WAN与传统WAN的区别

近年来&#xff0c;许多企业选择了SD-WAN作为他们的网络解决方案。云基础架构的SD-WAN不仅具备成本效益&#xff0c;而且提供更安全、更可靠的WAN连接&#xff0c;有助于实现持续盈利。客户能够更好地控制他们的网络&#xff0c;个性化定制且无需额外成本。 那么&#xff0c;为…
阅读更多...
基于JSP的列车票务信息管理系统

基于JSP的列车票务信息管理系统

开头语&#xff1a; 你好&#xff0c;我是专注于计算机科学与技术研究的学长。如果你对列车票务信息管理系统感兴趣或有相关需求&#xff0c;欢迎联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;IDE、数据库管理工具…
阅读更多...
基于SpringBoot小区物业智能卡管理设计和实现(源码+LW+调试文档+讲解等)

基于SpringBoot小区物业智能卡管理设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…
阅读更多...
【SQL Server数据库】带函数查询和综合查询（1）

【SQL Server数据库】带函数查询和综合查询（1）

目录 1&#xff0e;统计年龄大于30岁的学生的人数。 2&#xff0e;统计数据结构有多少人80分或以上。 3.查询“0203”课程的最高分的学生的学号。 4&#xff0e;统计各系开设班级的数目(系名称、班级数目)&#xff0c;并创建结果表。 5&#xff0e;选修了以“01”开头的课…
阅读更多...
Spark SQL 血缘解析方案

Spark SQL 血缘解析方案

背景 项目背景建设数据中台，往往数据开发人员首先需要能够通过有效的途径检索到所需要的数据，然后根据检索的数据模型进行业务加工然后得到一些中间模型，最后再通过数据抽取工具或者OLAP分析工具直接将数据仓库中加工好的公共模型输出到应用层。这里我不在去介绍数据仓库为…
阅读更多...
Python 围棋

Python 围棋

效果图 完整代码 源码地址&#xff1a;Python 围棋 # 使用Python内置GUI模块tkinter from tkinter import * # ttk覆盖tkinter部分对象&#xff0c;ttk对tkinter进行了优化 from tkinter.ttk import * # 深拷贝时需要用到copy模块 import copy import tkinter.me…
阅读更多...
性能测试（五）—— 数据库性能测试-mysql

性能测试（五）—— 数据库性能测试-mysql

1 mysql性能测试的主要内容 MySQL数据库介绍MySQL数据库监控指标MySQL慢查询工作原理及操作SQL的分析与调优方法MySQL索引的概念及作用MySQL索引的工作原理与设计规范MySQL存储引擎MySQL实时监控MySQL集群监控方案MySQL性能测试的用例准备使用Jmeter开发MySQL性能测试脚本执行…
阅读更多...
鸿蒙NEXT实战开发： 依据前端对http请求进行二次简单封装

鸿蒙NEXT实战开发： 依据前端对http请求进行二次简单封装

一、为什么要对http请求进行封装&#xff1f; 在我看来二次封装有一下几点好处 代码封装之后&#xff0c;开发人员只用关注业务层面的东西&#xff0c;不用去过多浪费时间在接口请求数据处理上。封装之后代码更加简洁&#xff0c;通俗易懂&#xff0c;方便后期维护&#xff0…
阅读更多...
微服务中的相关概念

微服务中的相关概念

Eureka Eureka 是由 Netflix 开发的一个服务发现和注册中心&#xff0c;广泛应用于微服务架构中。Eureka 主要用于管理和协调分布式服务的注册和发现&#xff0c;确保各个服务之间能够方便地找到并通信。它是 Netflix OSS&#xff08;Netflix Open Source Software&#xff09…
阅读更多...
OpenAI突然宣布停止向中国提供API服务!

OpenAI突然宣布停止向中国提供API服务!

标题 &#x1f31f; OpenAI突然宣布停止向中国提供API服务! &#x1f31f;摘要 &#x1f4dc;引言 &#x1f4e2;正文 &#x1f4dd;1. OpenAI API的重要性2. 停止服务的原因分析3. 对中国市场的影响4. 应对措施代码案例 &#x1f4c2;常见问题解答&#xff08;QA&#xff09;❓…
阅读更多...
OpenAI禁止国区使用：免费国产大模型等你体验！

OpenAI禁止国区使用：免费国产大模型等你体验！

OpenAI中国停服 国产大模型免费使用 前言 OpenAI不支持中国区域访问 从6月25日开始&#xff0c;OpenAI 宣布了对中国停止提供 API 服务&#xff0c;毫无疑问的说这给国内的开发者带来了很大的不便&#xff0c;之后他们怎么去使用GPT 这类先进大模型方面遇到了难题。不过近期我们…
阅读更多...
【ARMv8/ARMv9 硬件加速系列 3.4 -- SVE 复制指令CPY 使用介绍】

【ARMv8/ARMv9 硬件加速系列 3.4 -- SVE 复制指令CPY 使用介绍】

文章目录 SVE 复制指令CPYSVE 指令格式SVE 使用语法SVE CPY 使用示例SVE CPY 小结SVE 复制指令CPY CPY <Zd>.<T>, <Pg>/M, #<imm>{, <shift>}cpy 指令在 ARMv9 的
阅读更多...
让我们聊聊网络安全中会涉及到的IP地址（IP协议）、MAC地址、路由、DNS协议（域名系统）、NAT技术（协议）、以太网帧、ARP协议

让我们聊聊网络安全中会涉及到的IP地址（IP协议）、MAC地址、路由、DNS协议（域名系统）、NAT技术（协议）、以太网帧、ARP协议

网络安全中会涉及到的IP地址&#xff08;IP协议&#xff09;、MAC地址、路由、DNS协议&#xff08;域名系统&#xff09;、NAT技术&#xff08;协议&#xff09;、以太网帧、ARP协议 一.IP地址&#xff08;IP协议&#xff09;1.IP地址&#xff08;IP协议&#xff09;的作用2.IP…
阅读更多...
C语言·动态内存管理

C语言·动态内存管理

1. 为什么要有动态内存管理&#xff1f; 例1&#xff1a; //固定的向内存申请4个字节 int a 10;//申请连续的一块空间 int arr[10]; 这些数据一旦声明定义之后就会在内存中有一块空间&#xff0c;这些空间都是固定的&#xff0c;为了让内存使用更加灵活&#xff0c;这时我们…
阅读更多...
Python火焰锋动力学和浅水表面波浪偏微分方程

Python火焰锋动力学和浅水表面波浪偏微分方程

&#x1f3af;要点 &#x1f3af;流图可视化正弦余弦矢量场 | &#x1f3af;解空间变化边界条件二维拉普拉斯方程 | &#x1f3af;解圆柱坐标系标量场 | &#x1f3af;解一维泊松方程 | &#x1f3af;解二维扩散方程 | &#x1f3af;解火焰锋的动力学偏微分方程 | &#x1f3a…
阅读更多...
[C#]winform基于opencvsharp实现黑白图像上色

[C#]winform基于opencvsharp实现黑白图像上色

【算法简介】 技术有时会提高艺术&#xff0c;但有时也会破坏艺术。着色黑白电影是一个可以追溯到1902年的古老想法。几十年来&#xff0c;许多电影创作者反对将黑白电影着色的想法&#xff0c;并将其视为对艺术的破坏。但今天它被接受为艺术形式的增强。该技术本身已经从艰苦…
阅读更多...
2024年最新机动车签字授权人考试题库。

2024年最新机动车签字授权人考试题库。

31."简易瞬态工况法"所使用的五气分析仪的温度范图:分析系统及相关部件应在&#xff08; &#xff09;。 A.0-40℃ B.0-50℃ C.0-60℃ D.-10-40℃ 答案:A 32.稀释氧传感器环境空气量程检测时的读数值位于&#xff08; &#xff09;%vol范围之外时&#xff0c;应…
阅读更多...
[word] Word如何删除所有的空行？ #职场发展#学习方法

[word] Word如何删除所有的空行？ #职场发展#学习方法

Word如何删除所有的空行&#xff1f; 很多网友从网页复制文字粘贴到word文档后发现段落之间有空行&#xff0c;如果文字不多&#xff0c;手动删除这些空行也没有多少工作量&#xff0c;但是如果文字的字数达到成千上万&#xff0c;一个个手动删除这些空行还是很繁琐的。那么&a…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发