用struts做一个带有随机数字的图片验证登录模块

在我们平常的工作中，登录模块有一个小的功能，就是图片验证模块，今天我就把步骤一步一步写出来。

1.新建一个web service，然后再WebRoot写，一个contentType="image/jpeg"格式的image.jsp页面,最后一句代码是将页面以图片输出。

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg"  

import="java.awt.*,java.awt.image.*,java.util.*,javax.image

io.*" %>
<%!
        //产生随机色
    public Color getColor(){
        Random random = new Random();
        int r = random.nextInt(256);//0-255
        int g = random.nextInt(256);
        int b = random.nextInt(256);
        return new Color(r,g,b);
    }
        //获得四个随机的四个数字，用字符串进行拼接
    public String getNum(){
        String str = "";
        Random random = new Random();
        for(int i=0;i<4;i++){
            str += random.nextInt(10);//0-9
        }
        return str;
    }
%>
<%      //下面三行代码将浏览器缓存清掉
    response.setHeader("pragma", "mo-cache");
    response.setHeader("cache-control", "no-cache");
    response.setDateHeader("expires", 0);
        //产生一个矩形框
    BufferedImage image = new BufferedImage

(80,30,BufferedImage.TYPE_INT_RGB);
    //产生一个画笔
    Graphics g = image.getGraphics();
        //设置产生的数字的颜色
    g.setColor(new Color(200,200,200));
        //产生一个矩形框
    g.fillRect(0,0,80,30);
    
    //产生30条长度 颜色不变的线段
    for (int i = 0; i < 30; i++) {
        Random random = new Random();
        int x = random.nextInt(80);
        int y = random.nextInt(30);
        int xl = random.nextInt(x+10);
        int yl = random.nextInt(y+10);
        g.setColor(getColor());
        g.drawLine(x, y, x + xl, y + yl);
    }
    
    //产生字体的样式 大小 颜色 和获得随机数字
    g.setFont(new Font("serif", Font.BOLD,16));
    g.setColor(Color.BLACK);
    String checkNum = getNum();//"2525"
    //给产生的字符串间隔变大
    StringBuffer sb = new StringBuffer();
    for(int i=0;i<checkNum.length();i++){
        sb.append(checkNum.charAt(i)+" ");//"2 5 2 

5"
    }
        //将数字写入矩形框
    g.drawString(sb.toString(),15,20);
    //将数字保存到session中
    session.setAttribute("CHECKNUM",checkNum);//2525
    //将图片以字节流输出
    ImageIO.write

(image,"jpeg",response.getOutputStream());
        //清楚缓存
    out.clear();
    out = pageContext.pushBody();
%>

2.在/js-day03/WebRoot/WEB-INF/lib下添加struts2-2.3.1.1的jar包，至于jar包版本好像没有什么要求

2.在web.xml文件中配置struts2的核心过滤器

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
 
 
 
    <!-- 核心过滤器 -->
    <filter>
        <filter-name>StrutsPrepareAndExecuteFilter</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>StrutsPrepareAndExecuteFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
    
</web-app>

3.在src目录下配置struts.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

    <package name="checkcodePackage" extends="struts-default" namespace="/">    
        <action 
            name="checkRequest" 
            class="cn.itcast.javaee.js.checkcode.CheckcodeAction" 
            method="check">
        </action>
    </package>

</struts>

4.在WebRoot下建立image和js两个文件夹

//创建AJAX异步对象，即XMLHttpRequest
function createAJAX(){
    var ajax = null;
    try{
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }catch(e1){
        try{
            ajax = new XMLHttpRequest();
        }catch(e2){
            alert("你的浏览器不支持ajax，请更换浏览器");
        }
    }
    return ajax;
}

5.写action页面CheckcodeAction.java

package cn.itcast.javaee.js.checkcode;

import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 验证码检查
 * @author AdminTC
 */
public class CheckcodeAction extends ActionSupport{
    //客户端验证码
    private String checkcode;//2525
    //注入客户端验证码
    public void setCheckcode(String checkcode) {
        this.checkcode = checkcode;
    }
    /**
     * 验证
     */    
    public String check() throws Exception {
        //图片路径
        String tip = "images/MsgError.gif";
        //从服务器获取session中的验证码
        String checkcodeServer = (String) ActionContext.getContext().getSession().get("CHECKNUM");
        //将客户端的验证码与服务端的验证码进行比较
        if(checkcode.equals(checkcodeServer)){
            tip = "images/MsgSent.gif";
        }
        //以IO流的方式将tip变量的值输出到AJAX异步对象中
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
        //以下方式不是最好的，但可以完成AJAX异步交互
        return null;
    }
}

6.在WebRoot下写02_checkcode.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>验证码检查</title>
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
    
    <form>
        <table border="0" align="center">
            <tr>
                <th>验证码：</th>
                <td><input size="2" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td>
                <td><img src="01_image.jsp"/>
                <td id="res"></td>
            </tr>
        </table>
    </form>
    
    <script type="text/javascript">
        //去掉二边的空格
        function trim(str){"  zhaojun  "
            str = str.replace(/^s*/,"");//"zhaojun  "     
            str = str.replace(/s*$/,"");//"zhaojun"
            return str;     
        }
    </script>
    
    <script type="text/javascript">
        document.getElementById("checkcodeID").onkeyup = function(){
            var checkcode = this.value;
            checkcode = trim(checkcode);//2525
            if(checkcode.length == 4){
                //NO1)
                var ajax = createAJAX();
                //NO2)
                var method = "POST";
                var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
                ajax.open(method,url);
                //NO3)
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
                //NO4)
                var content = "checkcode=" + checkcode;
                ajax.send(content);
            
                //--------------------------------------------------------等待
                
                //NO5)
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){
                            //NO6)
                            var tip = ajax.responseText;
                            
                            //NO7)
                            var img = document.createElement("img");
                            img.src = tip;
                            img.style.width = "14px";
                            img.style.height = "14px";
                            var td = document.getElementById("res");
                            td.innerHTML = "";
                            td.appendChild(img);
                        }
                    }
                }
            }else{
                //清空图片
                var td = document.getElementById("res");
                td.innerHTML = "";
            }
        }
    </script>    

  </body>
</html>

7.总结

一步一步，边做边思考下一步，加油