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()+"password是："+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例如以下所看到的：

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">

<struts>

<package name="extjs" extends="json-default" namespace="/">

<action name="Login" class="com.ext.action.LoginAction">

<result type="json"></result>

</action>

</package>

</struts>

六、login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

   <link rel="stylesheet" type="text/css" href="ext3/resources/css/ext-all.css"/>

    <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>

</head>

<body>

</body>

</html>
七、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:"username",

        id:"txtName",

        name:'user.username',

        allowBlank:false,

        blankText:"username不能为空!"

        },{

        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);

            }

            //提交到server操作

            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实现页面间的跳转開始学有点麻烦，注意红色部分。

巴特西

struts2 结合extjs实现的一个登录实例

最新文章

热门文章