Ext JS - Learning Center

Tutorial:Basic Login(Chinese)

From Learn About the Ext JavaScript Library

Jump to: navigation, search


Summary: Simple Authentication Example
Author: David Fitch
Published: February 14, 2008
Ext Version: 2.x
Languages: en.png Englishcn.png Chinesefr.png Frenches.png Spanish br.png Portuguese

翻译未完成！

这是我(作者David Fitch)的第一篇教程, 希望能给大家带来帮助。感谢crafter在这篇帖子中的示例代码： http://extjs.com/forum/showthread.php?t=26320


Contents

主页

假设您的主页是 index.asp, 它的结构如下: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="/igs/includes/ext/resources/css/ext-all.css">	
	<script type="text/javascript" src="/igs/includes/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="/igs/includes/ext/ext-all.js"></script>
	<script type="text/javascript" src="login.js"></script>	
	</head>
	<body></body>
</html>

显然，如果你想把它建立在自己的网站上，需要把上面的链接地址改成自己服务器上Ext的位置. 以下是 Login.js 的源代码。

Login.js

下面是 login.js. 这个东东搞定了所有的重活，对我来说，它涵盖了所有传统的用户验证元素。它建立了一个表单，将它渲染到一个弹出窗口，将它展示给用户，用ajax发送提交结果，然后根据用户输入是否正确来处理登录成功或失败的响应。 

Ext.onReady(function(){
    Ext.QuickTips.init();
 
	// Create a variable to hold our EXT Form Panel. 
	// Assign various config options as seen.	 
    var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'login.asp', 
        frame:true, 
        title:'Please Login', 
        defaultType:'textfield',
	monitorValid:true,
	// Specific attributes for the text fields for username / password. 
	// The "name" attribute defines the name of variables sent to the server.
        items:[{ 
                fieldLabel:'Username', 
                name:'loginUsername', 
                allowBlank:false 
            },{ 
                fieldLabel:'Password', 
                name:'loginPassword', 
                inputType:'password', 
                allowBlank:false 
            }],
 
	// All the magic happens after the user clicks the button     
        buttons:[{ 
                text:'Login',
                formBind: true,	 
                // Function that fires when user clicks the button 
                handler:function(){ 
                    login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Connecting', 
                        waitMsg:'Sending data...',
 
			// Functions that fire (success or failure) when the server responds. 
			// The one that executes is determined by the 
			// response that comes from login.asp 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.' }}" 
			// depending on the logic contained within your server script.
			// If a success occurs, the user is notified with an alert messagebox, 
			// and when they click "OK", they are redirected to whatever page
			// you define as redirect. 
 
                        success:function(){ 
                        	Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
				   if (btn == 'ok'){
		                        var redirect = 'test.asp'; 
		                        window.location = redirect;
                                   }
			        });
                        },
 
			// Failure function, see comment above re: success and failure. 
			// 如果登录失败，弹出对话框。 
 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                obj = Ext.util.JSON.decode(action.response.responseText); 
                                Ext.Msg.alert('Login Failed!', obj.errors.reason); 
                            }else{ 
                                Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
                            } 
                            login.getForm().reset(); 
                        } 
                    }); 
                } 
            }] 
    });
 
 
	// This just creates a window to wrap the login form. 
	// The login object is passed to the items collection.       
    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [login]
	});
	win.show();
});

Login.asp

这是处理登录的服务器脚本。这个非常简单的脚本展示了服务器的响应如何决定login.js执行哪个函数。这正是你访问数据库用户名/密码字段，进行验证，根据用户提供信息是否正确进行响应。 

<%
 
if request.form("loginUsername") = "f" then
	response.write "{ success: true}"
else
	response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
end if
 
%>

Login.php

<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";
 
if($loginUsername == "f"){
    echo "{success: true}";
} else {
    echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";
}
?>

Login.cfm

<cfsetting showdebugoutput="No">
<cfif form.loginUsername eq "f">
    <cfset result = "{success: true}">
<cfelse>
    <cfset result="{success: false, errors: { reason: 'Login failed. Try again.' }}">
</cfif>
<cfoutput>#result#</cfoutput>

Login.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String result;
	String loginUsername = request.getParameter("loginUsername");
	if (null != loginUsername && loginUsername.length() > 0) {
		if (loginUsername.equals("f"))
			result = "{success:true}";
		else
			result = "{success:false,errors:{reason:'Login failed.Try again'}}";
 
	} else {
		result = "{success:false,errors:{reason:'Login failed.Try again'}}";
	}
%>
<%=result %>

Test.asp

.

Login.pl

#!/usr/bin/perl -w
use strict;
use CGI qw/:standard/;
my $login = param() ? param('loginUsername') : '';
print "Content-type: text/plain\n\n";
print $login eq "f" ? "{success: false, errors: { reason: 'Login failed. Try again.' }}" : "{success: true}";
exit;

可以看到如果登录成功，login.js会定位到Test.asp。当然， if a successful login happens. This can obviously be whatever page your main application will be. In my situation, users can have any number of combinations of navigation options, so the next step would be to validate with whatever session management mecahanism you use, that the person accessing test.asp is authenticated to do so. Further, I would pull down whatever navigation options are assigned to that user and build my toolbar accordingly. Since I'm still trying to figure that part out, that will be another tutorial :)

Hopefully this is somewhat helpful and thanks again to crafter for most of the js code.

Retrieved from "http://www.extjs.com/learn/Tutorial:Basic_Login(Chinese)"
  • This page was last modified on 25 September 2009, at 02:12.
  • This page has been accessed 2,270 times.