欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Extjs4的MVC登录实现(整合struts2)(一)

程序员文章站 2022-07-04 21:34:20
...

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

 效果图

Extjs4的MVC登录实现(整合struts2)(一)
            
    
    博客分类: Extjs ExtjsStrutsMVC 

 

相关标签: Extjs Struts MVC