后台登录页居中显示 · TP5常用代码

[TOC] ## 一、核心代码 ~~~ <div style="position: absolute; left:50%;top:50%;width: 500px;margin-left: -250px;margin-top: -200px;"> </div> ~~~ ## 二、完整代码 ~~~ <!DOCTYPE html> <html> <head> <title>登录</title> <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css"> <script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script> </head> <body style="background: #1E9FFF"> <div style="position: absolute; left:50%;top:50%;width: 500px;margin-left: -250px;margin-top: -200px;"> <div style="background: #ffffff;padding: 20px;border-radius: 4px;box-shadow: 5px 5px 20px #444444;"> <div class="layui-form"> <div class="layui-form-item" style="color:gray;"> <h2>后台管理系统</h2> </div> <hr> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" id="username" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密    码</label> <div class="layui-input-block"> <input type="password" id="password" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="verifycode" class="layui-input"> </div> <img src="{:captcha_src()}" id="img" onclick="reloadImg()"> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" onclick="dologin()">登录</button> </div> </div> </div> </div> </div> <script type="text/javascript"> layui.use(['layer'],function(){ $ = layui.jquery; layer = layui.layer; // 用户名控件获取焦点 $('#username').focus(); // 回车登录 $('input').keydown(function(e){ if(e.keyCode == 13){ dologin(); } }); }); // 重新生成验证码 function reloadImg(){ $('#img').attr('src','{:captcha_src()}?rand='+Math.random()); } // 登录 function dologin(){ var username = $.trim($('#username').val()); var pwd = $.trim($('#password').val()); var verifycode = $.trim($('#verifycode').val()); if(username == ''){ layer.alert('请输入用户名',{icon:2}); return; } if(pwd == ''){ layer.alert('请输入密码',{icon:2}); return; } if(verifycode==''){ layer.alert('请输入验证码',{icon:2}); return; } $.post('/admins.php/admins/Account/dologin',{'username':username,'pwd':pwd,'verifycode':verifycode},function(res){ if(res.code>0){ reloadImg(); layer.alert(res.msg,{icon:2}); }else{ layer.msg(res.msg); setTimeout(function(){window.location.href = '/admins.php/admins/Home/index'},1000); } },'json'); } </script> </body> </html> ~~~ ## 三、后台处理 ### 1、管理员登录 ~~~ public function dologin(){ $username = trim(input('post.username')); $pwd = trim(input('post.pwd')); $verifycode = trim(input('post.verifycode')); if($username == ''){ exit(json_encode(array('code'=>1,'msg'=>'用户名不能为空'))); } if($pwd == ''){ exit(json_encode(array('code'=>1,'msg'=>'密码不能为空'))); } if($verifycode == ''){ exit(json_encode(array('code'=>1,'msg'=>'请输入验证码'))); } // 验证验证码 if(!captcha_check($verifycode)){ exit(json_encode(array('code'=>1,'msg'=>'验证码错误'))); } // 验证用户 $this->db = new Sysdb; $admin = $this->db->table('admins')->where(array('username'=>$username))->item(); if(!$admin){ exit(json_encode(array('code'=>1,'msg'=>'用户不存在'))); } if(md5($admin['username'].$pwd) != $admin['password']){ exit(json_encode(array('code'=>1,'msg'=>'密码错误'))); } if($admin['status'] == 1){ exit(json_encode(array('code'=>1,'msg'=>'用户已被禁用'))); } // 设置用户session session('admin',$admin); exit(json_encode(array('code'=>0,'msg'=>'登录成功'))); } ~~~ ### 2、退出登录 ~~~ public function logout(){ session('admin',null); exit(json_encode(array('code'=>0,'msg'=>'退出成功'))); } ~~~