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登录的功能,现在把相关的开发经验总结一 ...
随机推荐
- HBase安装教程
一.版本介绍 linux : CentOS7 Hadoop : 2.7.6 zookeeper : 3.4.6 hbase : 1.4.6 jdk : jdk1.8.0_171 三个节点的主机名分别为 ...
- 16进制字符串和byte数组进行相互转换\将10进制转换为任意进制
16进制字符串和byte数组进行相互转换 简介 1个byte对应8个bit,16进制使用4个bit,所以一个byte转成16进制,占用两位. JAVA代码 private static final c ...
- TCP和UDP的区别以及应用
TCP定义 传输控制协议 (Transmission Control Protocol).TCP协议是面向连接的通信协议,即传输数据之前,在发送端和接收端建立逻辑连接,然后再传输数据,它提供了两台计算 ...
- iOS WKWebView 使用笔记
首先添加Webkit框架
- tomcat实现多虚拟主机
一.安装tomcat 请查看:二进制安装tomat 二.配置虚拟主机 2.1 修改server.xml # vim /usr/local/tomcat/conf/server.xml ...省略 #在 ...
- AI 神经网络学习
神经网络学习 1.输出与输入的关系(感知基): $$ y=\begin{Bmatrix} 1 & {\overrightarrow{x}\cdot \overrightarrow{w}+b&g ...
- 三、Mybatis多表关联查询应用
一对一查询 实现语句:select * from neworder o, user u where o.uid = u.id 实体Order: 接口: 配置: 测试: 一对多查询 实现语句:selec ...
- web开发 小方法3-position
值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", " ...
- MyBatisPlus根据ID修改对应的值,其他属性不变.如何实现?
1.基本操作 // 修改订单的状态为已发货和已支付 Order order = new Order(); order.setSend(1); // 已发货 order.setPay(1); // 已支 ...
- netty系列之:channelPipeline详解
目录 简介 ChannelPipeline 事件传递 DefaultChannelPipeline 总结 简介 我们在介绍channel的时候提到过,几乎channel中所有的实现都是通过channe ...