前端代码片段

JS浏览器环境文件下载工具
Node环境 AES 加密工具
Node环境 RSA 非对称加密工具
Node环境AES、RSA、消息摘要联合加解密工具
axios网络请求工具
websocket集成示例

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>

posted @ 2023-06-08 18:06 黄河大道东阅读(75) 评论(0) 编辑收藏举报

刷新页面返回顶部

黄河大道东

慎独