zoukankan      html  css  js  c++  java
  • 简易的网页验证码

    通过使用Java图形界面设计(AWT)来绘制一个简易的验证码,效果如下:

    整体的效果很low,较为现代的网页界面估计不会使用,但作为后台管理界面所需还可以的,在这里还是进行个记录,以备不时之需

    第一步:构建验证码

    <%@ page language="java" import="java.util.*,java.awt.*" pageEncoding="UTF-8"%>
    <%@ page import="javax.imageio.*"%>
    <%@ page import="java.awt.image.*" %>
    <!-- 验证码 -->
    <html>
      <head>
        <title>网上书店</title>
      </head>
      
      <body>
        <%
        response.setHeader("Cache-Control","no-cache");
        //内存中创建图像
        int width=60,height=20;
        BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        //获取画笔
        Graphics g=image.getGraphics();
        //设定背景色,并填充整个图像区(创建画布)
        g.setColor(new Color(200,200,200));
        g.fillRect(0,0,width,height);
        //随机数
        Random rnd=new Random();
        int randNum=rnd.nextInt(8999)+1000;
        String randStr=String.valueOf(randNum);
        //将验证码存入session
        session.setAttribute("randStr",randStr);
        //将验证码显示在画布
        g.setColor(Color.black);
        g.setFont(new Font("",Font.PLAIN,20));
        g.drawString(randStr,10,17);
        //生成100个干扰点(就是图片上的噪点)
        for(int i=0;i<100;i++){
          int x=rnd.nextInt(width);
          int y=rnd.nextInt(height);
          g.drawOval(x,y,1,1);
        }
        //输出图像
        ImageIO.write(image,"JPEG",response.getOutputStream());
        out.clear();
        out=pageContext.pushBody();
         %>
      </body>
    </html>

    这个JSP页面,名叫code.jsp,其中嵌入的Java代码就是验证码的实现方法。值得注意的有:

    int width=60,height=20;
    BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

    其中width,height分别设置外部范围的宽和高,也就是灰色区域的宽和高,BufferedImage.TYPE_INT_RGB设置这个区域是由RGB三色构成,值为int型

       //设定背景色
        g.setColor(new Color(200,200,200));

    在这里我指定了RGB的颜色,所以呈现一个灰色区域

    int randNum=rnd.nextInt(8999)+1000;

    使用随机数,这里随机数的范围是1000~9999来输出一个4位的随机数

    g.setFont(new Font("",Font.PLAIN,20));

    设置图像上的文本字体,字体类型,字体大小。我这里没有设置字体,就是使用默认字体,可以设置为微软雅黑之类的字体,字体类型使用了Font.PLAIN (无类型,int值为0) ,可选值 Font.BOLD (粗体,int值为1),Font.ITALIC(斜体,int值为2),当然我们设置为3(也就是粗体加斜体)

    String randStr=String.valueOf(randNum);
    //将验证码存入session
    session.setAttribute("randStr",randStr);

    这里将具体数值存入session,名字叫randStr,之后会使用

    第二步:在需要的页面引入这个JSP

    <td>
    <
    input type="text" name="code" size="10"> <img id="imgValidate" src="code.jsp" onclick="refresh()" title="看不清可单击图片刷新">
    </
    td>

    增加一个输入项,name="code",Action中要使用,code.jsp就是我们在上面写的验证码页面,为这个img标签来个id="imgValidate",JavaScript中要使用,同时增加一个JavaScript方法用于点击验证码进行刷新

    JavaScript代码:

      <script type="text/javascript">
        function refresh(){
         document.getElementById("imgValidate").src="code.jsp?"+new Date();
        }
     </script>

    浏览器可能会缓存我们的验证码,如果请求相同的src就不会再进行请求,验证码也不会更新,所以我们以当前时间为参数(虽然这个参数对于服务器端没什么作用)来蒙骗浏览器当成不同的请求,以此保证验证码可以刷新

    第三步:在Action中获得用户输入的验证码与实际显示的验证码进行比较

    在Action中增加一个名为code的String变量,并生成其set/get方法

    private String code;
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }

    在需要验证的方法里进行比较:

    String randStr=(String) session.getAttribute("randStr");
        if(code!=null){
         if(code.equals(randStr)){
             System.out.println("验证码正确");
          }else{
             System.out.println("验证码错误");
          }
    }

    这里使用到了之前传入session中的名为randStr的值,使其与用户输入的code变量进行比较

  • 相关阅读:
    推荐一个采用方便程序员在线动画学习常用算法的良心网站
    你的ABAP程序给佛祖开过光么?来试试Jerry这个小技巧
    我在德国做SAP CRM One Order redesign工作的心得
    我做SAP CRM One Order redesign的一些心得体会
    一个最简单的WebSocket hello world demo
    推荐一个好用的以多tab标签方式打开windows CMD的工具
    SAP CX Upscale Commerce : SAP全新推出的电商云平台
    TCP socket和web socket的区别
    SAP 前端技术的演化史简介
    Fiori Fundamentals和SAP UI5 Web Components
  • 原文地址:https://www.cnblogs.com/lz2017/p/6711539.html
Copyright © 2011-2022 走看看