教程:基本登录

Posted 周日, 05/10/2009 - 10:57 by admin

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

主页
假设您的主页是 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。

Recived from "http://extjs.com/learn/Tutorial:Basic_Login%28Chinese%29"

  • 要发表评论，请先登录