Struts2与extjs集成

来源：互联网发布：软件变成英文编辑：程序博客网时间：2024/05/18 22:44

http://koone.diandian.com/post/2012-03-29/18990113

Struts2与extjs集成

对于一个后台开发人员来说，编写前台页面时一件很头疼的事情，但是我们可以使用现成的前台框架来完成这一繁琐的操作，比较好的前台框架有：extjs、yui、jquery的easyui等。

下面就说说Struts2与extjs的集成

1准备工作：

除了平时引入的struts2的jar包以外，还需要引入struts2-json-plugin-2.1.8.1.jar；json-lib-2.1.jar这两个包。

Json介绍：

和XMl一样，JSON也是一种基于纯文本的数据格式。由于JSON天生好似为javascript准备的，因此JSON的数据格式非常的简单。想了解更多的关于JSON的知识请百度。。。

2．建立我们的model：User

packageedu.tstc.model;public classUser {   private int id;   privateString username;   privateString password;   public intgetId() {      return id;   }   public voidsetId(int id) {      this.id= id;   }   publicString getUsername() {      return username;   }   public voidsetUsername(String username) {      this.username= username;   }   publicString getPassword() {      return password;   }   public voidsetPassword(String password) {       this.password= password;   }}

3.建立我们的Action

这里是简单的演示struts-2与extjs的集成，所以全部的业务逻辑都放在Action中进行处理了。

建立我们的LoginAction.当表单提交过来的时候我们也就能够在LoginAction中拿到数据了呵呵。

packageedu.tstc.action;import edu.tstc.model.User;importcom.opensymphony.xwork2.ActionSupport;public classLoginAction extendsActionSupport{   private boolean success;   privateString message;   privateUser user;      publicString execute()throwsException{      if(user.getUsername().equals("admin")&&user.getPassword().equals("admin")){          this.success= true;          this.message= "你的账号是："+user.getUsername()+"密码为："+user.getPassword();      }else{                    this.success= false;          this.message= "对不起，未经授权的用户不能登录该系统！";      }      return SUCCESS;   }   public booleanisSuccess() {      return success;   }   public voidsetSuccess(booleansuccess) {      this.success= success;   }   publicStringgetMessage() {      return message;   }   public voidsetMessage(String message) {      this.message= message;   }   publicUser getUser() {      return user;   }   public voidsetUser(User user) {      this.user= user;   }}

4.配置我们的struts.xml,注意extends=”json-default”

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE struts PUBLIC   "-//ApacheSoftware Foundation//DTD Struts Configuration 2.0//EN"   "http://struts.apache.org/dtds/struts-2.0.dtd"><struts>   <package name="extjs"extends="json-default" namespace="/">    <action name="Login" class="edu.tstc.action.LoginAction">       <result type="json"></result>    </action>   </package></struts>

5.在web.xml文件中陪上struts2

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5"   xmlns="http://java.sun.com/xml/ns/javaee"   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">   <filter>      <filter-name>struts2</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  </filter>  <filter-mapping>      <filter-name>struts2</filter-name>      <url-pattern>/*</url-pattern>  </filter-mapping> <welcome-file-list>   <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>

6.接下来是前台的页面，其中包括login.html(登陆的界面)，login.js（javascript代码），index.jsp(登陆成功后返回的界面)

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/><script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext/ext-all-debug.js"></script><script type="text/javascript" src="js/login.js"></script><title>Extjs 学习</title></head><body></body></html>

Ext.onReady(function(){      //使用表单提示     Ext.QuickTips.init();     Ext.form.Field.prototype.msgTarget="side";      //定义一个输入表单      varsimple = newExt.FormPanel({             labelWidth:40,             baseCls:'x-plain',             defaults:{width:180},             items:[{                    xtype:'textfield',                    fieldLabel:'账号',                    name:'user.username',                    allowBlank:false,                    blankText:'账号不能为空'             },{                    xtype:'textfield',                    inputType:"password",                    fieldLabel:"密码",                    name:'user.password',                    allowBlank:false,                    blankText:"密码不能为空"             }],             buttons:[{                    text:"提交",                    type:"submit",                    handler:function(){                           if(simple.form.isValid()){                                 Ext.MessageBox.show({                                         title:"请等待",                                         msg:"正在加载",                                         progressText:"",                                         width:300,                                         progress:true,                                         closable:false,                                         animEl:'loding'                                  });                                                                    varf = function(v){                                         return function(){                                                vari = v/11;                                               Ext.MessageBox.updateProgress(i,'');                                         }                                  }                                                                    for(vari = 1; i< 13; i++){                                         setTimeout(f(i),i* 150);                                  }                                                                    //提交到服务器操作                                  simple.form.doAction("submit",{                                         url:"Login.action",                                         method:"post",                                         success:function(form,action){                                                document.location= 'index.jsp';                                               Ext.Msg.alert("登录成功！",action.result.message);                                         },                                         failure:function(form,action){                                               Ext.Msg.alert('登录失败',action.result.message);                                         }                                                                           });                           }                    }                    },{                           text:"重置",                           handler:function(){                                  //重置表单                                  simple.form.reset();                           }                    }]      });      //定义窗体      var_window = newExt.Window({             title:"登录窗口",             layout:"fit",             width:280,             height:150,             plain:true,             bodyStyle:"padding:10px",             maximizable:false,             closeAction:"close",             closable:false,             collapsible:true,             plain:true,             buttonAlign:"center",             items:simple      });      _window.show();});

Index.jsp

<%@ page language="java" contentType="text/html; charset=GB18030"   pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>Insert titlehere</title></head><body><p class="edui-filter-align-left"><span>恭喜你登陆成功了！</span></p><p class="edui-filter-align-left"><span></</span><span>body</span><span>></span></p><p><span></</span><span>html</span><span>></span></p>

0 0