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

导入hutool依赖

复制代码
		<!--hutool-->
		<dependency>
			<groupId>cn.hutool</groupId>
			<artifactId>hutool-all</artifactId>
			<version>5.8.36</version>

获取验证码接口

java 复制代码
    @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());
    }

检查验证码接口

java 复制代码
    @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;
    }

前后端交互

html 复制代码
<img id="captcha_img" src="/captcha/getCaptcha" alt="看不清?换一张" onclick="change()">
js 复制代码
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;
                }
            }
        })
    }

测试

相关推荐
夜阳朔11 分钟前
Conda环境激活失效问题
人工智能·后端·python
人生在勤,不索何获-白大侠14 分钟前
day17——Java集合进阶(Collections、Map)
java·开发语言
程序员小羊!26 分钟前
Java教程:JavaWeb ---MySQL高级
java·开发语言·mysql
白仑色33 分钟前
Spring Boot 多环境配置详解
java·spring boot·后端·微服务架构·配置管理
懒斌34 分钟前
linux驱动程序
后端
超级小忍35 分钟前
在 Spring Boot 中优化长轮询(Long Polling)连接频繁建立销毁问题
java·spring boot·后端
David爱编程39 分钟前
Java 中 Integer 为什么不是万能的 int 替代品?
java·后端
阿宝想会飞40 分钟前
easyExcel多出大量数据方法
后端
自由的疯41 分钟前
基于 Java POI 实现动态列 Excel 导出的通用方法
后端
老马啸西风41 分钟前
个人网站一键引入免费开关评论功能 giscus
java