金克丝出装s6:ExtJS3.3.0 Struts2.1.8 Spring2.5.6 Hibernate3.3.2 整合开发用户登录模块

ExtJS3.3.0+Struts2.1.8+Spring2.5.6+Hibernate3.3.2 整合开发用户登录模块

ExtJS通常简称为EXT，它是一个非常优秀的Ajax框架，用JavaScript编写，与后台技术无关，可以用来开发具有炫丽外观的富客户端应用。我第一次听到ExtJS的名字要在半年前，听网上各大技术论坛都在吹怎么怎么好，现在一用，果然非同凡响，于是，我花了将近十天时间做了一个使用ExtJS3.3.0+Struts2.1.8+Spring2.5.6+Hibernate3.3.2整合开发系统用户登录模块，中途可谓是在黑暗中摸索啊，不停的翻书，查资料，改错，调bug，SSH是用的太多了，所以花了很短的时间就将SSH的代码给写出来了，具体的代码我就不再这里贴出来了，因为过于简单，贴个UserAction.java参考一下吧：

package com.fairy.demo.action;

import javax.servlet.http.HttpSession;

import org.apache.struts2.ServletActionContext;

import com.fairy.demo.domain.User;
import com.fairy.demo.service.UserService;
import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {

 private static final long serialVersionUID = 427670023311883464L;
 private User user;
 private UserService userService;
 private boolean success;
 private String msg;
 
 public User getUser() {
  return user;
 }
 
 public void setUser(User user) {
  this.user = user;
 }
 
 public UserService getUserService() {
  return userService;
 }
 
 public void setUserService(UserService userService) {
  this.userService = userService;
 }
 
 public String getMsg() {
  return msg;
 }

 public void setMsg(String msg) {
  this.msg = msg;
 }

 public void setSuccess(boolean success) {
  this.success = success;
 }

 public boolean isSuccess() {
  return success;
 }
 
 public String login() {
  User user2 = userService.get(user.getUsername(), user.getPassword());
  if (user2 != null) {
   HttpSession session = ServletActionContext.getRequest().getSession();
   session.setAttribute("user", user2);
   success = true;
   msg = "登录成功";
  } else {
   success = false;
   msg = "用户名或密码错误";
  }
  return "result";
 } 
}

具体的配置文件如下：

因为我使用的是Spring来管理Hibernate的配置，所以没有Hibernate.cfg.xml文件的出现

Spring2.5.6的ApplicationContext.xml文件

 xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:tx="http://www.springframework.org/schema/tx"
 xmlns:p="http://www.springframework.org/schema/p"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
 http://www.springframework.org/schema/tx  
 http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">

   class="org.apache.commons.dbcp.BasicDataSource">
     value="com.mysql.jdbc.Driver">
  
  
  
  
 
   class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean">
  
   
  
  
   
    
     org.hibernate.dialect.MySQLDialect
    
    true
    true
   
  
  
   
    com.fairy.demo.domain.User
   
  
 
 
   class="org.springframework.orm.hibernate3.HibernateTransactionManager">
  
 
 
 
 
  
 
 
 
  
 
 
 
  
 

Struts2.1的配置文件Struts.xml：

 
  
   /result.jsp
  
 
 

web.xml配置文件

 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
  struts2
  org.apache.struts2.dispatcher.FilterDispatcher
 
 
  struts2
  /*
 
 
  org.springframework.web.context.ContextLoaderListener
 

三大框架的搭建和配置，用多了，也就那么回事，所以这里不多讲，具体的是ExtJS如何整合，这花费了我几个晚上的时间，才将它搞出来，哎，真的很不容易，不过现在轻松许多，毕竟掉出来了，心情也很愉悦。

首先需要做的是导入ExtJS3.3的包，之后删掉点不必要的东西，以免自己的工程很臃肿，之后就是与这些包里面的文件建立链接，具体如下所示：

这三个文件是必须的，并且一定要按顺序来，经验告诉你，不然你会很蛋疼的。

接着开始使用ExtJS编写login.js，具体如下所示：

var username = new Ext.form.TextField({
   id : 'username',
   name : 'user.username',
   fieldLabel : '用户名',
   minLength : 4,
   minLengthText : "用户名长度不能小于{0}",
   maxLength : 16,
   maxLengthText : "用户名长度不能大于{0}",
   allowBlank : false,
   blankText : "用户名不能为空",
   vtype : 'alphanum',
   vtypeText : '只能输入字母或数字'
  });
var password = new Ext.form.TextField({
   id : 'password',
   name : 'user.password',
   fieldLabel : '密码',
   inputType : 'password',
   minLength : 4,
   minLengthText : "密码长度不能小于{0}",
   maxLength : 16,
   maxLengthText : "密码长度不能大于{0}",
   allowBlank : false,
   blankText : "密码不能为空",
   vtype : 'alphanum',
   vtypeText : '只能输入字母或数字'
  });
var loginForm = new Ext.form.FormPanel({
   id : 'login',
   frame : true,
   width : 300,
   height : 120,
   labelAlign : 'right',
   labelWidth : 80,
   method : 'POST',
   url : 'login.action',
   monitorValid : true,
   buttonAlign : 'center',
   /*
    * submit: function() { this.getEl().dom.action = "login.action";
    * this.getEl().dom.submit(); },
    */

   items : [username, password],
   buttons : [{
      text : "登录",
      formBind : true,
      handler : function() {
       loginForm.getForm().submit({
          success : function(form, action) {
           showInfoDialog(action.result.msg);
           loginWindow.close();
          },
          failure : function(form, action) {
           showErrorDialog(action.result.msg);
          }
         });

      }
     }, {
      text : '重置',
      handler : function() {
       loginForm.getForm().reset();
      }
     }]
  });
var loginWindow = new Ext.Window({
    width : 300,
    height : 150,
    title : "用户登录",
    items : loginForm,
    resizable : false,
    draggable : false,
    closable : false
   });
   
function login() {
 loginWindow.show();
}

function showErrorDialog(msg) {
 Ext.MessageBox.show({
    title : '错误',
    msg : msg,
    minWidth : 200,
    buttons : Ext.MessageBox.OK,
    icon : Ext.MessageBox.ERROR
   });
}

function showInfoDialog(msg) {
 Ext.MessageBox.show({
    title : '信息',
    msg : msg,
    minWidth : 200,
    buttons : Ext.MessageBox.OK,
    icon : Ext.MessageBox.INFO
   });
}
Ext.onReady(login);

或许有点长，不过没办法，我们要站在客户的立场上为他们设计，虽说只有一个登录界面，用户名和密码，但是要做到面面俱到，还是得这么做，必要的客户端验证还是要的，代码很简单，在这里我就不具体解释了，不懂的可以直接g.cn，呵呵。

然后来看login.jsp中的代码:

<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

 
  
  
     
    
  
  
  
  
 
  
  
 
 

导入刚刚login.js的链接,就行了。再来看看结果页面result.jsp:

<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
{success: ,msg:''}

最后一行使用JSON表达式，这跟ExtJS有关，必须这么写，这关系到Struts2.1和ExtJS能否成功整合。

到这里也就功德圆满了，呵呵。

虽说花了很大功夫，不过这也算是一个小小的成功，这仅仅是个开始。