SpringBoot+hutool实现图片验证码
作者：ThinkStu 发布时间：2021-06-17 02:55:27
标签：SpringBoot,图片验证码
一、理解 “ 服务器 / 浏览器 ”沟通流程（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>
五、最终效果
来源：https://blog.csdn.net/qq_35760825/article/details/126308778
0
投稿猜你喜欢
开发中，对于不经常使用英语的同学来说，对类，变量，方法想取一个合适的名字，此时发现自己的词汇早已还给老师 ，怎么办，这个插件能帮到你~一、安- 通俗的来说，Jackson是一个 Java 用来处理 JSON 格式数据的类库，其性能非常好。本文就来针对Jackson的用法做一个较为详细
- C# 泛型（Generic）定义：泛型允许我们延迟编写类或方法中的编程元素的数据类型的规范，直到实际在程序中使用它的时候。也就是说，泛型是可
- 对于跨域，相信同学们都有所了解。前端的跨域的若干种方式，大家也都知道，什么 JSONP，iframe+domain 等等。但是我们今天的主题
- 本文实例讲述了Android使用shape使组件呈现出特殊效果的方法。分享给大家供大家参考，具体如下：使用到的布局文件<?xml ve
- 一、实现方式@ConfigurationProperties 注解（最好加上前缀prefix=“person”,标明是和配置文件中哪个开头的
- 由于最近的工作需要用到文本转语音的功能,在网上找到的资料有些不完整,特此记录下整个完整功能。这种方式的优点在于不会被浏览器限制,在js的文本
- 原生Toast样式自定义Toast样式创建样式所谓自定义一个Toast就是建立一个布局文件，然后使用一个view容器承载，然后显示出来。To
- 本文介绍了springcloud Feign的Hystrix支持，分享给大家，具体如下：一、Feign client中加入Hystrix的f
- 网上关于如何切换，其实说的很明确，本文主要通过profile进行快速切换已实现在不同场合下，用不同的打包方式。jar到war修改步骤pom文
- 这篇文章主要介绍了springboot全局异常处理代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要
- 本文实例为大家分享了unity实现玻璃效果的具体代码，供大家参考，具体内容如下一、使用Cubemap，做一个假反射shader代码如下:Sh
- 一、坐标分类地图坐标大致分为几种： 1、GPS、WGS84，也就是原始坐标体系，
- utf-8转unicode public static String utf8ToUnicode(String inStr) {
- 很多时候你新建了Maven 或者SpringBoot 工程，激动的点了主启动类，你就发现了下面的错误这里说的是啥意思呢，你没有数据库相关的链
- 本文实例为大家分享了Flutter实现微信朋友圈功能的具体代码，供大家参考，具体内容如下今天给大家实现一下微信朋友圈的效果，下面是效果图下面
- 异常与错误：异常： 在Java中程序的错误主要是语法错误和语义错误，一个程序在编译和运行时出现的错误我们统一称之为异常，它是VM（虚拟机）通
- 文章来源：csdn 作者：chensheng913对于Java语言，最体贴的一项设计就是它并没有打算让人们为了写程序而写程序——人们也需要考
- spring in action第三版读书笔记spring3.0引入了spring expression language(spel)语言,
- 前言：从MVC到WebApi，路由机制一直是伴随着这些技术的一个重要组成部分。它可以很简单：如果你仅仅只需要会用一些简单的路由，如/Home
