一：前端vue

二：后端Java

三：详细

3.1maven添加

<dependency>
    <groupId>org.bouncycastle</groupId>
    <artifactId>bcprov-jdk15to18</artifactId>
    <version>1.66</version>
</dependency>
<dependency>
    <groupId>com.hutool</groupId>
    <artifactId>all</artifactId>
    <version>4.6.17</version>
</dependency>

3.2工具类

public class Sm4Utils {
    /**
     * 返回前端用的十六进制key
     * @param key 必须是16位
     * @return
     */
    public static String generatesm4key(String key) {
       // 前台16进制密钥
        String hexKey = HexUtil.encodeHexStr(key.getBytes());
        System.out.println("16进制前端用:" + hexKey);
        return hexKey;
    }

    public static String encryptData(String key, String data) {
        SM4 sm4 = (SM4) SmUtil.sm4(key.getBytes(StandardCharsets.UTF_8));
        return sm4.encryptHex(data);
    }

    public static String decryptData(String key, String data) {
        SM4 sm4 = (SM4) SmUtil.sm4(key.getBytes(StandardCharsets.UTF_8));
        return sm4.decryptStr(data);
    }
}