登录图形验证码验证

1.页面添加 一个验证码输入框 一个img标签用来存放验证码图
写一个imgCode()点击事件,用来刷新验证码
在这里插入图片描述
将获得的验证码放入redis缓存当中,登录的时候用来验证
在这里插入图片描述
验证图形验证码是否正确``
在这里插入图片描述

代码如下:
controller层:

	@RequestMapping("toLogin")
    public String toLogin() {
        return "login";
    }

    @RequestMapping("login")
    public String login(User user, String code, Model model) {
        //判断验证码
        if (code == null || code.equals("")) {
            model.addAttribute("error", "请输入验证码");
            return "login";
        }

        String imgCode = (String) redisTemplate.opsForValue().get("imgCode");
        System.out.println(code + ";;;" + imgCode);
        if (!code.equals(imgCode)) {
            model.addAttribute("error", "验证码输入错误");
            return "login";
        }

        //判断用户是否存在
        User loginUser = userService.login(user);
        if (loginUser == null) {
            model.addAttribute("error", "用户名不存在");
            return "login";
        }

        //判断密码是否正确
        if (!loginUser.getPwd().equals(user.getPwd())) {
            model.addAttribute("error", "密码错误!!!");
            return "login";
        }
        return "list";
    }

    //图片验证码
    @RequestMapping("getImgCode")
    public void getImgCode(HttpServletResponse response) throws IOException {
        //定义图形验证码的长、宽、验证码字符数、干扰元素个数
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
        //CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);
        //图形验证码写出,可以写出到文件,也可以写出到流
        //captcha.write("d:/circle.png");
        //验证图形验证码的有效性,返回boolean值
        captcha.verify("1234");
        captcha.write(response.getOutputStream());
        System.out.println("验证码:" + captcha.getCode());
        //验证码存入redis
        redisTemplate.opsForValue().set("imgCode", captcha.getCode(), 60, TimeUnit.SECONDS);
    }

dao层:

public interface UserDao {
    @Select("select * from `user` where name=#{name}")
    User login(User user);
}

jsp页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../resource/bootstrap4/css/bootstrap.css">
    <script src="../../resource/js/jquery-3.2.1.js"></script>
    <script src="../../resource/bootstrap4/js/bootstrap.js"></script>
    <script src="../../resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>
    <title>$Title$</title>
</head>
<body>
<h1 style="color: #FF5722">${error}</h1>
<form method="post" action="/login">
    账号:<input name="name"><br><br>
    密码:<input name="pwd"><br><br>
    验证码:
    <input name="code">
    <img src="/getImgCode" width="60px" border="100px" id="img">
    <input type="button" value="点我刷新" onclick="imgCode()"><br><br>
    <input type="submit" value="登录">
</form>
</body>
<script>
    function imgCode() {
        //若请求与前一次相等 则不提交请求 因此要写一个随机值
        $("#img").attr("src","/getImgCode?id="+Math.random());
    }
</script>
</html>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大风~刮过

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值