验证码案例的实现---MyBatis+Session+Cookie

展示验证码(jsp页面)

首先,我们需要自己利用BufferedImage类去生成一张可以变换的验证码图片;

之后,我们就可以利用这样一串代码去将验证码里面的内容获取到:

这是一串测试代码:

OutputStream os=new FileOutputStream("e://a.jpg");//为存放验证码图片的地址
        String CheckCode=checkCode.outputVerifyImage(100,50,os,4);//固定验证码图片的大小,以及确定出每次图片里面出现的字符个数
        System.out.println(CheckCode);//输出测试一下上述条件是否成立

验证码图片在jsp的注册界面这样放置:

如果这样写的话,就会把验证码写死,不能够实现灵活变换,所以需要进行优化

优化之后:

将生成的验证码图片放在该servlet里面,实现刷新即变换图片------更加灵活一些

在成功写完一个验证码图片的程序(checkCode.java)之后,需要在checkServlet里面调用,将以下代码写在doGet方法里面:

ServletOutputStream os=resp.getOutputStream();
        String checkCode=checkCode.outputVerifyCode(100,50,os,4);

这样就实现了点击刷新就能够更换验证码的目的了

接下来,就需要去实现点击右边的看不清就能够实现验证码图片的更换:

在分别为图片看不清添加id的同时,再利用js实现随机更换,且不会出现同一个随机数而导致的缓存(这会导致图片无法继续更换)

<script>
    document.getElementById("changImg").onclick=function(){
      document.getElementById("checkCodeImg").src="/ttCookieLogin/checkServlet?"+new Date().getMilliseconds();
    }
  </script>

若是要为图片本身增加单击事件的话,大概代码是这样的:

<script>
    document.getElementById("checkCodeImg").onclick=function(){
      document.getElementById("checkCodeImg").src="/ttCookieLogin/checkServlet?"+new Date().getMilliseconds();
    }
  </script>

校验验证码(一存一取一比对)

将从jsp页面获取到的验证码存入session中(在checkServlet.java里面写入)

HttpSession session=req.getSession();
req.setAttribute("checkCode",checkCode);

然后在注册页面的后端得到session存储的验证码数据:

然后获得文本框里面的数据:

之后在注册成功之前进行比对:

这样就OK啦!

posted @ 2022-10-29 23:36  yesyes1  阅读(16)  评论(0编辑  收藏  举报