简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Laravel实现后台登录页面

Laravel实现后台登录页面

longlong
longlong原创
2020年09月20日 16:27:321013浏览

一、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. 在控制器中又创建方法用于接收账户信息，进行相应的处理和过滤

上一条：JS的获取元素和事件操作（0813）下一条：compser的下载、安装、组件安装、使用composer自动加载自定义类
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多