学习使用Zend_Auth认证登陆2
时间:2008-03-27 来源: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.
* [email protected]
*
* 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软件的界面设计挺漂亮的。
相关阅读 更多 +
排行榜 更多 +