axios的使用

embedded/2024/10/17 16:52:55/

在 Vue 项目中,封装 Axios 并实现加密、重复请求优化、请求取消、页面切换时取消未完成的请求、以及区分上传和下载操作是非常常见的需求。下面将逐一讲解这些需求的实现方式。

1. Axios 的基本封装

首先,我们可以将 Axios 封装到一个服务层中,方便统一管理请求和拦截。

// src/utils/request.js
import axios from 'axios';
import { encryptRequestData, decryptResponseData } from './crypto'; // 假设有加密解密工具
import { ElMessage } from 'element-plus'; // UI 组件库的消息提示// 创建 axios 实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // api base_urltimeout: 5000, // 请求超时时间
});// 请求拦截器
service.interceptors.request.use((config) => {// 请求加密if (config.data) {config.data = encryptRequestData(config.data); // 数据加密}// token 放入 header 以防用户身份验证const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response) => {// 响应解密if (response.data) {response.data = decryptResponseData(response.data); // 数据解密}return response;},(error) => {ElMessage.error('请求失败');return Promise.reject(error);}
);export default service;

2. 前后端加密的使用

前后端的加密一般是基于某种加密算法(例如 AES 或 RSA)。这里假设你有现成的加密和解密工具,可以在请求拦截器中对请求进行加密,在响应拦截器中对响应进行解密。

  • 加密:请求数据通过加密函数处理,传输给后端的就是密文。
  • 解密:响应数据通过解密函数还原为可读内容。
// utils/crypto.js
import CryptoJS from 'crypto-js';// 加密函数
export function encryptRequestData(data) {const key = CryptoJS.enc.Utf8.parse('16characterskey'); // 密钥const iv = CryptoJS.enc.Utf8.parse('16charactersiv ');  // 偏移量const encrypted = CryptoJS.AES.encrypt(JSON.stringify(data), key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.Pkcs7});return encrypted.toString();
}// 解密函数
export function decryptResponseData(ciphertext) {const key = CryptoJS.enc.Utf8.parse('16characterskey'); // 密钥const iv = CryptoJS.enc.Utf8.parse('16charactersiv ');  // 偏移量const bytes = CryptoJS.AES.decrypt(ciphertext, key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.Pkcs7});const decryptedData = bytes.toString(CryptoJS.enc.Utf8);return JSON.parse(decryptedData);
}

3. 重复请求的优化

为避免同一请求短时间内被多次发送,可以通过 axios 的请求拦截器实现防重复请求的功能。可以使用一个 Map 来存储每个请求的唯一标识,当同一请求发送时进行检查,防止重复发送。

const pendingRequests = new Map();const getRequestKey = (config) => {const { method, url, params, data } = config;return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&');
};// 添加请求拦截器
service.interceptors.request.use((config) => {const requestKey = getRequestKey(config);if (pendingRequests.has(requestKey)) {config.cancelToken = new axios.CancelToken((cancel) => {cancel(`Duplicate request: ${requestKey}`);});} else {pendingRequests.set(requestKey, config);}return config;},(error) => {return Promise.reject(error);}
);// 添加响应拦截器
service.interceptors.response.use((response) => {const requestKey = getRequestKey(response.config);pendingRequests.delete(requestKey); // 移除完成的请求return response;},(error) => {if (axios.isCancel(error)) {console.warn(error.message); // 重复请求被取消} else {// 其他错误处理}return Promise.reject(error);}
);

4. 单个请求的取消控制

对于单个请求,你可以使用 axios.CancelToken 来控制某个请求的取消。

const source = axios.CancelToken.source();// 发起请求时传入取消 token
service({url: '/some-endpoint',method: 'get',cancelToken: source.token
}).then((response) => {console.log('请求成功', response);}).catch((error) => {if (axios.isCancel(error)) {console.log('请求被取消', error.message);}});// 在需要的时候取消请求
source.cancel('取消请求');

5. 页面切换时取消未完成的请求

可以在 Vue 路由的 beforeRouteLeave 钩子中控制页面切换时取消未完成的请求。

export default {data() {return {requestSource: null, // 存储取消 token};},methods: {fetchData() {this.requestSource = axios.CancelToken.source();service.get('/api/data', { cancelToken: this.requestSource.token }).then(response => {console.log('请求成功', response);}).catch(error => {if (axios.isCancel(error)) {console.log('请求被取消');} else {console.error('请求错误', error);}});}},beforeRouteLeave(to, from, next) {if (this.requestSource) {this.requestSource.cancel('页面切换取消请求');}next();}
};

6. 区分上传和下载的使用

  • 上传文件:通常通过 FormData 来上传文件,并在 onUploadProgress 中监控上传进度。
let formData = new FormData();
formData.append('file', file);service.post('/upload', formData, {headers: {'Content-Type': 'multipart/form-data'},onUploadProgress: (progressEvent) => {let progress = (progressEvent.loaded / progressEvent.total) * 100;console.log(`上传进度: ${progress}%`);}
});
  • 下载文件:下载文件时可以指定 responseTypeblob,并处理文件保存。
service.get('/download', {responseType: 'blob',onDownloadProgress: (progressEvent) => {let progress = (progressEvent.loaded / progressEvent.total) * 100;console.log(`下载进度: ${progress}%`);}
}).then(response => {const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'file.pdf'); // 下载文件名document.body.appendChild(link);link.click();
});

总结

  • Axios 的封装统一管理请求和拦截。
  • 使用加密、解密函数对请求和响应数据进行保护。
  • 防止重复请求,通过 requestKey 唯一标识每个请求。
  • 提供单个请求取消和页面切换时取消未完成请求的机制。
  • 针对上传、下载分别进行处理,监听进度。

根据这些实现,你可以根据需求进一步调整封装的细节和功能。

vuerouter__vuerouter__beforeRouteLeave__beforeEach_axios__258">可以结合 vue-router 的导航守卫使用,尤其是在页面切换时取消未完成的请求。通过在 vue-router 的钩子函数(例如 beforeRouteLeavebeforeEach)中调用 axios 的取消方法,可以确保在用户切换页面时及时取消正在进行的请求,避免无效请求消耗资源。

实现步骤

  1. 创建一个全局的取消请求管理工具:使用一个 Map 来存储每个页面的取消请求函数(CancelToken),当页面切换时从 Map 中找到对应的取消方法并执行。

  2. 在路由守卫中调用取消方法:在 beforeEachbeforeRouteLeave 钩子中调用取消请求的逻辑,确保切换路由时清理未完成的请求。

具体实现方案

1. 取消请求的封装

我们可以在 axios 的封装文件中为每个请求生成一个取消令牌(CancelToken),并将其存储在全局的 cancelMap 中。

// src/utils/request.js
import axios from 'axios';const cancelMap = new Map(); // 全局的取消请求管理工具const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // API 基础路径timeout: 10000, // 超时时间
});// 请求拦截器
service.interceptors.request.use((config) => {const source = axios.CancelToken.source(); // 创建一个取消令牌config.cancelToken = source.token; // 将取消令牌附加到请求中// 使用唯一的标识(例如:URL+请求方式)来存储取消令牌const requestKey = `${config.url}&${config.method}`;cancelMap.set(requestKey, source.cancel); // 存储取消请求函数return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response) => {// 请求成功后,删除对应的取消函数const requestKey = `${response.config.url}&${response.config.method}`;cancelMap.delete(requestKey);return response;},(error) => {// 如果请求被取消,不做其他处理if (axios.isCancel(error)) {console.log('请求被取消');}return Promise.reject(error);}
);// 取消未完成的请求
export function cancelPendingRequests() {cancelMap.forEach((cancel) => {cancel('路由切换取消请求'); // 执行取消函数});cancelMap.clear(); // 清空取消函数
}export default service;
vuerouter__328">2. vue-router 中使用取消逻辑

接下来我们在 vue-router 中添加导航守卫,确保在每次路由切换时都调用 cancelPendingRequests 来取消未完成的请求。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { cancelPendingRequests } from '@/utils/request'; // 引入取消请求方法
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';const routes = [{path: '/',name: 'Home',component: Home,},{path: '/about',name: 'About',component: About,},
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,
});// 全局路由守卫 - 在每次路由切换前,取消未完成的请求
router.beforeEach((to, from, next) => {cancelPendingRequests(); // 取消未完成的请求next(); // 继续路由切换
});export default router;
3. 在组件中发起请求

在组件中正常发起 axios 请求,不需要额外的处理。每次请求都会通过 axios 封装自动附加 CancelToken,并在路由切换时通过 cancelPendingRequests 自动取消。

// src/views/Home.vue
<template><div><h1>Home</h1><p>{{ data }}</p></div>
</template><script>
import service from '@/utils/request';export default {data() {return {data: null,};},mounted() {this.fetchData();},methods: {async fetchData() {try {const response = await service.get('/api/home');this.data = response.data;} catch (error) {console.error(error);}},},
};
</script>

4. 页面级取消请求

有时我们只需要在页面组件内部取消请求,比如当用户离开页面时取消当前页面的请求,这时可以使用组件的 beforeRouteLeave 钩子。

// src/views/About.vue
<template><div><h1>About</h1><p>{{ data }}</p></div>
</template><script>
import service from '@/utils/request';
import { ref } from 'vue';export default {setup() {const data = ref(null);let requestSource = null;const fetchData = async () => {requestSource = service.CancelToken.source();try {const response = await service.get('/api/about', {cancelToken: requestSource.token,});data.value = response.data;} catch (error) {if (axios.isCancel(error)) {console.log('请求被取消');} else {console.error(error);}}};return { data, fetchData };},mounted() {this.fetchData();},beforeRouteLeave(to, from, next) {if (this.requestSource) {this.requestSource.cancel('页面离开取消请求');}next();},
};
</script>

总结

  • 全局取消:通过在 vue-routerbeforeEach 守卫中调用 cancelPendingRequests,每次路由切换时都会取消未完成的请求,避免页面切换后无用的网络请求消耗。
  • 局部取消:在页面组件内部使用 beforeRouteLeave 钩子取消单个页面的请求,确保当用户离开页面时及时中止未完成的请求。
  • 防止重复请求:通过对请求进行唯一标识,并在发起请求前检查是否有相同请求正在进行,可以防止重复发送相同的请求。

通过结合 vue-routeraxiosCancelToken,可以有效地管理请求的生命周期,确保用户体验的流畅性。

在实际开发中,前端项目可能会需要请求不同的服务地址(例如,不同的 API 网关、微服务等),而 AxiosbaseURL 是请求的默认根路径。如果项目中需要根据具体请求来动态配置不同的 baseURL,有几种方式可以处理:

常见解决方案

1. 在请求时动态指定 baseURL

可以根据不同的业务逻辑或接口,动态为每个请求指定 baseURLAxios 支持在发起请求时覆盖默认的 baseURL,通过为每个请求单独设置 baseURL 来实现多服务地址请求。

import axios from 'axios';// 默认 axios 实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // 默认的 baseURLtimeout: 10000, // 超时时间
});// 示例:根据业务逻辑或特定条件指定不同的 baseURL
export function fetchDataFromServiceA() {return service({url: '/serviceA/data',baseURL: 'https://api.serviceA.com', // 为这个请求动态设置 baseURLmethod: 'get',});
}export function fetchDataFromServiceB() {return service({url: '/serviceB/data',baseURL: 'https://api.serviceB.com', // 另一个服务的 baseURLmethod: 'get',});
}
2. 创建多个 Axios 实例

如果不同服务的 baseURL 是固定的,并且它们各自有独立的配置,那么可以为每个服务创建一个独立的 Axios 实例。这样可以对不同服务有不同的 baseURLheaders 或其他配置。

import axios from 'axios';// 服务A的 axios 实例
const serviceA = axios.create({baseURL: 'https://api.serviceA.com',timeout: 10000,
});// 服务B的 axios 实例
const serviceB = axios.create({baseURL: 'https://api.serviceB.com',timeout: 10000,
});// 使用 serviceA 发送请求
export function fetchServiceAData() {return serviceA.get('/data');
}// 使用 serviceB 发送请求
export function fetchServiceBData() {return serviceB.get('/data');
}

这种方式使得各个服务的配置更加独立清晰,有助于代码的可维护性。

3. 根据环境动态配置 baseURL

对于一些需要根据不同的环境(如开发、生产等)动态切换服务地址的需求,可以在配置文件中根据 NODE_ENV 来设定不同的 baseURL

// .env.development
VUE_APP_BASE_API=https://dev.api.com// .env.production
VUE_APP_BASE_API=https://prod.api.com

axios 的封装文件中读取环境变量:

import axios from 'axios';const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // 根据环境变量设置 baseURLtimeout: 10000,
});export default service;
4. 通过请求拦截器动态修改 baseURL

如果需要根据请求的特定条件(例如请求的路径、参数等)来动态设置不同的 baseURL,可以在 axios 的请求拦截器中根据条件修改 config.baseURL

import axios from 'axios';// 默认 axios 实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // 默认的 baseURLtimeout: 10000,
});// 请求拦截器 - 根据特定条件动态设置 baseURL
service.interceptors.request.use((config) => {if (config.url.includes('/serviceA')) {config.baseURL = 'https://api.serviceA.com'; // 动态切换到 serviceA 的 baseURL} else if (config.url.includes('/serviceB')) {config.baseURL = 'https://api.serviceB.com'; // 动态切换到 serviceB 的 baseURL}return config;},(error) => {return Promise.reject(error);}
);export default service;
5. 在组件中指定 baseURL

在组件中直接为特定的请求指定 baseURL,这也是一种灵活的方式,适用于只在特定组件内进行请求的情况。

<template><div><button @click="fetchData">获取数据</button></div>
</template><script>
import axios from 'axios';export default {methods: {fetchData() {axios({url: '/data',baseURL: 'https://api.serviceA.com', // 在组件中指定 baseURLmethod: 'get',}).then((response) => {console.log('数据:', response.data);}).catch((error) => {console.error('请求错误:', error);});},},
};
</script>

6. 根据 API 名称或者模块切换 baseURL

可以将 API 分模块管理,通过模块名自动选择对应的 baseURL。例如,可以根据模块名动态选择不同的 baseURL

const serviceMap = {serviceA: 'https://api.serviceA.com',serviceB: 'https://api.serviceB.com',
};export function request({ module, url, ...options }) {const service = axios.create({baseURL: serviceMap[module], // 动态选择 baseURLtimeout: 10000,});return service({ url, ...options });
}// 使用
request({module: 'serviceA',url: '/data',method: 'get',
}).then(response => {console.log(response.data);
});

总结

  1. 动态设置 baseURL:直接在请求中指定 baseURL,适用于小范围的不同服务地址请求。
  2. 多个 Axios 实例:为每个服务创建独立的 Axios 实例,适用于多个不同服务地址的项目,清晰明确。
  3. 环境变量切换:根据开发、生产环境自动配置不同的 baseURL
  4. 拦截器动态修改:通过请求拦截器动态修改 baseURL,适合复杂场景的需求。
  5. 模块化管理:根据模块名或者业务需求选择不同的 baseURL,可读性更高。

根据你的项目规模和需求,可以选择最适合的方式处理多 baseURL 问题。

加密解密方案

在前后端通信中,使用加密方案来保护数据的安全性是非常重要的。常见的加密方式通常有对称加密、非对称加密和哈希算法。以下是一些在 Axios 中常用的加密方案,结合前后端的使用场景以及如何在 Axios 请求中应用这些加密方式。

常见加密方式

1. 对称加密(Symmetric Encryption)

对称加密是指加密和解密使用相同的密钥。常见的对称加密算法有 AES(Advanced Encryption Standard)。在前后端通信中,可以使用对称加密对敏感信息进行加密,后端使用相同的密钥解密。

使用场景:

对称加密通常用于加密敏感数据(如用户密码、银行信息等)在传输中的保护。

在 Axios 中使用 AES 加密:
npm install crypto-js
import axios from 'axios';
import CryptoJS from 'crypto-js';const secretKey = 'your-secret-key'; // 需要和后端保持一致的密钥// 加密函数
function encryptData(data) {const ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), secretKey).toString();return ciphertext;
}// 解密函数(在后端实现,前端不需要)
function decryptData(ciphertext) {const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);const decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));return decryptedData;
}// 使用加密后的数据发送请求
axios.post('/api/encrypt', {data: encryptData({username: 'user1',password: 'mypassword',}),
}).then(response => {console.log('Response:', response.data);
}).catch(error => {console.error('Error:', error);
});

在这种情况下,前端对敏感数据进行 AES 加密,然后通过 Axios 发送给服务器,服务器在收到数据后用相同的密钥进行解密。

2. 非对称加密(Asymmetric Encryption)

非对称加密使用一对密钥:公钥和私钥。常见的非对称加密算法是 RSA。通常,前端使用公钥加密数据,后端使用私钥解密数据。非对称加密适用于加密少量数据,因为它的加密速度较慢。

使用场景:

非对称加密常用于需要高度安全性的数据传输,如敏感的身份验证信息、密钥交换等。

在 Axios 中使用 RSA 加密:
npm install node-forge
import axios from 'axios';
import forge from 'node-forge';// 从后端获取公钥
axios.get('/api/public-key').then(response => {const publicKey = response.data.publicKey;// 使用 RSA 公钥加密const encryptWithRSA = (data, publicKey) => {const rsa = forge.pki.publicKeyFromPem(publicKey);const encrypted = rsa.encrypt(forge.util.encodeUtf8(data));return forge.util.encode64(encrypted);};// 加密数据const encryptedData = encryptWithRSA(JSON.stringify({username: 'user1',password: 'mypassword',}), publicKey);// 发送加密后的数据axios.post('/api/encrypt', {data: encryptedData,}).then(response => {console.log('Response:', response.data);});
});

在这种场景下,前端获取后端的公钥后,用 RSA 加密敏感数据,发送给服务器。后端用私钥解密数据。

3. 哈希算法(Hashing)

哈希算法用于将任意长度的数据映射为固定长度的散列值。常见的哈希算法包括 MD5、SHA-256 等。哈希算法通常用于验证数据的完整性,例如校验文件是否被篡改或传输过程中是否损坏。

使用场景:

哈希函数常用于密码的加盐哈希存储,或通过签名验证请求的完整性(如 HMAC)。

在 Axios 中使用 SHA-256 进行数据签名:
npm install crypto-js
import axios from 'axios';
import CryptoJS from 'crypto-js';// 加盐哈希
function hashData(data, secret) {const hash = CryptoJS.HmacSHA256(data, secret);return hash.toString(CryptoJS.enc.Hex);
}// 创建要发送的数据
const data = JSON.stringify({username: 'user1',password: 'mypassword',
});// 生成签名
const secret = 'your-secret-key';
const signature = hashData(data, secret);// 发送带有签名的请求
axios.post('/api/verify', {data,signature, // 传递签名以验证完整性
}).then(response => {console.log('Response:', response.data);
});

这种方式确保请求在传输过程中没有被篡改,后端可以使用相同的密钥对接收到的数据进行哈希计算,并验证签名是否匹配。

4. 混合加密

混合加密是对称加密和非对称加密的结合,通常用于提高安全性和效率。在实际应用中,通常会使用 RSA 非对称加密来加密 AES 对称加密的密钥,而数据则使用 AES 加密,这样可以兼顾效率和安全性。

使用场景:

混合加密常用于需要传输大量数据但仍需要高度安全性的场景,特别是前端生成随机的对称密钥,用 RSA 加密这个密钥后传递给后端。

实现混合加密:
import axios from 'axios';
import CryptoJS from 'crypto-js';
import forge from 'node-forge';// 使用 AES 生成随机密钥
function generateAESKey() {return CryptoJS.lib.WordArray.random(16).toString();
}// AES 加密数据
function encryptData(data, aesKey) {return CryptoJS.AES.encrypt(data, aesKey).toString();
}// RSA 公钥加密 AES 密钥
function encryptAESKeyWithRSA(aesKey, publicKey) {const rsa = forge.pki.publicKeyFromPem(publicKey);const encrypted = rsa.encrypt(forge.util.encodeUtf8(aesKey));return forge.util.encode64(encrypted);
}// 混合加密过程
axios.get('/api/public-key').then(response => {const publicKey = response.data.publicKey;const aesKey = generateAESKey();const encryptedData = encryptData(JSON.stringify({username: 'user1',password: 'mypassword',}), aesKey);const encryptedAESKey = encryptAESKeyWithRSA(aesKey, publicKey);// 发送加密的数据和加密的 AES 密钥axios.post('/api/encrypt', {encryptedData,encryptedAESKey,}).then(response => {console.log('Response:', response.data);});
});

在这种情况下,前端使用 AES 加密实际数据,并使用 RSA 加密 AES 密钥。后端接收到加密的密钥和数据后,先用 RSA 私钥解密 AES 密钥,再用 AES 密钥解密数据。

重复请求的优化和请求取消

  1. 防止重复请求
    通过使用请求的唯一标识(例如 url + method)来管理请求,防止用户短时间内重复发送相同请求。可以在发送请求前检查是否有相同的请求正在进行,如果有则不发送新的请求。

  2. 取消请求
    可以结合 axiosCancelToken,在用户离开页面或切换操作时取消未完成的请求,避免浪费资源。

总结

  • 对称加密:如 AES,适用于加密传输的敏感数据。
  • 非对称加密:如 RSA,适用于密钥交换和少量敏感数据的加密。
  • 哈希算法:如 SHA-256,常用于数据完整性验证。
  • 混合加密:结合 AES 和 RSA,兼顾性能和安全性,常用于大数据加密。

通过这些加密方案,能够有效地保护前后端通信中的数据安全。


http://www.ppmy.cn/embedded/127198.html

相关文章

鸿蒙--播放器状态控制

各个页面共享同一个播放状态,而且可以互相控制,如果传递来传递去会非常的麻烦,但是他们都是Tabs组件内的,我们在index页面提供一个状态,在各个组件接收即可 创建两个子组件,一个是播放控制的子组件,一个是背景播放的子组件 背景播放组件

【Linux】为什么创建目录文件,硬链接数是2;创建普通文件时,硬链接数是1?(超详细图文解答)

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…

SQL注入基础速通

<aside> &#x1f4a1; SQL速通 </aside> 注入点类型&#xff08;数字型&#xff0c;字符型&#xff09; 数字型&#xff1a;1 字符型&#xff1a;’ 和 ‘’ **数字型&#xff1a;?id1 and 11 ?id1 and 12 //报错为数字型字符型&#xff1a;?…

应用UX体验标准

1、应用导航 标准编号 2.1.1.1 系统返回 标准描述 所有界面都可以执行系统返回操作。 除一级界面外&#xff0c;所有全屏界面均需要提供返回/关闭/取消按钮。(全屏沉浸式场景除外) 测试方法 使用侧边返回手势&#xff0c;验证当前应用界面是否可以执行系统返回操作。检查…

Spring框架中的多重构造器选择:实例化对象的策略解析

在Spring框架中&#xff0c;依赖注入和对象实例化是核心功能之一。当我们在Spring容器中配置一个Bean&#xff0c;并且这个Bean类有多个构造器时&#xff0c;一个关键问题便浮现出来&#xff1a;当没有明确指定使用哪个构造器时&#xff0c;Spring是如何决定使用哪一个来实例化…

【C++】STL--list

1. list的介绍 list的文档介绍 2. list的使用 list中的接口比较多&#xff0c;此处类似&#xff0c;只需要掌握如何正确的使用&#xff0c;然后再去深入研究背后的原理&#xff0c;已 达到可扩展的能力。以下为list中一些常见的重要接口。 2.1 list的构造 // list的构造 vo…

【工具】HTTrack:网站一键克隆下载,实现离线浏览与备份的利器

什么是 HTTrack&#xff1f; HTTrack 是一款用于复制完整网站的开源工具&#xff0c;它可以从服务器下载整个网站的内容&#xff0c;包括 HTML 文件、图像、样式表、脚本等资源。通过这种方式&#xff0c;你可以在离线状态下浏览网站&#xff0c;就像在线一样。 HTTrack 支持…

【Adobe AE】Adobe After Effects 快捷键介绍

Adobe After Effects (简称AE) 是一款强大的视频合成和动态图形设计软件&#xff0c;掌握其快捷键能够极大提升工作效率。 WIN版本下载地址 mac版本下载地址 以下是AE中一些常用的快捷键及使用方法&#xff0c;这边我按照不同的功能分类进行了整理&#xff1a; 项目管理 新…