当前位置: 首页 > article >正文

【spring boot 实现图片验证码 前后端】

导入hutool依赖

		<!--hutool-->
		<dependency>
			<groupId>cn.hutool</groupId>
			<artifactId>hutool-all</artifactId>
			<version>5.8.36</version>

获取验证码接口

    @Autowired
    private Captcha captcha;
    private final static Long VALIDATE_CODE = 60 * 1000L;
    @RequestMapping("/getCaptcha")
    public void getCaptcha(HttpServletResponse response, HttpSession session) throws IOException {
        // 设置响应内容类型
        response.setContentType("image/png");
        // 直接把验证码写入浏览器,没有返回值
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captcha.getWidth(), captcha.getHeight(),4,4);
        String code = lineCaptcha.getCode();
        session.setAttribute(captcha.getSession().getKey(), code);
        session.setAttribute(captcha.getSession().getDate(),new Date());// 获取当前时间
        lineCaptcha.write(response.getOutputStream());
    }

检查验证码接口

    @RequestMapping("/check")
    public boolean check(String mycaptcha, HttpSession session) {
        System.out.println("[captchaCheck]用户输入的验证码:" + mycaptcha);
        String code = (String)session.getAttribute(captcha.getSession().getKey());
        if(!StringUtils.hasLength(code)) {
            return false;
        }
        Date date = (Date)session.getAttribute(captcha.getSession().getDate());
        if(mycaptcha.equalsIgnoreCase(code) && VALIDATE_CODE >= System.currentTimeMillis() - date.getTime()) {
            return true;
        }
        return false;
    }

前后端交互

<img id="captcha_img" src="/captcha/getCaptcha" alt="看不清?换一张" onclick="change()">
let check = false;
    function change() {
        event.preventDefault();  // 阻止表单默认提交行为
        $.ajax({
            type: "get",
            url: "/captcha/getCaptcha",
            success: function (result) {
                console.log("[getCaptcha]刷新的验证码:" + result);
                $("#captcha_img").attr("src", "/captcha/getCaptcha");
            }
        })
    }
    function login() {
        event.preventDefault();  // 阻止表单默认提交行为
        $.ajax({
            type: "get",
            url: "/login",
            data: {
                username: $("#username").val(),
                password: $("#password").val(),
            },
            success: function (result) {
                console.log(result);
                if(result === false) {
                    alert("用户名或密码错误!!");

                }
                else if(result === true && check === false) {
                    alert("验证码错误!!");
                    location.reload();
                }
                else if(result === true && check === true) {
                    location.href = "recognize.html";
                }
                // if(result === true && check === true) {
                //     location.href = "recognize.html";
                // }
                // else {
                //     alert("用户名或密码错误!!");
                // }
            }
        })
        $.ajax({
            type: "post",
            url: "/captcha/check",
            data: {
                mycaptcha: $("#captcha").val() 
            },
            success: function (result) {
                console.log(result);
                if(result === false) {
                    check = false;
                    // alert("验证码错误!!");
                    // location.reload();
                }  
                else {
                    check = true;
                }
            }
        })
    }

测试

在这里插入图片描述


http://www.kler.cn/a/589631.html

相关文章:

  • ESP32学习 -从STM32工程架构进阶到ESP32架构
  • MySQL 性能优化:索引优化 + 读写分离 + Redis 缓存,TPS 提升 175% 实战解析
  • 《Classifier-Free Diffusion Guidance》的核心观点与方法
  • 三层架构与MVC架构的本质:从设计思想到实战选择
  • 贝叶斯网络的基本概念并构建一个贝叶斯网络(实例)
  • QT 磁盘文件 教程04-创建目录、删除目录、遍历目录
  • IntelliJ IDEA 中 Maven 的 `pom.xml` 变灰带横线?一文详解解决方法
  • 微服务即时通信系统---(八)用户管理子服务
  • 2025交易所开发突围:AI增强型撮合引擎与零知识证明跨链架构
  • 有趣的算法实践:整数反转与回文检测(Java实现)
  • java学习总结(六)Spring IOC
  • 基于k3s部署Nginx、MySQL、Golang和Redis的详细教程
  • 一键爬取b站视频
  • lua C语言api学习2 在C语言中使用lua语言
  • 3月17日作业
  • QT中的宏
  • JAVA | 聚焦 String 的常见用法与底层内存原理
  • 无人机吊舱模块更换技术难点分析!
  • UFS Link Startup 介绍
  • 怎么在centos7中搭建一个mqtt服务