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

fmms 10年前

一、先搭建好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如下所示:
<?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:"用户名",          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实现页面间的跳转开始学有点麻烦,注意红色部分。

转自:http://www.cnblogs.com/kunpengit/archive/2012/04/05/2433279.html