SpringBoot借助hutool生成图片二维码

在很多网站尤其是登录的时候，我们经常可以看到需要我们输入图片二维码，那图片二维码是如何生成的呢？点击图片我们是如何刷新二维码的呢？话不多说，直接开干

一、首先理解浏览器/服务器之间的通讯流程

在这里插入图片描述

二、导入依赖

创建一个基本的SpringBoot项目、然后导入hutool工具类依赖

<dependency>
    <groupId>cn.hutoolgroupId>
    <artifactId>hutool-captchaartifactId>
    <version>5.8.5version>
dependency>
1
2
3
4
5

当然hutool还有很多很好用的功能，具体可移步官网

三、实现

后端【Controller】

@RestController
@RequestMapping("/test")
public class TestController {

    @GetMapping("/getUrl")
    public void getUrl(HttpServletResponse response) throws IOException {
        // 宽 高 验证码长度 圆圈数(就是验证码图片上用来干扰视线的圆圈)
        CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(200, 150, 4, 5);
        //当然也可以使用划横线的图片二维码 
        //CaptchaUtil.createLineCaptcha( ) 这个就根据自己的需求去定制
        //拿到验证码  我们可以将验证码存入 session或者redis中 这里就不演示了
        String code = circleCaptcha.getCode();
        //将图片二进制输入写入 响应体response中
        circleCaptcha.write(response.getOutputStream());
    }
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

前端【index.html页面】

DOCTYPE html>
<img lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

		<img src="/test/getUrl">

body>
html>
1
2
3
4
5
6
7
8
9
10
11

四、实现 “点击图片二维码刷新 ”

在img标签上加上一个点击事件，然后刷新src，在src中我们每次都加入一个新的时间戳，这样我们每次点击都能拿到新的src连接

DOCTYPE html>
<img lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<img src="/test/getUrl" id="captcha" onclick="getNewCode()">
body>
<script>

    const getNewCode=function () {
        document.getElementById("captcha").src=
            "/test/getUrl?time="+new Date().getTime();
    }
    
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

五、测试最终效果

在这里插入图片描述

六、后记

就是这么简单、恭喜你完结撒花。
生活明朗、万物可爱、人间值得、未来可期。

相关阅读:
vscode+eslint一键格式化代码
JavaScript正则表达式
算法设计与分析 SCAU17088 分治法求众数（优先做）
商业化之路怎么走，一家开源分布式数据库厂商的答案｜爱分析调研
Android库打包成aar/jar发布至Maven Central
Nginx优化与防盗链
dsumtype的比较
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
spring---第七篇
《SpringBoot项目实战》第五篇—接口发生异常如何统一处理

原文地址：https://blog.csdn.net/weixin_45647685/article/details/126359244