使用後臺返回驗證碼圖片,驗證碼存到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);" 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 實現驗證碼生成