How to use SpringBoot+hutool to implement image verification code-javaTutorial-php.cn

How to use SpringBoot+hutool to implement image verification code

PHPz

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

forward

1368 people have browsed it

1. Understand the "server/browser" communication process (3 steps)

Step 1: Browser usage<img src="/test/controller" alt="How to use SpringBoot+hutool to implement image verification code" > The tag requests a specific Controller path.

Step 2: The server Controller returns the binary data of the image.

Step 3: The browser receives the data and displays the image.

How to use SpringBoot+hutool to implement image verification code

2. Preparation before development:

Spring Boot development common sense

hutool tool (hutool is a Java auxiliary development tool, using It can quickly generate verification code images, thereby avoiding us from writing a lot of repeated codes. Please move to the official website for specific use)

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

Copy after login

3. Code implementation

[index.html] page

<!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="How to use SpringBoot+hutool to implement image verification code" >
  
</form>
  
</body>

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

Copy after login

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

Copy after login

4. How is "clicking on the verification code image to automatically refresh" is implemented?

The HTML specification stipulates that in the <img src="xxx" alt="How to use SpringBoot+hutool to implement image verification code" > tag, whenever the src path changes, the browser will automatically re-request the resource. So we can write a simple js script. As long as the verification code image is clicked, the src path will be added with the current [timestamp], thereby achieving the purpose of changing the src path.

 <img  src="/test/code" id="code" onclick="refresh();" alt="How to use SpringBoot+hutool to implement image verification code" >

......

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

Copy after login

5. Final effect

How to use SpringBoot+hutool to implement image verification code

The above is the detailed content of How to use SpringBoot+hutool to implement image verification code. For more information, please follow other related articles on the PHP Chinese website!