在Laravel5.* 中使用 AdminLTE

AdminLTE是一個(gè)很棒的單純的由 HTML 和 CSS 構(gòu)建的后臺(tái)模板，在這片文章中，我將講述如何將 AdminLTE 和 Laravel 優(yōu)雅的整合在一起，而且我們可以通過(guò) Bower 來(lái)及時(shí)的更新和管理 AdminLTE。

我們使用的工具

1. Laravel
2. AdminLTE 2.3.2
3. Bower
4. Composer

下載一個(gè)全新的 Laravel

如果不太清楚可以去官方網(wǎng)站查看文檔link在此我們直接使用命令行即可

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

通過(guò)這個(gè)命令我們創(chuàng)建了一個(gè)全新的名字為 myapp 的Laravel項(xiàng)目，如果你成功的話你可以看到下面的圖片

通過(guò) Bower 下載 AdminLTE

進(jìn)入到 myapp/public 文件夾

   cd myapp/public

在這個(gè)文件夾下執(zhí)行下面的命令

    bower install admin-lte 

一旦完成，你會(huì)發(fā)現(xiàn)多了一個(gè) bower_componets 的文件夾，而且在這個(gè)文件夾中你會(huì)看到 AdminLTE

將 AdminLTE 的starter.html 轉(zhuǎn)化為 Blade 模板

Laravel 在此使用了一個(gè)很好的模板引擎 Blade，為了更充分的利用Blade，我們需要將一些常規(guī)的通用的 HTML 的 起始頁(yè)面應(yīng)用到 Blade 模板中，首先創(chuàng)建一個(gè) view 在 resources/views文件夾中，命名為admin_template.blade.php，而后我們?yōu)檫@個(gè)頁(yè)面創(chuàng)建一個(gè)對(duì)應(yīng)的路由。如下面我所創(chuàng)建的

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

然后，將bower_components/admin-lte/starter.html中的內(nèi)容復(fù)制到我們視圖模板中，并且將其中的相關(guān)鏈接指向我們的 AdminLTE 的對(duì)應(yīng)目錄下css 和 js 的相關(guān)的鏈接指向相應(yīng)的目錄下，而后我們通過(guò) localhost:8000/admin 查看頁(yè)面的變化，此時(shí)頁(yè)面變成了如下圖：

現(xiàn)在我們擁有了所有的使用 AdminLTE 的所有的資源，下面對(duì)我們的主要視圖增加最后的收尾工作，我將分開這個(gè)模板為三個(gè)文件，sidebar.blade.php, header.blade.php, 和 footer.blade.php這三個(gè)文件的內(nèi)容分別是admin_template.blade.phpheader 部分和 aside 部分和footer 部分，將這三部分截取出來(lái)依次放到三個(gè)文件中。

最后的潤(rùn)色工作

現(xiàn)在我們已經(jīng)將我們的模板個(gè)性化的分離開了，下面我們需要設(shè)置我們的最初的admin_template.blade.php模板以便于內(nèi)容動(dòng)態(tài)加載，如下所示：

@include('header')<!-- Sidebar -->@include('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>        <!-- You can dynamically generate breadcrumbs here -->        <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">        <!-- Your Page Content Here -->        @yield('content')    </section><!-- /.content --></div><!-- /.content-wrapper --><!-- Footer -->@include('footer')

在上面代碼中，我們添加了contetn，這里包含著我們的主要的內(nèi)容，增加了頁(yè)面標(biāo)題針對(duì)不同的頁(yè)面，將其重命名為dashboard.blade.php現(xiàn)在這個(gè)定Blade布局已經(jīng)可以使用了。

測(cè)試頁(yè)面

為了驗(yàn)證我們之前所做的工作，我將創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面

1.創(chuàng)建 test.blade.php

@extends('dashboard')@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.創(chuàng)建TestController.php

    php artisan make:controller TestController --plain

下面是這個(gè)控制器的代碼部分：

        <?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.創(chuàng)建對(duì)應(yīng)的路由

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

4.打開對(duì)應(yīng)的頁(yè)面，如果你沒(méi)有出錯(cuò)的 應(yīng)該如下圖所示

這樣整個(gè)過(guò)程就完成了，當(dāng)然有什么問(wèn)題可以下面留言。