當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
SpringBoot验证码
生活随笔
收集整理的這篇文章主要介紹了
SpringBoot验证码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
“原生 js + SpringBoot + hutool 工具” 實現瀏覽器驗證碼功能，點擊可刷新。
文章目錄
- 一、理解 “ 服務器 / 瀏覽器 ”溝通流程（3步）
- 二、開發前準備：
- 三、 代碼實現
- 四、“點擊驗證碼圖片自動刷新” 是如何實現的 ？
- 五、最終效果
一、理解 “ 服務器 / 瀏覽器 ”溝通流程（3步）
- 第1步：瀏覽器使用<img src="/test/controller”>標簽請求特定 Controller 路徑。
- 第2步：服務器 Controller 返回圖片的二進制數據。
- 第3步：瀏覽器接收到數據，顯示圖片。
二、開發前準備：
- Spring Boot開發常識
- hutool工具（hutool是一款Java輔助開發工具，利用它可以快速生成驗證碼圖片，從而避免讓我們編寫大量重復代碼，具體使用請移至官網）
三、 代碼實現
【 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 {@AutowiredHttpServletResponse response;@AutowiredHttpSession 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”> 標簽中，每當 src 路徑發生變化時，瀏覽器就會自動重新請求資源。所以我們可以編寫一個簡單的 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验证码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android Flash分区大小查看
- 下一篇： gradle idea java ssm