ExtJS登录例子

骑猪看日落 2022-09-28 01:23 176阅读 0赞

ExtJS3.30+struts2的一个登录例子

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>Login</title>  
  <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />  
  <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>  
  <script type="text/javascript" src="../extjs/ext-all.js"></script>

</head>  
   
  <body>  
  <br/><br/><br/><br/><br/><br/>  
  <center>  
    <div id="login"></div>  
      
  </center>  
  </body>  
</html>

LoginSuccess.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>LoginSuccess</title>  
  <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />  
  <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>  
  <script type="text/javascript" src="../extjs/ext-all.js"></script>  
  <script type="text/javascript" src="../js/loginSuc.js"></script>

</head>  
   
  <body>  
    <br>Login successfully ! <br>  
    <%=  
     request.getSession().getAttribute("userName")  
    %>  
    <div id="loginSuc"></div>  
  </body>  
</html>

Ext.onReady(function() \{  
 var f = new Ext.form.FormPanel(\{  
  // 数据传送到服务器的配置  
  url : "login",  
  method : "post",  
  baseParams : \{  
   extra : "attach",  
   id : 100  
   \},  
  title : "欢迎登陆",  
  width : 300,  
  height : 150,  
  bodyStyle : "padding: 6px",  
  labelAlign : "right",  
  frame : true,  
  items : \[  
   new Ext.form.TextField(\{  
   name : "userName",  
   allowBlank : false, // 不允许为空  
   fieldLabel : "用户名",  
   labelAlign : "right"  
  \}), \{  
   name : "password",  
   xtype : "textfield",  
   inputType : "password",  
   fieldLabel : "密码",  
   allowBlank : false  // 不允许为空  
  \},\{  
   name : "date",  
   xtype : "datefield",  
   fieldLabel : "日期"  
  \}  
  \],  
  buttons : \[\{  
   text : "确定",  
   handler : function() \{  
    // 提交表单  
    f.getForm().submit(\{  
     success : function(f,action) \{  
      Ext.Msg.alert("成功","恭喜，表单提交成功,服务器反馈的结果是：" + action.result.msg,function(btn,text)\{  
       if(btn == "ok")\{  
        window.location.href="LoginSuccess.jsp";  
       \}  
      \});  
        
//      Ext.MessageBox.confirm("成功","恭喜，表单提交成功",function(btn,text)\{  
//       if(btn == "yes")\{  
//        window.location.href="LoginSuccess.jsp";  
//       \}  
//         \});  
     \},  
     failure : function() \{  
      Ext.Msg.alert("失败","对不起，表单提交失败");  
     \}  
    \});  
   \}  
  \}, \{  
   text : "重置",  
   handler : function() \{  
    f.getForm().reset();  
   \}  
  \}\]  
 \});  
 f.render("login");  
\})

loginSuc.js

Ext.onReady(function() \{  
   var f = new Ext.form.FormPanel(\{  
      xtype : "form",  
      title : "Login form",  
      labelWidth : 100,  
      labelAlign : "left",  
      layout : "form",  
      width : 258,  
      height : 200,  
      padding : "10px",  
      autoScroll : false,  
      frame : true,  
      items : \[\{  
         xtype : "textfield",  
         fieldLabel : "Name",  
         anchor : "100%"  
        \}, \{  
         xtype : "textfield",  
         fieldLabel : "Password",  
         anchor : "100%"  
        \}\],  
      buttons : \[\{  
         text : "submit"  
        \}, \{  
         text : "reset"  
        \}\]  
     \})  
   f.render("loginSuc");  
\})

web.xml

<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="2.5"  
 xmlns="[http://java.sun.com/xml/ns/javaee][http_java.sun.com_xml_ns_javaee]"  
 xmlns:xsi="[http://www.w3.org/2001/XMLSchema-instance][http_www.w3.org_2001_XMLSchema-instance]"  
 xsi:schemaLocation="[http://java.sun.com/xml/ns/javaee][http_java.sun.com_xml_ns_javaee]  
 [http://java.sun.com/xml/ns/javaee/web-app\_2\_5.xsd][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>

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE struts PUBLIC  
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
    "[http://struts.apache.org/dtds/struts-2.0.dtd][http_struts.apache.org_dtds_struts-2.0.dtd]">

</struts>

LoginAction.java

package com.struts2.action;

import java.io.IOException;  
import java.io.PrintWriter;  
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import com.opensymphony.xwork2.ActionContext;  
import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport\{  
 /\*\*  
  \*  
  \*/  
 private static final long serialVersionUID = 1L;  
 private String userName;  
 private String password;  
 private String date;  
   
 public void login()\{  
  System.out.println("--------------------------");  
  if((userName!=null || !userName.equals("")) && (password!=null || !password.equals("")))\{  
   System.out.println("userName: " + userName + " password: " + password + " date: " + date);  
   HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(org.apache.struts2.StrutsStatics.HTTP\_RESPONSE);  
   response.setContentType("text/html;charset=utf-8");  
   try \{  
    PrintWriter out = response.getWriter();  
    out.write("\{success:true,msg:'服务器结果，成功!'\}");  
    out.flush();  
    out.close();  
   \} catch (IOException e) \{  
    e.printStackTrace();  
   \}  
     
   ActionContext context = ActionContext.getContext();  
   Map<String, Object> session = context.getSession();  
   session.put("userName", userName);  
     
  \}  
 \}  
 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;  
 \}  
 public String getDate() \{  
  return date;  
 \}  
 public void setDate(String date) \{  
  this.date = date;  
 \}  
   
   
\}

[http_java.sun.com_xml_ns_javaee]: http://java.sun.com/xml/ns/javaee
[http_www.w3.org_2001_XMLSchema-instance]: http://www.w3.org/2001/XMLSchema-instance
[http_java.sun.com_xml_ns_javaee_web-app_2_5.xsd]: http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd
[http_struts.apache.org_dtds_struts-2.0.dtd]: http://struts.apache.org/dtds/struts-2.0.dtd