SpringBoot+hutool實現(xiàn)圖片驗證碼

更新時間：2022年08月16日 16:54:05 作者：ThinkStu

本文主要介紹了SpringBoot+hutool實現(xiàn)圖片驗證碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、理解 “ 服務器 / 瀏覽器 ”溝通流程（3步）

第1步：瀏覽器使用<img src="/test/controller”>標簽請求特定 Controller 路徑。

第2步：服務器 Controller 返回圖片的二進制數據。

第3步：瀏覽器接收到數據，顯示圖片。

二、開發(fā)前準備：

Spring Boot開發(fā)常識

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

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

三、代碼實現(xiàn)

【 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();">
  
</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());
    }
}

四、“點擊驗證碼圖片自動刷新” 是如何實現(xiàn)的？

HTML 規(guī)范規(guī)定，在 <img src=“xxx”> 標簽中，每當 src 路徑發(fā)生變化時，瀏覽器就會自動重新請求資源。所以我們可以編寫一個簡單的 js 腳本，只要驗證碼圖片被點擊，src 路徑就會被加上當前【時間戳】，從而達到改變 src 路徑的目的。

 <img src="/test/code" id="code" onclick="refresh();">

......

<!-- “點擊驗證碼圖片，自動刷新” 腳本 -->
<script>
    function refresh() {
        document.getElementById("code").src = 
          "/test/code?time" + new Date().getTime();
    }
</script>

五、最終效果

到此這篇關于SpringBoot+hutool實現(xiàn)圖片驗證碼的文章就介紹到這了,更多相關SpringBoot 圖片驗證碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

如何使用Java完成Socket通信
這篇文章主要介紹了如何使用Java完成Socket通信問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-09-09
深入淺析java中flyway使用簡介
Flyway是獨立于數據庫的應用、管理并跟蹤數據庫變更的數據庫版本管理工具。這篇文章主要介紹了flyway使用簡介,需要的朋友可以參考下
2020-07-07
SpringBoot整合FTP實現(xiàn)文件傳輸的步驟
這篇文章主要給大家介紹了SpringBoot整合FTP實現(xiàn)文件傳輸的步驟,文中的流程步驟和代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2023-11-11
Java二維數組實現(xiàn)數字拼圖效果
這篇文章主要為大家詳細介紹了Java二維數組實現(xiàn)數字拼圖效果，控制臺可以對空格進行移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
SpringBoot整合Kaptcha實現(xiàn)圖片驗證碼加減乘除功能
在開發(fā)Web應用時,驗證碼是一個常見的功能,它可以幫助我們防止機器人的惡意操作,今天我們將學習如何使用Kaptcha生成圖片驗證碼,并自定義驗證碼內容為100以內的加減乘除運算,感興趣的朋友跟隨小編一起看看吧
2024-07-07
dubbo服務整合zipkin詳解
這篇文章主要介紹了dubbo服務整合zipkin，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-07-07
SpringBoot中定制異常頁面的實現(xiàn)方法
這篇文章主要介紹了SpringBoot中定制異常頁面的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
Java基礎之異常處理詳解
異?？赡苁窃诔绦驁?zhí)行過程中產生的,也可能是程序中throw主動拋出的。本文主要給大家介紹了Java中異常處理的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04
java利用POI讀取excel文件的方法
這篇文章主要介紹了java利用POI讀取excel文件的方法，幫助大家更好的理解和學習Java，感興趣的朋友可以了解下
2020-12-12
Java 將Excel轉為SVG的方法
本文以Java示例展示如何將Excel文檔轉為SVG格式。通過本文中的方法，在將Excel轉為SVG時，如果sheet工作表中手動設置了分頁，則將每個分頁的內容單獨保存為一個svg文件，如果sheet工作表中沒有設置分頁，則將Excel sheet表格中默認的分頁范圍保存為svg。
2021-05-05