注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

庄庄的家

庄庄的家-网易博客

 
 
 

日志

 
 

Ext学习笔记:使用Ext开发一个简单的用户登录页面  

2008-04-10 16:41:07|  分类: extjs学习笔记 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这篇文章的部分内容参考了http://extjs.com/learn/Tutorial:Basic_Login

首先,从http://extjs.com/上下载最新的ext-2.0.2,解压后拷贝adapter(此目录我只保留了ext/ext-base.js)、build(此目录不是必须的,我只保留了locale/ext-lang-zh_CN.js)、resources三个子目录和ext-all-debug.js(正式发布时使用ext-all.js)文件到我的WEB应用中。

接下来就是按照MVC模型分别编写相应的html、js、JavaServlet、JavaBean功能模块来实现一个简单的用户登录功能。

logon.html

<html>
<head>
    <title>供应商服务系统 V1.0</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext/ext-all.js"></script>
    <script type="text/javascript" src="js/ext/build/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/logon.js"></script>
</head>

<body>

</body>
</html>

logon.js

/**//*
* logon.js
* Copyright(c) 2008, linbq.
*
*/

Ext.onReady(function()...{
    Ext.QuickTips.init();
     Ext.form.Field.prototype.msgTarget = 'side';

    var login = new Ext.FormPanel(...{
        labelWidth:70,
        labelAlign :'right',
        frame:true,
        defaults: ...{width: 170},
        bodyStyle:'padding:10px 5px 0',
        defaultType:'textfield',
        monitorValid:true,
        items:[...{
                fieldLabel:'用户帐号',
                name:'userId',
                emptyText:'请输入用户帐号',
                allowBlank:false
            },...{
                fieldLabel:'用户密码',
                name:'password',
                inputType:'password',
                allowBlank:false
            }],

        buttons:[...{
                text:'登录',
                formBind: true,   
                // Function that fires when user clicks the button
                handler:function()...{
                    login.getForm().submit(...{
                        method:'POST',
                        waitTitle:'系统提示',
                        waitMsg:'正在登录,请稍候...',
                        url:'Logon.do',

            // Functions that fire (success or failure) when the server responds.
            // The one that executes is determined by the
            // response that comes from Logon.do as seen below. The server would
            // actually respond with valid JSON,
            // something like: response.write "{ success: true}" or
            // response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"

                        success:function()...{
                                var redirect = 'index.html';
                                window.location = redirect;
                        },

            // Failure function, see comment above re: success and failure.
            // You can see here, if login fails, it throws a messagebox
            // at the user telling him / her as much.

                        failure:function(form, action)...{
                            if(action.failureType == 'server')...{
                                obj = Ext.util.JSON.decode(action.response.responseText);
                                Ext.Msg.alert('登录失败', obj.errors.reason,function() ...{form.findField('userId').focus();});
                            }else...{
                                Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                            }                           
                        }
                    });
                }
            }]
    });


    // This just creates a window to wrap the login form.
    // The login object is passed to the items collection.      
    var win = new Ext.Window(...{
        title:'用户登录',
        layout:'fit',
        border:false,
        width:300,
        //height:160,
        closable: false,
        resizable: false,
        plain: true,
        items: [login]
    });   
    win.show();       

});
LogonServlet.java

/**//*
* @(#)LogonServlet.java    March 7,2008
*
* Copyright 2008 linbq, All rights reserved.
*/

package com.linbq.servlet;

import java.util.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import com.linbq.bean.*;

/** *//**
* 用户登录操作响应控制
* <p>对用户登录等响应请求进行处理.</p>
* @author linbq
*/

public class LogonServlet extends HttpServlet
...{       
    public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException
    ...{           
        String userId = request.getParameter("userId");
        String password = request.getParameter("password");       
       
        //安全性检查,防止非法操作Servlet
        if (userId == null || userId.length() == 0 || password == null || password.length() == 0) return;
       
        response.setContentType("text/xml;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");       
        PrintWriter out=response.getWriter();
        User user = new User();   
        if (user.logon(userId, password)) ...{
            HttpSession session = request.getSession();
            session.setAttribute("userId", user.getId());
            session.setAttribute("userName", user.getName());
            out.write("{ success: true}");
        } else ...{
            out.write("{ success: false, errors: { reason: '用户帐号或密码验证不通过.' }}");
        }
        out.close();
    }
   
    public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException
    ...{
        doGet(request, response);
    }
}

需要注意的地方是上面的logon.html和logon.js文件我都是保存为UTF-8编码格式的。OK,现在来看看运行的效果。

-文档结束--

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=2157375

  评论这张
 
阅读(1470)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017