struts2 結合extjs實現的一個登入執行個體

一、先搭建好struts2，可以通過myeclipse快速搭建。

二、再匯入extjs所需的庫檔案。

三、寫一個實體類User

package com.ext.model;public class User {private Integer id;private String username;private String password;public Integer getId() {    return id;}public void setId(Integer id) {    this.id = id;}public String getUsername() {    return username;}public void setUsername(String username) {    this.username = username;}public String getPassword() {    return password;}public void setPassword(String password) {    this.password = password;}}

四、寫LoginAction

package com.ext.action;import com.ext.model.User;import com.opensymphony.xwork2.ActionSupport;public class LoginAction extends ActionSupport    {private boolean success;private String message;private User user;@Override    public String execute() throws Exception {        // TODO Auto-generated method stub        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 boolean isSuccess() {    return success;}public void setSuccess(boolean success) {    this.success = success;}public String getMessage() {    return message;}public void setMessage(String message) {    this.message = message;}public User getUser() {    return user;}public void setUser(User user) {    this.user = user;}}

五、struts.xml如下所示：

六、login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>Insert title here       <script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script>    <script type="text/javascript" src="ext3/ext-all.js"></script>    <script type="text/javascript" src="ext3/ext-lang-zh_CN.js"></script>    <script type="text/javascript" src="login.js"></script>
七、login.js

Ext.onReady(function(){Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget="side";var form1=new Ext.FormPanel({    labelWidth:40,    baseCls:'x-plain',    defaults:{width:180},    items:[{        xtype:'textfield',        fieldLabel:"使用者名稱",        id:"txtName",        name:'user.username',        allowBlank:false,        blankText:"使用者名稱不可為空!"        },{        xtype:'textfield',        fieldLabel:"密碼",        allowBlank:false,        blankText:"密碼不可為空!",        name:'user.password',        inputType:'password'        }],    buttons:[{        text:"提交",        type:'submit',        handler:function(){            if(form1.getForm().isValid()) {            Ext.MessageBox.show({                title:'請等待',                msg:'正在載入',                progressText:'',                width:300,                progress:true,                closable:'false',                animEl:'loding'            });                var f = function(v){                return function(){                    var i=v/11;                    Ext.MessageBox.updateProgress(i,'');                }            }            for(var i=1;i<33;i++){                setTimeout(f(i),i*1500);            }            //提交到伺服器操作            form1.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() {    form1.getForm().reset();}}]});    var window = new Ext.Window({        title :"登入視窗",        layout:'fit',        width:290,        height:250,        plain:true,        bodyStyle:'padding:10px',        maximizable:false,        closeActon:'close',        closable:false,        collapsible:true,        buttonAlign:'center',        items:form1    });    window.show();});

八、登入成功的index頁面就不寫了。
用extjs實現頁面間的跳轉開始學有點麻煩，注意紅色部分。