laravel使用ajax登录，和自定义生成验证码

使用larave框架操作ajax发送get请求，和自义定验证码

1. 后端登录代码

php 复制代码

<?php

namespace CriusWeb\FzUserAdmin\Http\Controllers;

use App\Models\Admin;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Routing\Controller;
use Illuminate\Support\Facades\Cache;

class LoginController extends Controller
{

    /**
     * 登录界面
     */
    public function login()
    {
        return view('fzuseradmin::login.index');
    }

    /**
     * 处理登录
     */
    public function checkLogin(Request $request)
    {

        $admin_name = trim($request->input('admin_name'));
        $admin_password = trim($request->input('admin_password'));
        $code = trim($request->input('code'));

        $captchaCode = $request->session()->get('fzUserAdminCaptcha');
        if ($code != $captchaCode) {
            return response()->json(['msg' => '验证码错误', 'code' => 400]);
        }

        $admin = Admin::where('admin_name', $admin_name)->first();
        if (!$admin) {
            return response()->json(['msg' => '账号不存在', 'code' => 400]);
        }

        if ($admin->admin_gid != 25) {
            return response()->json(['msg' => '此账号暂无权限', 'code' => 400]);
        }

        if (md5($admin_password) != $admin->admin_password) {
            return response()->json(['msg' => '密码错误', 'code' => 400]);
        }

        $array = array();
        $array['admin_name'] = $admin->admin_name;
        $array['admin_id'] = $admin->admin_id;
        $array['admin_login_time'] = time();
        $array['admin_gid'] = $admin->admin_gid;
        $request->session()->put('fzUserAdminInfo', $array);

        Admin::where('admin_id', $admin->admin_id)->update(
            [
                'admin_login_time' => time(),
                'admin_login_num' => $admin->admin_login_num + 1,
            ]);

        $request->session()->forget('fzUserAdminCaptcha');

        return response()->json(['msg' => '登录成功', 'code' => 200]);

    }

    /**
     * 图像验证码
     */
    public function captcha(Request $request)
    {
        session_start();
        header("Content-type: image/png");
        $width = 100; //宽度
        $height = 40; //高度
        $length = 4; //位数
        $code = '';

        for ($i = 0; $i < $length; $i++) {
            $code .= rand(0, 9);
        }

        //存验证码
        $request->session()->put('fzUserAdminCaptcha', $code);

        $image = imagecreatetruecolor($width, $height);
        $bgColor = imagecolorallocate($image, 255, 255, 255);
        imagefill($image, 0, 0, $bgColor);

        //打印验证码
        $font = 12;
        for ($i = 0; $i < $length; $i++) {
            $x = $width / ($length + 1) * ($i + 1) + rand(-5, 5);
            $y = $height / 2 - $font + rand(-5, 5);
            $color = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));
            imagestring($image, $font, $x, $y, $code[$i], $color);
        }

        //随机线条干扰8
        for ($i = 0; $i < 8; $i++) {
            $x1 = rand(0, $width);
            $y1 = rand(0, $height);
            $w2 = rand(0, $width);
            $h2 = rand(0, $height);
            $color = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));
            imageline($image, $x1, $y1, $w2, $h2, $color);
        }

        //随机噪点80
        for ($i = 0; $i < 80; $i++) {
            $x = rand(0, $width);
            $y = rand(0, $height);
            $color = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));
            imagesetpixel($image, $x, $y, $color);
        }
        //输出图片并销毁内存
        imagepng($image);
        imagedestroy($image);
    }

    /**
     * 退出登录
     */
    public function logout(Request $request)
    {
        $request->session()->forget('fzUserAdminInfo');
        return response()->json(['msg' => '退出登陆成功', 'code' => 200]);
    }

}

2. 前端界面

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .login-box {
            width: 100%;
            height: 100vh;
            background-image: url("{{fzuser_admin('/images/bg1.jpg')}}");
            background-size: cover;
            background-position: 50%;
            position: relative;
        }

        .login-box-content {
            width: 400px;
            position: absolute;
            top: 30%;
            right: 20%;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0px 0px 20px #9AB6F6;
            padding-bottom: 20px;

        }

        .yzm {
            width: 100px;
            height: 38px;
            margin-top: 30px;
            margin-right: 15px;
        }

        .login-box-title {
            width: 100%;
            height: 60px;
            text-align: center;
            line-height: 60px;
            color: #000;
            font-size: 16px;
            border-bottom: 1px solid #f2f2f2;
        }

        .input-item {
            width: calc(100% - 30px);
            margin: 0 15px;
            margin-top: 30px;
            font-size: 16px;
            height: 40px;
            box-sizing: border-box;
            padding-left: 15px;
            border-radius: 5px;
            outline: none;
            border: 1px solid #9AB6F6;
        }

        .input-item2 {
            width: calc(100% - 150px);
            margin: 0 15px;
            margin-top: 30px;
            font-size: 16px;
            height: 40px;
            box-sizing: border-box;
            padding-left: 15px;
            border-radius: 5px;
            outline: none;
            border: 1px solid #9AB6F6;
        }

        .denglu-btn {
            width: calc(100% - 30px);
            margin: 0 15px;
            margin-top: 40px;
            height: 40px;
            background: #409eff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .login-bottom {
            width: 400px;
            position: absolute;
            right: 10%;
            top: calc(20% + 410px);
            line-height: 30px;
            font-size: 16px;
            color: #757575;
        }

        .jj-box {
            position: absolute;
            top: 8%;
            right: calc(10% + 600px);
            color: #333;
            font-weight: bold;
            font-size: 23px;
        }

        .login-bottom img {
            width: 50px;
            height: 50px;
            border-radius: 8px;
        }
    </style>

    <script src="{{fzuser_admin('/js/jquery-3.1.1.min.js')}}"></script>

</head>
<body>
<div class="login-box">
    <div class="login-box-content">
        <div class="login-box-title">欢迎登录</div>
        <input type="text" name="admin_name" id="admin_name" class="input-item" placeholder="请输入账号">
        <input type="password" name="admin_password" id="admin_password" class="input-item" placeholder="请输入密码">
        <div style="width:100%;display:flex;flex-direction: row;align-items: center;justify-content: space-between;">
            <input type="text" name="code" id="code" class="input-item2" placeholder="请输入图形验证码">
            <img src="{{lurl('/app/fzuser_admin/captcha')}}" alt="" id="yzmImg" class="yzm"
                 onclick="this.src='{{lurl("/app/fzuser_admin/captcha")}}?'+Math.random()">
        </div>

        <button class="denglu-btn" onclick="getLogin()">登录</button>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
<script>
    function getLogin() {
        var admin_name = $("#admin_name").val();
        var admin_password = $("#admin_password").val();
        var code = $("#code").val();

        if (!admin_name) {
            layer.msg('请输入账号');
            return false;
        }
        if (!admin_password) {
            layer.msg('请输入密码');
            return false;
        }
        if (!code) {
            layer.msg('请输入验证码');
            return false;
        }

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '{{lurl('/app/fzuser_admin/checkLogin')}}',
            type: 'get',
            data: {
                "admin_name": admin_name,
                "admin_password": admin_password,
                "code": code
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 400) {
                    layer.msg(res.msg);
                    return false;
                } else {
                    layer.msg(res.msg);
                    window.location.href = "{{lurl('/app/fzuser_admin/')}}"
                }
            }
        })
    }
</script>
</body>
</html>