登录图形验证码验证

1.页面添加一个验证码输入框一个img标签用来存放验证码图写一个imgCode()点击事件，用来刷新验证码将获得的验证码放入redis缓存当中，登录的时候用来验证验证图形验证码是否正确``代码如下:controller层:@RequestMapping("toLogin")public String toLogin() {return "login";}@RequestMapping("login

大风~刮过

2012人浏览 · 2022-05-05 22:40:08

大风~刮过 · 2022-05-05 22:40:08 发布

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>