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']);
标签：username,10,功能,return,laravel8,登录,function,layer,msg 来源： https://www.cnblogs.com/xiaoyantongxue/p/15674539.html