SpringBoot实现Thymeleaf验证码生成

使用后台返回验证码图片，验证码存到session中后端实现校验，前端只展示验证码图片。

本篇用SpringBoot Thymeleaf实现验证码生成。

创建springboot项目 引入依赖

完整pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-parent</artifactId>
       <version>2.2.6.RELEASE</version>
       <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>com.example</groupId>
   <artifactId>web</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>web</name>
   <description>Demo project for Spring Boot</description>

<properties>
       <java.version>1.8</java.version>
   </properties>

<dependencies>
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web</artifactId>
       </dependency>

<dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-test</artifactId>
           <scope>test</scope>
           <exclusions>
               <exclusion>
                   <groupId>org.junit.vintage</groupId>
                   <artifactId>junit-vintage-engine</artifactId>
               </exclusion>
           </exclusions>
       </dependency>

<!-- ThymeLeaf 依赖 -->
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-thymeleaf</artifactId>
       </dependency>
   </dependencies>

<build>
       <plugins>
           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
           </plugin>
       </plugins>
   </build>

</project>

application.yml配置 Thymeleaf

#Thymeleaf配置
spring:
 mvc:
   static-path-pattern: /**
 thymeleaf:
   mode: HTML
   encoding: UTF-8
   #关闭缓存
   cache: false

创建CaptchaController.java 类

package com.example.web.controller;

import com.example.web.util.VerifyCode;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;

@RestController
public class CaptchaController {
   /* 获取验证码图片*/

@RequestMapping("/getVerifyCode")
   public void getVerificationCode(HttpServletResponse response, HttpServletRequest request) {
       try {
           int width = 200;
           int height = 69;

BufferedImage verifyImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);//生成对应宽高的初始图片
           String randomText = VerifyCode.drawRandomText(width, height, verifyImg);//单独的一个类方法，出于代码复用考虑，进行了封装。功能是生成验证码字符并加上噪点，干扰线，返回值为验证码字符

request.getSession().setAttribute("verifyCode", randomText);
           response.setContentType("image/png");//必须设置响应内容类型为图片，否则前台不识别

OutputStream os = response.getOutputStream(); //获取文件输出流
           ImageIO.write(verifyImg, "png", os);//输出图片流
           os.flush();
           os.close();//关闭流
       } catch (IOException e) {
           e.printStackTrace();
       }
   }
}

创建VerifyCode.java 工具类

package com.example.web.util;

import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;

public class VerifyCode {

public static String drawRandomText(int width, int height, BufferedImage verifyImg) {

Graphics2D graphics = (Graphics2D) verifyImg.getGraphics();
       graphics.setColor(Color.WHITE);//设置画笔颜色-验证码背景色
       graphics.fillRect(0, 0, width, height);//填充背景
       graphics.setFont(new Font("微软雅黑", Font.BOLD, 40));

//数字和字母的组合
       String baseNumLetter = "123456789abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";

StringBuilder builder = new StringBuilder();
       int x = 10;  //旋转原点的 x 坐标
       String ch;
       Random random = new Random();

for (int i = 0; i < 4; i++) {
           graphics.setColor(getRandomColor());

//设置字体旋转角度
           int degree = random.nextInt() ％ 30;  //角度小于30度
           int dot = random.nextInt(baseNumLetter.length());

ch = baseNumLetter.charAt(dot) + "";
           builder.append(ch);

//正向旋转
           graphics.rotate(degree * Math.PI / 180, x, 45);
           graphics.drawString(ch, x, 45);

//反向旋转
           graphics.rotate(-degree * Math.PI / 180, x, 45);
           x += 48;
       }

//画干扰线
       for (int i = 0; i < 6; i++) {
           // 设置随机颜色
           graphics.setColor(getRandomColor());

// 随机画线
           graphics.drawLine(random.nextInt(width), random.nextInt(height),
                   random.nextInt(width), random.nextInt(height));

}

//添加噪点
       for (int i = 0; i < 30; i++) {
           int x1 = random.nextInt(width);
           int y1 = random.nextInt(height);

graphics.setColor(getRandomColor());
           graphics.fillRect(x1, y1, 2, 2);
       }
       return builder.toString();
   }

/**
    * 随机取色
    */
   private static Color getRandomColor() {
       Random ran = new Random();
       return new Color(ran.nextInt(256),
               ran.nextInt(256), ran.nextInt(256));

}
}

创建UserController.java 类

package com.example.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class UserController {
   @RequestMapping("/login")
   public String login() {
       return "login";
   }
}

resources/templates目录下创建login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <title>Show User</title>
</head>
<body>
<a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">
   <img th:src="@{getVerifyCode}" onclick="changeCode()" class="verifyCode"/>
</a>
</body>
<!-- 引入JQuery -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script>
   function changeCode() {
       const src = "/getVerifyCode?" + new Date().getTime(); //加时间戳，防止浏览器利用缓存
       $('.verifyCode').attr("src", src);
   }
</script>
</html>

启动项目访问http://localhost:8080/login

点击图片可以更换验证码，至于后面的后台验证就不讲了。
参考文章后台java 实现验证码生成

来源：https://blog.csdn.net/qq_40548741/article/details/105311766