extjs登陆系统页面

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

<script type="text/javascript" src="./js/go.js"></script>

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: '<img src="/image" align="absmiddle" id="randomming" onclick="javascript:reloadcode(Math.random())" style="cursor: hand" alt="点击重获验证码." /> '
});
}
);

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;
}
}