登录  /  注册
首页 > 博客列表 > 1.【商城后台管理系统】基于TP6开发后台管理员登陆页面渲染部署
博主信息
博文 128
粉丝 9
评论 5
访问量 233628
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
1.【商城后台管理系统】基于TP6开发后台管理员登陆页面渲染部署
　一纸荒凉* Armani
原创
2035人浏览过

【商城后台管理系统】基于TP6开发后台管理员登陆页面渲染部署

预览地址：http://padmin.easys.ltd/admin/account/login

一、后台登陆页面渲染

创建admin应用，controller/Account.php控制器

  1. <?php
  2. namespace app\admin\controller;
  3. use app\BaseController;
  4. use think\facade\Session;
  5. use think\facade\Db;
  6. use think\facade\View;
  8. /**
  9.  * 后台账号管理
  10.  */
  11. class Account extends BaseController
  12. {
  13.     // 登陆页面
  14.     public function login(){
  15.         return View::fetch('/account/login');
  16.     }
  17. }

登陆页面视图 view/Account/login.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>后台登陆</title>
  5.     <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  6.     <script type="text/javascript" src="/static/layui/layui.js"></script>
  7.     <style type="text/css">
  8.         .body_bg{background: url(http://zhsh520.com/hero-bg.jpg);}
  9.         .login_contain{position: absolute;left: 50%;top: 50%;width: 500px;transform: translate(-50%,-50%);}
  10.         .login_main{background: rgba(255,255,255,0.8);padding: 20px;border-radius: 5px;box-shadow: 5px 5px 20px #444}
  11.         .veriCode{cursor: pointer;border: 1px solid #f1f1f1;width: 126px;height: 35px;}
  12.     </style>
  13. </head>
  14. <body class="body_bg">
  15.     <div class="login_contain">
  16.         <div class="login_main">
  17.             <div class="layui-form">
  18.                 <div class="layui-form-item" style="color: gray">
  19.                     <h2>后台管理系统</h2>
  20.                 </div>
  21.                 <hr/>
  22.                 <div class="layui-form-item">
  23.                     <label class="layui-form-label">用户名</label>
  24.                     <div class="layui-input-block">
  25.                         <input type="text" class="layui-input" name="username" placeholder="请输入用户名" value="admin">
  26.                     </div>
  27.                 </div>
  28.                 <div class="layui-form-item">
  29.                     <label class="layui-form-label">密码</label>
  30.                     <div class="layui-input-block">
  31.                         <input type="password" class="layui-input" name="password" placeholder="请输入密码" value="1234">
  32.                     </div>
  33.                 </div>
  34.                 <div class="layui-form-item">
  35.                     <label class="layui-form-label">验证码</label>
  36.                     <div class="layui-input-inline">
  37.                         <input type="text" class="layui-input" name="vericode" placeholder="请输入验证码">
  38.                     </div>
  39.                     <img src="/admin/Account/veriCode" onclick="reloadveriimg()" class="veriCode">
  40.                 </div>
  41.                 <div class="layui-input-block">
  42.                     <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
  43.                     <button class="layui-btn" onclick="dologin()">登陆</button>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.     </div>
  48. </body>
  49. </html>

二、登陆页面渲染效果

三、生成验证码并验证

这里未使用tp提供的验证码类库，我们通过原生php的GD库自己生成的，下面介绍了tp的验证码安装与使用，但是要想达到预期效果，可能还需一定配置，具体使用详见官方手册。

首先使用Composer安装think-captcha扩展包：

  1. composer require topthink/think-captcha

验证码库需要开启Session才能生效。

验证码使用

扩展包内定义了一些常见用法方便使用，可以满足大部分常用场景，以下示例说明。

在模版内添加验证码的显示代码

  1. <div>{:captcha_img()}</div>

验证码生成类

  1. // 验证码生成
  2. class VeriCode{
  3.     // 获取验证码配置
  4.     private static function _getCodeConfig(){
  5.         return  [
  6.                     // 验证码字符集
  7.                     'codeStr' => 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
  8.                     // 验证码个数
  9.                     'codeCount' => 4,
  10.                     // 字体大小
  11.                     'fontsize' =>16,
  12.                     // 验证码的宽度
  13.                     'width' => 100,
  14.                     // 验证码高度
  15.                     'height' => 36,
  16.                     // 是否有干扰点?true有,false没有
  17.                     'disturbPoint' => true,
  18.                     // 干扰点个数,disturbPoint开启后生效
  19.                     'pointCount' => 200,
  20.                     // 是否有干扰条?true有,false没有
  21.                     'disturbLine' => true,
  22.                     // 干扰条个数,disturbLine开启后生效
  23.                     'lineCount' => 3
  24.                 ];
  25.     }
  27.     // 创建图片验证码
  28.     public static function create(){
  29.         // 配置
  30.         $config = self::_getCodeConfig();
  32.         //创建画布
  33.         $image = imagecreatetruecolor($config['width'],$config['height']);
  34.         //背景颜色
  35.         $bgcolor=imagecolorallocate($image,255,255,255);
  36.         imagefill($image,0,0,$bgcolor);
  37.         $captch_code = '';//存储验证码
  38.         $captchCodeArr = str_split($config['codeStr']);
  40.         //随机选取4个候选字符
  41.         for($i=0;$i<$config['codeCount'];$i++){
  42.             $fontsize = $config['fontsize'];
  43.             $fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));//随机颜色
  44.             $fontcontent = $captchCodeArr[rand(0,strlen($config['codeStr'])-1)];
  45.             $captch_code.=$fontcontent;
  46.             $_x = $config['width']/$config['codeCount'];
  47.             $x=($i*(int)$_x)+rand(5,10);   //随机坐标
  48.             $y=rand(5,10);
  49.             imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);    // 水平地画一行字符串
  50.             //imagefttext($im, $size, 2, $size * (0.5 + $i * 1.1), $size * 1.2, $font, Env::get('root_path') . 'public/static/fonts/COOPBL.TTF', $authnum);
  51.         }
  52.         session_start();
  53.         $_SESSION['code']=$captch_code;
  54.         //增加干扰点
  55.         if($config['disturbPoint']){
  56.             for($i=0;$i<$config['pointCount'];$i++){
  57.                 $pointcolor=imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));
  58.                 imagesetpixel($image,rand(1,99),rand(1,29),$pointcolor);
  59.             }
  60.         }
  62.         //增加干扰线
  63.         if($config['disturbLine']){
  64.             for($i=0;$i<$config['lineCount'];$i++){
  65.                 $linecolor=imagecolorallocate($image,rand(80,280),rand(80,220),rand(80,220));
  66.                 imageline($image,rand(1,99),rand(1,29),rand(1,99),rand(1,29),$linecolor);
  67.             }
  68.         }
  70.         //输出格式
  71.         header('content-type:image/png');
  72.         imagepng($image);
  74.         //销毁图片
  75.         imagedestroy($image);
  76.     }
  77. }

我们只需要将其放置到我们的控制器中调用即可

  1. <?php
  2. namespace app\admin\controller;
  3. use app\BaseController;
  4. use think\facade\Session;
  5. use think\facade\Db;
  6. use think\facade\View;
  8. /**
  9.  * 后台账号管理
  10.  */
  11. class Account extends BaseController
  12. {
  13.     // 登陆页面
  14.     public function login(){
  15.         return View::fetch('/account/login');
  16.     }
  17.     // 验证码
  18.     public function veriCode(){
  19.         VeriCode::create();
  20.     }
  21. }
  24. // 验证码生成……将什么复制到此处即可

页面中引入img标签，链接为生成验证码控制器方法即可

  1. <img src="/admin/Account/veriCode" onclick="reloadveriimg()" class="veriCode">

定义reloadveriimg方法实现点击刷新验证码操作

  1. <script type="text/javascript">
  2.     $ = layui.jquery;
  4.     // 重新加载验证码图片
  5.     function reloadveriimg(){
  6.         $('.veriCode').attr('src','/admin/Account/veriCode?rand='+Math.random());
  7.     }
  9. </script>

四、实现登陆验证功能

前端页面采用Ajax发送后台验证信息，状态后台通过Session存储进行保持

前端登陆页面发送请求

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>后台登陆</title>
  5.     <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  6.     <script type="text/javascript" src="/static/layui/layui.js"></script>
  7.     <style type="text/css">
  8.         .body_bg{background: url(http://zhsh520.com/hero-bg.jpg);}
  9.         .login_contain{position: absolute;left: 50%;top: 50%;width: 500px;transform: translate(-50%,-50%);}
  10.         .login_main{background: rgba(255,255,255,0.8);padding: 20px;border-radius: 5px;box-shadow: 5px 5px 20px #444}
  11.         .veriCode{cursor: pointer;border: 1px solid #f1f1f1;width: 126px;height: 35px;}
  12.     </style>
  13. </head>
  14. <body class="body_bg">
  15.     <div class="login_contain">
  16.         <div class="login_main">
  17.             <div class="layui-form">
  18.                 <div class="layui-form-item" style="color: gray">
  19.                     <h2>后台管理系统</h2>
  20.                 </div>
  21.                 <hr/>
  22.                 <div class="layui-form-item">
  23.                     <label class="layui-form-label">用户名</label>
  24.                     <div class="layui-input-block">
  25.                         <input type="text" class="layui-input" name="username" placeholder="请输入用户名" value="admin">
  26.                     </div>
  27.                 </div>
  28.                 <div class="layui-form-item">
  29.                     <label class="layui-form-label">密码</label>
  30.                     <div class="layui-input-block">
  31.                         <input type="password" class="layui-input" name="password" placeholder="请输入密码" value="1234">
  32.                     </div>
  33.                 </div>
  34.                 <div class="layui-form-item">
  35.                     <label class="layui-form-label">验证码</label>
  36.                     <div class="layui-input-inline">
  37.                         <input type="text" class="layui-input" name="vericode" placeholder="请输入验证码">
  38.                     </div>
  39.                     <img src="/admin/Account/veriCode" onclick="reloadveriimg()" class="veriCode">
  40.                 </div>
  41.                 <div class="layui-input-block">
  42.                     <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
  43.                     <button class="layui-btn" onclick="dologin()">登陆</button>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.     </div>
  48. </body>
  49. </html>
  51. <script type="text/javascript">
  52.     $ = layui.jquery;
  54.     // 重新加载验证码图片
  55.     function reloadveriimg(){
  56.         $('.veriCode').attr('src','/admin/Account/veriCode?rand='+Math.random());
  57.     }
  59.     // 用户名控件获取焦点
  60.     $('input[name="username"]').focus();
  61.     // 回车登录
  62.     $('input').keydown(function(e){
  63.         if(e.keyCode == 13){
  64.             dologin();
  65.         }
  66.     });
  68.     // 向后台发送登陆信息
  69.     function dologin(){
  70.         // 获取表单值并清除两端空格
  71.         var username = $.trim($('input[name="username"]').val());
  72.         var password = $.trim($('input[name="password"]').val());
  73.         var vericode = $.trim($('input[name="vericode"]').val());
  74.         var remember = $('input[name="remember"]').is(':checked')?1:0;
  77.         // 校验数据是否为空
  78.         if(username==''){
  79.             return layer.alert('用户名不能为空',{title:'错误提示',icon:2});
  80.         }
  82.         if(password==''){
  83.             return layer.alert('密码不能为空',{title:'错误提示',icon:2});
  84.         }
  86.         if(vericode==''){
  87.             return layer.alert('验证码不能为空',{title:'错误提示',icon:2});
  88.         }
  90.         $.post('/admin/account/dologin',{username,password,vericode},function(res){
  91.             if(res.code>0){
  92.                 // 刷新验证码
  93.                 reloadveriimg();
  94.                 return layer.alert(res.msg,{title:'错误提示',icon:2});
  95.             }
  96.             layer.alert(res.msg,{title:'成功提示',icon:1});
  97.             setTimeout(function(){
  98.                 window.location.href="/";
  99.             },1000)
  100.         },'json');
  101.     }
  103. </script>

执行登陆操作的控制器方法

  • 这里密码处理使用password_hash进行散列处理，也可以通过md5进行散列处理，但为了保证绝对的安全可以通过密码+用户名的方式进行加盐处理。解密对应这加密，登陆时通过原有方式加密然后对数据库中进行比较即可。
  • password_hash — 创建密码的散列
  • password_verify — 验证密码是否和散列值匹配
  • 登陆成功将用户信息存储至Session中持久化保存
  1. // 执行登陆
  2.     public function dologin(){
  3.         session_start();
  4.         // 接受登陆传递的信息
  5.         $username = input('post.username');
  6.         $password = input('post.password');
  7.         $vericode = input('post.vericode');
  8.         $remember = input('post.remember');
  10.         // password_hash 创建密码的散列
  11.         // echo $pwd = password_hash("1234",PASSWORD_DEFAULT);
  13.         // 校验是否为空
  14.         if(empty($username)){
  15.             exit(json_encode(['code'=>1,'msg'=>'用户名不能为空']));
  16.         }
  17.         if(empty($password)){
  18.             exit(json_encode(['code'=>1,'msg'=>'密码不能为空']));
  19.         }
  20.         if(empty($vericode)){
  21.             exit(json_encode(['code'=>1,'msg'=>'验证码不能为空']));
  22.         }
  23.         if(strcasecmp($_SESSION['code'],$vericode)!==0){
  24.             exit(json_encode(['code'=>1,'msg'=>'验证码不正确']));
  25.         }
  27.         // 校验用户
  28.         $admin = Db::table('admin')->where('username',$username)->find();
  29.         if(empty($admin)){
  30.             exit(json_encode(['code'=>1,'msg'=>'用户名或密码错误']));
  31.         }
  33.         // password_verify — 验证密码是否和散列值匹配
  34.         if(!password_verify($password,$admin['password'])){
  35.             exit(json_encode(['code'=>1,'msg'=>'用户名或密码错误']));
  36.         }
  38.         // 校验用户是否被禁用
  39.         if($admin['status']!=0){
  40.             exit(json_encode(['code'=>1,'msg'=>'账号已被禁用，请联系管理员']));
  41.         }
  43.         // 判断是否记住密码
  44.         if($remember==1){
  45.             // 设置用户session 7天以后过期
  46.             session_set_cookie_params('60*60*24*7');
  47.             Session::set('admin',$admin);
  48.         }else{
  49.             // 设置用户session
  50.             Session::set('admin',$admin);
  51.         }
  53.         Db::table('admin')->where('username',$username)->update(['lastlogin'=>time()]);
  55.         echo json_encode(['code'=>0,'msg'=>'登陆成功']);
  56.         // 这里通过再用exit的话，在别的控制器中获取不到session的值
  57.         // exit(json_encode(['code'=>0,'msg'=>'登陆成功']));
  58.     }

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录