SpringBoot+hutool实现图片验证码

更新时间：2022年08月16日 16:54:05 作者：ThinkStu

本文主要介绍了SpringBoot+hutool实现图片验证码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、理解 “ 服务器 / 浏览器 ”沟通流程（3步）

第1步：浏览器使用<img src="/test/controller”>标签请求特定 Controller 路径。

第2步：服务器 Controller 返回图片的二进制数据。

第3步：浏览器接收到数据，显示图片。

二、开发前准备：

Spring Boot开发常识

hutool工具（hutool是一款Java辅助开发工具，利用它可以快速生成验证码图片，从而避免让我们编写大量重复代码，具体使用请移至官网）

<!-- pom 导包：hutool 工具 -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-captcha</artifactId>
    <version>5.8.5</version>
</dependency>

三、代码实现

【 index.html 】页面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>验证码页面</title>
</head>
<body>
  
<form action="#" method="post">
  
  	<!-- img标签负责向服务器 Controller 请求图片资源 -->
    <img src="/test/code" id="code" onclick="refresh();">
  
</form>
  
</body>

<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
    function refresh() {
        document.getElementById("code").src = 
          "/test/code?time" + new Date().getTime();
    }
</script>
</html>

【SpringBoot后端】

@RestController
@RequestMapping("test")
public class TestController {
  
    @Autowired
    HttpServletResponse response;
    @Autowired
    HttpSession session;

    @GetMapping("code")
    void getCode() throws IOException {
   		  // 利用 hutool 工具，生成验证码图片资源
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);
        // 获得生成的验证码字符
        String code = captcha.getCode();
        // 利用 session 来存储验证码
        session.setAttribute("code",code);
      	// 将验证码图片的二进制数据写入【响应体 response 】
        captcha.write(response.getOutputStream());
    }
}

四、“点击验证码图片自动刷新” 是如何实现的？

HTML 规范规定，在 <img src=“xxx”> 标签中，每当 src 路径发生变化时，浏览器就会自动重新请求资源。所以我们可以编写一个简单的 js 脚本，只要验证码图片被点击，src 路径就会被加上当前【时间戳】，从而达到改变 src 路径的目的。

 <img src="/test/code" id="code" onclick="refresh();">

......

<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
    function refresh() {
        document.getElementById("code").src = 
          "/test/code?time" + new Date().getTime();
    }
</script>

五、最终效果

到此这篇关于SpringBoot+hutool实现图片验证码的文章就介绍到这了,更多相关SpringBoot 图片验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

如何使用Java完成Socket通信
这篇文章主要介绍了如何使用Java完成Socket通信问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
深入浅析java中flyway使用简介
Flyway是独立于数据库的应用、管理并跟踪数据库变更的数据库版本管理工具。这篇文章主要介绍了flyway使用简介,需要的朋友可以参考下
2020-07-07
SpringBoot整合FTP实现文件传输的步骤
这篇文章主要给大家介绍了SpringBoot整合FTP实现文件传输的步骤,文中的流程步骤和代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-11-11
Java二维数组实现数字拼图效果
这篇文章主要为大家详细介绍了Java二维数组实现数字拼图效果，控制台可以对空格进行移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
SpringBoot整合Kaptcha实现图片验证码加减乘除功能
在开发Web应用时,验证码是一个常见的功能,它可以帮助我们防止机器人的恶意操作,今天我们将学习如何使用Kaptcha生成图片验证码,并自定义验证码内容为100以内的加减乘除运算,感兴趣的朋友跟随小编一起看看吧
2024-07-07
dubbo服务整合zipkin详解
这篇文章主要介绍了dubbo服务整合zipkin，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-07-07
SpringBoot中定制异常页面的实现方法
这篇文章主要介绍了SpringBoot中定制异常页面的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
Java基础之异常处理详解
异常可能是在程序执行过程中产生的,也可能是程序中throw主动抛出的。本文主要给大家介绍了Java中异常处理的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-04-04
java利用POI读取excel文件的方法
这篇文章主要介绍了java利用POI读取excel文件的方法，帮助大家更好的理解和学习Java，感兴趣的朋友可以了解下
2020-12-12
Java 将Excel转为SVG的方法
本文以Java示例展示如何将Excel文档转为SVG格式。通过本文中的方法，在将Excel转为SVG时，如果sheet工作表中手动设置了分页，则将每个分页的内容单独保存为一个svg文件，如果sheet工作表中没有设置分页，则将Excel sheet表格中默认的分页范围保存为svg。
2021-05-05