SpringBoot實(shí)現(xiàn)Thymeleaf驗(yàn)證碼生成
使用后臺(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;
@RestController
public 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;
@Controller
public 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" title="點(diǎn)擊更換驗(yàn)證碼">
<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(); //加時(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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Springboot通過(guò)谷歌Kaptcha?組件生成圖形驗(yàn)證碼功能
- springboot驗(yàn)證碼生成以及驗(yàn)證功能舉例詳解
- SpringBoot使用Kaptcha實(shí)現(xiàn)驗(yàn)證碼的生成與驗(yàn)證功能
- springboot驗(yàn)證碼的生成與驗(yàn)證的兩種方法
- SpringBoot 圖形驗(yàn)證碼的生成和校驗(yàn)
- SpringBoot使用Captcha生成驗(yàn)證碼
- springboot整合kaptcha生成驗(yàn)證碼功能
- springboot控制層圖片驗(yàn)證碼生成
- SpringBoot實(shí)現(xiàn)前端驗(yàn)證碼圖片生成和校驗(yàn)
- SpringBoot使用hutool-captcha實(shí)現(xiàn)驗(yàn)證碼生成與驗(yàn)證
相關(guān)文章
JDK13.0.1安裝與環(huán)境變量的配置教程圖文詳解(Win10平臺(tái)為例)
這篇文章主要介紹了JDK13.0.1安裝與環(huán)境變量的配置教程圖文詳解(Win10平臺(tái)為例),本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Fluent Mybatis零xml配置實(shí)現(xiàn)復(fù)雜嵌套查詢
本文主要介紹了Fluent Mybatis零xml配置實(shí)現(xiàn)復(fù)雜嵌套查詢,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
mybatis@insert?注解如何判斷insert或是update
這篇文章主要介紹了mybatis@insert?注解如何判斷insert或是update,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
spring?boot?使用Mybatis-plus查詢方法解析
這篇文章主要介紹了spring?boot?使用Mybatis-plus查詢方法解析,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09
Java編程實(shí)現(xiàn)springMVC簡(jiǎn)單登錄實(shí)例
這篇文章主要介紹了Java編程實(shí)現(xiàn)springMVC簡(jiǎn)單登錄實(shí)例,具有一定參考價(jià)值,需要的朋友可以了解下。2017-11-11
java連接mysql數(shù)據(jù)庫(kù)學(xué)習(xí)示例
這篇文章主要介紹了java連接mysql數(shù)據(jù)庫(kù)學(xué)習(xí)示例,需要的朋友可以參考下2014-03-03

