So verwenden Sie SpringBoot+hutool, um Bildverifizierungscode zu implementieren

1. Verstehen Sie den „Server/Browser“-Kommunikationsprozess (3 Schritte)

Schritt 1: Browser-Nutzung <img src="/test/controller" alt="So verwenden Sie SpringBoot+hutool, um Bildverifizierungscode zu implementieren" > Das Tag /code> fordert einen bestimmten Controller-Pfad an. <code><img src="/test/controller%E2%80%9D>%E6%A0%87%E7%AD%BE%E8%AF%B7%E6%B1%82%E7%89%B9%E5%AE%9A%20Controller%20%E8%B7%AF%E5%BE%84%E3%80%82

%E7%AC%AC2%E6%AD%A5%EF%BC%9A%E6%9C%8D%E5%8A%A1%E5%99%A8%20Controller%20%E8%BF%94%E5%9B%9E%E5%9B%BE%E7%89%87%E7%9A%84%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E3%80%82

%E7%AC%AC3%E6%AD%A5%EF%BC%9A%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8E%A5%E6%94%B6%E5%88%B0%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87%E3%80%82

二、开发前准备：

Spring Boot开发常识

hutool工具（hutool是一款Java辅助开发工具，利用它可以快速生成验证码图片，从而避免让我们编写大量重复代码，具体使用请移至官网）

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

三、 代码实现

【 index.html 】页面

nbsp;html>


    <meta>
    <title>验证码页面</title>


  

             

   <script> function refresh() { document.getElementById("code").src = "/test/code?time" + new Date().getTime(); } </script>

【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="%E2%80%9Cxxx%E2%80%9D" alt="So verwenden Sie SpringBoot+hutool, um Bildverifizierungscode zu implementieren" >

Schritt 2: Der Server-Controller gibt die Binärdaten des Bildes zurück.

Schritt 3: Der Browser empfängt die Daten und zeigt das Bild an.

#🎜🎜# 2. Vorbereitung vor der Entwicklung: #🎜🎜##🎜🎜#Spring Boot-Entwicklung gesunder Menschenverstand#🎜🎜##🎜🎜#hutool-Tool (hutool ist ein Java-Hilfsentwicklungstool, Verwenden Sie es. Bilder von Bestätigungscodes können schnell generiert werden, um zu vermeiden, dass wir viele wiederholte Codes schreiben. Bitte wechseln Sie zur spezifischen Verwendung auf die offizielle Website) #🎜🎜#

 <img  src="/test/code" id="code" onclick="refresh();" alt="So verwenden Sie SpringBoot+hutool, um Bildverifizierungscode zu implementieren" >

......

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

#🎜🎜# 3. Code-Implementierung #🎜🎜##🎜🎜# [index.html] Seite #🎜🎜#rrreee#🎜🎜#【SpringBoot-Backend】#🎜🎜#rrreee#🎜🎜# 4. Wie funktioniert „Klicken Sie auf das Bestätigungscode-Bild, um es automatisch zu aktualisieren“? #🎜🎜##🎜🎜#Die HTML-Spezifikation legt fest, dass der Browser im Tag <img src="xxx" alt="So verwenden Sie SpringBoot+hutool, um Bildverifizierungscode zu implementieren" > bei jeder Änderung des Quellpfads die Ressource automatisch erneut anfordert. So können wir ein einfaches JS-Skript schreiben. Solange auf das Bestätigungscode-Bild geklickt wird, wird der Quellpfad mit dem aktuellen [Zeitstempel] hinzugefügt, wodurch der Zweck der Änderung des Quellpfads erreicht wird. #🎜🎜#rrreee#🎜🎜#5. Endeffekt#🎜🎜##🎜🎜##🎜🎜##🎜🎜#

Das obige ist der detaillierte Inhalt vonSo verwenden Sie SpringBoot+hutool, um Bildverifizierungscode zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!