学习使用Zend_Auth认证登陆2

sungaoyong

                登陆窗口使用extjs的ajax实现。
前面写的是使用基本的html写的登陆窗口，界面比较简单，如果想使用extjs的ajax效果的登陆界面呢。
先看看效果


好看多了吧。
ext库保存在/scripts/ext文件夹下。
在view的help下新建一个BaseUrl.php，用来获取系统运行根目录，代码如下
               
               
                ?php
class Zend_View_Helper_BaseUrl
{
    function baseUrl()
    {
        $fc = Zend_Controller_Front::getInstance();
        return $fc->getBaseUrl();
    }
}
View下的login.phtml使用extjs编写，代码如下
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html>
head>
    meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    title>Forms/title>
    link rel="stylesheet" type="text/css" href="baseUrl();?>/scripts/ext/resources/css/ext-all.css"/>
   
   
    script type="text/javascript" src="baseUrl();?>/scripts/ext/adapter/ext/ext-base.js">/script>
   
    script type="text/javascript" src="baseUrl();?>/scripts/ext/ext-all-debug.js">/script>
/head>
body>
script type="text/javascript">
/*
* Ext JS Library 2.0.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();
  var fsf = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'index/login',
        frame:true,
        title: '系统登陆窗口',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        items: [{
            xtype:'fieldset',
            title: '用户登陆',
            collapsible: true,
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            items :[{
                    fieldLabel: '用户名',
                    name: 'username'
                },{
                    fieldLabel: '密码',
                    name: 'password'
                }, new Ext.form.Checkbox({
                    fieldLabel: '保存登陆',
                    name: 'rememberMe' ,
                    boxLabel :'记住我'              
                })
            ]
        }],
        buttons: [{
            text: 'Ok',   
            type: 'submit',
            handler:function(){
              if(fsf.form.isValid()){
                  this.disabled=true;   
                     fsf.form.doAction('submit',{   
                           url:'index/login',    // 指向它要调用的操作。
                           method:'post',   
                           params:'',   
                           success:function(form,action){  
                                   // Ext.Msg.alert('操作',action.result.msg);   
                                   document.location='index';                                   // 登陆成功页面转向
                                   this.disabled=false;   
                            },   
                            failure:function(){   
                                    Ext.Msg.alert('操作','登陆失败！');   
                                    this.disabled=false;   
                             }   
                       });   
                }   
         }              
        },{
            text: 'Cancel',
            handler:function(){Ext.Msg.alert('操作','取消');}
        }]
    });
     // fsf.render(document.getElementById('loginForm'));
     fsf.render(document.body);
});
/script>
/body>
/html>
fsf.form.doAction('submit',{   
                           url:'index/login',   指向它要调用的操作。
  document.location='index';                                   // 登陆成功页面转向
同时IndexController.php的loginAction()也要做相关修改，让它登陆成功和失败能够返回一个json格式的信息。
主要修改的是下面两处，代码我就不重复贴了
     $this->_auth->getStorage()->write($authAdapter->getResultRowObject(array('password', 'username')));
        echo "{success:true,msg: '".$username."'}";exit;
                //$this->_redirect('/');
            } else {
                echo "{success:false,msg:'login error'}";exit;
            }
extjs作为局域网b/s软件的界面设计挺漂亮的。
               
               

本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/15722/showart_509865.html