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']);