Community Learn Tools Library Leisure
search
English
Home > List of blog posts > laravel \ layui 框架 （后台框架搭建）
Blogger Information
Blog 15
fans 2
comment 0
visits 35331
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 \ layui 框架 （后台框架搭建）
w™下載一個妳
Original
3915 people have browsed it

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次才通过，途中有出现代码写错，单词写错，步骤写错，等等一系列原因，其中大部分因素是自己不够细心，其二是自己对基础不熟练，另外因为工作导致没有太多时间进行复习演练，之前对于程序是没有任何功底，所以前面的基础也没能跟上，现在三阶段实战也没能及时跟上。

Correcting teacher：GuanhuiGuanhui

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