溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用SpringBoot+hutool實(shí)現(xiàn)圖片驗(yàn)證碼

發(fā)布時(shí)間：2022-08-17 10:37:06 來源：億速云 閱讀：653 作者：iii 欄目：開發(fā)技術(shù)

這篇“怎么使用SpringBoot+hutool實(shí)現(xiàn)圖片驗(yàn)證碼”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用SpringBoot+hutool實(shí)現(xiàn)圖片驗(yàn)證碼”文章吧。

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

第1步：瀏覽器使用<img src="/test/controller”>標(biāo)簽請(qǐng)求特定 Controller 路徑。

第2步：服務(wù)器 Controller 返回圖片的二進(jìn)制數(shù)據(jù)。

第3步：瀏覽器接收到數(shù)據(jù)，顯示圖片。

怎么使用SpringBoot+hutool實(shí)現(xiàn)圖片驗(yàn)證碼

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

Spring Boot開發(fā)常識(shí)

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

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

三、 代碼實(shí)現(xiàn)

【 index.html 】頁(yè)面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>驗(yàn)證碼頁(yè)面</title>
</head>
<body>
  
<form action="#" method="post">
  
  	<!-- img標(biāo)簽負(fù)責(zé)向服務(wù)器 Controller 請(qǐng)求圖片資源 -->
    <img src="/test/code" id="code" onclick="refresh();">
  
</form>
  
</body>

<!-- “點(diǎn)擊驗(yàn)證碼圖片，自動(dòng)刷新” 腳本 -->
<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 工具，生成驗(yàn)證碼圖片資源
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);
        // 獲得生成的驗(yàn)證碼字符
        String code = captcha.getCode();
        // 利用 session 來存儲(chǔ)驗(yàn)證碼
        session.setAttribute("code",code);
      	// 將驗(yàn)證碼圖片的二進(jìn)制數(shù)據(jù)寫入【響應(yīng)體 response 】
        captcha.write(response.getOutputStream());
    }
}

四、“點(diǎn)擊驗(yàn)證碼圖片自動(dòng)刷新” 是如何實(shí)現(xiàn)的 ？

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

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

......

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

五、最終效果

怎么使用SpringBoot+hutool實(shí)現(xiàn)圖片驗(yàn)證碼

以上就是關(guān)于“怎么使用SpringBoot+hutool實(shí)現(xiàn)圖片驗(yàn)證碼”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手