后臺登錄頁居中顯示 · 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'=>'退出成功'))); } ~~~