SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법-java지도 시간-php.cn

SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법

PHPz

풀어 주다： 2023-05-11 12:25:06

앞으로

1471명이 탐색했습니다.

1. "서버/브라우저" 통신 프로세스 이해(3단계)

1단계: 브라우저는 <img src="/test/controller" alt="SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법" > 태그를 사용하여 특정 메시지를 요청합니다. 컨트롤러 경로. <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 】页面

<!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="SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법" >
  
</form>
  
</body>

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

로그인 후 복사

【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=“xxx” alt="SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법" >

2단계: 서버 컨트롤러는 이미지의 바이너리 데이터를 반환합니다.

3단계: 브라우저가 데이터를 수신하고 이미지를 표시합니다.

SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법 SpringBoot+hutool을 사용하여 이미지 인증 코드를 구현하는 방법

🎜 2. 개발 전 준비사항: 🎜🎜Spring Boot 개발 상식🎜🎜hutool 도구(hutool은 인증 코드 이미지를 빠르게 생성할 수 있는 Java 보조 개발 도구로, 반복되는 코드를 많이 작성하지 않아도 됩니다. 공식 홈페이지로 이동해주세요. 특정 용도)🎜

 <img  src="/test/code" id="code" onclick="refresh();" alt="SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법" >

......

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

로그인 후 복사

🎜3. 코드 구현🎜🎜[index.html] 페이지🎜rrreee🎜[SpringBoot 백엔드]🎜rrreee🎜4. "인증 코드 이미지를 클릭하면 자동으로 새로 고침"이 어떻게 되나요? 🎜🎜HTML 사양에서는 <img src="xxx" alt="SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법" > 태그에서 src 경로가 변경될 때마다 브라우저가 자동으로 리소스를 다시 요청한다고 규정합니다. 그래서 간단한 js 스크립트를 작성하면 인증코드 이미지를 클릭하기만 하면 현재 [타임스탬프]와 함께 src 경로가 추가되어 src 경로 변경 목적을 달성할 수 있습니다. 🎜rrreee🎜5. 최종 효과🎜🎜🎜🎜

위 내용은 SpringBoot+hutool을 사용하여 이미지 확인 코드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!