首页 / PHP / 在Laravel5.*中使用AdminLTE

在Laravel5.*中使用AdminLTE

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在Laravel5.*中使用AdminLTE，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5241字，纯文字阅读大概需要8分钟。

内容图文

在Laravel5.* 中使用 AdminLTE

AdminLTE是一个很棒的单纯的由 HTML 和 CSS 构建的后台模板，在这片文章中，我将讲述如何将 AdminLTE 和 Laravel 优雅的整合在一起，而且我们可以通过 Bower 来及时的更新和管理 AdminLTE。

我们使用的工具

  • Laravel

  • AdminLTE 2.3.2

  • Bower

  • Composer

    • 下载一个全新的 Laravel

    如果不太清楚可以去官方网站查看文档link
    在此我们直接使用命令行即可

        composer create-project laravel/laravel myapp --prefer-dist

    通过这个命令我们创建了一个全新的名字为 myapp 的Laravel项目，如果你成功的话你可以看到下面的图片

    通过 Bower 下载 AdminLTE

    进入到 myapp/public 文件夹

            cd myapp/public

    在这个文件夹下执行下面的命令

        bower install admin-lte

    一旦完成，你会发现多了一个 bower_componets 的文件夹，而且在这个文件夹中你会看到 AdminLTE

    将 AdminLTE 的starter.html 转化为 Blade 模板

    Laravel 在此使用了一个很好的模板引擎 Blade，为了更充分的利用Blade，我们需要将一些常规的通用的 HTML 的 起始页面应用到 Blade 模板中，首先创建一个 view 在 resources/views文件夹中，命名为admin_template.blade.php，而后我们为这个页面创建一个对应的路由。如下面我所创建的

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

    然后，将bower_components/admin-lte/starter.html中的内容复制到我们视图模板中，并且将其中的相关链接指向我们的 AdminLTE 的对应目录下，如下是我初步的设置：

    类似这样，将css 和 js 的相关的链接指向相应的目录下，而后我们通过 localhost:8000/admin 查看页面的变化，此时页面变成了如下图：

    现在我们拥有了所有的使用 AdminLTE 的所有的资源，下面对我们的主要视图增加最后的收尾工作，我将分开这个模板为三个文件，sidebar.blade.php, header.blade.php, 和 footer.blade.php
    这三个文件的内容分别是admin_template.blade.phpheader 部分和 aside 部分和footer 部分，将这三部分截取出来依次放到三个文件中。

    最后的润色工作

    现在我们已经将我们的模板个性化的分离开了，下面我们需要设置我们的最初的admin_template.blade.php
    模板以便于内容动态加载，如下所示：

    head>{{ $page_title or "AdminLTE Dashboard" }}@include('header')@include('sidebar')        
            
                {{ $page_title or "Page Title" }}            {{ $page_description or null }}        
                    
                  
    1.  Level
      2.             
    2. Here
      3.         
        
            
                    @yield('content')    
    @include('footer')
        
      •   
            
    Recent Activity
        
            
    •                                         
      Langdon's Birthday
                  
      Will be 23 on April 24th
                              
      •     
            
    Tasks Progress
        
            
    •                   
                  Custom Template Design            70%          
                                                    
      •     
                Stats Tab Content

    在上面代码中，我们添加了contetn，这里包含着我们的主要的内容，增加了页面标题针对不同的页面，将其重命名为dashboard.blade.php现在这个模板已经可以使用了。

    测试页面

    为了验证我们之前所做的工作，我将创建一个简单的页面

    1.创建 test.blade.php

    @extends('dashboard')@section('content')                                                
    Randomly Generated Tasks
                                                                                                                    @foreach($tasks as $task)                    
                            {{ $task['name'] }}                        {{$task['progress']}}%                    
                                                                                    @endforeach                                                                                                                
    Second Box
                                                                                                                    A separate section to add any kind of widget. Feel free                to explore all of AdminLTE widgets by visiting the demo page                on Almsaeed Studio.                        @endsection

    2.创建TestController.php

        php artisan make:controller TestController --plain

    下面是这个控制器的代码部分：

            <?php        namespace App\Http\Controllers;        use Illuminate\Http\Request;        use App\Http\Requests;        use App\Http\Controllers\Controller;        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.创建对应的路由

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

    4.打开对应的页面，如果你没有出错的 应该如下图所示

    这样整个过程就完成了，当然有什么问题可以下面留言。

    内容总结

    以上是互联网集市为您收集整理的在Laravel5.*中使用AdminLTE全部内容，希望文章能够帮你解决在Laravel5.*中使用AdminLTE所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

    内容备注

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

    内容手机端

    扫描二维码推送至手机访问。

    本文链接：https://qyyshop.com/info/207116.html

    来源：【匿名】