使用后臺(tái)返回驗(yàn)證碼圖片，驗(yàn)證碼存到session中后端實(shí)現(xiàn)校驗(yàn)，前端只展示驗(yàn)證碼圖片。

本篇用SpringBoot Thymeleaf實(shí)現(xiàn)驗(yàn)證碼生成。

創(chuàng)建springboot項(xiàng)目 引入依賴

完整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 #關(guān)閉緩存 cache: false

創(chuàng)建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 { /* 獲取驗(yàn)證碼圖片*/ @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);//生成對(duì)應(yīng)寬高的初始圖片 String randomText = VerifyCode.drawRandomText(width, height, verifyImg);//單獨(dú)的一個(gè)類方法，出于代碼復(fù)用考慮，進(jìn)行了封裝。功能是生成驗(yàn)證碼字符并加上噪點(diǎn)，干擾線，返回值為驗(yàn)證碼字符 request.getSession().setAttribute('verifyCode', randomText); response.setContentType('image/png');//必須設(shè)置響應(yīng)內(nèi)容類型為圖片，否則前臺(tái)不識(shí)別 OutputStream os = response.getOutputStream(); //獲取文件輸出流 ImageIO.write(verifyImg, 'png', os);//輸出圖片流 os.flush(); os.close();//關(guān)閉流} catch (IOException e) { e.printStackTrace();} }}

創(chuàng)建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);//設(shè)置畫筆顏色-驗(yàn)證碼背景色graphics.fillRect(0, 0, width, height);//填充背景graphics.setFont(new Font('微軟雅黑', Font.BOLD, 40));//數(shù)字和字母的組合String baseNumLetter = '123456789abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';StringBuilder builder = new StringBuilder();int x = 10; //旋轉(zhuǎn)原點(diǎn)的 x 坐標(biāo)String ch;Random random = new Random();for (int i = 0; i < 4; i++) { graphics.setColor(getRandomColor()); //設(shè)置字體旋轉(zhuǎn)角度 int degree = random.nextInt() % 30; //角度小于30度 int dot = random.nextInt(baseNumLetter.length()); ch = baseNumLetter.charAt(dot) + ''; builder.append(ch); //正向旋轉(zhuǎn) graphics.rotate(degree * Math.PI / 180, x, 45); graphics.drawString(ch, x, 45); //反向旋轉(zhuǎn) graphics.rotate(-degree * Math.PI / 180, x, 45); x += 48;}//畫干擾線for (int i = 0; i < 6; i++) { // 設(shè)置隨機(jī)顏色 graphics.setColor(getRandomColor()); // 隨機(jī)畫線 graphics.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height));}//添加噪點(diǎn)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(); } /** * 隨機(jī)取色 */ private static Color getRandomColor() {Random ran = new Random();return new Color(ran.nextInt(256),ran.nextInt(256), ran.nextInt(256)); }}

創(chuàng)建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目錄下創(chuàng)建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(); //加時(shí)間戳，防止瀏覽器利用緩存$(’.verifyCode’).attr('src', src); }</script></html>

啟動(dòng)項(xiàng)目訪問(wèn)http://localhost:8080/login

點(diǎn)擊圖片可以更換驗(yàn)證碼，至于后面的后臺(tái)驗(yàn)證就不講了。參考文章后臺(tái)java 實(shí)現(xiàn)驗(yàn)證碼生成

到此這篇關(guān)于SpringBoot實(shí)現(xiàn)Thymeleaf驗(yàn)證碼生成的文章就介紹到這了,更多相關(guān)SpringBoot Thymeleaf驗(yàn)證碼生成內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！