ext2.0+jsp+struts 实现带有验证码的登录流程

1、给出效果图。

  2、给出login.js代码。

Ext.onReady(function() {
			var loginForm = new Ext.form.FormPanel(
					{
						title : '用户登录',
						width : 220,
						height : 160,
						frame : true,
						labelWidth : 50,
						labelAlign : 'right',
						renderTo : 'content',
						items : [
								new Ext.form.TextField( {
									name : 'name',
									fieldLabel : '名称'
								}),
								new Ext.form.TextField( {
									name : 'password',
									fieldLabel : '密码',
									inputType : 'password'
								}),
								new Ext.form.TextField(
										{
											name : 'checkCode',
											fieldLabel : '验证码',
											maxLength : 4,
											cls:'checkCode'
										}) ],
						buttons : [ {
							text : '登录',
							pressed : false,
							handler : function() {
								login(loginForm);
							}
						}, {
							text : '重置',
							pressed : false,
							handler : function() {
								loginForm.getForm().reset();
							}
						} ]
					});
		});

function login(form) {
	Ext.Ajax.request( {
		url : rootPath + '/login.do',
		method : 'post',
		success : function(response) {
			var result = Ext.decode(response.responseText);
			if (result.result == "success") {
				location.href = rootPath + "/pages/home/home.jsp";
			} else {
				form.setTitle('用户登录('+result.errMsg+')');
				/*通过添加删除类实现刷新验证码的功能*/
				form.getForm().findField('checkCode').removeClass('checkCode');
				form.getForm().findField('checkCode').addClass('checkCode');
				form.getForm().reset();
			}
		},
		params : {
			name : form.getForm().findField('name').getValue(),
			password : form.getForm().findField('password').getValue(),
			checkCode: form.getForm().findField('checkCode').getValue()
		}
	});
}

3、给出css文件：checkCode.css

.checkCode {
	background: url("checkCode.jsp") no-repeat;
	background-position: right center;
	background-color: white;
}

4、给出生成验证码的jsp文件。

<%@ page language="java" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"   
     contentType="image/jpeg" pageEncoding="UTF-8"%>  
 
 
<%  //设置页面不缓存  
   response.setHeader("Pragma","No-cache");  
   response.setHeader("Cahce-Control","no-cache");  
   response.setDateHeader("Expires",0);  
   //在内存中创建图片  
   int width=60,height=20;  
   BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);  
   //获取图形上下文  
   Graphics g= image.getGraphics();  
   //生成随机类  
   Random random= new Random();  
   //设置背景颜色  
   g.setColor(new Color(160,200,100));  
   g.fillRect(0,0,width,height);  
   //设置字体  
   g.setFont(new Font("Times New Roman",Font.PLAIN,18));  
   //随机产生50条干扰线，使图形中的验证码不易被其他的程序探测到  
    g.setColor(new Color(160,200,200));  
   for(int i=0;i<50;i++)  
   {  
     int x=random.nextInt(width);  
     int y=random.nextInt(height);  
     int x1=random.nextInt(width);  
     int y1=random.nextInt(height);  
     g.drawLine(x,y,x+x1,y+y1);  
   }  
   //随机产生验证码（4位数字）  
   String sRand="";  
   for(int i=0;i<4;i++)  
   {  
     String rand=String.valueOf(random.nextInt(10));  
     sRand+=rand;  
     //将验证码显示到图象  
     g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));  
     g.drawString(rand,13*i+6,16);  
   }  
   session.setAttribute("checkCode",sRand);  //将产生的验证码存储到sesson中  
   g.dispose();  
   ImageIO.write(image,"JPEG",response.getOutputStream());  
   out.clear(); //***********  
   out=pageContext.pushBody();//**********  
 %> 
<!--page language="java" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*">     contentType="image/jpeg" pageEncoding="GBK-->
<!-->   response.setHeader("Pragma","No-cache"); 
   response.setHeader("Cahce-Control","no-cache"); 
   response.setDateHeader("Expires",0); 
   //在内存中创建图片 
   int width=60,height=20; 
   BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); 
   //获取图形上下文 
   Graphics g= image.getGraphics(); 
   //生成随机类 
   Random random= new Random(); 
   //设置背景颜色 
   g.setColor(new Color(160,200,100)); 
   g.fillRect(0,0,width,height); 
   //设置字体 
   g.setFont(new Font("宋体",Font.PLAIN,18)); 
   //随机产生100条干扰线，使图形中的验证码不易被其他的程序探测到 
    g.setColor(new Color(160,200,200)); 
   for(int i=0;i<100;i++)>   { 
     int x=random.nextInt(width); 
     int y=random.nextInt(height); 
     int x1=random.nextInt(width); 
     int y1=random.nextInt(height); 
     g.drawLine(x,y,x+x1,y+y1); 
   } 
   //随机产生验证码（4位数字） 
   String sRand=""; 
   for(int i=0;i<4;i++)>   { 
     String rand=String.valueOf(random.nextInt(10)); 
     sRand+=rand; 
     //将验证码显示到图象 
     g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110))); 
     g.drawString(rand,13*i+6,16); 
   } 
   session.setAttribute("checkCode",sRand); //将产生的验证码存储到sesson中 
   g.dispose(); 
   ImageIO.write(image,"JPEG",response.getOutputStream()); 
   out.clear(); //*********** 
   out=pageContext.pushBody();//********** 

5、给出Action：LoginAction.java

package com.happyou.action;

import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import net.sf.json.JSONObject;
import com.happyou.bean.Guest;
import com.happyou.dao.GuestDAO;

public class LoginAction extends Action {
	GuestDAO guestDao;

	public void setGuestDao(GuestDAO guestDao) {
		this.guestDao = guestDao;
	}

	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		String name = request.getParameter("name");
		String password = request.getParameter("password");
		String checkCode = request.getParameter("checkCode");
		JSONObject result = new JSONObject();
		if (!checkCode.equals(request.getSession().getAttribute("checkCode"))) {
			result.put("result", "failure");
			result.put("errMsg", "验证码输入错误");
		} else {
			String[] queryCondition = { name, password };
			List<Guest> guest = guestDao
					.find(
							"from Guest as model where model.name= ? and model.password=?",
							queryCondition);
			if (!guest.isEmpty()) {
				request.getSession().setAttribute("guest", guest.get(0));
				result.put("result", "success");
			} else {
				result.put("result", "failure");
				result.put("errMsg", "用户名或者密码错误");
			}
		}
		try {
			response.getWriter().write(result.toString());
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

6、思路简介

         通过checkCode.css 中的类checkCode，设置验证码输入框的样式，指定cls为checkCode。在login.js中有方法：login，通过添加删除类来实现验证码的刷新功能。生成验证码的jsp文件是统一的套路，这里不再详细说明。