SpringBoot使用hutool生成图片二维码

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

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

SpringBoot使用hutool生成图片二维码_第1张图片

二、导入依赖

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

<dependency>
    <groupId>cn.hutoolgroupId>
    <artifactId>hutool-captchaartifactId>
    <version>5.8.5version>
dependency>

当然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());
    }
    
}

前端【index.html页面】

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

		<img src="/test/getUrl">

body>
html>

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

在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>

五、测试最终效果

SpringBoot使用hutool生成图片二维码_第2张图片

六、后记

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

你可能感兴趣的:(实用小技巧,spring,boot,java,后端)