SpringBoot验证码

“原生 js + SpringBoot + hutool 工具” 实现浏览器验证码功能，点击可刷新。

文章目录

一、理解 “ 服务器 / 浏览器 ”沟通流程（3步）
二、开发前准备：
三、代码实现
四、“点击验证码图片自动刷新” 是如何实现的？
五、最终效果

一、理解 “ 服务器 / 浏览器 ”沟通流程（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 {@AutowiredHttpServletResponse response;@AutowiredHttpSession 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验证码相关推荐

C语言用户注册登录管理系统_JavaFX+SpringBoot+验证码功能的小型薪酬管理系统
2020.07.22更新 1 概述 1.1 简介一个简单的小型薪酬管理系统,前端JavaFX+后端Spring Boot,功能倒没多少,主要精力放在了UI和前端的一些逻辑上面,后端其实做得很简单. ...
JavaFX+SpringBoot+验证码功能的小型薪酬管理系统
1 概述 1.1 简介一个简单的小型薪酬管理系统,前端JavaFX+后端Spring Boot,功能倒没多少,主要精力放在了UI和前端的一些逻辑上面,后端其实做得很简单. 主要功能: 用户注册/登录 ...
springboot验证码整合
1.验证码调用 /*** 用于生成带六位数字验证码并发送邮件*/@ApiOperation("用于生成带六位数字验证码并发送邮件")@PostMapping(value = &qu ...
SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效
场景前端Vue的登录页面,验证码请求后台,后台生成验证码照片后使用Base64编码后, 返回给前端,前端进行显示. 注: 博客: https://blog.csdn.net/badao_liuman ...
SpringBoot整合Shiro实现权限控制，验证码
本文介绍 SpringBoot 整合 shiro,相对于 Spring Security 而言,shiro 更加简单,没有那么复杂. 目前我的需求是一个博客系统,有用户和管理员两种角色.一个用户可能有 ...
SpringBoot之自定义验证码
代码地址如下: http://www.demodashi.com/demo/14280.html 项目介绍 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问 ...
SpringBoot 实现登录验证码（附集成SpringSecurity）
SpringBoot 实现登录验证码 1. 生成验证码的工具类 2. 验证码测试接口 3. 验证码过滤器 4. Spring Security配置类引入验证码过滤器 5. 效果图 1. 生成验证码的工 ...
springBoot redis开发的Java快递代拿系统（含人脸识别，验证码登录）
源码获取:我的博客资源页面可以下载!!!! 项目名称 springBoot redis开发的Java快递代拿系统(含人脸识别,验证码登录) 系统介绍快递代拿系统 > 该项目使用当前最为流行的 ...
SpringBoot+vue 使用阿里云的短信功能发送手机验证码
前言: 小编后端用的是Springboot 前端用的是vue ,小编主要是写后台,前端页面比较简陋,后期还要调优,写的不对处还望多多包涵. 环境: 需要先准备好阿里云的账号和一些必要的参数.详情见我的 ...
SpringBoot 前后端分离实现验证码操作
验证码的功能是防止非法用户恶意去访问登录接口而设置的一个功能,今天我们就来看看在前后端分离的项目中,SpringBoot 是如何提供服务的. 1|0SpringBoot 版本本文基于的 Spring ...

SpringBoot验证码

文章目录

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

二、开发前准备：

三、代码实现

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

五、最终效果

SpringBoot验证码相关推荐

最新文章

热门文章

SpringBoot验证码

文章目录

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

二、开发前准备：

三、 代码实现

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

五、最终效果

SpringBoot验证码相关推荐

最新文章

热门文章

三、代码实现

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