laravel后台登录页实现

登录页blade模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理登录</title>
    <link rel="stylesheet" href="/static/admin/login.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
</head>
<body>
<div class="layui-form login">
    <h1>管理员登录</h1>
    <hr>
   @csrf
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                   class="layui-input" id="username">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password"   placeholder="请输入密码"  class="layui-input" id="pwd">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                   class="layui-input" id="code">
        </div>
        <img class="code-img" src="/admins/get_vf_code"  >
    </div>
    <div class="layui-btn layui-btn-normal" id="btn">登录</div>
</div>
<script type="text/javascript">
    layui.use(['layer'], function () {
       layer = layui.layer,
       $ = layui.jquery;
       device = layui.device;
    // post提交数据，并根据返回的json进行提示
       $("#btn").on("click", function () {
       let username = $("#username").val();
       let pwd = $("#pwd").val();
       let vericode = $("#code").val();
       let _token = $('input[name="_token"]').val();
         $.post('/admins/dologin', {username: username, pwd: pwd, vericode: vericode, _token: _token},
           function (res) {
              layer.msg(res.msg)
       }, 'json');
   })
   //刷新验证码
   let codeUrl=  $('.code-img').attr("src");
   $('.code-img').on('click',function () {
      this.src=codeUrl;
      this.src=`${this.src}?s=${new Date().getTime()}`;        
   })
   });
</script>
</body>
</html>

控制器 Account

<?php
namespace App\Http\Controllers\admins;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class Account extends Controller
{
    //登录页
    public function login()
    {
        return view('/admins/account/login');
    }
   public function dologin(Request $req)
   {
       $username = trim($req->username);
       $pwd = trim($req->pwd);
       $vericode = trim($req->vericode);
       //开启session 获取session中验证码字符
       session_start();
       $code = $_SESSION['code'];
       //避免session 中的验证码失效
       if ($vericode == '') {
           exit(json_encode(array('code' => 401, 'msg' => '请输入验证码'), JSON_UNESCAPED_UNICODE));
       }
       if (strtolower($vericode) != strtolower($code)) {
           exit(json_encode(array('code' => 401, 'msg' => '验证码错误'), JSON_UNESCAPED_UNICODE));
       }
       //查询数据库验证用户名密码
       if ($username == '') {
           exit(json_encode(array('code' => 401, 'msg' => '用户名不能为空')));
       }
       if ($pwd == '') {
           exit(json_encode(array('code' => 401, 'msg' => '密码不能为空')));
       }
       if (!Auth::attempt(['username' => $username, 'password' => $pwd])) {
           exit(json_encode(array('code' => 401, 'msg' => '用户名或密码错误')));
       } 
       print('登录成功');
   }
    //生成验证码
    public function get_vf_code()
    {
        VeriCode::create();
    }
    //
}
/**
 * 验证码类
 */
class VeriCode
{
    // 获取验证码配置
    private static function _getCodeConfig()
    {
        return [
            // 验证码字符集
            'codeStr' => 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
            // 验证码个数
            'codeCount' => 4,
            // 字体大小
            'fontsize' => 22,
            // 验证码的宽度
            'width' => 150,
            // 验证码高度
            'height' => 36,
            // 是否有干扰点?true有,false没有
            'disturbPoint' => true,
            // 干扰点个数,disturbPoint开启后生效
            'pointCount' => 200,
            // 是否有干扰条?true有,false没有
            'disturbLine' => true,
            // 干扰条个数,disturbLine开启后生效
            'lineCount' => 3
        ];
    }
    // 创建图片验证码
    public static function create()
    {
        // 配置
        $config = self::_getCodeConfig();
        //创建画布
        $image = imagecreatetruecolor($config['width'], $config['height']);
        //背景颜色
        $bgcolor = imagecolorallocate($image, 255, 255, 255);
        imagefill($image, 0, 0, $bgcolor);
        $captch_code = '';//存储验证码
        $captchCodeArr = str_split($config['codeStr']);
        //随机选取4个候选字符
        for ($i = 0; $i < $config['codeCount']; $i++) {
            $fontsize = $config['fontsize'];
            $fontcolor = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));//随机颜色
            $fontcontent = $captchCodeArr[rand(0, strlen($config['codeStr']) - 1)];
            $captch_code .= $fontcontent;
            $_x = $config['width'] / $config['codeCount'];
            $x = ($i * (int)$_x) + rand(5, 10);   //随机坐标
            $y = rand(5, 10);
            imagestring($image, $fontsize, $x, $y, $fontcontent, $fontcolor);    // 水平地画一行字符串
        }
        session_start();
        $_SESSION['code'] = $captch_code;
        //增加干扰点
        if ($config['disturbPoint']) {
            for ($i = 0; $i < $config['pointCount']; $i++) {
                $pointcolor = imagecolorallocate($image, rand(50, 200), rand(50, 200), rand(50, 200));
                imagesetpixel($image, rand(1, 150), rand(1, 29), $pointcolor);
            }
        }
        //增加干扰线
        if ($config['disturbLine']) {
            for ($i = 0; $i < $config['lineCount']; $i++) {
                $linecolor = imagecolorallocate($image, rand(80, 280), rand(80, 220), rand(80, 220));
                imageline($image, rand(1, 99), rand(1, 29), rand(1, 99), rand(1, 29), $linecolor);
            }
        }
        //输出格式
        header('content-type:image/png');
        imagepng($image);
        //销毁图片
        imagedestroy($image);
    }
}

路由

Route::get('admins/login', 'admins\Account@login');
Route::get('admins/get_vf_code','admins\Account@get_vf_code');
Route::post('admins/dologin','admins\Account@dologin');

效果:

总结:
1.Auth认证需要在APP下USER类中指定一下需要查询的表名:protected $table = 'admin';
2.Auth认证数据库中密码字段需要使用password_hash函数对密码进行加密才可以认证成功
3.layui内置的jquery模块去除了全局的$和jQuery,在使用的时候需要单独加载
var $ = layui.$，

相关文章