验证码案例

验证码案例

  • 步骤
    1. 设置图片的宽和高
    2. 在内存中生成一个图片对象
      BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    3. 美化图片
      1.生成一支画笔对象 Graphics g = image.getGraphics();
      2.填充背景色 g.fillRect(0,0,width,height);
      3.设置边框色 g.drawRect(0,0,width - 1, height - 1);
      4.添加文字 g.drawString(ch+"", width/5*i, height/2);
      5.添加横线干扰 g.drawLine(x1,y1,x2,y2);
    4. 输出图片
      ImageIO.write(image, “jpg”, response.getOutputStream());
  • 生成代码
        //设置验证码的长和宽
        int width = 120;
        int height = 60;

        //1.创建一个对象,在内存中生成一个图片对象
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

        //2.美化图片
        //2.1填充背景色
        Graphics g = image.getGraphics();//画笔对象
        g.setColor(Color.PINK);//设置画笔颜色
        g.fillRect(0,0,width,height);

        //2.2设置边框色
        g.setColor(Color.BLUE);
        g.drawRect(0,0,width - 1, height - 1);

        //2.3添加随机字符
        String str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
        Random rad = new Random();
        for (int i = 1; i <= 4; i++) {
            int index = rad.nextInt(str.length());
            char ch = str.charAt(index);
            g.drawString(ch+"", width/5*i, height/2);
        }

        //2.4添加横线干扰
        g.setColor(Color.GREEN);
        for (int i = 0; i < 10; i++) {
            int x1 = rad.nextInt(width);
            int y1 = rad.nextInt(height);
            int x2 = rad.nextInt(width);
            int y2 = rad.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }

        //3.输出图片
        ImageIO.write(image, "jpg", response.getOutputStream());
  • 效果
    启动tomcat后,每次访问该资源就会随机生成一幅验证码图片;即,每次刷新页面会刷新验证码
    那么如何在页面中完成点击验证码图片就能刷新验证码呢?
  • 单击完成刷新
    1. 动态刷新功能需要使用script
    2. 需要为图片添加鼠标的单击事件
    3. 每次单击就会重新访问一次该资源
      *浏览器自动缓存问题
      若图片绑定的src资源不发生变化,则浏览器不会重新请求该资源
      *解决方法
      在该资源路径后随即添加属性值,为使属性值永不重复,一般添加时间戳
  • 注册页面代码如下
        
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>注册页面title>
        
            <script>
                /*
                完成点击图片或文字就会刷新验证码功能
        
                1.给图片和文字添加超链接
                2.为图片和文字绑定单击事件
                3.重新设置src的值
        
                 */
            window.onload = function () {
                //1.获取图片对象
                var img = document.getElementById("checkCode");
                //2.绑定单击事件
                img.onclick = function () {
                    //加时间戳
                    var date = new Date().getTime();
                    //更换src资源路径
                    img.src = "/response/checkCodeServlet?"+date;
                }
        
                //获取标签对象
                var ch = document.getElementById("change");
                //绑定单击事件
                ch.onclick = function () {
                    var date = new Date().getTime();
                    ch.href = "/response/regist.html";
                }
            }
            script>
        head>
        <body>
            <img id="checkCode" src="/response/checkCodeServlet">
            <a id="change" href="/response/checkCodeServlet">看不清?点击更换一张验证码a>
        body>
        html>

存在的问题

  • 点击图片时,可以完成验证码的刷新;然而点击超链接时,虽然能够刷新,但是页面却会发生较大变化
    *在点击图片时,每次点击就会刷新一次src
    *然而在点击超链接时,浏览器会自动放大该图片展示,从而对原页面造成干扰
    所以类似src的方式修改超链接的href方法并不可行;
    *一个不可行的方法:修改超链接的href为此页面,即刷新一下此页面,然而实际这种方法并不能应用
  • 此问题解决方案暂未解决

你可能感兴趣的:(java-web)