基于ThinkPHP3.2.3后台登录界面学习记录（二）

来源：互联网发布：淘宝怎么买伟哥编辑：程序博客网时间：2024/05/27 12:22

先看效果图基于ThinkPHP3.2.3后台登录界面
这里写图片描述
把静态资源导入到Public目录下

创建Login控制器并编辑如下内容

<?phpnamespace Admin\Controller;use Think\Verify;use Think\Controller;class LoginController extends Controller {    public function index(){        $this->display();    }  }

然后在View目录新建一目录Login 里面建一index.html文件内如如下
这里写图片描述

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="description" content="">    <meta name="author" content="Mosaddek">    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">    <link rel="shortcut icon" href="img/favicon.png">    <title>后台用户登录</title>    <!-- Bootstrap core CSS -->    <link href="/myblog__ADMIN__/css/bootstrap.min.css" rel="stylesheet">    <link href="/myblog__ADMIN__/css/bootstrap-reset.css" rel="stylesheet">    <!--external css-->    <link href="/myblog__ADMIN__/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />    <!-- Custom styles for this template -->    <link href="/myblog__ADMIN__/css/style.css" rel="stylesheet">    <link href="/myblog__ADMIN__/css/style-responsive.css" rel="stylesheet" />    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->    <!--[if lt IE 9]>    <script src="__ADMIN__/js/html5shiv.js"></script>    <script src="__ADMIN__/js/respond.min.js"></script>    <![endif]--></head><body class="login-body"><div class="container">    <form id="admin_login" class="form-signin" action="{:U('Admin/Login/index')}" method="post">        <h2 class="form-signin-heading">myblog管理系统</h2>        <div class="login-wrap">            <div class="col-lg-12">                <input name="username" type="text" class="form-control" placeholder="请输入用户名"  autofocus autocomplete="off">            </div>            <div class="col-lg-12">                <input name="password" type="password" class="form-control"  placeholder="请输入密码" autocomplete="off">            </div>            <div class="col-lg-6">                <input name="verify_img" type="text" class="form-control "  placeholder="请输入验证码" autocomplete="off">            </div>            <div class="col-lg-6">                <img src="{:U('Login/verify',array())}" id="verify_img_src" width="100%" height="40" alt="点击刷新" title="点击刷新">            </div>            <div class="col-lg-12">            <label class="checkbox">                <input type="checkbox" value="remember"> 记住登录                <span class="pull-right">                    <a data-toggle="modal" href="#forgot"> 忘记密码?</a>                </span>            </label>                </div>            <button class="btn btn-lg btn-login btn-block" type="submit">登录</button>        </div>    </form></div><!-- Modal --><div id="forgot" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"  class="modal fade">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                <h4 class="modal-title">忘记密码？</h4>            </div>            <div class="modal-body">                <p>请输入你的邮箱，重置登录密码</p>                <input type="text" name="email" placeholder="邮箱地址" autocomplete="off" class="form-control placeholder-no-fix">            </div>            <div class="modal-footer">                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>                <button class="btn btn-success" type="button">发送</button>            </div>        </div>    </div></div><!-- modal --><script src="/myblog__ADMIN__/js/jquery.js"></script><script src="/myblog__ADMIN__/js/bootstrap.min.js"></script><script src="/myblog__ADMIN__/js/jquery.form.min.js"></script><script>    $('#admin_login').ajaxForm({        //验证数据        beforeSubmit:function(){            $('.btn-login').text('登陆中...');        },        dataType: 'json',        success:function(data){            $('.btn-login').text('登录');            if(data.status==100){                if(data.url){                    alert('登录成功');                    setTimeout("window.location.href ='" + data.url + "'",500);                }            }            else{                //刷新验证码                $("#verify_img_src").trigger('click');                alert(data.msg);            }        }    });    //验证码切换    $("#verify_img_src").click(function(){        //var verify_url = "{:U('Login/verify')}";        var verify_url = "Login/verify";        var t = Math.random();        $(this).attr('src',verify_url+'/t='+t);    });</script></body></html>

而后关于验证码首先你需要PHP开启gd2的支持打开php.ini文件
这里写图片描述
再次编辑Login控制类增加生成验证码方法

//生成验证码    public function verify(){        $config=[           'fontSize' =>19,//验证码字体大小           'length' =>4,//验证码位数           'imageH' =>24        ];        /*$config = array("expire"=>2400, 'length' => 4,"useCurve"=>false,            "codeSet"=>"123456789");*/        ob_end_clean();        $verify2=new Verify($config);        $verify2->entry();    }    //验证码校验    public function check_verify($code,$id=''){        $verify=new Verify();        $res=$verify->check($code,$id);        $this->ajaxReturn($res,'json');    }

阅读全文

0 0