SpringBoot+hutoolを使用してイメージ検証コードを実装する方法-＆＃＆チュートリアル-php.cn

1.「サーバー/ブラウザ」通信プロセスを理解する (3 ステップ)

2. 開発前の準備:

3. コードの実装

4. 「検証コード画像をクリックすると自動的に更新される」はどのように実装されていますか?

5. 最終的な効果

ホームページ

Java

＆＃＆チュートリアル

SpringBoot+hutoolを使用してイメージ検証コードを実装する方法

May 11, 2023 pm 12:25 PM

springboot hutool

1.「サーバー/ブラウザ」通信プロセスを理解する (3 ステップ)

ステップ 1: ブラウザの使用法 <img src="/static/imghw/default1.png" data-src="/test/controller" class="lazy" alt="SpringBoot+hutoolを使用してイメージ検証コードを実装する方法" > タグ特定のコントローラーパスを要求します。

ステップ 2: サーバーコントローラーはイメージのバイナリデータを返します。

ステップ 3: ブラウザはデータを受信し、画像を表示します。

SpringBoot+hutoolを使用してイメージ検証コードを実装する方法

2. 開発前の準備:

Spring Boot 開発の常識

hutool ツール (hutool は Java 補助開発ツールで、検証コードのイメージを素早く生成できるため、繰り返しコードを大量に記述する必要がなくなります。特定の用途については公式 Web サイトに移動してください)

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

ログイン後にコピー

3. コードの実装

[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="/static/imghw/default1.png"  data-src="/test/code"  class="lazy"   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 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. 「検証コード画像をクリックすると自動的に更新される」はどのように実装されていますか?

HTML 仕様では、<img src="/static/imghw/default1.png" data-src="xxx" class="lazy" alt="SpringBoot+hutoolを使用してイメージ検証コードを実装する方法" > タグ内で、src パスが変更されるたびにブラウザが自動的にリソースを再リクエストすることが規定されています。簡単な js スクリプトを書くと、検証コードの画像をクリックしている限り、現在の [タイムスタンプ] で src パスが追加され、src パスを変更するという目的が達成されます。

 <img  src="/static/imghw/default1.png"  data-src="/test/code"  class="lazy"   id="code" onclick="refresh();" alt="SpringBoot+hutoolを使用してイメージ検証コードを実装する方法" >

......

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

ログイン後にコピー