怎麼使用SpringBoot+hutool實作圖片驗證碼-java教程-PHP中文網

怎麼使用SpringBoot+hutool實作圖片驗證碼

PHPz

發布： 2023-05-11 12:25:06

轉載

1471 人瀏覽過

一、理解「伺服器/ 瀏覽器」溝通流程（3步驟）

第1步：瀏覽器使用<img src="/test/controller%E3%80%8D>%E6%A8%99%E7%B1%A4%E8%AB%8B%E6%B1%82%E7%89%B9%E5%AE%9AController%20%E8%B7%AF%E5%BE%91%E3%80%82%20

%E7%AC%AC2%E6%AD%A5%EF%BC%9A%E4%BC%BA%E6%9C%8D%E5%99%A8%20Controller%20%E5%82%B3%E5%9B%9E%E5%9C%96%E7%89%87%E7%9A%84%E4%BA%8C%E9%80%B2%E4%BD%8D%E8%B3%87%E6%96%99%E3%80%82%20

%E6%AD%A5%E9%A9%9F3%EF%BC%9A%E7%80%8F%E8%A6%BD%E5%99%A8%E6%8E%A5%E6%94%B6%E5%88%B0%E6%95%B8%E6%93%9A%EF%BC%8C%E9%A1%AF%E7%A4%BA%E5%9C%96%E7%89%87%E3%80%82%20

二、開發前準備：

Spring Boot開發常識

hutool工具（hutool是一款Java輔助開發工具，利用它可以快速產生驗證碼圖片，從而避免讓我們編寫大量重複程式碼，具體使用請移至官網）

<!-- pom 导包：hutool 工具 -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-captcha</artifactId>
    <version>5.8.5</version>
</dependency>

登入後複製

三、程式碼實作

【 index.html 】頁面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>验证码页面</title>
</head>
<body>
  
<form action="#" method="post">
  
  	<!-- img标签负责向服务器 Controller 请求图片资源 -->
    <img  src="/test/code" id="code" onclick="refresh();" alt="怎麼使用SpringBoot+hutool實作圖片驗證碼" >
  
</form>
  
</body>

<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
    function refresh() {
        document.getElementById("code").src = 
          "/test/code?time" + new Date().getTime();
    }
</script>
</html>

登入後複製

【SpringBoot後端】

@RestController
@RequestMapping("test")
public class TestController {
  
    @Autowired
    HttpServletResponse response;
    @Autowired
    HttpSession session;

    @GetMapping("code")
    void getCode() throws IOException {
   		  // 利用 hutool 工具，生成验证码图片资源
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);
        // 获得生成的验证码字符
        String code = captcha.getCode();
        // 利用 session 来存储验证码
        session.setAttribute("code",code);
      	// 将验证码图片的二进制数据写入【响应体 response 】
        captcha.write(response.getOutputStream());
    }
}

登入後複製

四、「點擊驗證碼圖片自動刷新」是如何實現的？

HTML 規範規定，在 <img src=“xxx” alt="怎麼使用SpringBoot+hutool實作圖片驗證碼" > 標籤中，每當 src 路徑發生變化時，瀏覽器就會自動重新請求資源。所以我們可以寫一個簡單的 js 腳本，只要驗證碼圖片被點擊，src 路徑就會被加上目前【時間戳】，從而達到改變 src 路徑的目的。

 <img  src="/test/code" id="code" onclick="refresh();" alt="怎麼使用SpringBoot+hutool實作圖片驗證碼" >

......

<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
    function refresh() {
        document.getElementById("code").src = 
          "/test/code?time" + new Date().getTime();
    }
</script>

登入後複製