Cara menggunakan SpringBoot+hutool untuk melaksanakan kod pengesahan imej-javaTutorial-php.cn

Cara menggunakan SpringBoot+hutool untuk melaksanakan kod pengesahan imej

PHPz

Lepaskan： 2023-05-11 12:25:06

ke hadapan

1457 orang telah melayarinya

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>

Salin selepas log masuk

3. Pelaksanaan kod

[ index.html. ] halaman

<!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();" alt="Cara menggunakan SpringBoot+hutool untuk melaksanakan kod pengesahan imej" >
  
</form>
  
</body>

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Spesifikasi HTML menetapkan bahawa dalam teg <img src=“xxx” 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>

Salin selepas log masuk

5. Kesan akhir

Cara menggunakan SpringBoot+hutool untuk melaksanakan kod pengesahan imej

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!