使用后臺返回驗證碼圖片，驗證碼存到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;@RestControllerpublic 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;@Controllerpublic 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'> <img th:src='http://www.aoyou183.cn/bcjs/@{getVerifyCode}' onclick='changeCode()' /></a></body><!-- 引入JQuery --><script src='http://www.aoyou183.cn/static/js/jquery.min.js' th:src='http://www.aoyou183.cn/bcjs/@{/js/jquery.min.js}'></script><script> function changeCode() {const src = 'http://www.aoyou183.cn/getVerifyCode?' + new Date().getTime(); //加時間戳，防止瀏覽器利用緩存$(’.verifyCode’).attr('src', src); }</script></html>

啟動項目訪問http://localhost:8080/login

點擊圖片可以更換驗證碼，至于后面的后臺驗證就不講了。參考文章后臺java 實現驗證碼生成

到此這篇關于SpringBoot實現Thymeleaf驗證碼生成的文章就介紹到這了,更多相關SpringBoot Thymeleaf驗證碼生成內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！