登录界面模板html-Thinkphp6+layui实现后台登录（验证码刷新）

bendan520 html

2023-09-05 0 3,730 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

本文由PHP英文网认证作者：“龙贤”提交，欢迎加入！

1. 用于登录的组件

1.查看模板：

安装：composer require topthink/think-view

2、验证码：

安装：composer require topthink/think-captcha

3、Session：需要打开Session：打开app下的middeware.php文件。里面有一个全局的中间件。只需删除最后一行的注释即可。

计划基本完成，教程自动开始。

2.前台构建（layui框架）

2.1. 你得先获取layui，去layui官网下载或者百度搜索layui的cdn

2.2. 导入，我放在tp6>public>static文件夹下。如图2-1所示。

图2-1layui所在文件夹

2.3：登录界面：界面图如图2-2所示；

图2-2：登录界面图

代码如下所示：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4" style="margin-top: 100px; box-shadow: 2px 2px 5px #ccc">
            <div style="height: 80px;
                           text-align: center;
                           font-size:30px;
                    ">后台登录</div>
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yzm" style="width:60%" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                        <div style="display: inline" class="layui-form-mid layui-word-aux"><img id='captcha' style="display: inline" src="{:captcha_src()}" alt="captcha" /></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" class="layui-btn" lay-submit lay-filter="formDemo" value="立即提交"></input>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
<script src="/static/layui/layui.all.js"></script>
<script>
    //只需要引入layui.all.js就ok
    //这里我们需要用到form表单，jquery的ajax提交，layui的弹弹窗
    //所以需要引用，下面数组就是引入的组件。
    layui.use(['form', 'jquery', 'layer'], function(){
        var form = layui.form;
        var $ = layui.jquery;
        //上两行就是引用form 和$ ，下面需要用到
        //监听表单提交，获取表单信息：submit(formDemo)数据对应这个lay-filter="formDemo"
        form.on('submit(formDemo)', function(data){
        //从表单中获取相应数据
            var name = data.field.name;
            var password = data.field.password;
            var yzm = data.field.yzm;
            $.ajax({
                url:"userLogin",//请求地址，当前在admin/user/userLogin下，提交给当前方法即可
                data: {//发送给服务器的数据
                    'name':name,
                    'password':password,
                    'yzm':yzm
                },
               type:"Post",//提交方式
                dataType:"json",
                success:function(data){//成功回调
                    if(data.status==0){//登录失败，status后台自定义状态码
                        layer.msg(data.msg);//layer自带的弹窗，msg后台自定义消息，
                        \emm 就是最开始layui.use中引用的layer，不然这里没法使用。
                    }else{//登录成功 msg后台自定义消息
                        layer.msg(data.msg);
                        //行吧，这里是自定义跳转，登录成功过后直接跳到主页
                        window.location.href = "{:url('admin/index/index')}"
                    }
                     return false;
                },
                error:function(data){
                    console.log('==错误信息==');
                    return false;
                }
            });
            return false;
        });
        //提交数据结束
        // 验证码刷新，，通过jquery获取图片dom，并实现点击功能。
        $("#captcha").click(function(event){
        // jqery中获取id是上面这样的，如果是获取class就是 $(".captcha")
        // 当然我这里不涉及类名。
            console.log('我被点击了');控制台输出这鬼东西被点击了没有
            console.log(event);
            //给当前图片的src换一个新的url，后面带上一个随机数。
            //虽然我还不知道原理，
            //但是这样就能让验证码刷新，
            //请求tp6这个captcha_src()方法，如果不加后面那串估计后台认为
            //什么也不给你请求个锤子，原来那个给你
            this.src = "{:captcha_src()}?"+Math.random();
            console.log(this.src);//我打印了一下值得变化，事实上只有后面随机数变了
        })
    });</script>
</body>
</html>

前端代码基本是这样的：哪一行验证码错了，不想解决。

3、后台逻辑的实现。

需要一个数据表：这是admin表，其中包含如下数组，如图3-1所示

图3-1 数据库设计表

当然，登录时不需要group_idlast_login_time等数组。这里我还有其他的功能要实现。如果我很乐意发三天博客。

我不使用模型，你也可以使用模型：这里我建立了一个模型：

管理模型如下：

创建模型命令 phpthinkmake:modeadmin@UserModel

我这里开启了多应用模式，admin就是我的应用。如果您不使用多应用模式，请删除admin@。事实上，您也可以自动创建它。

得到如下模型：：图3-2

图3-2 模型位置图：UserModel

型号代码：

<?php
declare (strict_types = 1);
namespace appadminmodel;
use thinkModel;
class UserModel extends Model{
    //绑定主键
    protected $pk = 'id';
    //绑定表 表名
    protected $table='msg_admin';
    //开启自动时间戳
    protected $autoWriteTimestamp =true;
    // 设置字段信息。。虽然可以不用，但文档说可以减少一次查询，还是用吧
    protected $schema = [
        'id' => 'int',
        'name' => 'string',
        'password' => 'string',
        'status' => 'tinyint',
        'group_id' => 'int',
        'create_time' => 'datetime',
        'update_time' => 'datetime',
        'last_login_time' => 'datetime',
    ];
    // 模型初始化
    protected static function init(){
        //TODO:初始化内容
    }
}

对：在此之前，需要配置ENV变量，该变量可以链接数据库::自己配置一下。

3-2：登录逻辑及代码::

第一步：检测会话中是否有用户，如果有则直接跳转到后台，否则进入下一步

步骤2：检查是否是post请求，如果是登录操作：不渲染视图，而是将登录界面返回给用户；

第三步：登录：获取用户传入数据，检查是否为空，（验证数据：我没写验证，偷懒）；根据用户名查找用户信息，匹配密码，写入session登录界面模板html登录界面模板html，完成登录

代码如下:::

<?php
namespace appadmincontroller;
use appBaseController;
use thinkfacadeDb;
use thinkRequest;
use appvalidateUserValidate;
use thinkfacadeView;
use thinkfacadesession;
class User extends BaseController{
        protected $request;
    /**
     * 检查用户登录
     * 有登录提交时，进入登录功能，没有登录请求返回页面
     * 获取用户信息 校验 查询数据库
     * @param Request $request
     * @return string|thinkresponseJson
     * @throws Exception
     */
    public function userLogin(Request $request){
        if(!empty(session('adminAccount')) ){
            //如果用户已经登录，跳转到后台首页
            return redirect((string)url('index/index'));
        }
        if($request->isPost()){
            $name= $request->param('name');
            $password = $request->param('password');
            $yzm = $request->param('yzm');
            //判断是否没有数据
            if(empty($name)&&empty($password)||empty($yzm)){
                return json(['status'=>0,'msg'=>'未提交数据']);
            }
            //数据不为空，查询用户是否存在
            $adminInfo = Db::name('msg_admin')->where('name','=',$name)->find();
            //halt($adminInfo);
            if(!empty($adminInfo) && $adminInfo['status']!=1){
                return json(['statsu'=>0,'msg'=>'用户不存在']);
            }
            if(!captcha_check($yzm)){
                return json(['status'=>0,'msg'=>'验证码不正确']);
            }
            //md5加密密码：：password_salt是一个自定义密码加密具体
            //具体是在common.php中实现，具体如下：：：
            /**
            <?php
                        // 应用公共文件
                        //通用密码加密
                        function password_salt($str){
                            $salt='sttr';
                            return md5($str.$salt);
                        }
            */
           // if($adminInfo['password']!=password_salt($password)){
           //这里数据库信息是手动添加，所以没有使用加密。
           if($adminInfo['password']!=$password){
                return json(['status'=>0,'msg'=>'密码不正确']);
            }
            //将用户存入session中 
            session('adminAccount',$adminInfo);
            return json(['status'=>1,'msg'=>'登录成功']);
        }else{
            return View::fetch();
        }
    }
    //退出登录  
    public function loginOut(){
        session::clear();
        //重定向到登录界面》》》》
        return redirect('userLogin');
    }
}

这是登录逻辑:::

这里我还有一个问题：进入后台主页后，通过tp51、tp5方法很难通过模板句型获取session。感激的。

我的解决方案是：在主页index.html和索引控制器中：

在索引控制器中:::

<?php
declare (strict_types = 1);
namespace appadmincontroller;
use thinkfacadeView;
class Index{
    public function index(){
        View::assign('user',session('adminAccount'));
        return View::fetch();
    }
}

我把session值给了用户，前台从用户那里取出来::T_T

前端代码::


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">XXX后台管理系统</div>
        
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">主页</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户管理</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="" class="layui-nav-img">
                    {$user.name}
                    
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">个人资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="{:url('user/loginOut')}">安全退出</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">商品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">商品列表</a></dd>
                        <dd><a href="javascript:;">添加商品</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">订单列表</a></dd>
                        <dd><a href="javascript:;">待审核</a></dd>
                        <dd><a href="javascript:;">配送中</a></dd>
                        <dd><a href="javascript:;">完成订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">其他功能</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        
    </div>
    <div class="layui-footer">
        
        © layui.com - 底部固定区域
    </div>
</div>
<script src="/static/layui/lay/modules/jquery.js"></script>
<script src="/static/layui/layui.all.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });</script>
</body>
</html>