SpringBoot Thymeleaf验证码生成 SpringBoot实现Thymeleaf验证码生成
将就吗 人气:0想了解SpringBoot实现Thymeleaf验证码生成的相关内容吗,将就吗在本文为您仔细讲解SpringBoot Thymeleaf验证码生成的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:SpringBoot,Thymeleaf验证码,SpringBoot,验证码,下面大家一起来学习吧。
使用后台返回验证码图片,验证码存到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 实现验证码生成
加载全部内容