前端代码片段
目录
JS浏览器环境文件下载工具
/**
* JS浏览器环境文件下载
*
* @param {Blob} data 二进制数据
* @param {string} filename 保存的文件名称
* @param {string} type 文件类型
*/
export function download(data, filename, type) {
const file = new Blob([data], {type: type});
if (window.navigator.msSaveOrOpenBlob) {
// IE10+ 浏览器
// https://blog.csdn.net/weixin_37704921/article/details/84324923
window.navigator.msSaveOrOpenBlob(file, filename);
} else {
// 其它浏览器
const a = document.createElement("a")
const url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function () {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}
Node环境 AES 加密工具
安装npm install crypto-js
【encrypt.js】
import CryptoJS from "crypto-js";
// 十六位十六进制数作为密钥
const SECRET_KEY = CryptoJS.enc.Utf8.parse("1234123412341234");
// 十六位十六进制数作为密钥偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse("1234123412341234");
/**
* AES 加密
*/
export function encrypt(data) {
if (typeof data === "object") {
try {
// eslint-disable-next-line no-param-reassign
data = JSON.stringify(data);
} catch (error) {
console.log("encrypt error:", error);
}
}
const dataHex = CryptoJS.enc.Utf8.parse(data);
const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.ciphertext.toString();
}
/**
* AES 解密
*/
export function decrypt(data) {
const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
使用
<script setup>
import {encrypt, decrypt} from './utils/encrypt'
const data = "13172"
const encryptText = encrypt(data);
console.log("加密后文本：", encryptText);
const decryptText = decrypt(encryptText);
console.log("解密后文本：", decryptText);
</script>
<template>
<div>
</div>
</template>
<style scoped>
</style>
参考：https://blog.csdn.net/qq_34707272/article/details/121857485
Node环境 RSA 非对称加密工具
安装npm install jsencrypt
【encrypt.js】
import JSEncrypt from 'jsencrypt'
let priKey = '-----BEGIN RSA PRIVATE KEY-----MIICXQIBAAKBgQDvupVIIoSGBwdLXqP/ox0YYr1pj7ZmadC7i0mujqzIjpBh/NCJmZWtb4rmZyN18PPcctxIbyndJQ//BrUnFc4v0F4fjciHBuwSBAtaMBjoyj2CBiijHK6H96+cHv+AiudD0Vf3Ij0T7BaLZJZ/Ss3M25mRuT5cYN09M8Bt34Dv2wIDAQABAoGAVJQNqx+Shf7g0fSYA882qq3biezMO6HFpQVlf5KS30d9JTUfFgz7w+8AoH1vA2N5hiN4GI4vxPgYhq+FJj8JOSKAcmaGYnPKUd41yI/07tHMxNuXngJW0AyjhFFloEwp620VZGMzdPqkUMG5JvIViYoXc5yb1bE55l0TOUHUK/ECQQD9BYx4KqlNs9VKdrBla79iqjlgAff8nK542g/pIeKTcin/ARQRxVue/ABHyNnaJY+Ji7fpRACg3u2ECklur1DlAkEA8oz6X2l2xt+lK2bXCJhQ8dI68DGAQZBIwAHNQfTkppZXuTg/EErPo6XgXT3cletQ6+rvF3Dd2lk8loRQ5JzxvwJAdUIxCy+aLqx82HmQ3i/FDlCdLmU7LBLguJk2bnCJtJNf6xHw3xt7jn5zEtF+RJ7Lmo7puG0PbX5izKKHzYfqEQJBALTZGuHDQBW+sWewEUtOTqRP7TQkpI2+KBBKB6JTF52CYbwvzQ23yiQpzSWYt31s7HRLQqRGupRQjxVnaO1ce/8CQQCy65L/c+kqTF3zqrnoaKlScz6D877fsR1MQO3OJdCPkJdKTaGVrtKMazBBp0CN9Z98SJxvqIFizpesQnb+Daq2-----END RSA PRIVATE KEY-----'
let pubKey = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDvupVIIoSGBwdLXqP/ox0YYr1pj7ZmadC7i0mujqzIjpBh/NCJmZWtb4rmZyN18PPcctxIbyndJQ//BrUnFc4v0F4fjciHBuwSBAtaMBjoyj2CBiijHK6H96+cHv+AiudD0Vf3Ij0T7BaLZJZ/Ss3M25mRuT5cYN09M8Bt34Dv2wIDAQAB-----END PUBLIC KEY-----'
let RSA = {
/**
* RSA 非对称加密
* 公钥加密
*
* @param {string} str
*/
encrypt(str) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(str);
},
/**
* RSA 非对称加密
* 私钥解密
*
* @param {string} str
*/
decrypt(str) {
let decrypt = new JSEncrypt();
decrypt.setPrivateKey(priKey);
return decrypt.decrypt(str);
}
}
export default RSA;
使用
<script setup>
import RSA from './utils/encrypt'
const msg = '要加密的内容';
const a = RSA.encrypt(msg);
const b = RSA.decrypt(a);
console.log("==========================")
console.log("待加密消息：" + msg);
console.log("加密后：" + a);
console.log("解密后：" + b);
console.log("==========================")
</script>
<template>
<div>
</div>
</template>
<style scoped>
</style>
参考：https://blog.csdn.net/XKFC1/article/details/125220301
Node环境AES、RSA、消息摘要联合加解密工具
/**
* crypto-js进行AES加密,安装: npm i --save crypto-js
* jsencrypt进行RSA加密,安装: npm i --save jsencrypt
*
* 官网:https://github.com/travist/jsencrypt
*/
import CryptoJS from 'crypto-js'
import {JSEncrypt} from 'jsencrypt'
/**
* 随机生成16位的AES密钥
*/
function getKeyAES() {
const key = []
for (let i = 0; i < 16; i++) {
const num = Math.floor(Math.random() * 26)
const charStr = String.fromCharCode(97 + num)
key.push(charStr.toUpperCase())
}
return key.join('')
}
/**
* AES加密
* 转Utf8编码: CryptoJS.enc.Utf8.parse();
* 转Base64: CryptoJS.enc.Base64.stringify();
* @param data 需要加密的数据
* @param key 密钥
* @returns 加密后的数据
*/
function encodeAES(data, key) {
if (typeof data !== 'string') {
data = JSON.stringify(data)
}
// AES加密
const result = CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(key), {
iv: CryptoJS.enc.Utf8.parse('1234567812345678'), // 向量。使用CBC模式时，需要使用向量。
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.ZeroPadding // 偏移量。使用非补码方式时，需要使用ZeroPadding。默认为PKCS5Padding。
})
// base64转码
return CryptoJS.enc.Base64.stringify(result.ciphertext)
}
/**
* AES解密
* @param data 需要解密的数据
* @param key 密钥
* @returns 解密后的数据
*/
function decodeAES(data, key) {
if (typeof data !== 'string') {
data = JSON.stringify(data)
}
const result = CryptoJS.AES.decrypt(data, CryptoJS.enc.Utf8.parse(key), {
iv: CryptoJS.enc.Utf8.parse('1234567812345678'), // 向量。使用CBC模式时，需要使用向量。
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.ZeroPadding // 偏移量。使用非补码方式时，需要使用ZeroPadding。默认为PKCS5Padding。
})
// 转为utf-8编码
return CryptoJS.enc.Utf8.stringify(result)
}
/**
* RSA加密
* @param data 需要加密的数据
* @param key 密钥
* @returns 加密后的数据
*/
function encodeRSA(data, key) {
const encryptTool = new JSEncrypt()
encryptTool.setPublicKey(key)
return encryptTool.encrypt(data)
}
/**
* RSA解密
* @param data 需要解密的数据
* @param key 密钥
* @returns 解密后的数据
*/
function decodeRSA(data, key) {
const encryptTool = new JSEncrypt()
encryptTool.setPrivateKey(key)
return encryptTool.decrypt(data)
}
/**
* 签名,支持SHA256签名与SHA1签名
* @param data 需要签名的数据
* @param key SHA1签名的密钥
*/
function signature(data, key = '') {
let params = ''
// 先对data排序，然后拼接字符串
Object.keys(data)
.sort()
.forEach(item => {
params += `${item}=${data[item]}, `
})
params = params.slice(0, -2)
// SHA256签名：使用CryptoJS.SHA256(),先将SHA256加密,然后转Hex的16进制
return CryptoJS.SHA256(`{${params}}`).toString(CryptoJS.enc.Hex)
}
// 加解密工具
const Tool = {
secret: 'd70469c6-d8d7-4134-994e-5b84693a1b9c', // 私钥，用于防止别人冒充签名
RSA_KEY: '', // RSA公钥，后端接口获取, 储存在前端
// AES_KEY: getKeyAES(), // AES密钥，在前端生成一次
AES_KEY: "KDDXUMSOSCBURSSW",
/**
* 加密
* @param data 接口请求参数
* 说明：请求参数data + 公共参数、AES加密、RSA加密、SHA签名
* 另外密码等敏感参数, 需要提前单独加密
*/
encode(data) {
const {secret, AES_KEY, RSA_KEY} = this
const requestDataEnc = encodeAES(data, AES_KEY) // 所有请求参数进行AES加密
const encodeKey = encodeRSA(AES_KEY, RSA_KEY) // AES的密钥进行RSA加密
const timestamp = new Date().getTime() // 当前时间戳
const result = {secret, encodeKey, requestDataEnc, timestamp}
// 签名,防止被数据被篡改
result.sign = signature(result)
// 防止私钥泄露移除。
delete result.secret
return result
},
/**
* 解密
*
* @param {string} json
*/
decode(json) {
const {AES_KEY} = this
let result = decodeAES(json, AES_KEY)
result = JSON.parse(result)
return result
},
// 加密密码
encodePwd(data) {
const {RSA_KEY} = this
return encodeRSA(data, RSA_KEY)
}
}
export default Tool
使用
<script setup>
import Tool from "@/utils/encrypt";
console.log("============请求数据加密==============")
console.log(Tool.encode("123"))
console.log("============解密响应数据==============")
console.log(Tool.decode("Chu+lrPiDwAeKMhNSUnC7g=="))
</script>
<template>
<div>
</div>
</template>
<style scoped>
</style>
参考：https://blog.csdn.net/qq_32247819/article/details/120821664
axios网络请求工具
项目结构
配置
【config.js】
// axios文档：http://www.axios-js.com/zh-cn/docs/
// 参考文档：https://blog.csdn.net/ZHANGYANG_1109/article/details/122610002
import axios from "axios";
// 全局配置
// 后端主机地址
// 测试路径 "/" 、"/users/mzabriskie"
axios.defaults.baseURL = "https://api.github.com";
// 请求超时时间
axios.defaults.timeout = 1000;
// 所有请求都会添加认证头
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// post请求添加的请求头
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 添加请求拦截器(可添加多个,按顺序执行)
axios.interceptors.request.use(function (config) {
console.log("===========> 请求拦截器-发出请求之前执行 <===========")
console.log("===========> 请求拦截器-请求配置：" + JSON.stringify(config) + " <===========")
return config;
}, function (error) {
console.log("===========> 请求拦截器-(注意)是在请求之前还没有请求时就发生错误的时候执行 <===========")
console.log("===========> 请求拦截器-请求错误原因：" + error + " <===========")
return Promise.reject(error);
});
// 添加响应拦截器(可添加多个,按顺序执行)
axios.interceptors.response.use(function (response) {
console.log("===========> 响应拦截器-响应成功执行 <===========")
console.log("===========> 响应拦截器-响应成功数据:" + JSON.stringify(response) + " <===========")
return response;
}, function (error) {
console.log("===========> 响应拦截器-响应发生错误执行 <===========")
console.log("===========> 响应拦截器-请求错误原因：" + error + " <===========")
return Promise.reject(error);
});
// 响应状态码验证拦截，返回 false 时会执行异常逻辑,true则执行正常逻辑(只能有一个)
axios.defaults.validateStatus = (status) => {
console.log("===========> 响应状态码验证拦截：" + status + " <===========")
return status === 200;
}
export default axios
【index.js】
import axios from "./config";
/**
* 获取GitHub接口信息
*
* @author J
* @date 2023/6/11 0:43
* @param {function} cb 请求成功回调函数
*/
export function getGitHubApi(cb) {
axios.get().then(resp => {
cb(resp.data, null);
}).catch(e => {
cb(null, e)
});
}
// export const api = axios; // 外部通过 api 访问此处的 axios
export default axios // 外部通过 default 访问此处的 axios
使用
【App.vue】
<script setup>
import * as reqUtil from "./api"; // 会自动导入src/api目录下的index.js模块文件
import {ref} from "vue";
// 将即将要渲染的数据变成响应式的
let data = ref(new Array());
// 数据索引响应式
let index = ref(0);
// 定时循环标志位
let flag = true;
// 定时器唯一表示
let interval = null;
/**
* 数据索引范围控制
*/
function intervalRangeControl() {
return setInterval(() => {
if (index.value === 32) {
index.value = 0;
} else {
index.value = index.value + 1;
}
}, 50);
}
/**
* 循环控制启动停止控制
*/
onclick = () => {
if (flag) {
interval = intervalRangeControl();
flag = false;
} else {
clearInterval(interval);
flag = true;
}
}
/**
* 方式一
* 回调函数方式获取接口数据
*/
reqUtil.getGitHubApi((t, e) => {
if (e != null) {
console.log("===========> 请求发生错误:" + e + " <===========")
} else {
for (let i in t) {
data.value.push(t[i]);
}
}
})
/**
* 方式二
* 常规方式获取接口数据
*/
// reqUtil.api.get().then(resp => {
reqUtil.default.get().then(resp => {
// console.log(resp.data);
// console.log(resp.status);
// console.log(resp.statusText);
// console.log(resp.headers);
// console.log(resp.config);
for (let i in resp.data) {
data.value.push(resp.data[i]);
}
}).catch(e => {
console.log("===========> 请求发生错误" + e + " <===========")
});
</script>
<template>
<div>
<h1 style="color: red"> {{ data[index] }}</h1>
</div>
</template>
<style scoped>
</style>
websocket集成示例
websocket在线测试连接地址：http://www.websocket-test.com/
websocket库地址：https://www.npmjs.com/package/websocket
安装：npm i websocket
<script setup>
import * as websocket from "websocket";
const ws = websocket.w3cwebsocket("ws://121.40.165.18:8800")
console.log("===========> 初始化 <===========");
console.log(ws);
console.log("===========> 结束 <===========");
ws.onopen = resp => {
console.log("===========> 全双工通信准备就绪 <===========");
console.log(resp);
console.log("===========> 结束 <===========");
}
ws.onmessage = (msg) => {
console.log(msg.data);
}
let n = 1;
onclick = () => {
// 连接状态准备就绪
if (1 === ws.readyState) {
ws.send("随便说点什么" + n);
n = n + 1;
}
}
</script>
<template>
<div><h1></h1></div>
</template>
<style scoped></style>
