在Laravel(5.5.*) 里融合 AdminLTE (2.4.8) [纯干货]

时间：2018年11月17日作者：andyzu 邮件：andyzu@163.com 转载请注明作者信息！

注：本文章针对已经有一定基础的开发人员，熟悉 Laravel、composer 、bower等基础知识的人。如果有任何疑问，可以随时联系我。

第一步：下载Laravel(5.5.*)PHP框架：

1、输入命令：

composer create-project --prefer-dist laravel/laravel laravel_adminlte "5.5.*"

2、然后在浏览器里运行，如果发现权限问题，如：

laravel_adminlte/storage/logs/laravel.log" could not be opened: failed to open stream: Permission denied

输入命令：chmod -R 777 logs

laravel_adminlte/storage/framework/sessions/8CBKYHTxBFaKXcHawOyWlUWebawmEXj0ROr2dCxP): failed to open stream: Permission

输入命令：chmod -R 777 sessions

laravel_adminlte/storage/framework/views/03f0f5c14d3ff3b2bd85d872ebc671585e81acf1.php): failed to open stream: Permission denied

输入命令：chmod -R 777 views

出现这个界面，即代表Laravel 安装成功
[图片上传失败...(image-129e6c-1542448674003)]

第二步：如果成功运行，输入如下命令：

1、输入命令：cd myapp/public

2、输入命令：bower install admin-lte

image

最后命令行界面会出现如下图例，请根据自己的情况进行选择，我选择的是：6

一旦安装完成，会在 public 目录下出现 bower_componets 的文件夹，在其中你会找到 admin-lte 目录。

第三步：将AdminLTE 里的 starter.html 转换为 Laravel 的 Blade 模板文件。

在 public/bower_componets/admin-lte 目录下，会有一个 starter.html 文件，这是 AdminLTE 专门为我们准备的开始页面。我们就用这个来转换成为 Laravel 的 Blade 模板所需要的文件。

1、在 resources/views 目录下新建 admin_template.blade.php 文件；

2、在 routes/web.php 里，新增一条路由：

Route::get('admin', function () {
    return view('admin_template');
});

3、然后将下面代码，复制到 admin_template.blade.php 文件里；并注意 {{URL::asset('bower_components/font-awesome/css/font-awesome.css')}} 这类的设置，是否准确。

<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>AdminLTE 2 | Starter</title>
 <!-- Tell the browser to be responsive to screen width -->
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <link rel="stylesheet" href="{{URL::asset('bower_components/bootstrap/dist/css/bootstrap.css')}}">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="{{URL::asset('bower_components/font-awesome/css/font-awesome.css')}}">
 <!-- Ionicons -->
 <link rel="stylesheet" href="{{URL::asset('bower_components/Ionicons/css/ionicons.css')}}">
 <!-- Theme style -->
 <link rel="stylesheet" href="{{URL::asset('bower_components/admin-lte/dist/css/AdminLTE.css')}}">
 <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
    page. However, you can choose any other skin. Make sure you
    apply the skin class to the body tag so the changes take effect. -->
 <link rel="stylesheet" href="{{URL::asset('bower_components/admin-lte/dist/css/skins/skin-blue.css')}}">

 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->

 <!-- Google Font -->
 <link rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

 <!-- Main Header -->
 <header class="main-header">

  <!-- Logo -->
  <a href="index2.html" class="logo">
   <!-- mini logo for sidebar mini 50x50 pixels -->
   <span class="logo-mini"><b>A</b>LT</span>
   <!-- logo for regular state and mobile devices -->
   <span class="logo-lg"><b>Admin</b>LTE</span>
  </a>

  <!-- Header Navbar -->
  <nav class="navbar navbar-static-top" role="navigation">
   <!-- Sidebar toggle button-->
   <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
    <span class="sr-only">Toggle navigation</span>
   </a>
   <!-- Navbar Right Menu -->
   <div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
     <!-- Messages: style can be found in dropdown.less-->
     <li class="dropdown messages-menu">
      <!-- Menu toggle button -->
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-envelope-o"></i>
       <span class="label label-success">4</span>
      </a>
      <ul class="dropdown-menu">
       <li class="header">You have 4 messages</li>
       <li>
        <!-- inner menu: contains the messages -->
        <ul class="menu">
         <li><!-- start message -->
          <a href="#">
           <div class="pull-left">
            <!-- User Image -->
            <img src="{{URL::asset('bower_components/admin-lte/dist/img/user2-160x160.jpg')}}" class="img-circle" alt="User Image">
           </div>
           <!-- Message title and timestamp -->
           <h4>
            Support Team
            <small><i class="fa fa-clock-o"></i> 5 mins</small>
           </h4>
           <!-- The message -->
           <p>Why not buy a new awesome theme?</p>
          </a>
         </li>
         <!-- end message -->
        </ul>
        <!-- /.menu -->
       </li>
       <li class="footer"><a href="#">See All Messages</a></li>
      </ul>
     </li>
     <!-- /.messages-menu -->

     <!-- Notifications Menu -->
     <li class="dropdown notifications-menu">
      <!-- Menu toggle button -->
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-bell-o"></i>
       <span class="label label-warning">10</span>
      </a>
      <ul class="dropdown-menu">
       <li class="header">You have 10 notifications</li>
       <li>
        <!-- Inner Menu: contains the notifications -->
        <ul class="menu">
         <li><!-- start notification -->
          <a href="#">
           <i class="fa fa-users text-aqua"></i> 5 new members joined today
          </a>
         </li>
         <!-- end notification -->
        </ul>
       </li>
       <li class="footer"><a href="#">View all</a></li>
      </ul>
     </li>
     <!-- Tasks Menu -->
     <li class="dropdown tasks-menu">
      <!-- Menu Toggle Button -->
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-flag-o"></i>
       <span class="label label-danger">9</span>
      </a>
      <ul class="dropdown-menu">
       <li class="header">You have 9 tasks</li>
       <li>
        <!-- Inner menu: contains the tasks -->
        <ul class="menu">
         <li><!-- Task item -->
          <a href="#">
           <!-- Task title and progress text -->
           <h3>
            Design some buttons
            <small class="pull-right">20%</small>
           </h3>
           <!-- The progress bar -->
           <div class="progress xs">
            <!-- Change the css width attribute to simulate progress -->
            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">20% Complete</span>
            </div>
           </div>
          </a>
         </li>
         <!-- end task item -->
        </ul>
       </li>
       <li class="footer">
        <a href="#">View all tasks</a>
       </li>
      </ul>
     </li>
     <!-- User Account Menu -->
     <li class="dropdown user user-menu">
      <!-- Menu Toggle Button -->
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <!-- The user image in the navbar-->
       <img src="{{URL::asset('bower_components/admin-lte/dist/img/user2-160x160.jpg')}}" class="user-image" alt="User Image">
       <!-- hidden-xs hides the username on small devices so only the image appears. -->
       <span class="hidden-xs">Alexander Pierce</span>
      </a>
      <ul class="dropdown-menu">
       <!-- The user image in the menu -->
       <li class="user-header">
        <img src="{{URL::asset('bower_components/admin-lte/dist/img/user2-160x160.jpg')}}" class="img-circle" alt="User Image">

        <p>
         Alexander Pierce - Web Developer
         <small>Member since Nov. 2012</small>
        </p>
       </li>
       <!-- Menu Body -->
       <li class="user-body">
        <div class="row">
         <div class="col-xs-4 text-center">
          <a href="#">Followers</a>
         </div>
         <div class="col-xs-4 text-center">
          <a href="#">Sales</a>
         </div>
         <div class="col-xs-4 text-center">
          <a href="#">Friends</a>
         </div>
        </div>
        <!-- /.row -->
       </li>
       <!-- Menu Footer-->
       <li class="user-footer">
        <div class="pull-left">
         <a href="#" class="btn btn-default btn-flat">Profile</a>
        </div>
        <div class="pull-right">
         <a href="#" class="btn btn-default btn-flat">Sign out</a>
        </div>
       </li>
      </ul>
     </li>
     <!-- Control Sidebar Toggle Button -->
     <li>
      <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
     </li>
    </ul>
   </div>
  </nav>
 </header>
 <!-- Left side column. contains the logo and sidebar -->
 <aside class="main-sidebar">

  <!-- sidebar: style can be found in sidebar.less -->
  <section class="sidebar">

   <!-- Sidebar user panel (optional) -->
   <div class="user-panel">
    <div class="pull-left image">
     <img src="{{URL::asset('bower_components/admin-lte/dist/img/user2-160x160.jpg')}}" class="img-circle" alt="User Image">
    </div>
    <div class="pull-left info">
     <p>Alexander Pierce</p>
     <!-- Status -->
     <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
    </div>
   </div>

   <!-- search form (Optional) -->
   <form action="#" method="get" class="sidebar-form">
    <div class="input-group">
     <input type="text" name="q" class="form-control" placeholder="Search...">
     <span class="input-group-btn">
              <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
              </button>
            </span>
    </div>
   </form>
   <!-- /.search form -->

   <!-- Sidebar Menu -->
   <ul class="sidebar-menu" data-widget="tree">
    <li class="header">HEADER</li>
    <!-- Optionally, you can add icons to the links -->
    <li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
    <li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
    <li class="treeview">
     <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
      <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
     </a>
     <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
     </ul>
    </li>
   </ul>
   <!-- /.sidebar-menu -->
  </section>
  <!-- /.sidebar -->
 </aside>

 <!-- Content Wrapper. Contains page content -->
 <div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
   <h1>
    Page Header
    <small>Optional description</small>
   </h1>
   <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
    <li class="active">Here</li>
   </ol>
  </section>

  <!-- Main content -->
  <section class="content container-fluid">

   <!--------------------------
    | Your Page Content Here |
    -------------------------->

  </section>
  <!-- /.content -->
 </div>
 <!-- /.content-wrapper -->

 <!-- Main Footer -->
 <footer class="main-footer">
  <!-- To the right -->
  <div class="pull-right hidden-xs">
   Anything you want
  </div>
  <!-- Default to the left -->
  <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
 </footer>

 <!-- Control Sidebar -->
 <aside class="control-sidebar control-sidebar-dark">
  <!-- Create the tabs -->
  <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
   <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
   <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
   <!-- Home tab content -->
   <div class="tab-pane active" id="control-sidebar-home-tab">
    <h3 class="control-sidebar-heading">Recent Activity</h3>
    <ul class="control-sidebar-menu">
     <li>
      <a href="javascript:;">
       <i class="menu-icon fa fa-birthday-cake bg-red"></i>

       <div class="menu-info">
        <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

        <p>Will be 23 on April 24th</p>
       </div>
      </a>
     </li>
    </ul>
    <!-- /.control-sidebar-menu -->

    <h3 class="control-sidebar-heading">Tasks Progress</h3>
    <ul class="control-sidebar-menu">
     <li>
      <a href="javascript:;">
       <h4 class="control-sidebar-subheading">
        Custom Template Design
        <span class="pull-right-container">
                    <span class="label label-danger pull-right">70%</span>
                  </span>
       </h4>

       <div class="progress progress-xxs">
        <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
       </div>
      </a>
     </li>
    </ul>
    <!-- /.control-sidebar-menu -->

   </div>
   <!-- /.tab-pane -->
   <!-- Stats tab content -->
   <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
   <!-- /.tab-pane -->
   <!-- Settings tab content -->
   <div class="tab-pane" id="control-sidebar-settings-tab">
    <form method="post">
     <h3 class="control-sidebar-heading">General Settings</h3>

     <div class="form-group">
      <label class="control-sidebar-subheading">
       Report panel usage
       <input type="checkbox" class="pull-right" checked>
      </label>

      <p>
       Some information about this general settings option
      </p>
     </div>
     <!-- /.form-group -->
    </form>
   </div>
   <!-- /.tab-pane -->
  </div>
 </aside>
 <!-- /.control-sidebar -->
 <!-- Add the sidebar's background. This div must be placed
 immediately after the control sidebar -->
 <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="{{URL::asset('bower_components/jquery/dist/jquery.js')}}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{URL::asset('bower_components/bootstrap/dist/js/bootstrap.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{URL::asset('bower_components/admin-lte/dist/js/adminlte.js')}}"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>
</html>

4、浏览器运行会出现如下界面；

WX20181121-155144@2x.png

第四步：拆分相应的页面结构，更适合我们在项目中使用；

1、在 resources/views 目录下新建 layouts 目录，然后在 layouts 目录里新建三个文件 sidebar.blade.php，header.blade.php 和 footer.blade.php；

header.blade.php 代码如下：

<!-- Main Header -->
<header class="main-header">

 <!-- Logo -->
 <a href="index2.html" class="logo">
  <!-- mini logo for sidebar mini 50x50 pixels -->
  <span class="logo-mini"><b>A</b>LT</span>
  <!-- logo for regular state and mobile devices -->
  <span class="logo-lg"><b>Admin</b>LTE</span>
 </a>

 <!-- Header Navbar -->
 <nav class="navbar navbar-static-top" role="navigation">
  <!-- Sidebar toggle button-->
  <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
   <span class="sr-only">Toggle navigation</span>
  </a>
  <!-- Navbar Right Menu -->
  <div class="navbar-custom-menu">
   <ul class="nav navbar-nav">
    <!-- Messages: style can be found in dropdown.less-->
    <li class="dropdown messages-menu">
     <!-- Menu toggle button -->
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-envelope-o"></i>
      <span class="label label-success">4</span>
     </a>
     <ul class="dropdown-menu">
      <li class="header">You have 4 messages</li>
      <li>
       <!-- inner menu: contains the messages -->
       <ul class="menu">
        <li><!-- start message -->
         <a href="#">
          <div class="pull-left">
           <!-- User Image -->
           <img src="{{URL::asset('bower_components/admin-lte/dist/img/user2-160x160.jpg')}}" class="img-circle" alt="User Image">
          </div>
          <!-- Message title and timestamp -->
          <h4>
           Support Team
           <small><i class="fa fa-clock-o"></i> 5 mins</small>
          </h4>
          <!-- The message -->
          <p>Why not buy a new awesome theme?</p>
         </a>
        </li>
        <!-- end message -->
       </ul>
       <!-- /.menu -->
      </li>
      <li class="footer"><a href="#">See All Messages</a></li>
     </ul>
    </li>
    <!-- /.messages-menu -->

    <!-- Notifications Menu -->
    <li class="dropdown notifications-menu">
     <!-- Menu toggle button -->
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-bell-o"></i>
      <span class="label label-warning">10</span>
     </a>
     <ul class="dropdown-menu">
      <li class="header">You have 10 notifications</li>
      <li>
       <!-- Inner Menu: contains the notifications -->
       <ul class="menu">
        <li><!-- start notification -->
         <a href="#">
          <i class="fa fa-users text-aqua"></i> 5 new members joined today
         </a>
        </li>
        <!-- end notification -->
       </ul>
      </li>
      <li class="footer"><a href="#">View all</a></li>
     </ul>
    </li>
    <!-- Tasks Menu -->
    <li class="dropdown tasks-menu">
     <!-- Menu Toggle Button -->
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-flag-o"></i>
      <span class="label label-danger">9</span>
     </a>
     <ul class="dropdown-menu">
      <li class="header">You have 9 tasks</li>
      <li>
       <!-- Inner menu: contains the tasks -->
       <ul class="menu">
        <li><!-- Task item -->
         <a href="#">
          <!-- Task title and progress text -->
          <h3>
           Design some buttons
           <small class="pull-right">20%</small>
          </h3>
          <!-- The progress bar -->
          <div class="progress xs">
           <!-- Change the css width attribute to simulate progress -->
           <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">20% Complete</span>
           </div>
          </div>
         </a>
        </li>
        <!-- end task item -->
       </ul>
      </li>
      <li class="footer">
       <a href="#">View all tasks</a>
      </li>
     </ul>
    </li>
    <!-- User Account Menu -->
    <li class="dropdown user user-menu">
     <!-- Menu Toggle Button -->
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <!-- The user image in the navbar-->
      <img src="{{URL::asset('bower_components/admin-lte/dist/img/user2-160x160.jpg')}}" class="user-image" alt="User Image">
      <!-- hidden-xs hides the username on small devices so only the image appears. -->
      <span class="hidden-xs">Alexander Pierce</span>
     </a>
     <ul class="dropdown-menu">
      <!-- The user image in the menu -->
      <li class="user-header">
       <img src="{{URL::asset('bower_components/admin-lte/dist/img/user2-160x160.jpg')}}" class="img-circle" alt="User Image">

       <p>
        Alexander Pierce - Web Developer
        <small>Member since Nov. 2012</small>
       </p>
      </li>
      <!-- Menu Body -->
      <li class="user-body">
       <div class="row">
        <div class="col-xs-4 text-center">
         <a href="#">Followers</a>
        </div>
        <div class="col-xs-4 text-center">
         <a href="#">Sales</a>
        </div>
        <div class="col-xs-4 text-center">
         <a href="#">Friends</a>
        </div>
       </div>
       <!-- /.row -->
      </li>
      <!-- Menu Footer-->
      <li class="user-footer">
       <div class="pull-left">
        <a href="#" class="btn btn-default btn-flat">Profile</a>
       </div>
       <div class="pull-right">
        <a href="#" class="btn btn-default btn-flat">Sign out</a>
       </div>
      </li>
     </ul>
    </li>
    <!-- Control Sidebar Toggle Button -->
    <li>
     <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
    </li>
   </ul>
  </div>
 </nav>
</header>

sidebar.blade.php 代码如下：

<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">

 <!-- sidebar: style can be found in sidebar.less -->
 <section class="sidebar">

  <!-- Sidebar user panel (optional) -->
  <div class="user-panel">
   <div class="pull-left image">
    <img src="{{URL::asset('bower_components/admin-lte/dist/img/user2-160x160.jpg')}}" class="img-circle" alt="User Image">
   </div>
   <div class="pull-left info">
    <p>Alexander Pierce</p>
    <!-- Status -->
    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
   </div>
  </div>

  <!-- search form (Optional) -->
  <form action="#" method="get" class="sidebar-form">
   <div class="input-group">
    <input type="text" name="q" class="form-control" placeholder="Search...">
    <span class="input-group-btn">
              <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
              </button>
            </span>
   </div>
  </form>
  <!-- /.search form -->

  <!-- Sidebar Menu -->
  <ul class="sidebar-menu" data-widget="tree">
   <li class="header">HEADER</li>
   <!-- Optionally, you can add icons to the links -->
   <li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
   <li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
   <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
     <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
    </a>
    <ul class="treeview-menu">
     <li><a href="#">Link in level 2</a></li>
     <li><a href="#">Link in level 2</a></li>
    </ul>
   </li>
  </ul>
  <!-- /.sidebar-menu -->
 </section>
 <!-- /.sidebar -->
</aside>

footer.blade.php 代码如下：

<!-- Main Footer -->
<footer class="main-footer">
 <!-- To the right -->
 <div class="pull-right hidden-xs">
  Anything you want
 </div>
 <!-- Default to the left -->
 <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
</footer>

2、拆出 sidebar.blade.php，header.blade.php 和 footer.blade.php 方便我们自定义使用，现在我们还需要改造 admin_template.blade.php 文件，在 admin_template.blade.php @include('layouts.header')，@include('layouts.sidebar')，@include('layouts.footer')，@yield('content') 等，详情请参阅代码；

admin_template.blade.php 代码如下：

<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>{{ $page_title or "AdminLTE Dashboard" }}</title>
 <!-- Tell the browser to be responsive to screen width -->
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <link rel="stylesheet" href="{{URL::asset('bower_components/bootstrap/dist/css/bootstrap.css')}}">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="{{URL::asset('bower_components/font-awesome/css/font-awesome.css')}}">
 <!-- Ionicons -->
 <link rel="stylesheet" href="{{URL::asset('bower_components/Ionicons/css/ionicons.css')}}">
 <!-- Theme style -->
 <link rel="stylesheet" href="{{URL::asset('bower_components/admin-lte/dist/css/AdminLTE.css')}}">
 <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
   page. However, you can choose any other skin. Make sure you
   apply the skin class to the body tag so the changes take effect. -->
 <link rel="stylesheet" href="{{URL::asset('bower_components/admin-lte/dist/css/skins/skin-blue.css')}}">

 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->

 <!-- Google Font -->
 <link rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

@include('layouts.header')

@include('layouts.sidebar')

<!-- Content Wrapper. Contains page content -->
 <div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
   <h1>
    {{ $page_title or "Page Title" }}
    <small>{{ $page_description or null }}</small>
   </h1>
   <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
    <li class="active">Here</li>
   </ol>
  </section>

  <!-- Main content -->
  <section class="content container-fluid">

   @yield('content')

  </section>
  <!-- /.content -->
 </div>
 <!-- /.content-wrapper -->

 <!-- Main Footer -->
@include('layouts.footer')

<!-- Control Sidebar -->
 <aside class="control-sidebar control-sidebar-dark">
  <!-- Create the tabs -->
  <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
   <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
   <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
   <!-- Home tab content -->
   <div class="tab-pane active" id="control-sidebar-home-tab">
    <h3 class="control-sidebar-heading">Recent Activity</h3>
    <ul class="control-sidebar-menu">
     <li>
      <a href="javascript:;">
       <i class="menu-icon fa fa-birthday-cake bg-red"></i>

       <div class="menu-info">
        <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

        <p>Will be 23 on April 24th</p>
       </div>
      </a>
     </li>
    </ul>
    <!-- /.control-sidebar-menu -->

    <h3 class="control-sidebar-heading">Tasks Progress</h3>
    <ul class="control-sidebar-menu">
     <li>
      <a href="javascript:;">
       <h4 class="control-sidebar-subheading">
        Custom Template Design
        <span class="pull-right-container">
                    <span class="label label-danger pull-right">70%</span>
                  </span>
       </h4>

       <div class="progress progress-xxs">
        <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
       </div>
      </a>
     </li>
    </ul>
    <!-- /.control-sidebar-menu -->

   </div>
   <!-- /.tab-pane -->
   <!-- Stats tab content -->
   <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
   <!-- /.tab-pane -->
   <!-- Settings tab content -->
   <div class="tab-pane" id="control-sidebar-settings-tab">
    <form method="post">
     <h3 class="control-sidebar-heading">General Settings</h3>

     <div class="form-group">
      <label class="control-sidebar-subheading">
       Report panel usage
       <input type="checkbox" class="pull-right" checked>
      </label>

      <p>
       Some information about this general settings option
      </p>
     </div>
     <!-- /.form-group -->
    </form>
   </div>
   <!-- /.tab-pane -->
  </div>
 </aside>
 <!-- /.control-sidebar -->
 <!-- Add the sidebar's background. This div must be placed
 immediately after the control sidebar -->
 <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="{{URL::asset('bower_components/jquery/dist/jquery.js')}}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{URL::asset('bower_components/bootstrap/dist/js/bootstrap.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{URL::asset('bower_components/admin-lte/dist/js/adminlte.js')}}"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>
</html>

第五步：完成最后准备；

1、在 resources/views 目录里，新建 test.blade.php 文件；并添加如下代码：

@extends('admin_template')

@section('content')
 <div class='row'>
  <div class='col-md-6'>
   <!-- Box -->
   <div class="box box-primary">
    <div class="box-header with-border">
     <h3 class="box-title">Randomly Generated Tasks</h3>
     <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
     </div>
    </div>
    <div class="box-body">
     @foreach($tasks as $task)
      <h5>
       {{ $task['name'] }}
       <small class="label label-{{$task['color']}} pull-right">{{$task['progress']}}%</small>
      </h5>
      <div class="progress progress-xxs">
       <div class="progress-bar progress-bar-{{$task['color']}}" style="width: {{$task['progress']}}%"></div>
      </div>
     @endforeach

    </div><!-- /.box-body -->
    <div class="box-footer">
     <form action='#'>
      <input type='text' placeholder='New task' class='form-control input-sm' />
     </form>
    </div><!-- /.box-footer-->
   </div><!-- /.box -->
  </div><!-- /.col -->
  <div class='col-md-6'>
   <!-- Box -->
   <div class="box box-primary">
    <div class="box-header with-border">
     <h3 class="box-title">Second Box</h3>
     <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
     </div>
    </div>
    <div class="box-body">
     A separate section to add any kind of widget. Feel free
     to explore all of AdminLTE widgets by visiting the demo page
     on <a href="https://almsaeedstudio.com">Almsaeed Studio</a>.
    </div><!-- /.box-body -->
   </div><!-- /.box -->
  </div><!-- /.col -->

 </div><!-- /.row -->
@endsection

2、使用 php artisan make:controller TestController 命令，新建一个控制器，代码如下；(如果提示有如下画面的错误时：

WX20181121-155328@2x.png

那是说明PHP版本不够高，请自行解决PHP版本的问题。
)

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class TestController extends Controller {

 public function index()
 {
  $data['tasks'] = [
   [
    'name'     => 'Design New Dashboard',
    'progress' => '87',
    'color'    => 'danger',
   ],
   [
    'name'     => 'Create Home Page',
    'progress' => '76',
    'color'    => 'warning',
   ],
   [
    'name'     => 'Some Other Task',
    'progress' => '32',
    'color'    => 'success',
   ],
   [
    'name'     => 'Start Building Website',
    'progress' => '56',
    'color'    => 'info',
   ],
   [
    'name'     => 'Develop an Awesome Algorithm',
    'progress' => '10',
    'color'    => 'success',
   ],
  ];
  return view('test')->with($data);
 }
}

3、在 routes/web.php 里新增加一条路由，如下：

Route::get('test', 'TestController@index');

4、然后在浏览器里访问。将会出现如下界面；

image

在Laravel(5.5.*) 里融合 AdminLTE (2.4.8) [纯干货]

在Laravel(5.5.*) 里融合 AdminLTE (2.4.8) [纯干货]

第一步：下载Laravel(5.5.*)PHP框架：

第二步：如果成功运行，输入如下命令：

第三步：将AdminLTE 里的 starter.html 转换为 Laravel 的 Blade 模板文件。

第四步：拆分相应的页面结构，更适合我们在项目中使用；

第五步：完成最后准备；

大功告成

推荐阅读更多精彩内容