Comment utiliser SpringBoot+hutool pour implémenter le code de vérification d'image-javaDidacticiel-php.cn

Comment utiliser SpringBoot+hutool pour implémenter le code de vérification d'image

PHPz

Libérer： 2023-05-11 12:25:06

avant

1394 Les gens l'ont consulté

1. Comprendre le processus de communication "serveur/navigateur" (3 étapes)

Étape 1 : Le navigateur utilise la balise <img src="/test/controller" alt="Comment utiliser SpringBoot+hutool pour implémenter le code de vérification d'image" > pour demander une requête spécifique. Chemin du contrôleur. <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>

Copier après la connexion

三、代码实现

【 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="Comment utiliser SpringBoot+hutool pour implémenter le code de vérification d'image" >
  
</form>
  
</body>

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

Copier après la connexion

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

Copier après la connexion

四、“点击验证码图片自动刷新” 是如何实现的？

HTML 规范规定，在 <img src=“xxx” alt="Comment utiliser SpringBoot+hutool pour implémenter le code de vérification d'image" >

Étape 2 : Le contrôleur du serveur renvoie les données binaires de l'image.

Étape 3 : Le navigateur reçoit les données et affiche l'image.

Comment utiliser SpringBoot+hutool pour implémenter le code de vérification dimage

🎜 2. Préparation avant le développement : 🎜🎜Le bon sens du développement Spring Boot🎜🎜outil hutool (hutool est un outil de développement auxiliaire Java qui peut générer rapidement des images de code de vérification, nous évitant ainsi d'écrire beaucoup de code répété. Veuillez vous déplacer vers le site officiel pour un usage spécifique)🎜

 <img  src="/test/code" id="code" onclick="refresh();" alt="Comment utiliser SpringBoot+hutool pour implémenter le code de vérification d'image" >

......

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

Copier après la connexion

🎜3. Implémentation du code🎜🎜[index.html] page🎜rrreee🎜[SpringBoot backend]🎜rrreee🎜4. Comment se fait "cliquer sur l'image du code de vérification pour actualiser automatiquement" ? 🎜🎜La spécification HTML stipule que dans la balise <img src="xxx" alt="Comment utiliser SpringBoot+hutool pour implémenter le code de vérification d'image" >, chaque fois que le chemin src change, le navigateur demandera automatiquement à nouveau la ressource. Nous pouvons donc écrire un simple script js. Tant que l'on clique sur l'image du code de vérification, le chemin src sera ajouté avec le [horodatage] actuel, atteignant ainsi l'objectif de changer le chemin src. 🎜rrreee🎜5. Effet final🎜🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!