前端网络请求库：Axios

news2024/9/24 23:30:37

目录

1. 网络请求的基本概念

1.1 网络请求的基础HTTP协议

1.2 HTTP工作原理

1.3 TCP连接

1.31 建立TCP连接

1.31 关闭TCP连接

1.4 HTTP的请求方法

1.5 HTTP的响应状态码分类

1.6. 前端网络请求方式

2. Axios在在vue项目中的使用

 2.1安装与使用

2.2 Axios使用HTTP请求方法

2.21 POST

2.22 GET

2.23 PUT

 2.24 PATCH

2.25 DELETE

 2.26 HEAD

 2.27 OPTIONS

 2.28 REQUEST

2.29  Axios请求方法补充

2.3 执行多个并发

2.4 Axios实例

2.5 Axios拦截器

2.51 请求拦截器

2.52 响应拦截器 

2.53 移除拦截器

2.54 实例添加拦截器

2.6 错误处理

2.7 取消请求

2.8 Axios封装

1. 网络请求的基本概念

前端网络请求是Web开发中不可或缺的一部分，它涉及客户端（通常是浏览器）与服务器之间的数据交换。

参考文章：HTTP 教程 | 菜鸟教程 (runoob.com)

1.1 网络请求的基础HTTP协议

HTTP 是一种本地浏览器获取服务器中诸如 HTML 文档这类资源的应用层网络传输协议。

它是万维网（WWW）的数据通信基础，设计目的是确保客户端与服务器之间的通信。

它工作于客户端 —— 服务器架构之上，通过请求 —— 响应模型进行通信。浏览器作为HTTP客户端通过URL向HTTP服务器端（即WEB服务器）发送请求，服务器根据接收到的请求向客户端发送响应信息。

1.2 HTTP工作原理

一个典型的网络请求过程通常包括以下几个步骤：

  1. 建立连接：客户端和服务器之间建立TCP连接。

  2. 发送请求：客户端通过HTTP等协议向服务器发送请求报文。

  3. 处理请求：服务器接收并解析客户端的请求，根据请求的内容进行相应的处理，如查询数据库、执行逻辑操作等。

  4. 发送响应：服务器将处理结果封装成HTTP响应，发送给客户端。

  5. 关闭连接：非持久连接，在数据传输完成后，客户端和服务器关闭TCP连接。持久连接，则保持连接以进行后续的数据交换。

  6. 渲染页面：客户端接收到响应后，根据响应内容（如HTML、图片等）渲染页面，展示给用户。

1.  请求报文由请求行、请求头部、空行和请求体四个部分组成

  • 请求行：请求方法（ GET、POST等），请求的资源路径（URI），HTTP协议版本（如 HTTP/1.1 或 HTTP/2）。格式示例：GET /index.html HTTP/1.1/.....
  • 请求头：包含了客户端环境信息、请求体的大小（如果有）、客户端支持的压缩类型等。
  • 空行：请求头和请求体之间的分隔符，表示请求头的结束
  • 请求体（可选）：在某些类型的HTTP请求（如 POST 和 PUT）中，请求体包含要发送给服务器的数据

2.  HTTP 响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

  • 状态行：HTTP 协议版本（与请求消息中的版本相匹配），状态码（表示请求的处理结果），状态信息（状态码的简短描述）。格式示例：HTTP/1.1 200 OK

  • 响应头：包含了服务器环境信息、响应体的大小、服务器支持的压缩类型等。

  • 空行：响应头和响应体之间的分隔符，表示响应头的结束。

  • 响应体（可选）：包含服务器返回的数据，如请求的网页内容、图片、JSON数据等。

参考：HTTP 消息结构 | 菜鸟教程 (runoob.com)

1.3 TCP连接

TCP是一种面向连接的的传输层通信协议。它负责确保数据在传输过程中的可靠性、完整性和顺序性。TCP连接通过著名的 “三次握手” 和 “四次挥手” 机制建立和关闭。

1.31 建立TCP连接

三次握手的目的是，确保了通信双方都能够准备好进行数据传输。

  1. 第一次握手：客户端向服务器发送一个SYN（同步序列编号）报文段，并包含自己的初始序列号seq=x。这个报文段表示客户端想要与服务器建立连接。此时，客户端进入SYN-SENT（同步已发送）状态。

  2. 第二次握手：服务器收到客户端的SYN报文段后，会向客户端发送一个SYN-ACK（同步确认）报文段作为应答。这个报文段包含服务器的初始序列号seq=y，以及对客户端SYN报文段的确认号ack=x+1。此时，服务器进入SYN-RCVD（同步收到）状态。

  3. 第三次握手：客户端收到服务器的SYN-ACK报文段后，会向服务器发送一个ACK（确认）报文段。这个报文段包含对服务器SYN-ACK报文段的确认号ack=y+1，以及自己的序列号seq=x+1（此时，序列号已经因为第一次发送SYN报文段而增加）。当服务器收到这个ACK报文段后，连接就建立了，双方进入ESTABLISHED（已建立连接）状态，可以开始传输数据了。

1.31 关闭TCP连接

“四次挥手” 的目的是，确保了通信双方都能够安全地关闭连接，并释放相关资源。

  1. 第一次挥手：客户端向服务器发送一个FIN（结束）报文段，表示客户端没有更多的数据要发送了。此时，客户端进入FIN-WAIT-1（终止等待1）状态。

  2. 第二次挥手：服务器收到客户端的FIN报文段后，会向客户端发送一个ACK报文段作为应答。这个报文段包含对客户端FIN报文段的确认号，表示服务器已经收到了客户端的关闭请求。此时，服务器进入CLOSE-WAIT（关闭等待）状态，而客户端进入FIN-WAIT-2（终止等待2）状态。

  3. 第三次挥手：服务器在发送完所有剩余的数据后，会向客户端发送一个FIN报文段，表示服务器也没有更多的数据要发送了。此时，服务器进入LAST-ACK（最后确认）状态。

  4. 第四次挥手：客户端收到服务器的FIN报文段后，会向服务器发送一个ACK报文段作为应答。这个报文段包含对服务器FIN报文段的确认号。当服务器收到这个ACK报文段后，连接就关闭了。此时，客户端和服务器都进入CLOSED（已关闭）状态。

1.4 HTTP的请求方法

HTTP/1.1协议中共定义了 9 种方法（也叫“动作”）来以不同方式操作指定的资源：

序号方法描述
1GET从服务器获取资源。用于请求数据而不对数据进行更改。例如，从服务器获取网页、图片等。
2POST向服务器发送数据以创建新资源。常用于提交表单数据或上传文件。发送的数据包含在请求体中。
3PUT向服务器发送数据以替换更新现有资源，它期望用请求体中的完整资源表示来替换服务器上对应URI的资源。如果资源不存在，则创建新的资源。与 POST 不同，PUT 通常是幂等的，即多次执行相同的 PUT 请求不会产生不同的结果。
4DELETE从服务器删除指定的资源。请求中包含要删除的资源标识符。
5PATCH对资源进行部分更新。与 PUT 类似，但 PATCH 只更改部分数据而不是替换整个资源。它期望只包含需要修改的资源的一部分，而不是整个资源的完整表示
6HEAD类似于 GET，但服务器只返回响应的头部，不返回实际数据。用于检查资源的元数据（例如，检查资源是否存在，查看响应的头部信息）。
7OPTIONS返回服务器支持的 HTTP 方法。用于检查服务器支持哪些请求方法，通常用于跨域资源共享（CORS）的预检请求。
8TRACE回显服务器收到的请求，主要用于诊断。客户端可以查看请求在服务器中的处理路径。
9CONNECT建立一个到服务器的隧道，通常用于 HTTPS 连接。客户端可以通过该隧道发送加密的数据。

1.5 HTTP的响应状态码分类

状态码（ status code ），来指明对应请求已成功执行或是没有，以及相应的原因。

状态码分类

分类描述

100 —— 199

一般信息。表示接收到的请求正在处理
200 —— 299成功响应。表示请求正常处理完毕
300 —— 399重定向。表示需要进一步操作以完成该请求
400 —— 499客户端错误。表示请求语法错误或无法完成
500 —— 599服务器错误。表示服务器在处理请求过程中发生了错误

1.6. 前端网络请求方式

前端进行网络请求的方式多种多样，主要包括：

方式介绍
XMLHttpRequest（XHR）最早和最常见的网络请求方式之一，允许客户端与服务器进行 异步通信。XHR API 提供了一个在后台发送 HTTP 请求和接收响应的机制，使得页面能够在不刷新的情况下更新部分内容
Fetch API更强大、更灵活、更友好的 API。它使用 Promise 对象，简化了对网络请求的处理（promise的链式调用）。
jQuery的Ajax方法

jQuery是一个快速、小巧、功能丰富的JavaScript库，其中包含了 简化 Ajax 调用的方法。

Axios

扩展了 Fetch API，提供了更丰富的功能。在一些大型框架中会被使用，例如Vue.js。

WebSocket

虽然 WebSocket 严格来说不是一种发起网络请求的方式，但它提供了一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器主动向客户端推送数据，而无需客户端轮询。

Ajax发展简介：

在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户并不是很友好。并且我们只需要修改页面的部分数据，而从服务器端发送的却是整个页面的数据，十分消耗网络资源。为了降低资源消耗，提高用户使用体验，异步网络请求应运而生。

Ajax（Asynchronous JavaScript and XML，即异步的JS和XML），它使网页网页能够在不重新加载整个页面的情况下与服务器交换数据并更新页面的一部分，从而提升了用户体验并减少了网络资源的消耗。

实现Ajax的方式有多种（且本质上都是对原生的XHR的封装），但都有利弊：

方式优点缺点
原生XHR所有现代浏览器都原生支持配置，调用方式繁琐复杂
jQuery封装的Ajax简化了XMLHttpRequest的使用，提供了更简洁的API和丰富的配置选项

增加了项目对jQuery的依赖和体积

Fetch API

基于Promise，步处理机制简洁强大。

是现代浏览器的一部分，不需要额外的库或框架

默认配置较简单，可能需要手动设置一些选项（如请求头、凭据等）
Axios上面有的优点它基本都有，API 简洁，功能强大/

2. Axios在在vue项目中的使用

Axios 是基于 promise 的网络请求库，作用于node.js和浏览器中。 

特点：

  • 从浏览器创建 XMLHttpRequests请求
  • 从node.js创建http请求
  • 支持 Promise API
  • 拦截请求和响应，比如：在请求前添加授权和响应前做一些事情。
  • 转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

参考文档：Axios中文文档

 2.1安装与使用

1）安装axios

$ npm install axios

2）在组件中使用axios

import axios from 'axios'
axios(request).then((res) => {console.log("响应",res)})
              .catch((err) => {console.log(err)})

注意：

①这里的request是请求体，包含请求行、请求头部、空行和请求数据等。

②axios是异步的，也是基于Promise 对象的，需要使用Promise API或asyc/await等异步处理方式等待promise解析完成，才能拿到结果。

③在使用Axios进行HTTP请求时，返回的res代表整个响应对象，（它包含如status（HTTP状态码），statusText（状态信息），data（服务器返回的实际数据），headers（响应头）等多个属性）。res.data才是包含了服务器响应的实际数据（body），也是大多数情况，我们需要用于渲染的数据。如下：

 响应结构：一个请求的响应包含以下信息

{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},
  // `config` 是 `axios` 请求的配置信息
  config: {},
  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

2.2 Axios使用HTTP请求方法

2.21 POST

axios.post( url , data , config )，创建新资源

url 是请求的资源路径。config（可选）是一个配置对象，可以包含请求头、查询参数等。

data（可选）是作为请求体发送的数据

axios.post('https://api.example.com/goods',{//data
  sale:1000,
  name: '又大又红的小苹果'  
},{
  //其他配置
  headers:{// 请求头  
    .....
  }
}).then(res=>{console.log(res)})
  .catch((err) => {console.log(err)})

如上：假设我们https://api.example.com/goods向发送post请求创建一个资源，并在后端生成并返回了一个 资源的唯一标识符 id : 1。

2.22 GET

axios.get( url , config )，获取资源

url 是资源路径。config（可选）是一个配置对象

//请求格式 https://api.example.com/goods?id=1
axios.get('https://api.example.com/goods',{
  //其他配置
  params:{// 查询参数，用于get请求  
    id:1
  },
  headers:{// 请求头  
    .....
  }
}).then(res=>{console.log(res.data)})
  .catch((err) => {console.log(err)})

如上：我们通过查询参数（此处是上面POST创建的资源的唯一标识符id :1），获取到资源 

2.23 PUT

axios.put( url , data , config )，对现有资源替换更新，或创建不存在的资源

参数与 axios.post 相同

axios.put('https://api.example.com/goods',{//put更新了sale
  id: 1,  
  sale:2600,
  name: '又大又红的小苹果'  
},{
  headers:{// 请求头  
    .....
  }
}).then(res=>{console.log(res)})
  .catch((err) => {console.log(err)})

如上：我们将put所期望的完整资源一同发送，进行资源替换修改

 2.24 PATCH

axios.patch( url , data , config )，对资源部分更新

参数与 axios.post 相同

axios.patch('https://api.example.com/data/big-apple',{//data
  id: 1,  
  sale:4550,
},{
  //其他配置
  headers:{// 请求头  
    .....
  }
}).then(res=>{console.log(res)})
  .catch((err) => {console.log(err)})

如上：我们将需要修改的资源的一部分通过patch发送（注意：唯一标识符是必需的）

2.25 DELETE

axios.delete( url , config )，删除资源

url 是资源路径。config（可选）是一个配置对象。注意，delete 请求通常不需要请求体，但也可以通过配置对象 config 发送查询参数。

axios.delete('https://api.example.com/goods',{
  //其他配置
  params:{
    id:1// 资源标识符作查询参数，用于delete
  },
  headers:{// 请求头  
    .....
  }
}).then(res=>{console.log(res)})
  .catch((err) => {console.log(err)})

如上：我们将资源唯一标识符 id作为查询参数发送delete请求

 2.26 HEAD

axios.head( url , config )，获取响应头部

head 请求与 get 请求类似，但服务器不会在响应中返回消息体，而只返回响应头部。

axios.head('https://api.example.com/goods',{
  //其他配置......config对象
}).then(res=>{console.log(res.headers)}) // 响应头在res.headers中
  .catch((err) => {console.log(err)})

如上：使用head方法和get类似，都会返回一个完整的响应对象，但res.data中是没有数据的，返回的响应头在res.header中

 2.27 OPTIONS

axios.potions( url , config )，获取HTTP支持的方法 

axios.potions('https://api.example.com/goods',{
  //其他配置......config对象
}).then(res=>{console.log(res.headers)})
  .catch((err) => {console.log(err)})

 如上： OPTIONS 请求用于描述目标资源的通信选项。响应头在response.headers中，并可能包含CORS信息等 。

 2.28 REQUEST

axios.request( config )，通用方法

axios.request({  
  method: 'post',  
  url: 'https://api.example.com/goods',  
  data: {  
    sale: '6666',  
    name: '大香蕉'  
  }  
}).then(res=>{console.log(res.headers)})
  .catch((err) => {console.log(err)})

如上：这是 Axios 的通用请求方法，允许你传递一个配置对象来发送请求。你可以在这个配置对象中指定请求方法（method）、URL（url）、请求头（headers）、请求体（data/params）等。

2.29  Axios请求方法补充

① Axios 没有直接用于追踪（trace）请求的方法。

因为在 HTTP/1.1 和 HTTP/2 协议中，TRACE 方法主要用于诊断目的，但在实际应用中由于其安全风险（如跨站追踪攻击 XSS）而被广泛禁用或不建议使用。

如果需要在 Axios 中进行某种形式的“追踪”或日志记录，可以通过添加拦截器来实现

②Axios 没有 connect 方法，它主要用于 HTTP/1.1 协议的代理服务器或网关，以及 WebSocket 握手过程中。在标准的 Web 开发中，开发者很少会直接使用 CONNECT 方法来发送请求，因为它主要用于需要代理或隧道的情况。

③虽然Axios提供了多种便捷的语法糖（axios.get....等），但所有这些方法背后实际上都是基于axios.request(config)方法来实现的。因此，理论上你可以使用axios({请求对象})的格式来发起任何其他类型的HTTP请求。

④Axios使用HTTP请求时，如果涉及到需要数据传输，则视数据情况，项目规范情况，可能会被放在请求体，也可能会被放在url中....，不一定如上述方法举例的那样。

2.3 执行多个并发

axios.all( ) 方法，用于同时执行多个异步的 HTTP 请求。它和Promise.all( )执行机制是一样的，要么全部成功走then，要么就走catch

// 定义两个异步的GET请求  
const getUser = axios.get('/user/12345');  
const getPosts = axios.get('/posts');  
  
// 使用axios.all同时执行这两个请求,并使用解构赋值展开结果数组
axios.all([getUser, getPosts])  
  .then(([userResponse, postsResponse]) => {  
    console.log('User:', userResponse.data)
    console.log('Posts:', postsResponse.data)
  })  
  .catch(errors => {console.error(errors)})

2.4 Axios实例

通过 axios.create( config )创建实例，如：

const instance = this.axios.create({
				baseURL: 'https://api.example.com',
				timeout: 2000//超时时间
			})
instance.get('/goods').then(res=>{ console.log(res.data)})

如上：我们可以在axios实例上配置一些默认设置。这对于需要发送多个请求到同一域，并且这些请求共享某些配置（如基础 URL、请求头等）时非常有用。

axios实例常用配置：

参数解释数据类型
baseURL请求的域名，基本地址String
timeout请求超时时长，单位msNumber
url 请求路径String
method请求方法String
headers 设置请求头Object
params 请求参数，参数将被拼接在URL上Object
data 请求参数，参数将被放到请求体中Object
maxContentLength响应数据的最大字节数，超出则拒绝响应Number
withCredentials表示跨站请求时是否携带cookie。默认falseboolean
proxy代理服务器主机名称和端口。用于绕过CORS（跨源资源共享）策略，或者用于调试目的String 或 Object

注意：即使进行了实例配置，但在使用实例进行实际请求时，依然可以再进行配置。如下

//实例配置
let instance = axios.create();
instance.defaults.timeout = 3000;
//请求配置
instance.get('/goods',{timeout: 4000})

这种规则对全局配置同样生效，配置优先级：请求配置 > 实例配置 > 全局配置

2.5 Axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。如下：为axios添加拦截器

2.51 请求拦截器

在请求发起之前，对请求进行某些处理，如：添加token信息

axios.interceptors.request.use(
  (config) => {
    //在发起请求之前应该做些什么
    return config
  },
   // 对请求错误做些什么    
  (err) => Promise.reject(err)
)
2.52 响应拦截器 

在响应收到之后，对响应进行某些处理，如：验证信息内容，直接返回res.data

axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
2.53 移除拦截器

通过eject()，我们可以移除添加的拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
2.54 实例添加拦截器

可以给自定义的 axios 实例添加拦截器。

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

2.6 错误处理

请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象。同时，你可以使用 validateStatus 配置选项，来自定义会抛出错误的 HTTP code。

axios.get('/url',{
  validateStatus: function (status) {
    return status < 500; // 处理状态码小于500的情况
  }
}).then(res={
    //....
    }).catch(err=>{
    //打印错误信息
	console.log(err);
})

2.7 取消请求

常用于在请求拦截器中

let source = axios.CancelToken.source()
axios.get('/goods',{
				cancelToken: source
			}).then(res=>{
				console.log(res)
			}).catch(err=>{
				//取消请求后会执行该方法
				console.log(err)
			})

//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息')

2.8 Axios封装

utils / request.js文件：这是封装axios的文件，对axios的配置都放在这里

import axios from "axios"

const baseURL = "https://restapi.amap.com"
const instance = axios.create({
  // 基础地址，超时时间
  baseURL,
  timeout: 10000,
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    //请求处理，如：携带token
    config.headers.Authorization = token

    return config;
  },
  //请求错误处理
  //如：请求配置（url，请求方法..)错误，跨域问题等
  
  (err) => Promise.reject(err)//抛出错误
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    //响应处理，状态码300以内，响应会在此处被接收处理
    return res
  },
  (err) => {
    // 响应错误处理，状态码300以，外响应会在此处被接收处理，比如：
    // 客户端错误处理4xxx  =>  如：用户未登录，没有权限, 拦截到登录
    if (!isAuthenticated) router.push("/login")

    return Promise.reject(err)//抛出错误
  }
)
export default instance

api/index.js文件：这是api的请求文件，用于单独管理api请求方法

import request from "@/utils/request";

export const getTestService = (config) =>
  request.get("/v3/weather/weatherInfo", config);

在组件中使用这个接口：

<script setup>
import { getTestService } from '@/api'

function getData() {
  const config = {
    params: {
      city: "110101",
      key: "个人密钥key",
    },
  }
  getTestService(config)
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      console.log(err)
    })
}
getData()
</script>

请求响应结果：

vue文件结构：

代码中，测试使用的api：高德天气API

 若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃

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

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

相关文章

碰撞检测 | 详解圆-矩形碰撞检测与N圆覆盖模型(附ROS C++可视化)

碰撞检测 | 详解圆-矩形碰撞检测与N圆覆盖模型(附ROS C++可视化)

目录 0 专栏介绍1 N N N圆覆盖碰撞模型2 圆与矩形的碰撞检测3 算法仿真与可视化3.1 核心算法3.2 仿真实验 0 专栏介绍 &#x1f525;课设、毕设、创新竞赛必备&#xff01;&#x1f525;本专栏涉及更高阶的运动规划算法轨迹优化实战&#xff0c;包括&#xff1a;曲线生成、碰…
阅读更多...
HCIP--＜OSPF2＞

HCIP--＜OSPF2＞

目录 一&#xff0c;OSPF的不规则区域 1&#xff09;远离骨干区域的非骨干区域 2&#xff09;不连续骨干区域(和上面一样) 二&#xff0c;OSPF数据库表 三。优化OSPF的LSA&#xff08;缺少LSA的更新量&#xff09; [1]手工汇总&#xff1a;减少骨干区域的LSA [2]特殊区域&…
阅读更多...
from T2I to T2V

from T2I to T2V

生成图片 在Stable Diffusion推理过程中&#xff0c;其使用unet对一个初始化的向量不断去噪&#xff0c;并编入条件信息 c c c &#xff0c;最后使用vae-decoder将其上采样为一张图片。 计算过程&#xff1a; f l a t e n t u n e t ( f l a t e n t ) , f l a t e n t ∈ R…
阅读更多...
frida主动调用init_array中的函数

frida主动调用init_array中的函数

ida打开目标so&#xff0c;查看要主动调用的函数 前提是先过掉检测frida等等&#xff0c;然后控制台启动 输出so地址 Process.findModuleByName("libmod.so") New函数 var aa new NativeFunction(ptr(0x785e002000).add(0x134EC0),"void",[]) 主动调用 a…
阅读更多...
三种方式可以将彩色图像转成灰度图对比

三种方式可以将彩色图像转成灰度图对比

有三种方式可以将彩色图像转成灰度图 1、直接imread(“1.jpg” , 0)&#xff1b;直接读取灰度图像 2、读取彩色图像然后 灰度 0.299 * 红色 0.587 * 绿色 0.114 * 蓝色进行转换 3、调用cvtColor函数cvtColor(srcImg, imgShow, COLOR_BGR2GRAY); 通过测试来对比三者的区别&…
阅读更多...
秋招面经9.11

秋招面经9.11

1. JWT的过程解析 JWT&#xff08;JSON Web Token&#xff09;是一种基于 JSON 的开放标准&#xff08;RFC 7519&#xff09;实现的用于在各方之间传递信息的紧凑且自包含的方式。JWT 是一种 token&#xff0c;可以对信息进行数字签名&#xff08;例如使用 HMAC 算法或 RSA 加…
阅读更多...
[leetcode-python]杨辉三角2

[leetcode-python]杨辉三角2

给定一个非负索引 rowIndex&#xff0c;返回「杨辉三角」的第 rowIndex 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: rowIndex 3 输出: [1,3,3,1]示例 2: 输入: rowIndex 0 输出: [1]示例 3: 输入: rowIndex 1 输出: [1,1]提示…
阅读更多...
Mycat2原理介绍

Mycat2原理介绍

Mycat介绍 Mycat原理 Mycat 核心配置 Scheam.xml 逻辑数据库和节点对应关系配置Server.xml mycat的连接配置Rule.xml. 分片规则 自动分片auto-sharding-long&#xff0c;比如0-10000节点1 &#xff0c;10001-20000节点2枚举分片sahrding-bt-intfile ,比如beijing节点1…
阅读更多...
【828华为云征文｜如何使用华为云Flexus X实例搭建私人博客：从配置到发布全指南】

【828华为云征文｜如何使用华为云Flexus X实例搭建私人博客：从配置到发布全指南】

文章目录 华为云Flexus X实例介绍搭建专属私人博客准备工作具体操作指南服务器环境确认宝塔软件商店操作一键部署WordPress私人博客域名解析WordPress安装初始页数据库信息配置运行安装程序配置博客信息博客管理后台&#xff08;默认为wp-login.php页面&#xff09;博客前台页面…
阅读更多...
c语言位运算符速成

c语言位运算符速成

本篇文章对c语言速成系列的补充&#xff0c;其中的内容会涉及原反补以及& 、| 、 ~ 、^、位运算等等。那么&#xff0c;闲话少叙&#xff0c;我们直接进入正题 首先我们先来讲讲原反补 进制转换&#xff08;前置知识&#xff09; 在学原反补之前我们先来学几个机制转换的…
阅读更多...
网络高级（学习）2024.9.10

网络高级（学习）2024.9.10

目录 一、Modbus简介 1.起源 2.特点 3.应用场景 二、Modbus TCP协议 1.特点 2.协议格式 3.MBAP报文头 4.功能码 5.寄存器 &#xff08;1&#xff09;线圈寄存器&#xff0c;类比为开关量&#xff0c;每一个bit都对应一个信号的开关状态。 &#xff08;2&#xff09…
阅读更多...
C++——STL——栈(stack)

C++——STL——栈(stack)

栈的定义 栈 &#xff08; stack &#xff09;是限定仅在表的一端进行插入和删除操作的线性表&#xff0c;允许插入和删除的一端称 为栈顶&#xff0c;另一端称为栈底&#xff0c;不含任何数据元素的栈称为空栈。 栈的示意图 因为栈只能够在一端进行插入和删除&#xff0c;所以…
阅读更多...
【Lua学习】Lua入门

【Lua学习】Lua入门

上一篇帖子【Lua学习】Lua最最基础的 – 经云的清净小站 (skycreator.top)讲了Lua是什么&#xff0c;Lua如何安装在Linux和Windows上。那么安装好之后&#xff0c;我们就要使用Lua实现我们的各种功能了。 首先&#xff0c;我们要先了解Lua一些最基本的内容&#xff0c;比如怎么…
阅读更多...
杀毒软件 | Malware Hunter v1.189.0.816 绿色版

杀毒软件 | Malware Hunter v1.189.0.816 绿色版

软件简介 Malware Hunter是由Glarysoft开发的一款专业安全防护软件。该软件的主要目的是保护用户的计算机免受恶意软件、病毒和其他网络威胁的侵害。它通过采用高效的云引擎和小红伞引擎&#xff0c;能够快速且全面地扫描电脑中的恶意软件&#xff0c;并进行强力清除&#xff…
阅读更多...
5--SpringBoot、Mybatis

5--SpringBoot、Mybatis

目录 Mybatis Mybatis入门操作步骤 1.准备工作 创建springboot工程 创建数据库表和实体类 连接数据库 创建接口XxxMapper 2.数据库连接池 Lombok 使用 Mybatis 准备工作 删除 日志输入 参数占位符 新增 更新 查询 驼峰命名 条件查询 XML 创建XML文件 编…
阅读更多...
关于前端知识中框架概念部分的详细介绍

关于前端知识中框架概念部分的详细介绍

1、为什么要学习流行框架&#xff1f; 企业&#xff1a;为了提高效率&#xff0c;因为时间就是金钱。开发人员&#xff1a;提高了开发效率发展进程&#xff1a; JS>JQuery>模板引擎>框架时代&#xff08;Angular(2)、React、Vue&#xff09;好处&#xff1a;不用直接…
阅读更多...
2.安卓逆向-初识java语言

2.安卓逆向-初识java语言

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;图灵Python学院 上一个内容&#xff1a;1.安卓逆向-说明 关于java语言的介绍就不写了没啥用直接开始 首先java语言写的代码运行说明 …
阅读更多...
kolors文生图框架安装

kolors文生图框架安装

环境安装 根据Kolors【github】的指引&#xff0c;安装命令如下&#xff1a; apt-get install git-lfs git clone https://github.com/Kwai-Kolors/Kolors cd Kolors conda create --name kolors python3.8 conda activate kolors pip install -r requirements.txt python3 s…
阅读更多...
Vue3+TS项目封装SVG图标显示组件vite-plugin-svg-icons插件使用

Vue3+TS项目封装SVG图标显示组件vite-plugin-svg-icons插件使用

准备好svg文件 假设从iconfont-阿里巴巴矢量图标库下载了一个svg格式的图标&#xff0c;放在我们项目里&#xff0c;并重命名为ic_money.svg&#xff0c;相对路径为&#xff1a;src\assets\images\icons\ic_money.svg 安装vite-plugin-svg-icons插件 npm install vite-plugi…
阅读更多...
常用电路及分析

常用电路及分析

前言 最近在研究一些简单的硬件知识&#xff0c;把在网上看到的一些常见电路分析总结了一下。 有纰漏请指出&#xff0c;转载请说明。 学习交流请发邮件 1280253714qq.com 串联稳压电路 三极管串联线性稳压电路原理详解及Multisim仿真_三极管稳压电路-CSDN博客 线性稳压电…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023