前端CryptoJS和Java后端数据互相加解密(AES)

news2025/1/29 14:02:58

目录

  • 一、序言
  • 二、关于前端CryptoJS
    • 1、CryptoJS简单介绍
    • 2、加密和填充模式选择
    • 3、前端AES加解密示例
      • (1) cryptoutils工具类
      • (2) 测试用例
      • (3) 加解密后输出内容说明
  • 三、Java后端AES加解密
    • 1、Java中支持的加密模式和填充说明
    • 2、工具类CryptoUtils
    • 3、测试用例

一、序言

最近刚好在做一个简单的保险代理人运营平台,主要是为了方便个人展业,由于有些客户数据比较敏感,所以在用户登录时准备对登录密码进行一波加密后再传输。

这里我准备用AES对称加密算法对数据进行加密传输,经过调研后前端加解密相关准备用CryptoJS,后端加解密工具类根据JDK1.8官方文档自己来实现。



二、关于前端CryptoJS

1、CryptoJS简单介绍

CryptoJS是标准安全加密算法的JavaScript实现,运行速度快,接口简单,见名知意。文档说明可参考:CryptoJS文档说明。

CryptoJS的实现主要有哈希算法,HMAC、加密算法、以及常用编解码算法。
哈希算法,如MD5、SHA-1、SHA-2等。
加密算法,如AES、DES等。
编解码算法,如Base64、Hex16等。

在这里插入图片描述

2、加密和填充模式选择

下图是CryptoJS支持的加密模式和填充模式,CryptoJS默认的加密模式为CBC,填充模式为Pkcs7。
在这里插入图片描述
常用的加密模式有CBC和ECB,由于CBC安全性更高,所以我们还是选用CBC和Pkcs7的组合。

3、前端AES加解密示例

(1) cryptoutils工具类

这里我封装了一个CryptoJS工具类

import CryptoJS from 'crypto-js'

/**
 * AES加密
 * @param plainText 明文
 * @param keyInBase64Str base64编码后的key
 * @param ivInBase64Str base64编码后的初始化向量(只有CBC模式下才支持)
 * @return base64编码后的密文
 */
export function encryptByAES(plainText, keyInBase64Str, ivInBase64Str) {
  let key = CryptoJS.enc.Base64.parse(keyInBase64Str)
  let iv = CryptoJS.enc.Base64.parse(ivInBase64Str)
  let encrypted = CryptoJS.AES.encrypt(plainText, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  // 这里的encrypted不是字符串,而是一个CipherParams对象
  return encrypted.ciphertext.toString(CryptoJS.enc.Base64)
}

/**
 * AES解密
 * @param cipherText 密文
 * @param keyInBase64Str base64编码后的key
 * @param ivInBase64Str base64编码后的初始化向量(只有CBC模式下才支持)
 * @return 明文
 */
export function decryptByAES(cipherText, keyInBase64Str, ivInBase64Str) {
  let key = CryptoJS.enc.Base64.parse(keyInBase64Str)
  let iv = CryptoJS.enc.Base64.parse(ivInBase64Str)
  // 返回的是一个Word Array Object,其实就是Java里的字节数组
  let decrypted = CryptoJS.AES.decrypt(cipherText, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })

  return decrypted.toString(CryptoJS.enc.Utf8)
}

(2) 测试用例

let secret = 'sQPoC/1do9BZMkg8I5c09A=='
let cipherText = encryptByAES('Hello', secret, secret)
let plainText = decryptByAES(cipherText, secret, secret)
console.log(`Hello加密后的密文为:${cipherText}`)
console.log(`解密后的内容为:${plainText}`)

控制台输出内容如下:

Hello加密后的密文为:3IDpt0VzxmAv10qvQRubFQ==
解密后的内容为:Hello

(3) 加解密后输出内容说明

在这里插入图片描述
根据官方文档,解密后的明文是一个WordArray对象,也就是我们所说的Java中的字节数组,该对象有一个toString方法可以转换成16进制、Base64、UTF8等字符串。

加密后的密文也不是字符串,而是一个CipherParams对象,其中的ciphertext属性也是一个 WordArray对象。



三、Java后端AES加解密

1、Java中支持的加密模式和填充说明

前面我们前端AES加密模式用的是CBC,填充模式时是PKCS7。

现在我们先来看看Java中支持的加密模式和填充,在Java中这些被称为transformation,具体支持哪些transformation,请参考:JDK8中加密算法实现要求。

在这里插入图片描述
根据上图,我们只要算法、加密模式和填充模式和前端保持一致就行了,这里我们选用的transformationAES/CBC/PKCS5Padding (128)

备注:前端CryptoJS的填充模式为PKCS7,而Java中的填充模式为PKCS5,但这里并不会有啥影响。

2、工具类CryptoUtils

这里我自己封装了一个工具类,支持AES、DES、RSA、数字签名与校验等。

/**
 * 支持AES、DES、RSA加密、数字签名以及生成对称密钥和非对称密钥对
 */
public class CryptoUtils {

	private static final Charset DEFAULT_CHARSET = StandardCharsets.UTF_8;
	private static final Encoder BASE64_ENCODER = Base64.getEncoder();
	private static final Decoder BASE64_DECODER = Base64.getDecoder();

	private static final Map<Algorithm, KeyFactory> KEY_FACTORY_CACHE = new ConcurrentHashMap<>();
	private static final Map<Algorithm, Cipher> CIPHER_CACHE = new HashMap<>();

	/**
	 * 生成对称密钥,目前支持的算法有AES、DES
	 * @param algorithm
	 * @return
	 * @throws NoSuchAlgorithmException
	 */
	public static String generateSymmetricKey(Algorithm algorithm) throws NoSuchAlgorithmException {
		KeyGenerator generator = KeyGenerator.getInstance(algorithm.getName());
		generator.init(algorithm.getKeySize());
		SecretKey secretKey = generator.generateKey();
		return BASE64_ENCODER.encodeToString(secretKey.getEncoded());
	}

	/**
	 * 生成非对称密钥对,目前支持的算法有RSA、DSA
	 * @param algorithm
	 * @return
	 * @throws NoSuchAlgorithmException
	 */
	public static AsymmetricKeyPair generateAsymmetricKeyPair(Algorithm algorithm) throws NoSuchAlgorithmException {
		KeyPairGenerator generator = KeyPairGenerator.getInstance(algorithm.getName());
		generator.initialize(algorithm.getKeySize());
		KeyPair keyPair = generator.generateKeyPair();
		String publicKey = BASE64_ENCODER.encodeToString(keyPair.getPublic().getEncoded());
		String privateKey = BASE64_ENCODER.encodeToString(keyPair.getPrivate().getEncoded());
		return new AsymmetricKeyPair(publicKey, privateKey);
	}

	public static String encryptByRSA(String publicKeyText, String plainText) throws Exception {
		return encryptAsymmetrically(publicKeyText, plainText, Algorithm.RSA_ECB_PKCS1);
	}

	public static String decryptByRSA(String privateKeyText, String ciphertext) throws Exception {
		return decryptAsymmetrically(privateKeyText, ciphertext, Algorithm.RSA_ECB_PKCS1);
	}

	/**
	 * SHA1签名算法和DSA加密算法结合使用生成数字签名
	 * @param privateKeyText
	 * @param msg
	 * @return 数字签名
	 * @throws Exception
	 */
	public static String signBySHA1WithDSA(String privateKeyText, String msg) throws Exception {
		return doSign(privateKeyText, msg, Algorithm.DSA, Algorithm.SHA1WithDSA);
	}

	/**
	 * SHA1签名算法和RSA加密算法结合使用生成数字签名
	 * @param privateKeyText 私钥
	 * @param msg 待加签内容
	 * @return 数字签名
	 * @throws Exception
	 */
	public static String signBySHA1WithRSA(String privateKeyText, String msg) throws Exception {
		return doSign(privateKeyText, msg, Algorithm.RSA_ECB_PKCS1, Algorithm.SHA1WithRSA);
	}

	/**
	 * SHA256签名算法和RSA加密算法结合使用生成数字签名
	 * @param privateKeyText 私钥
	 * @param msg 待加签内容
	 * @return 数字签名
	 * @throws Exception
	 */
	public static String signBySHA256WithRSA(String privateKeyText, String msg) throws Exception {
		return doSign(privateKeyText, msg, Algorithm.RSA_ECB_PKCS1, Algorithm.SHA256WithRSA);
	}

	/**
	 * SHA1签名算法和DSA加密算法检验数字签名
	 * @param publicKeyText 公钥
	 * @param msg 待验签内容
	 * @param signatureText 数字
	 * @return 检验是否成功
	 * @throws Exception
	 */
	public static boolean verifyBySHA1WithDSA(String publicKeyText, String msg, String signatureText) throws Exception {
		return doVerify(publicKeyText, msg, signatureText, Algorithm.DSA, Algorithm.SHA1WithDSA);
	}

	/**
	 * SHA1签名算法和RSA加密算法检验数字签名
	 * @param publicKeyText 公钥
	 * @param msg 待验签内容
	 * @param signatureText 签名
	 * @return 校验是否成功
	 * @throws Exception
	 */
	public static boolean verifyBySHA1WithRSA(String publicKeyText, String msg, String signatureText) throws Exception {
		return doVerify(publicKeyText, msg, signatureText, Algorithm.RSA_ECB_PKCS1, Algorithm.SHA1WithRSA);
	}

	/**
	 * SHA256签名算法和RSA加密算法检验数字签名
	 * @param publicKeyText 公钥
	 * @param msg 待验签内容
	 * @param signatureText 签名
	 * @return 校验是否成功
	 * @throws Exception
	 */
	public static boolean verifyBySHA256WithRSA(String publicKeyText, String msg, String signatureText) throws Exception {
		return doVerify(publicKeyText, msg, signatureText, Algorithm.RSA_ECB_PKCS1, Algorithm.SHA256WithRSA);
	}

	/**
	 * 对称加密
	 * @param secretKey 密钥
	 * @param iv 加密向量,只有CBC模式才支持
	 * @param plainText 明文
	 * @param algorithm 对称加密算法,如AES、DES
	 * @return
	 * @throws Exception
	 */
	public static String encryptSymmetrically(String secretKey, String iv, String plainText, Algorithm algorithm) throws Exception {
		SecretKey key = decodeSymmetricKey(secretKey, algorithm);
		IvParameterSpec ivParameterSpec = StringUtils.isBlank(iv) ? null : decodeIv(iv);
		byte[] plainTextInBytes = plainText.getBytes(DEFAULT_CHARSET);
		byte[] ciphertextInBytes = transform(algorithm, Cipher.ENCRYPT_MODE, key, ivParameterSpec, plainTextInBytes);

		return BASE64_ENCODER.encodeToString(ciphertextInBytes);
	}

	/**
	 * 对称解密
	 * @param secretKey 密钥
	 * @param iv 加密向量,只有CBC模式才支持
	 * @param ciphertext 密文
	 * @param algorithm 对称加密算法,如AES、DES
	 * @return
	 * @throws Exception
	 */
	public static String decryptSymmetrically(String secretKey, String iv, String ciphertext, Algorithm algorithm) throws Exception {
		SecretKey key = decodeSymmetricKey(secretKey, algorithm);
		IvParameterSpec ivParameterSpec = StringUtils.isBlank(iv) ? null : decodeIv(iv);
		byte[] ciphertextInBytes = BASE64_DECODER.decode(ciphertext);
		byte[] plainTextInBytes = transform(algorithm, Cipher.DECRYPT_MODE, key, ivParameterSpec, ciphertextInBytes);
		return new String(plainTextInBytes, DEFAULT_CHARSET);
	}

	/**
	 * 非对称加密
	 * @param publicKeyText 公钥
	 * @param plainText 明文
	 * @param algorithm 非对称加密算法
	 * @return
	 * @throws Exception
	 */
	public static String encryptAsymmetrically(String publicKeyText, String plainText, Algorithm algorithm) throws Exception {
		PublicKey publicKey = regeneratePublicKey(publicKeyText, algorithm);
		byte[] plainTextInBytes = plainText.getBytes(DEFAULT_CHARSET);
		byte[] ciphertextInBytes = transform(algorithm, Cipher.ENCRYPT_MODE, publicKey, plainTextInBytes);
		return BASE64_ENCODER.encodeToString(ciphertextInBytes);
	}

	/**
	 * 非对称解密
	 * @param privateKeyText 私钥
	 * @param ciphertext 密文
	 * @param algorithm 非对称加密算法
	 * @return
	 * @throws Exception
	 */
	public static String decryptAsymmetrically(String privateKeyText, String ciphertext, Algorithm algorithm) throws Exception {
		PrivateKey privateKey = regeneratePrivateKey(privateKeyText, algorithm);
		byte[] ciphertextInBytes = BASE64_DECODER.decode(ciphertext);
		byte[] plainTextInBytes = transform(algorithm, Cipher.DECRYPT_MODE, privateKey, ciphertextInBytes);
		return new String(plainTextInBytes, DEFAULT_CHARSET);
	}

	/**
	 * 生成数字签名
	 * @param privateKeyText 私钥
	 * @param msg 传输的数据
	 * @param encryptionAlgorithm 加密算法,见Algorithm中的加密算法
	 * @param signatureAlgorithm 签名算法,见Algorithm中的签名算法
	 * @return 数字签名
	 * @throws Exception
	 */
	public static String doSign(String privateKeyText, String msg, Algorithm encryptionAlgorithm, Algorithm signatureAlgorithm)
		throws Exception {
		PrivateKey privateKey = regeneratePrivateKey(privateKeyText, encryptionAlgorithm);
		// Signature只支持签名算法
		Signature signature = Signature.getInstance(signatureAlgorithm.getName());
		signature.initSign(privateKey);
		signature.update(msg.getBytes(DEFAULT_CHARSET));
		byte[] signatureInBytes = signature.sign();
		return BASE64_ENCODER.encodeToString(signatureInBytes);
	}

	/**
	 * 数字签名验证
	 * @param publicKeyText 公钥
	 * @param msg 传输的数据
	 * @param signatureText 数字签名
	 * @param encryptionAlgorithm 加密算法,见Algorithm中的加密算法
	 * @param signatureAlgorithm 签名算法,见Algorithm中的签名算法
	 * @return 校验是否成功
	 * @throws Exception
	 */
	public static boolean doVerify(String publicKeyText, String msg, String signatureText, Algorithm encryptionAlgorithm,
		Algorithm signatureAlgorithm) throws Exception {
		PublicKey publicKey = regeneratePublicKey(publicKeyText, encryptionAlgorithm);
		Signature signature = Signature.getInstance(signatureAlgorithm.getName());
		signature.initVerify(publicKey);
		signature.update(msg.getBytes(DEFAULT_CHARSET));
		return signature.verify(BASE64_DECODER.decode(signatureText));
	}

	/**
	 * 将密钥进行Base64位解码,重新生成SecretKey实例
	 * @param secretKey 密钥
	 * @param algorithm 算法
	 * @return
	 */
	private static SecretKey decodeSymmetricKey(String secretKey, Algorithm algorithm) {
		byte[] key = BASE64_DECODER.decode(secretKey);
		return new SecretKeySpec(key, algorithm.getName());
	}

	private static IvParameterSpec decodeIv(String iv) {
		byte[] ivInBytes = BASE64_DECODER.decode(iv);
		return new IvParameterSpec(ivInBytes);
	}

	private static PublicKey regeneratePublicKey(String publicKeyText, Algorithm algorithm)
		throws NoSuchAlgorithmException, InvalidKeySpecException {
		byte[] keyInBytes = BASE64_DECODER.decode(publicKeyText);
		KeyFactory keyFactory = getKeyFactory(algorithm);
		// 公钥必须使用RSAPublicKeySpec或者X509EncodedKeySpec
		KeySpec publicKeySpec = new X509EncodedKeySpec(keyInBytes);
		PublicKey publicKey = keyFactory.generatePublic(publicKeySpec);
		return publicKey;
	}

	private static PrivateKey regeneratePrivateKey(String key, Algorithm algorithm) throws Exception {
		byte[] keyInBytes = BASE64_DECODER.decode(key);
		KeyFactory keyFactory = getKeyFactory(algorithm);
		// 私钥必须使用RSAPrivateCrtKeySpec或者PKCS8EncodedKeySpec
		KeySpec privateKeySpec = new PKCS8EncodedKeySpec(keyInBytes);
		PrivateKey privateKey = keyFactory.generatePrivate(privateKeySpec);
		return privateKey;
	}

	private static KeyFactory getKeyFactory(Algorithm algorithm) throws NoSuchAlgorithmException {
		KeyFactory keyFactory = KEY_FACTORY_CACHE.get(algorithm);
		if (keyFactory == null) {
			keyFactory = KeyFactory.getInstance(algorithm.getName());
			KEY_FACTORY_CACHE.put(algorithm, keyFactory);
		}

		return keyFactory;
	}

	private static byte[] transform(Algorithm algorithm, int mode, Key key, byte[] msg) throws Exception {
		return transform(algorithm, mode, key, null, msg);
	}

	private static byte[] transform(Algorithm algorithm, int mode, Key key, IvParameterSpec iv, byte[] msg) throws Exception {
		Cipher cipher = CIPHER_CACHE.get(algorithm);
		// double check,减少上下文切换
		if (cipher == null) {
			synchronized (CryptoUtils.class) {
				if ((cipher = CIPHER_CACHE.get(algorithm)) == null) {
					cipher = determineWhichCipherToUse(algorithm);
					CIPHER_CACHE.put(algorithm, cipher);
				}
				cipher.init(mode, key, iv);
				return cipher.doFinal(msg);
			}
		}

		synchronized (CryptoUtils.class) {
			cipher.init(mode, key, iv);
			return cipher.doFinal(msg);
		}
	}

	private static Cipher determineWhichCipherToUse(Algorithm algorithm) throws NoSuchAlgorithmException, NoSuchPaddingException {
		Cipher cipher;
		String transformation = algorithm.getTransformation();
		// 官方推荐的transformation使用algorithm/mode/padding组合,SunJCE使用ECB作为默认模式,使用PKCS5Padding作为默认填充
		if (StringUtils.isNotEmpty(transformation)) {
			cipher = Cipher.getInstance(transformation);
		} else {
			cipher = Cipher.getInstance(algorithm.getName());
		}

		return cipher;
	}

	/**
	 * 算法分为加密算法和签名算法,更多算法实现见:<br/>
	 * <a href="https://docs.oracle.com/javase/8/docs/technotes/guides/security/StandardNames.html#impl">jdk8中的标准算法</a>
	 */
	@Data
	@NoArgsConstructor
	@AllArgsConstructor
	public static class Algorithm {

		/**
		 * 以下为加密算法,加密算法transformation采用algorithm/mode/padding的形式
		 */
		public static final Algorithm AES_ECB_PKCS5 = new Algorithm("AES", "AES/ECB/PKCS5Padding", 128);
		public static final Algorithm AES_CBC_PKCS5 = new Algorithm("AES", "AES/CBC/PKCS5Padding", 128);
		public static final Algorithm DES_ECB_PKCS5 = new Algorithm("DES", "DES/ECB/PKCS5Padding", 56);
		public static final Algorithm DES_CBC_PKCS5 = new Algorithm("DES", "DES/CBC/PKCS5Padding", 56);
		public static final Algorithm RSA_ECB_PKCS1 = new Algorithm("RSA", "RSA/ECB/PKCS1Padding", 1024);

		/**
		 * 以下为签名算法
		 */
		public static final Algorithm DSA = new Algorithm("DSA", 1024);
		public static final Algorithm SHA1WithDSA = new Algorithm("SHA256WithRSA", 1024);
		public static final Algorithm SHA1WithRSA = new Algorithm("SHA1WithRSA", 2048);
		public static final Algorithm SHA256WithRSA = new Algorithm("SHA256WithRSA", 2048);

		private String name;
		private String transformation;
		private int keySize;

		public Algorithm(String name, int keySize) {
			this(name, null, keySize);
		}

	}

	@Data
	@NoArgsConstructor
	@AllArgsConstructor
	public static class AsymmetricKeyPair {

		private String publicKey;
		private String privateKey;
	}

}

3、测试用例

import com.universe.crypto.CryptoUtils.Algorithm;

/**
 * @author 刘亚楼
 * @date 2022/6/12
 */
public class AESDemo {

	public static void main(String[] args) throws Exception {
		String key = CryptoUtils.generateSymmetricKey(Algorithm.AES_CBC_PKCS5);
		System.out.println("生成的key为:" + key);
		String cipherText = CryptoUtils.encryptSymmetrically(key, key, "Hello", Algorithm.AES_CBC_PKCS5);
		System.out.println("加密后的密文为:" + cipherText);

		String plainText = CryptoUtils.decryptSymmetrically(key, key, cipherText, Algorithm.AES_CBC_PKCS5);
		System.out.println("解密后的明文为:" + plainText);
	}
}

控制台输出如下:
生成的key为:sQPoC/1do9BZMkg8I5c09A==
加密后的密文为:3IDpt0VzxmAv10qvQRubFQ==
解密后的明文为:Hello

在这里插入图片描述

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

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

相关文章

nodejs——解决跨域问题

目录 1什么是跨域 2解决 1 jsonp(缺点&#xff1a;不能请求post请求&#xff09; 1 index.html页 2 proxy.js页面 搭建一个服务器&#xff08;写好代码后&#xff0c;在cmd上启动&#xff09; 3效果 2服务端代理 &#xff08;由于后端请求不受浏览器同源策略影响&…

Bootstrap、栅格系统布局

一、Bootstrap Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架&#xff0c;具有简单、灵活的特性&#xff0c;拥有样式库、组件和插件。 Bootstrap常用来开发响应式布局和移动设备优先的Web项目&#xff0c;能够帮助开发者快速搭建前端页面。Bootstrap官方网站:Boot…

VUE3构建Cesium项目

目录 1.Cesium开发参考资料 2.VUE中使用Cesium 2.1 使用VUE创建项目 1.创建test项目 2.项目中引入Cesium 3.修改App.vue如下 4.将cesium静态文件复制至public下 5.运行效果 1.Cesium开发参考资料 Cesium官方网站&#xff1a;Cesium: The Platform for 3D Geospatial …

前端接收 type: “application/octet-stream“ 格式的数据并下载,解决后端返回不唯一

前端接收 type: “application/octet-stream“ 格式的数据并下载&#xff0c;还有后端既返回octet-stream还返回JSON数据时的处理方法 今天些项目的时候&#xff0c;后端改了一下文件下载的方式&#xff0c;打算用接口返回 type: “application/octet-stream“格式的数据&…

【微信小程序】全局配置

目录 全局配置文件及常用的配置项 全局配置 - window 1. 小程序窗口的组成部分 2. 了解 window 节点常用的配置项 3. 设置导航栏的标题 4. 设置导航栏的背景色 5. 设置导航栏的标题颜色 6. 全局开启下拉刷新功能 7. 设置下拉刷新时窗口的背景色 8. 设置下拉刷新时 lo…

echarts 柱状图滚动

实现效果&#xff1a;柱形图展示水平滚动条&#xff0c;并且鼠标滚动支持让滚动条平移 echarts文档里&#xff0c;图形的滚动条分两种 内置型 &#xff08;效果是&#xff1a; 鼠标在图中点击拖动平移&#xff0c;在图中滚动缩放&#xff09;滚动条型 &#xff08;效果是&…

高德地图自定义图标的点标记Marker--初体验(二)

点标记Marker创建一个默认图标的点标记:创建一个自定义图标的点标记:new AMap.Marker({}) 参数说明本文以Marker为主&#xff0c;其他点标记方法大差不差 通过上两篇文章我们已经了解到如何引入高德地图并进行初始化了&#xff0c;本文主要讲解普通点标记Marker,Marker 类型推荐…

框架获取当前登录用户以及用户信息

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 前言 &#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端中级工程师 &#x1f525; 三连支持&#xff1a;如果此文还不错的话&#xff0c;还请 ❤️关注、&…

设置浏览器显示小于12px以下字体的三种方法

使用场景&#xff1a; 以往设计图给的字号一般最小就是12px&#xff0c; 开发人员一般是使用谷歌浏览器来进行调试运行。 谷歌浏览器上显示字体最小为12px&#xff0c;css设置font-size&#xff1a;10px&#xff0c;运行代码显示结果仍然是12px大小&#xff0c;但是挡不住甲方…

TypeError The view function did not return a valid response. The function either returned None 的解决

使用flask框架制作登录、注册的页面时&#xff0c;app.py运行成功&#xff0c;数据库有用户&#xff0c;1234&#xff0c;密码也是1234 点击登录之后&#xff0c; 报如下错误。 TypeError TypeError: The view function did not return a valid response. The function either …

Vue3中的父传子和子传父如何实现

大家都知道Vue2中父传子是通过父组件绑定一个属性&#xff0c;子组件再用props进行接收&#xff0c;子传父是通过this.$emit那么Vue3中有什么不同呢&#xff1f;以下为您解答谜团 #Vue3的父传子 一.现在父组件调用子组件的时候,通过动态属性把数据传递过去 二.在子组件通过prop…

XSS漏洞及其原理(详解)

文章目录前言一、XSS漏洞原理1.概述2.利用方式3.执行方式4.攻击对象5.XSS危害&#xff08;1&#xff09;窃取cookie&#xff08;2&#xff09;未授权操作&#xff08;3&#xff09;传播蠕虫病毒6.简单代码7.XSS验证8.二、XSS漏洞分类1.反射型XSS原理特点举个栗子&#xff1a;2.…

EasyExcel使用与步骤

一、导入依赖&#xff08;3.1.0版本不需要poi依赖&#xff09; <!-- easyExcel--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.1</version></dependency>二、写数据…

nvm下node安装;node环境变量配置

1、nvm安装 1、双击安装文件 nvm-setup.exe 2、选择nvm安装路径 3、选择nodejs路径 4、确认安装即可 5、安装完确认 打开CMD&#xff0c;输入命令 nvm &#xff0c;安装成功则如下显示。可以看到里面列出了各种命令&#xff0c;本节最后会列出这些命令的中文示意。 6、…

nodejs和npm版本不匹配

前言&#xff1a;我是因为要用vue创建项目&#xff0c;之后发现创建项目创建不上去&#xff0c;我想的是安装vue的脚手架工具&#xff0c;但是npm死活安装不上去&#xff0c;一直报错&#xff0c;我是一直在网上找解决方法&#xff0c;之后我自己终于解决了&#xff0c;心情是非…

解决el-tree子节点过多导致渲染缓慢问题

1、问题背景 在使用el-tree中&#xff0c;通常会调用后端接口从而去渲染tree。若后端返回数据量过于庞大&#xff0c;则会导致el-tree渲染缓慢的问题。此时我们通常会使用懒加载tree的方式&#xff0c;也就是点击某一个节点后去调取接口动态获取该节点的子数据。这种方式的确会…

DevOps系列文章 - K8S构建Jenkins持续集成平台

k8s安装直接跳过&#xff0c;用Kubeadm安装也比较简单安装和配置 NFSNFS简介NFS&#xff08;Network File System&#xff09;&#xff0c;它最大的功能就是可以通过网络&#xff0c;让不同的机器、不同的操作系统可以共享彼此的文件。我们可以利用NFS共享Jenkins运行的配置文件…

H5项目如何打包成APP

开发uni-app的编辑器HBuilderX可以将H5项目打包成APP&#xff0c;相信很多小伙伴还不知道这个功能。下面将介绍下如何将H5打包成APP。 HBuilderX下载链接&#xff1a;https://www.dcloud.io/hbuilderx.html 1.新建5APP项目 选择文件>新建>项目&#xff0c;新建5APP项目…

.env 文件

.env 文件配置 文件说明 .env&#xff1a;全局默认配置文件&#xff0c;无论什么环境都会加载合并。 .env.development&#xff1a;开发环境的配置文件 .env.production&#xff1a;生产环境的配置文件 注意&#xff1a;三个文件的文件名必须按上面方式命名&#xff0c;不能乱…

推荐10个基于Vue3.0全家桶的优秀开源项目

目录 PPTist vue-next-admin Vue vben admin VUE3-MUSIC vue-pure-admin vue3-composition-admin newbee-mall-vue3-app Element Plus vue3-bigData cool-admin-vue 今天来分享 10 个基于 Vue3.0 全家桶的优秀开源项目&#xff01; PPTist PPTist 是一个基于 Vue3.…