Extjs4的MVC登录实现（整合struts2）（一）

本文转载自: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<String, Object> 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;    
    }   

 效果图：