extjs登陆系统页面

1.在index.jsp中添加如下js：

      

2.go.js代码如下：

      Ext.QuickTips.init();  
 function reloadcode(i)
  {
   document.getElementById("randomming").src="/image?rand="+i;
   
  }
var LoginForm;
LoginWindow=Ext.extend(Ext.Window,{  
title : '登陆系统',         
width : 265,             
height : 170,         
collapsible : true,  
defaults : {             
border : false 
},  
buttonAlign : 'center',     
createFormPanel :function() {  
return LoginForm=new Ext.form.FormPanel( {  
bodyStyle : 'padding-top:6px',  
defaultType : 'textfield',  
labelAlign : 'right',  
labelWidth : 55,  
labelPad : 0,  
frame : true,  
defaults : {  
allowBlank : false,  
width : 158  
},  
items : [{  
cls : 'user',  
name : 'username',  
fieldLabel : '帐号',  
blankText : '帐号不能为空' 
}, {  
cls : 'key',  
name : 'password',  
fieldLabel : '密码',  
blankText : '密码不能为空',  
inputType : 'password' 
}, {  
cls : 'key',  
name:'randCode',  
id:'randCode',  
fieldLabel:'验证码',  
width:80,  
blankText : '验证码不能为空' 
}]  
});  
},                     
login:function() {  
this.fp.form.submit({  
waitMsg : '正在登录......',  
url : 'login.do',    
failure:function(form, action) {
 var flag=action.result.msg;
if(flag=="yanzheng"){alert('验证码不正确,请重新输入');
     Ext.getDom('randCode').value="";
     }
else{alert('用户名或密码不正确,请重新输入');
    window.location.href = '/index.jsp';
} 
},
success:function(form, action) {

//登陆成功后显示页面
window.location.href = 'show.jsp';  
}
});  
},  
initComponent : function(){  
LoginWindow.superclass.initComponent.call(this);        
this.fp=this.createFormPanel();  
this.add(this.fp);  
this.addButton('登陆',this.login,this);  
this.addButton('重置', function(){this.fp.form.reset();},this);  
}      
});  
 
Ext.onReady(function()  
{var win=new LoginWindow();  
win.show();  
var bd = Ext.getDom('randCode');    
var bd2 = Ext.get(bd.parentNode);   
bd2.createChild({
 tag: 'span',
 html: ' '
 });   
}  
);

3.形成图片的java类：

package common;
import java.awt.Color;     
import java.awt.Font;     
import java.awt.Graphics2D;     
import java.awt.image.BufferedImage;     
import java.util.Random;     
     
import javax.imageio.ImageIO;     
import javax.servlet.ServletException;     
import javax.servlet.ServletOutputStream;     
import javax.servlet.http.HttpServlet;     
import javax.servlet.http.HttpServletRequest;     
import javax.servlet.http.HttpServletResponse;     
import javax.servlet.http.HttpSession;     
     
/**   
* 生成随机验证码   
* @author bitiliu   
*   
*/     
public class picture extends HttpServlet     
{     
     
private static final long serialVersionUID = 1L;     
     
//验证码图片的宽度。     
private int width=60;     
//验证码图片的高度。     
private int height=20;     
//验证码字符个数     
private int codeCount=4;     
     
     
private int x=0;     
//字体高度     
private int fontHeight;     
private int codeY;     
     
char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',     
'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',     
'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };     
     
/**   
* 初始化验证图片属性   
*/     
public void init() throws ServletException     
{     
//从web.xml中获取初始信息     
//宽度     
String strWidth=this.getInitParameter("width");     
//高度     
String strHeight=this.getInitParameter("height");     
//字符个数     
String strCodeCount=this.getInitParameter("codeCount");     
     
//将配置的信息转换成数值     
try     
{     
if(strWidth!=null && strWidth.length()!=0)     
{     
width=Integer.parseInt(strWidth);     
}     
if(strHeight!=null && strHeight.length()!=0)     
{     
height=Integer.parseInt(strHeight);     
}     
if(strCodeCount!=null && strCodeCount.length()!=0)     
{     
codeCount=Integer.parseInt(strCodeCount);     
}     
}     
catch(NumberFormatException e)     
{}     
     
x=width/(codeCount+1);     
fontHeight=height-2;     
codeY=height-4;     
     
}     
     
protected void service(HttpServletRequest req, HttpServletResponse resp)     
throws ServletException, java.io.IOException {     
     
//定义图像buffer     
BufferedImage buffImg = new BufferedImage(     
width, height,BufferedImage.TYPE_INT_RGB);     
Graphics2D g = buffImg.createGraphics();     
     
//创建一个随机数生成器类     
Random random = new Random();     
     
//将图像填充为白色     
g.setColor(getRandColor(200,250));     
g.fillRect(0, 0, width, height);     
     
//创建字体，字体的大小应该根据图片的高度来定。     
Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);     
//设置字体。     
g.setFont(font);     
     
//画边框。     
g.setColor(getRandColor(200,250));     
g.drawRect(0, 0, width - 10, height - 1);     
     
//随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。     
g.setColor(getRandColor(200,250));     
for(int i = 0; i < 120; i++)     
{     
int x = random.nextInt(width);     
int y = random.nextInt(height);     
int xl = random.nextInt(12);     
int yl = random.nextInt(12);     
g.drawLine(x, y, x + xl, y + yl);     
}     
     
//randomCode用于保存随机产生的验证码，以便用户登录后进行验证。     
StringBuffer randomCode = new StringBuffer();     
int red = 0, green = 0, blue = 0;     
     
//随机产生codeCount数字的验证码。     
for (int i = 0; i < codeCount; i++) {     
//得到随机产生的验证码数字。     
String strRand = String.valueOf(codeSequence[random.nextInt(36)]);     
//产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。     
red = random.nextInt(255);     
green = random.nextInt(255);     
blue = random.nextInt(255);     
     
//用随机产生的颜色将验证码绘制到图像中。     
g.setColor(new Color(red, green, blue));     
g.drawString(strRand, (i + 1) * x, codeY);     
     
//将产生的四个随机数组合在一起。     
randomCode.append(strRand);     
}     
// 将四位数字的验证码保存到Session中。     
HttpSession session = req.getSession();     
session.setAttribute("rand", randomCode.toString());     
     
// 禁止图像缓存。     
resp.setHeader("Pragma", "no-cache");     
resp.setHeader("Cache-Control", "no-cache");     
resp.setDateHeader("Expires", 0);     
     
resp.setContentType("image/jpeg");     
     
//将图像输出到Servlet输出流中。     
ServletOutputStream sos = resp.getOutputStream();     
ImageIO.write(buffImg, "jpeg", sos);     
sos.close();     
}     
Color getRandColor(int fc,int bc){//给定范围获得随机颜色
 Random random = new Random();
 if(fc>255) fc=255;
 if(bc>255) bc=255;
 int r=fc+random.nextInt(bc-fc);
 int g=fc+random.nextInt(bc-fc);
 int b=fc+random.nextInt(bc-fc);
 return new Color(r,g,b);
 }
}

4.登陆密码验证LoginAction.JAVA代码如下：

package action;

import java.io.IOException;
import java.sql.SQLException;

import javax.naming.NamingException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
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 common.Common;

import dao.SaleDao;

/**
 * MyEclipse Struts Creation date: 07-18-2008
 *
 * XDoclet definition:
 *
 * @struts.action validate="true"
 */
public class LoginAction extends Action { // 必须继承Action类
 /*
  * Generated Methods
  */
log4j验证
 static Logger logger = Logger.getLogger(LoginAction.class.getName());
 /**
  * Method execute
  *
  * @param mapping
  * @param form
  * @param request
  * @param response
  * @return ActionForward
  * @throws SQLException
  * @throws SQLException
  * @throws IOException
  * @throws NamingException
  * @throws ClassNotFoundException
  * @throws IllegalAccessException
  * @throws InstantiationException
  */
 public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException, NamingException {
  String rand=request.getSession().getAttribute("rand").toString();
  String randCode=request.getParameter("randCode").toUpperCase();
  String  userId=request.getParameter("username");
  request.getSession().setAttribute("userId", userId);
  String  outerPass=Common.toNormal(request.getParameter("password"));
  if(randCode.equals(rand)){
     //验证能否登陆，从数据库中取出用户名  和 密码
   SaleDao saledao=new SaleDao();
   //数据库中的密码
   String result=saledao.getPassword(userId,"0",outerPass);
   if("1".equals(result)){
    response.getWriter().write("{success:true}");
    logger.warn(userId+"用户登录成功.该用户的ip为："+request.getRemoteAddr());
   }else{

//用户名密码错误
    response.getWriter().write("{failure:true,msg:/'password/'}");
   }
  }
  else{

//验证码错误
    response.getWriter().write("{failure:true,msg:/'yanzheng/'}");
   };
  return null;
 }
}