前后端交互的弯弯绕绕

前后端交互：

🆗，收拾一下心情让我们来聊一聊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.mzph.cn/diannao/32416.shtml

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

相关文章

基于Java学生选课管理系统设计和实现(源码+LW+调试文档+讲解等)

基于Java学生选课管理系统设计和实现(源码+LW+调试文档+讲解等)

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

NSSCTF-Web题目14

目录 [CISCN 2019华东南]Web11和[NISACTF 2022]midlevel 1、题目 2、知识点 3、思路 [HDCTF 2023]SearchMaster 1、题目 2、知识点 3、思路 [CISCN 2019华东南]Web11和[NISACTF 2022]midlevel 这两道题目一样 1、题目 2、知识点 SSTI&#xff08;服务端模板注入漏洞&…
阅读更多...
有哪些骨传导耳机是比较推荐入手的？精选五款热门骨传导耳机推荐！

有哪些骨传导耳机是比较推荐入手的？精选五款热门骨传导耳机推荐！

耳机基本是每人人手一台&#xff0c;不管是在地铁上还是在公交上&#xff0c;都可以看到很多人戴着耳机度过空余的时光&#xff0c;甚至现在人们在耳机的选择方面更加偏向于骨传导耳机&#xff0c;开放耳道的奇特设计在户外佩戴的时候可以更好的感知到周围的环境音&#xff0c;…
阅读更多...
Github 2024-06-22 开源项目日报 Top10

Github 2024-06-22 开源项目日报 Top10

根据Github Trendings的统计，今日(2024-06-22统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量TypeScript项目3JavaScript项目2Python项目2HTML项目1Rust项目1Dart项目1Dockerfile项目1Shell项目1C++项目1Swift项目1RustDesk: 用Rust编写的…
阅读更多...
小程序 获取插件用户openpid？

小程序 获取插件用户openpid？

接口英文名 getPluginOpenPId 功能描述 通过 wx.pluginLogin 接口获得插件用户标志凭证 code 后传到开发者服务器&#xff0c;开发者服务器调用此接口换取插件用户的唯一标识 openpid。 调用方式 HTTPS 调用 第三方调用 调用方式以及出入参和HTTPS相同&#xff0c;仅是调…
阅读更多...
跨境电商-Ozon平台开店指南-魔行观察

跨境电商-Ozon平台开店指南-魔行观察

商家入驻开店指南 第1步&#xff1a;注册并激活您的帐户 对于独联体以外的卖家&#xff1a;法人实体可以在平台上注册。如果您是个体经营户&#xff0c;请您首先开设一家公司。个体经营户&#xff08;土耳其的个体经营户除外&#xff09;不能在我们的平台上注册。 进行注册 …
阅读更多...
MarkDown基础

MarkDown基础

一、MarkDown标题 1.使用和-表示一级标题 2.使用#、##、###、####、######、######表示一级至六级标题 一级标题 二级标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二、MarkDown标题 1.Markdown 段落没有特殊的格式&#xff0c;直接编写文字就好&#xff0c;…
阅读更多...
攻防世界-pdf

攻防世界-pdf

方法一&#xff1a;打开是pdf格式的文件&#xff0c;里面有一张图&#xff0c;题目提示图下面什么都没有&#xff1f;emmm用chrom打开pdf——ctrlf搜索flag&#xff0c;里面是有东西的&#xff0c;ctrla复制就可以了。 方法二&#xff1a;题目提示图下面什么都没有&#xff0c;…
阅读更多...
FaceFusionSharp OnnxRuntime版 视频换脸

FaceFusionSharp OnnxRuntime版 视频换脸

FaceFusionSharp OnnxRuntime版 视频换脸 目录 效果 项目 代码 下载 其他 效果 FaceFusionSharp OnnxRuntime版效果 项目 代码 using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Threading; using System.Window…
阅读更多...
炸裂！Claude 3.5 正式发布！超越 GPT-4o！

炸裂！Claude 3.5 正式发布！超越 GPT-4o！

Anthropic 又憋了个大招&#xff01;推出了 Claude 3.5 Sonnet&#xff01;速度是 Claude 3 的两倍&#xff01;而且数学和编码能力已经超过了 GPT-4o&#xff01; 官方声称&#xff1a;这是我们迄今为止最智能的模型。 直接看测评图&#xff0c;很多指标都吊打 GPT-4o&#xf…
阅读更多...
慧天卓特：6月18日FYDI旱情监测分析

慧天卓特：6月18日FYDI旱情监测分析

旱情监测 - 6月18日 重点干旱区域FYDI监测图 黄淮海流域和新疆内蒙甘肃干旱区域分布地图如下所示&#xff1a; 图1 重点旱情区域FYDI分布图 &#xff08;上&#xff1a;黄淮海流域&#xff1b;下&#xff1a;新疆内蒙甘肃地区&#xff09; 重点省市干旱面积占比统计 重点省…
阅读更多...
（四十二）Vue之路由及其基本使用Vue Router

（四十二）Vue之路由及其基本使用Vue Router

文章目录 概念基本使用demo几个注意点 上一篇&#xff1a;&#xff08;四十一&#xff09;Vuex之模块化与命名空间 下一篇&#xff1a;&#xff08;四十三&#xff09;Vue Router之嵌套路由 概念 在计算机科学和网络领域中&#xff0c;路由&#xff08;Routing&#xff09;是…
阅读更多...
java基于ssm+jsp 母婴用品网站

java基于ssm+jsp 母婴用品网站

1管理员功能模块 管理员登录&#xff0c;管理员通过输入用户名、密码等信息进行系统登录&#xff0c;如图1所示。 图1管理员登录界面图 管理员登录进入母婴用品网站可以查看主页、个人中心、用户管理、商品分类管理、商品信息管理、留言板管理、成长交流、系统管理、订单管理、…
阅读更多...
上手微服务框架go-zero

上手微服务框架go-zero

文章目录 微服务框架与web框架的区别点在哪儿&#xff1f;为什么还要有微服务框架微服务框架与web框架的对比小结 为什么选go-zero&#xff1f;框架对比 下载并认识go-zero认识go-zero环境要求组成下载 实践go-zero基础功能案例apirpc服务功能说明准备构建rpc服务构建api服务服…
阅读更多...
【GD32F303红枫派使用手册】第二十一节 I2C-EEPROM读写实验

【GD32F303红枫派使用手册】第二十一节 I2C-EEPROM读写实验

21.1 实验内容 通过本实验主要学习以下内容&#xff1a; AT24C16 EEPROM的工作原理&#xff1b; IIC模块原理以及IIC驱动原理。 21.2 实验原理 21.2.1 AT24C16 EEPROM的工作原理 下图为AT24CXX系列EEPROM相关参数&#xff0c;由该图可知&#xff0c;AT24C16的存储容量为1…
阅读更多...
【D3.js in Action 3 精译】关于本书

【D3.js in Action 3 精译】关于本书

文章目录 本书读者本书结构与路线图本书代码liveBook 在线论坛 D3.js 项目的传统开发步骤 本书读者 这本书适用于所有渴望在数据可视化工作中获得完全创意自由的人&#xff0c;从定制化的经典图表到创建独特的数据可视化布局&#xff0c;涵盖内容广泛&#xff0c;应有尽有。您…
阅读更多...
重学java 80.Junit单元测试

重学java 80.Junit单元测试

我总是着急的解释我自己&#xff0c;却忘了厚爱无需多言 —— 24.6.21 一、Junit介绍 1.概述 Junit是一个单元测试框架,可以代替main方法去执行其他的方法 2.作用 可以单独执行一个方法,测试该方法是否能跑通 3.注意 Junit是第三方工具,所以使用之前需要导入jar包 二、J…
阅读更多...
GraphQL vs REST：API设计的现代选择

GraphQL vs REST：API设计的现代选择

随着技术的飞速发展&#xff0c;API&#xff08;应用程序接口&#xff09;设计成为了软件开发中不可或缺的一部分。REST&#xff08;Representational State Transfer&#xff09;和GraphQL作为两种主流的API设计风格&#xff0c;各自具有独特的优势和适用场景。本文将深入探讨…
阅读更多...
idea导入项目右侧maven不显示的解决办法

idea导入项目右侧maven不显示的解决办法

不显示情况&#xff1a; 原因可能是读取项目出错&#xff0c;未正确加载pom文件造成的。 解决方案一&#xff1a; 关闭idea在项目目录中删除.idea文件夹重新打开项目&#xff0c;重新加载。 解决犯案二&#xff1a; 直接在pom文件中右键选择add as maven project。 解决方案三…
阅读更多...
PythonWeb前端

PythonWeb前端

摘要 学校的一门选修课&#xff0c;PythonWeb开发从入门到实践&#xff0c;用到的技术有Python,Flask,MySQL,前端三件套等&#xff0c;但因为是选修课&#xff0c;所以都只涉及到了一点点 Web前端基础 1.Web工作原理 概念&#xff1a; Web&#xff0c;万维网&#xff0c;一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023