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

最新推荐文章于 2025-05-28 16:43:59 发布

原创最新推荐文章于 2025-05-28 16:43:59 发布 · 4.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#thinkphp #后台登录 #tp3-2-3

PHP 同时被 2 个专栏收录

14 篇文章

订阅专栏

ThinkPHP

4 篇文章

订阅专栏

本文介绍如何使用ThinkPHP3.2.3框架搭建后台登录界面，包括创建控制器、视图文件及实现验证码功能的具体步骤。

访问我的个人博客秋码个人博客
先看效果图基于ThinkPHP3.2.3后台登录界面
这里写图片描述
把静态资源导入到Public目录下

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

<?php
namespace 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');
	}