laravel8 登录功能的实现

复制代码
1．选择合适的框架，渲染出如上图所示的登录视图，视图有样式即可，可使用BootStrap或layUI去布局实现（10分）
2．正确显示出验证码（10分）
3．验证码要求无杂点、无干扰线，4位纯数字（10分）
4．实例化VUE对象，绑定可操作区域（10分）
5．获取到输入的用户名、密码、验证码的值，发送Ajax请求（10分）
6．控制器对登录信息做表单验证（10分）
7．控制器对登录信息做有效验证，无刷新返回并给出提示（10分）
8．如果账号或密码输入错误3次，锁定5分钟不可再登录（10分）
9．登录成功后使用session驱动进行存储（10分）
10．增加一个记住用户名的功能，如果用户在登录时选择了此项，则下次打开浏览器用户名文本框中有默认的值（10分）
复制代码

HTML页面：

复制代码
<!doctype html>
<html  class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.2</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/login.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/lib/layui/layui.all.js" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="login-bg">

<div class="login layui-anim layui-anim-up">
    <div class="message">管理登录</div>
    <div id="darkbannerwrap"></div>

    <form method="post" class="layui-form" id="vue_det" @submit.prevent="doSubmit">
        <input name="username" placeholder="用户名" v-model="info.username" type="text"  class="layui-input" >
        <hr class="hr15">
        <input name="password"  v-model="info.password"  placeholder="密码"  type="password" class="layui-input">
        <hr class="hr15">
        <input name="code" v-model="info.code" placeholder="验证码" style="float:left; width: 200px"  type="text" class="layui-input">
        <img src="{{captcha_src()}}" style="float:right; width: 120px; height: 50px;" onclick="this.src='{{captcha_src()}}'+Math.random()">
        <hr class="hr15">
        <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
        <hr class="hr20">
    </form>
</div>

<script src="/static/js/vue.js" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>

    var vm = new Vue({
        el: '#vue_det',
        data: {
            info:{
                username: "{{$username}}",
                password: "",
                code: "",
                _token:"{{csrf_token()}}"
            }
        },
        methods: {
            doSubmit:function () {
                console.log(this.info)

                if(this.info.username.length == 0) {
                    layer.msg('请填写用户名');
                    return;
                }

                /*if(this.info.password.length == 0) {
                    layer.msg('请填写密码');
                    return;
                }*/

                if(this.info.code.length == 0) {
                    layer.msg('请填写验证码');
                    return;
                }

                axios
                    .post('http://local.day3.com/login', this.info)
                    .then(res=>{
                        console.log(res)
                        let obj = res.data;
                        if(obj.status == 1) {
                            layer.msg(obj.msg, {icon:1, time:2000} , function () {
                                //todo
                            })
                        } else {
                            layer.msg(obj.msg, {icon:5, time:3000});
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });

            }
        }

    });

    /*$(function  () {
        layui.use('form', function(){
            var form = layui.form;
            // layer.msg('玩命卖萌中', function(){
            //   //关闭后的操作
            //   });
            //监听提交
            form.on('submit(login)', function(data){
                // alert(888)
                layer.msg(JSON.stringify(data.field),function(){
                    location.href='index.html'
                });
                return false;
            });
        });
    })*/
</script>
</body>
</html>
复制代码

控制器代码：

复制代码
<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class LoginController extends Controller
{


    public function index()
    {

        $username = session('username');
        return view('admin.login.index', compact('username'));
    }

    public function login(Request $request)
    {
        $loginExpire = session('loginExpire');
        if($loginExpire) {
            if($loginExpire > time()) {
                $errMsg = '您还被封禁状态，剩余时间' . ($loginExpire - time()) .  '秒';
                return response()->json(['status' => 0, 'msg' =>  $errMsg], 201);
            }
        }

        $validate = Validator::make($request->post(), [
           'username' => 'required',
           'password' => 'required',
           'code' => 'required|captcha',
        ], [
            'username.required' => '用户名密码不能为空',
            'password.required' => '用户名密码不能为空',
            'code.required' => '验证不能为空',
            'code.captcha' => '验证错误',
        ]);

        if($validate->fails()) {
            return response()->json(['status' => 0, 'msg' => $validate->errors()->all()[0]], 201);
        }

        $bool = auth()->attempt(['username' => $request->post('username'), 'password' => $request->post('password')]);

        if($bool) {
           //dd(auth()->user());
            session()->forget(['adminLogins', 'loginExpire']);
            session(['username' => auth()->user()->username]);
            return response()->json(['status' => 1, 'msg' => '登录成功']);
        } else {
            session()->increment('adminLogins');
            $nums = session('adminLogins');
            if( $nums>= 3) {
                session(['loginExpire' => time() + 300]);
            }

            return response()->json(['status' => 0, 'msg' => '用户名密码错误']);
        }
    }
}
复制代码

路由：

Route::get('login', [App\Http\Controllers\Admin\LoginController::class, 'index']);
Route::post('login', [App\Http\Controllers\Admin\LoginController::class, 'login']);

 

posted @   王越666  阅读(889)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae