快捷導(dǎo)航

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

更新時(shí)間：2021年05月14日 11:05:26 作者：將就嗎

本文使用SpringBoot實(shí)現(xiàn)Thymeleaf驗(yàn)證碼生成，使用后臺(tái)返回驗(yàn)證碼圖片，驗(yàn)證碼存到session中后端實(shí)現(xiàn)校驗(yàn)，前端只展示驗(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)目訪問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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: