http://zui.sexy/
引入zui.js 但這框架用了一個zexy的域名，我也是醉了。
我們只引入了它的提示功能，也就要求我們多用json返回結果，前臺用ajax進行顯示。
我們看一看后臺登陸頁。
首先要引入
~~~
<link rel="stylesheet" href="//cdn.bootcss.com/zui/1.5.0/css/zui.min.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
~~~
我們引入了zui.min.css 的樣式，jquery.cookie.js是jquery操作cookie的模塊，用cookie我們去限制登陸次數超過3次的操作。用zui我們替代了以前常用的alert那種體驗實在是不太好。
~~~
<div class="app-cam">
<form>
<input type="text" class="text" id='inputUsernameEmail' value="輸入用戶名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '輸入用戶名';}">
<input type="password" value="Password" id='inputPassword' onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '輸入密碼';}">
<input type="text" class="text" id="code" name='code' value="輸入驗證碼" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '輸入驗證碼';}">
<img src="{:captcha_src('admin')}" id='verfy_code' alt="驗證碼" onclick="this.src=this.src+'?'+Math.random()" />
<div class="submit"><input type="button" class="mysubmit" id="mysubmit" value="Login"></div>
</form>
</div>
~~~
對應的jquery代碼：
~~~
<script type="text/javascript" src="/static/js/zui.js"></script>
<script type="text/javascript">
$(function(){
if( $.cookie('s')>=4){
new $.zui.Messager('登陸失敗超過3次', {
icon: 'heart',
placement: 'center' // 定義顯示位置
}).show();
$('#mysubmit').attr('disabled','true');
}
$('#mysubmit').bind('click',function () {
var postdata={'mysubmit':'Login','user':$('#inputUsernameEmail').val(),'pass':$('#inputPassword').val(),'code':$('#code').val()};
/* window.open("{:url('adminstation/index/index')}"+"?mysubmit=Login&user="+$('#inputUsernameEmail').val()+"&pass="+$('#inputPassword').val()+'&code='+$('#code').val());
return;*/
$.post("{:url('adminstation/index/index')}",postdata,function(data){
if(data.r=='2'){
if($.cookie('s')) {
if( $.cookie('s')>=4){
new $.zui.Messager('登陸失敗超過3次', {
icon: 'heart',
placement: 'center' // 定義顯示位置
}).show();
$('#mysubmit').attr('disabled','true');
return;
}
var i= $.cookie('s')+1;
$.cookie('s', i);
}else{
var date = new Date();
date.setTime(date.getTime() + (0.1 * 60 * 60 * 1000));
$.cookie('s',1, { path: '/', expires: date });
}
}
new $.zui.Messager(data.message, {
icon: 'heart',
placement: 'center' // 定義顯示位置
}).show();
if(data.r!='100'){
verfy_code.src=verfy_code.src+'?'+Math.random()
}
if(data.r=='100'){
location.href="{:url('adminstation/config/index')}";
}
},'json');
});
});
</script>
~~~
對應php代碼為：
~~~
public function index() {
if(input('post.mysubmit')=='Login'){
$code=input('post.code');
if(!captcha_check($code,'admin')){
//驗證失敗
$re= array('r'=>1,'message'=>'驗證碼失改');
exit(json_encode($re));
}else{
$user['username']= input('post.user');
$pass= input('post.pass');
$model=model('User');
$list = $model->where($user)->find();
if(!$list){
$re=array('r'=>2,'message'=>'無此管理員或密碼錯');
}else{
if(md5($pass)!=$list['password']){
$re=array('r'=>2,'message'=>'無此管理員或密碼錯');
}else{
session('username',$user);
session('date',time());
$re=array('r'=>100,'message'=>'登陸中......');
}
}
exit(json_encode($re));
}
}
return $this->fetch();
}
~~~
