java和js实现前端加密后端解密,后端加密前端解密(Base64)

目录

1.前端加密后端解密

2.后端加密前端解密

---

在前端和后端数据传输时,常常涉及到隐私数据的传输(例如用户名和密码),这时,我们就需要对隐私数据进行加密解密

1.前端加密后端解密

        1.1 前端jquery实现

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {

        var data = "您好+";
        while (data.indexOf("+") > -1) {
            data = data.replace("+", "%2B");
        }
        data = btoa(encodeURI(data));
        console.log("编码后" + data);    //编码后JUU2JTgyJUE4JUU1JUE1JUJEJTI1MkI=
        $.post("/test/testPost", {"data":data},function (data) {

        })
    })
</script>

        1.2后端

  @PostMapping("/testPost")
    @ResponseBody
    public int testPost(String data) throws UnsupportedEncodingException {
        System.out.println("解码前" + data);   //解码前JUU2JTgyJUE4JUU1JUE1JUJEJTI1MkI=
        //1.开始解码
        Base64 base64 = new Base64();
        String decode = URLDecoder.decode(new String(base64.decode(data), "utf-8"), "utf-8");
        System.out.println("解码后" + decode);  //解码后您好%2B
        //2.将%2B换回+
        String decodeVo = decode.replace("%2B","+");
        System.out.println("完全解码" + decodeVo);    //完全解码您好+
        return 1;
    }

2.后端加密前端解密

        2.1后端加密

    @GetMapping("/testGet")
    @ResponseBody
    public String testGet(){
        String data = "您好+";
        data = Base64.encodeBase64String(data.getBytes(StandardCharsets.UTF_8));
        System.out.println("编码后" + data);   //编码后5oKo5aW9Kw==
        return data;
    }

        2.2前端解密 (需要引入Base64.js)  

        点击提取Base64.js

        提取码：cccc

         $.get("/test/testGet",{},function (result) {
            console.log("解码前" + result);   //解码前5oKo5aW9Kw==
            result = Base64.decode(result);
            console.log("解码后" + result);   //解码后您好+
        });