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();
}
~~~
