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']);
laravel8 登录功能的实现的更多相关文章
- SuperMap-iServer-单点登录功能验证(CAS)
SuperMap-iServer-单点登录功能验证(CAS) 1.测试目的: 验证SuperMap-iServer使用CAS单点登录的功能是否正常. 2.测试环境: SuperMap-iServer8 ...
- 一步步开发自己的博客 .NET版（3、注册登录功能）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 从无到有实现登录功能以及thinkphp怎么配置数据库信息
好开心,终于解决了.从学习android到现在写登录功能已经不是一次两次了,如今再写想着肯定是信手拈来,没有想到的是尽然折磨了我一天的时间才搞定它.唉...... 先来看几张截图,这次的登录跟以往的不 ...
- 如何在ios中集成微信登录功能
在ios中集成微信的登录功能有两种方法 1 用微信原生的api来做,这样做的好处就是轻量级,程序负重小,在Build Settings 中这样设置 然后设置 友盟的设置同上,但是要注意,加入你需要的所 ...
- php之登录功能实现。
项目默认存在的东西:jquery库[jquery.min.js] 登录功能实现的基本逻辑: 1.书写前台php功能基本页面:(index.php) a.编写基本功能,比如用户名.密码.登录 b.引用j ...
- DWR实现扫一扫登录功能
前言 <DWR实现后台推送消息到Web页面>一文中已对DWR作了简介,并列出了集成步骤.本文中再一次使用到DWR,用以实现扫一扫登录功能. 业务场景 web端首页点击"登陆&qu ...
- Struts+Hibernate+Spring实现用户登录功能
通过登录案例实现三大框架之间的整合,登录功能是任何系统和软件必不可少的一个模块,然而通过这个模块来认识这些复杂的框架技术,理解数据流向和整个设计思路是相当容易的.只有在掌握了这些小模块的应用后,才能轻 ...
- Struts2整合Hibernate3实现用户登录功能
所用技术:struts2 ,hibernate,jsp,mysql 本DEMO仅仅实现用户登录功能,采用MVC思想,自己也觉得相对是比较简单,比较容易理解数据流向的一个例子,通过整合这个过程,能够清晰 ...
- 网站集成QQ登录功能
最近在做一个项目时,客户要求网站能够集成QQ登录的功能,以前没做过这方面的开发,于是去QQ的开放平台官网研究了一下相关资料,经过自己的艰苦探索,终于实现了集成QQ登录的功能,现在把相关的开发经验总结一 ...
随机推荐
- java实现以docx格式导出
直接上代码:Map<String, Object> dataMap = afterLoanReportService.exportReport(startDate, endDate);// ...
- Maven 项目报出警告：Warning:java: source value 1.5 is obsolete and will be removed in a future release
感谢原文作者:Hxinguan 原文链接:https://www.cnblogs.com/Hxinguan/p/6132446.html 问题: 1.创建maven项目的时候,jdk版本是1.5版本, ...
- lua语言：时间
转载请注明来源:https://www.cnblogs.com/hookjc/ 时间库函数 1.用数值表示时间值 用数字值来表示时间值,实际上时间值的本质就是一个数字值.例如:d = 11312864 ...
- homestead 入坑安装
1.在使用 Homestead 之前,需要先安装 Virtual Box.VMWare.Parallels 或 Hyper-V (四选一,我们通常选择 VirtualBox,因为只有它是免费的)以及 ...
- Protocol基本概念
1.protocol 基本概念 Protocol翻译过来, 叫做"协议" 在写java的时候都会有接口interface这个概念,接口就是一堆方法的声明没有实现,而在OC里面Int ...
- 基于Apache的Tomcat负载均衡和集群(2)
反向代理负载均衡 (Apache+JK+Tomcat) 使用代理服务器可以将请求转发给内部的Web服务器,让代理服务器将请求均匀地转发给多台内部Web服务器之一上,从而达到负载均衡的目的.这种代理方式 ...
- 网管必须必须知道的知识！ARP攻击与欺骗的原理！
ARP攻击与ARP欺骗原理及应用 1.ARP概述以及攻击原理 2.ARP欺骗原理 3.ARP故障处理 1.什么是ARP协议?将一个已知的IP地址解析成MAC地址.无论是ARP攻击还是ARP欺骗,它们都 ...
- 部署YUM仓库 （最近睡眠质量很差，你什么时候搬过来住）
部署YUM仓库 1.YUM概述 YUM(Yellow dog Updater Modified) 基于RPM包构建的软件更新机制 可以自动解决依赖关系 所有软件由集中的YUM软件仓库提供 2.主备安装 ...
- Puppeteer简介
puppeteer常用API https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md Puppeteer是一个node库,他 ...
- 论文解读（AGCN）《 Attention-driven Graph Clustering Network》
Paper Information Title:<Attention-driven Graph Clustering Network>Authors:Zhihao Peng, Hui Li ...