简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Laravel实现后台登录页面
Blogger Information
Blog 60
fans 5
comment 3
visits 65080
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Laravel实现后台登录页面
longlong
Original
1024 people have browsed it

一、Laravel实现后台登录页面

  • Account.php 账户控制器
  1. <?php
  3. namespace App\Http\Controllers\admins;
  5. use App\Http\Controllers\Controller;
  6. use Illuminate\Http\Request;
  7. use Illuminate\Support\Facades\Auth;
  9. // 账户相关控制器
  10. class Account extends Controller
  11. {
  12.     // 控制登录页面
  13.     public function login(){
  14.         return view('/admins/account/login');
  15.     }
  16.     // 生成验证码图片
  17.     public function get_captcha(){
  18.         VeriCode::create();
  19.     }
  20.     // 执行登录操作
  21.     public function doLogin(Request $request){
  22.         // 获取账户信息以及验证码
  23.         $username = trim($request->username);
  24.         $pwd = trim($request->password);
  25.         $vericode = trim($request->vericode);
  26.         session_start();
  27.         $code = $_SESSION['code'];
  28.         // 验证账户信息
  29.         if($vericode == '')
  30.             exit(json_encode(['code'=>401,'msg'=>'请输入验证码']));
  31.         if(strtolower($vericode) != strtolower($code))
  32.             exit(json_encode(['code'=>401,'msg'=>'验证码错误']));
  33.         if($username=='' || $pwd=='')
  34.             exit(json_encode(['code'=>401,'msg'=>'用户名或密码不能为空']));
  35.         if(!Auth::attempt(['username'=>$username,'password'=>$pwd]))
  36.             exit(json_encode(['code'=>401,'msg'=>'用户名或密码错误']));
  37.         dump($username);
  38.         dump($pwd);
  39.         dump($vericode);
  40.     }
  41. }
  43. /**
  44.  * 验证码类
  45.  */
  46. class VeriCode{
  47.     // 获取验证码配置
  48.     private static function _getCodeConfig(){
  49.         return  [
  50.             // 验证码字符集
  51.             'codeStr' => 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
  52.             // 验证码个数
  53.             'codeCount' => 4,
  54.             // 字体大小
  55.             'fontsize' =>16,
  56.             // 验证码的宽度
  57.             'width' => 100,
  58.             // 验证码高度
  59.             'height' => 36,
  60.             // 是否有干扰点?true有,false没有
  61.             'disturbPoint' => true,
  62.             // 干扰点个数,disturbPoint开启后生效
  63.             'pointCount' => 200,
  64.             // 是否有干扰条?true有,false没有
  65.             'disturbLine' => true,
  66.             // 干扰条个数,disturbLine开启后生效
  67.             'lineCount' => 3
  68.         ];
  69.     }
  70.     // 创建图片验证码
  71.     public static function create(){
  72.         // 配置
  73.         $config = self::_getCodeConfig();
  75.         //创建画布
  76.         $image = imagecreatetruecolor($config['width'],$config['height']);
  77.         //背景颜色
  78.         $bgcolor=imagecolorallocate($image,255,255,255);
  79.         imagefill($image,0,0,$bgcolor);
  80.         $captch_code = '';//存储验证码
  81.         $captchCodeArr = str_split($config['codeStr']);
  83.         //随机选取4个候选字符
  84.         for($i=0;$i<$config['codeCount'];$i++){
  85.             $fontsize = $config['fontsize'];
  86.             $fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));//随机颜色
  87.             $fontcontent = $captchCodeArr[rand(0,strlen($config['codeStr'])-1)];
  88.             $captch_code.=$fontcontent;
  89.             $_x = $config['width']/$config['codeCount'];
  90.             $x=($i*(int)$_x)+rand(5,10);   //随机坐标
  91.             $y=rand(5,10);
  92.             imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);    // 水平地画一行字符串
  93.         }
  94.         session_start();
  95.         $_SESSION['code']=$captch_code;
  96.         //增加干扰点
  97.         if($config['disturbPoint']){
  98.             for($i=0;$i<$config['pointCount'];$i++){
  99.                 $pointcolor=imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));
  100.                 imagesetpixel($image,rand(1,99),rand(1,29),$pointcolor);
  101.             }
  102.         }
  104.         //增加干扰线
  105.         if($config['disturbLine']){
  106.             for($i=0;$i<$config['lineCount'];$i++){
  107.                 $linecolor=imagecolorallocate($image,rand(80,280),rand(80,220),rand(80,220));
  108.                 imageline($image,rand(1,99),rand(1,29),rand(1,99),rand(1,29),$linecolor);
  109.             }
  110.         }
  112.         //输出格式
  113.         header('content-type:image/png');
  114.         imagepng($image);
  116.         //销毁图片
  117.         imagedestroy($image);
  118.     }
  119. }
  • User.php中增加项：
  1. class User extends Authenticatable
  2. {
  3.     protected $table = 'admin';
  4. }
  • Web.php 路由增加项：
  1. Route::get('/admins/account/login','admins\Account@login');
  2. Route::get('/admins/account/get_captcha','admins\Account@get_captcha');
  3. Route::post('/admins/account/doLogin','admins\Account@doLogin');
  • login.blade.php 登录页面
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>后台登录系统</title>
  9.     <link rel="stylesheet" href="/static/layui/css/layui.css">
  10.     <link rel="stylesheet" href="/static/css/admins.css">
  11.     <script src="/static/layui/layui.js"></script>
  12. </head>
  13. <body>
  15. <form class="layui-form" action="" >
  16.     @csrf
  17.     <p>后台登录系统</p>
  18.     <hr>
  19.     <div class="layui-form-item">
  20.         <label class="layui-form-label">用户名</label>
  21.         <div class="layui-input-block">
  22.             <input type="text" id="username" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
  23.         </div>
  24.     </div>
  25.     <div class="layui-form-item">
  26.         <label class="layui-form-label">密码</label>
  27.         <div class="layui-input-block">
  28.             <input type="password" id="pwd" name="pwd"  placeholder="请输入密码" autocomplete="off" class="layui-input">
  29.         </div>
  30.     </div>
  31.     <div class="layui-form-item">
  32.         <label class="layui-form-label">验证码</label>
  33.         <div class="layui-input-inline">
  34.             <input type="text" id="vericode" name="vericode"  placeholder="请输入验证码" autocomplete="off" class="layui-input">
  35.         </div>
  36.         <img src="/admins/account/get_captcha" alt="看不清，点击刷新" style="cursor: pointer">
  37.     </div>
  38.     <div class="layui-form-item">
  39.         <div class="layui-input-block">
  40.             <button type="submit" class="layui-btn btn-login">登录</button>
  41.             <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  42.         </div>
  43.     </div>
  44. </form>
  46. <script>
  47.     // 获取layui弹出层组件
  48.     layui.use('layer',function () {
  49.         layer = layui.layer;
  50.         $ = layui.jquery;
  51.         // layer.msg('hello');
  52.     })
  53.     // 验证码实时刷新
  54.     const img = document.querySelector('img');
  55.     img.addEventListener('click',function () {
  56.         img.src = '/admins/account/get_captcha?'+Math.random();
  57.     });
  58.     // 执行登录操作
  59.     document.querySelector('.btn-login').addEventListener('click',function (ev) {
  60.         // 禁用表单默认提交行为
  61.         ev.preventDefault();
  62.         // console.log('111');
  63.         // 获取用户输入的信息
  64.         let username = $('#username').val();
  65.         let pwd = $('#pwd').val();
  66.         let vericode = $('#vericode').val();
  67.         let _token = $('input[name="_token"]').val();
  68.         // 提交信息去验证
  69.         $.post('/admins/account/doLogin',{username:username,password:pwd,vericode:vericode,_token:_token},function (data) {},'json');
  70.     })
  71. </script>
  72. </body>
  73. </html>
  • 例：数据表如下：

登录效果如下：

  • 验证码输入错误时：

  • 验证码正确，用户信息错误时：

  • 所有信息都正确时：

二、总结登录流程

  1. 先创建账户控制器，然后定义一个方法用于跳转到登录页面，切记要写路由

  2. 登录页面样式写好以后，设置点击登录按钮时将信息提交处理（还有一个重点部分在于表单中的验证码如何引入）

  3. 在控制器中又创建方法用于接收账户信息，进行相应的处理和过滤

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！