本文转载自:http://www.javake.com.cn/frontend/js/20130922/6783.html,作者:eric
login.js:
//定义验证码控件
Ext.define('CheckCode',{
extend: 'Ext.form.field.Text',
alias: 'widget.checkcode',
inputTyle:'codefield',
codeUrl:Ext.BLANK_IMAGE_URL,
isLoader:true,
onRender:function(ct,position){
this.callParent(arguments);
this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});
this.codeEl.addCls('x-form-code');
this.codeEl.on('click', this.loadCodeImg, this);
if (this.isLoader) this.loadCodeImg();
},
alignErrorIcon: function() {
this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
},
//如果浏览器发现url不变，就认为图片没有改变，就会使用缓存中的图片，而不是重新向服务器请求，所以需要加一个参数，改变url
loadCodeImg: function() {
this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
}
});
Ext.onReady(
function(){
var checkcode = Ext.create('CheckCode',{
cls : 'key',
fieldLabel : '验证码',
name : 'CheckCode',
id : 'CheckCode',
allowBlank : false,
isLoader:true,
blankText : '验证码不能为空',
codeUrl: 'getCode',
width : 150
});
var form = Ext.create(
'Ext.form.Panel',
{
frame:true,
title:'用户登录',
width:300,
height:170,
//渲染到页面中的loginForm层中
renderTo:'loginForm',
//是否可以拖动
draggable:true,
//使buttons中的button居中显示
buttonAlign:'center',
fieldDefaults:{
//居左
labelAlign:'center',
//宽度
labelWidth:50,
//anchor: '90%',
//错误提示显示在一边(side)，还可以配置为under、title、none
msgTarget: 'side'
},
items:[
{
xtype:'textfield',
fieldLabel:'用户名',
name:'name',
//不允许为空
allowBlank:false,
blankText:'用户名不能为空'
},
{
xtype:'textfield',
fieldLabel:'密 码',
name:'password',
inputType:'password',
allowBlank:false,
blankText:'密码不能为空'
},
checkcode
],
buttons:[
{
text:'登录',
width:80,
height:30,
handler:function(){
//获取当前的表单form
var form = this.up('form').getForm();
//判断否通过了表单验证，如果不能空的为空则不能提交
if(form.isValid()){
//alert("可以提交");
form.submit(
{
clientValidation:true,
waitMsg:'请稍候',
waitTitle:'正在验证登录',
url:'user_login',
success:function(form,action){
//登录成功后的操作，这里只是提示一下
Ext.MessageBox.show({
width:150,
title:"登录成功",
buttons: Ext.MessageBox.OK,
msg:action.result.msg
})
},
failure:function(form,action){
Ext.MessageBox.show({
width:150,
title:"登录失败",
buttons: Ext.MessageBox.OK,
msg:action.result.msg
})
}
}
)
}
}
},
{
text:'取消',
width:80,
height:30,
handler:function(){
//点击取消，关闭登录窗口
var form = this.up('form');
form.close();
}
}
]
}
)
}
)
为了布局验证码位置，需要定义一个style.css
[css] view plaincopy
#CheckCode{ float:left;}
.x-form-code{width:75px;height:25px;vertical-align:middle;cursor:pointer; float:left; margin-left:7px;}
生成验证码的类：YanZhengMa.java:(英语学的不好，用拼音了。。。。)
[java] view plaincopy
package action;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
import com.sun.image.codec.jpeg.ImageFormatException;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
public class YanZhengMa {
static String strCode = null;
public static final char[] CHARS = {'2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z'};
public static Random random = new Random();
//获取六位随机数
public static String getRandomString() {
StringBuffer buffer = new StringBuffer();
for (int i = 0;i<4;i++) {
buffer.append(CHARS[random.nextInt(CHARS.length)]);
}
strCode = buffer.toString();
System.out.println("4位随机数："+strCode);
return strCode;
}
//获取随机颜色
public static Color getRandomColor() {
return new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255));
}
//返回某颜色的反色
public static Color getReverseColor(Color c) {
return new Color(255 - c.getRed(), 255 - c.getGreen(), 255 - c.getBlue());
}
//创建图片
public ByteArrayInputStream createImage() {
String randomString = getRandomString();//获取随机字符串
int width = 80;//设置图片的宽度
int height = 30;//高度
Color color = getRandomColor();//获取随机颜色，作为背景色
Color reverse = getReverseColor(color);//获取反色，用于前景色
//创建一个彩色图片
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g = image.createGraphics();//获取绘制对象
g.setFont(new Font(Font.SANS_SERIF, Font.BOLD, 23));//设置字体
g.setColor(color);//设置颜色
g.fillRect(0, 0, width, height);//绘制背景
g.setColor(reverse);//设置颜色
g.drawString(randomString, 5, 23);
//最多绘制100个噪音点
for (int i = 0,n = random.nextInt(100); i < n; i++) {
g.drawRect(random.nextInt(width), random.nextInt(height), 1, 1);
}
//返回验证码图片的流格式
ByteArrayInputStream bais = convertImageToStream(image);
return bais;
}
//将BufferedImage转换成ByteArrayInputStream
private static ByteArrayInputStream convertImageToStream(BufferedImage image){
ByteArrayInputStream inputStream = null;
ByteArrayOutputStream bos = new ByteArrayOutputStream();
JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(bos);
try {
jpeg.encode(image);
byte[] bts = bos.toByteArray();
inputStream = new ByteArrayInputStream(bts);
} catch (ImageFormatException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return inputStream;
}
}
然后定义验证码请求的Action：YanZhengMaAction.java:
[java] view plaincopy
package action;
import java.io.ByteArrayInputStream;
import java.util.Map;
import org.apache.struts2.interceptor.SessionAware;
import com.opensymphony.xwork2.ActionSupport;
public class YanZhengMaAction extends ActionSupport implements SessionAware {
private ByteArrayInputStream bais;
YanZhengMa yanZhengMa = null;
String strCode = null;
private Map session;
public String getCode(){
yanZhengMa = new YanZhengMa();
bais = yanZhengMa.createImage();
strCode = yanZhengMa.strCode;
System.out.println("YanZhengMaAction>randomCode:"+strCode);
//放入session，在login的时候需要用到验证
session.put("randomCode", strCode);
return SUCCESS;
}
public ByteArrayInputStream getBais() {
return bais;
}
public void setBais(ByteArrayInputStream bais) {
this.bais = bais;
}
public void setSession(Map arg0) {
this.session = arg0;
}
}
登录验证类：UserAction.java:
package action;
import java.io.ByteArrayInputStream;
import java.util.Map;
import org.apache.struts2.interceptor.SessionAware;
import com.opensymphony.xwork2.ActionSupport;
public class UserAction extends ActionSupport implements SessionAware {
//接收name,必须与js中的textfield的name相同，否则取不到值
private String name;
private String password;
//得到页面传来的验证码
private String CheckCode;
private Map session;
//定义一个msg变量，可用于存放错误信息，然后传到前台
//用于告诉前台时候登录成功
private boolean success;
public String login(){
//得到生成的验证码
String strCode = (String) session.get("randomCode");
System.out.println("UserAction>randomCode:"+strCode);
if("admin".equals(name) && "admin".equals(password) && CheckCode.toLowerCase().equals(strCode.toLowerCase())){
success = true;
}else{
success = false;
}
return SUCCESS;
}
效果图：
