Cara menggunakan SpringBoot+hutool untuk melaksanakan kod pengesahan imej

1. Fahami proses komunikasi "pelayan/pelayar" (3 langkah)

Langkah 1: Penyemak imbas menggunakan tag <img src="/test/controller%E2%80%9D>%20untuk%20meminta%20laluan%20Pengawal%20tertentu.%20

Langkah%202:%20Pengawal%20pelayan%20mengembalikan%20data%20binari%20imej.%20

Langkah%203:%20Penyemak%20imbas%20menerima%20data%20dan%20memaparkan%20imej.%20

2. Persediaan sebelum pembangunan:

Spring Boot pembangunan akal sehat

alat hutool (hutool ialah alat pembangunan tambahan Java, menggunakan Ia boleh menjana imej kod pengesahan dengan cepat, dengan itu mengelakkan kami daripada menulis banyak kod berulang Sila beralih ke tapak web rasmi untuk kegunaan khusus)

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

3. Pelaksanaan kod

[ index.html. ] halaman

nbsp;html>


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


  

             

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

[SpringBoot backend]

@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());
    }
}

4 Bagaimanakah "mengklik pada imej kod pengesahan untuk memuat semula secara automatik" dilaksanakan?

Spesifikasi HTML menetapkan bahawa dalam teg <img src="%E2%80%9Cxxx%E2%80%9D" alt="Cara menggunakan SpringBoot+hutool untuk melaksanakan kod pengesahan imej" >, apabila laluan src berubah, penyemak imbas akan meminta semula sumber secara automatik. Jadi kita boleh menulis skrip js mudah Selagi imej kod pengesahan diklik, laluan src akan ditambah dengan [cap masa] semasa, dengan itu mencapai tujuan menukar laluan src.

 <img  src="/test/code" id="code" onclick="refresh();" alt="Cara menggunakan SpringBoot+hutool untuk melaksanakan kod pengesahan imej" >

......

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

5. Kesan akhir

Atas ialah kandungan terperinci Cara menggunakan SpringBoot+hutool untuk melaksanakan kod pengesahan imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!