search

博客列表 >laravel \ layui 框架 （后台框架搭建）

laravel \ layui 框架 （后台框架搭建）

w™下載一個妳
w™下載一個妳原创
2020年07月10日 23:36:063917浏览

laravel 后台搭建

1.后台登录界面演练代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  7.     <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  8.     <title>后台登录</title>
  9. </head>
  10. <body style="background-color: #1E9FFF;">
  11.    <div style="position:absolute;left:50%;width:480px;top:50%;margin-left:-240px;
  12.    background:#fff;margin-top:-200px;padding:20px;border-radius:4px;box-shadow:5px 5px 20px #444;">
  13.      <div class="layui-form">
  14.          @csrf
  15.          <div class="layui-form-item" style="text-align: center;color:blue;font-weight:500;font-size:26px;">通用后台管理系统</div>
  16.          <div class="layui-form-item">
  17.              <label class="layui-form-label">用户名</label>
  18.                <div class="layui-input-block">
  19.                  <input type="text" class="layui-input"  name="username">
  20.                </div>
  21.          </div>
  22.          <div class="layui-form-item">
  23.              <label class="layui-form-label">密码</label>
  24.                <div class="layui-input-block">
  25.                  <input type="password" class="layui-input"  name="pwd">
  26.                </div>
  27.          </div>
  28.          <div class="layui-form-item">
  29.              <label class="layui-form-label">验证码</label>
  30.                <div class="layui-input-inline">
  31.                  <input type="text" class="layui-input"  name="vericode">
  32.                </div>
  33.                <img id="captcha" src="/admins/account/captcha" style="width: 168px;height:36px;border: 1px solid;color:#cdcdcd; cursor:pointer;" onclick="reload_captcha()">
  34.          </div>
  35.          <div class="layui-form-item">
  36.              <div class="layui-input-block">
  37.                <button class="layui-btn" onclick="dologin()">登录</button>
  38.              </div>
  39.          </div>
  40.      </div>
  41.    </div>
  42. </body>
  43. </html>
  44. <script type="text/javascript">
  45.     layui.use(['layer'],function(){
  46.         $ = layui.jquery;
  47.         layer = layui.layer;
  48.     });
  50.       //登录
  51.       function dologin(){
  52.           var username = $.trim($('input[name="username"]').val());
  53.           var pwd = $.trim($('input[name="pwd"]').val())
  54.           var vericode = $.trim($('input[name="vericode"]').val());
  55.           var _token = $('input[name="_token"]').val();
  57.           if(username==''){
  58.              return layer.alert('请输入用户名',{icon:2});
  59.           }
  60.           if(pwd==''){
  61.             return  layer.alert('请输入密码',{icon:2});
  62.           }
  63.           if(vericode==''){
  64.             return  layer.alert('请输入验证码',{icon:2});
  65.           }
  66.           $.post('/admins/account/dologin',{_token:_token,username:username,pwd:pwd,vericode:vericode},
  67.              function(res){
  68.                if(res.code>0){
  69.                    return layer.alert(res.msg,{icon:2});
  70.                }
  71.                 layer.msg(res.msg);
  72.                 setTimeout(function(){window.location.href='/admins/home/index';},1000);
  73.              },'json');
  74.       }
  76.     function reload_captcha(){
  77.         $('#captcha').attr('src','/admins/account/captcha?rand='+Math.random());
  78.     }
  79. </script>

2.控制器演练代码：

  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.     }
  17.     public function dologin(Request $request){
  18.         $username = $request->username;
  19.         $pwd = $request->pwd;
  20.         $VeriCode = $request->vericode;
  21.         session_start();
  22.         $sess_code = $_SESSION['code'];
  23.         if($VeriCode!=$sess_code){
  24.             exit(json_encode(array('code'=>1,'msg'=>'验证码错误')));
  25.         }
  27.         //查询数据库，校验用户名和密码
  28.         if($username==''){
  29.             exit(json_encode(array('code'=>1,'msg'=>'用户名不能为空')));
  30.         }
  31.         if($pwd==''){
  32.             exit(json_encode(array('code'=>1,'msg'=>'密码不能为空')));
  33.         }
  34.         $res = Auth::attempt(['username'=>$username,'password'=>$pwd]);
  35.         if(!$res){
  36.             exit(json_encode(array('code'=>1,'msg'=>'帐号或密码错误')));
  37.         }
  38.             exit(json_encode(array('code'=>0,'msg'=>'登录成功')));
  39.     }
  41.      //验证码
  42.      public function captcha(){
  43.         VeriCode::create();
  44.      }
  45. }
  48. /**
  49.  * 验证码类
  50.  */
  51. class VeriCode{
  52.     // 获取验证码配置
  53.     private static function _getCodeConfig(){
  54.         return  [
  55.                     // 验证码字符集
  56.                     'codeStr' => 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
  57.                     // 验证码个数
  58.                     'codeCount' => 4,
  59.                     // 字体大小
  60.                     'fontsize' =>16,
  61.                     // 验证码的宽度
  62.                     'width' => 100,
  63.                     // 验证码高度
  64.                     'height' => 36,
  65.                     // 是否有干扰点?true有,false没有
  66.                     'disturbPoint' => true,
  67.                     // 干扰点个数,disturbPoint开启后生效
  68.                     'pointCount' => 200,
  69.                     // 是否有干扰条?true有,false没有
  70.                     'disturbLine' => true,
  71.                     // 干扰条个数,disturbLine开启后生效
  72.                     'lineCount' => 3
  73.                 ];
  74.     }
  76.     // 创建图片验证码
  77.     public static function create(){
  78.         // 配置
  79.         $config = self::_getCodeConfig();
  81.         //创建画布
  82.         $image = imagecreatetruecolor($config['width'],$config['height']);
  83.         //背景颜色
  84.         $bgcolor=imagecolorallocate($image,255,255,255);
  85.         imagefill($image,0,0,$bgcolor);
  86.         $captch_code = '';//存储验证码
  87.         $captchCodeArr = str_split($config['codeStr']);
  89.         //随机选取4个候选字符
  90.         for($i=0;$i<$config['codeCount'];$i++){
  91.             $fontsize = $config['fontsize'];
  92.             $fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));//随机颜色
  93.             $fontcontent = $captchCodeArr[rand(0,strlen($config['codeStr'])-1)];
  94.             $captch_code.=$fontcontent;
  95.             $_x = $config['width']/$config['codeCount'];
  96.             $x=($i*(int)$_x)+rand(5,10);   //随机坐标
  97.             $y=rand(5,10);
  98.             imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);    // 水平地画一行字符串
  99.         }
  100.         session_start();
  101.         $_SESSION['code']=$captch_code;
  102.         //增加干扰点
  103.         if($config['disturbPoint']){
  104.             for($i=0;$i<$config['pointCount'];$i++){
  105.                 $pointcolor=imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));
  106.                 imagesetpixel($image,rand(1,99),rand(1,29),$pointcolor);
  107.             }
  108.         }
  110.         //增加干扰线
  111.         if($config['disturbLine']){
  112.             for($i=0;$i<$config['lineCount'];$i++){
  113.                 $linecolor=imagecolorallocate($image,rand(80,280),rand(80,220),rand(80,220));
  114.                 imageline($image,rand(1,99),rand(1,29),rand(1,99),rand(1,29),$linecolor);
  115.             }
  116.         }
  118.         //输出格式
  119.         header('content-type:image/png');
  120.         imagepng($image);
  122.         //销毁图片
  123.         imagedestroy($image);
  124.     }
  125. }

4.路由演练代码：

  1. <?php
  3. use Illuminate\Support\Facades\Route;
  5. /*
  6. |--------------------------------------------------------------------------
  7. | Web Routes
  8. |--------------------------------------------------------------------------
  9. |
  10. | Here is where you can register web routes for your application. These
  11. | routes are loaded by the RouteServiceProvider within a group which
  12. | contains the "web" middleware group. Now create something great!
  13. |
  14. */
  16. Route::get('/', function () {
  17.     return view('welcome');//视图、视图引擎
  18. });
  20. //后台登录
  21. Route::get('/admins/account/login','admins\Account@login');
  22. Route::post('admins/account/dologin','admins\Account@dologin');
  24. //后台验证码
  25. Route::get('/admins/account/captcha','admins\Account@captcha');
  27. Route::get('/admins/home/index','admins\Home@index');

5.Home 演练代码：

  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 Home extends Controller
  11. {
  12.     //后台登录
  13.     public function index(){
  14.         return view('/admins/home/index');
  15.     }
  16. }

6.演练效果图：

7.学习总结：

在没有学习过后台框架搭建之前，会认为这是多么神秘且很难的事情，学习过之后发现，虽然知道大致的方法，知道后台是由哪些部分组成的，但是实际操作起来还是不容易，看着老师是轻轻松松的搭建完成，课后看着录播跟着实操演练困难重重，就这一个后台框架搭建，我足足重复练习了5次才通过，途中有出现代码写错，单词写错，步骤写错，等等一系列原因，其中大部分因素是自己不够细心，其二是自己对基础不熟练，另外因为工作导致没有太多时间进行复习演练，之前对于程序是没有任何功底，所以前面的基础也没能跟上，现在三阶段实战也没能及时跟上。

上一条：抖音私信名片卡片消息链接图文xml生成制作方法php代码插件软件解析下一条：PHP 二维数组根据字段值排序并把空值放入数组末尾
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多