目录
在Laravel5.* 中使用 AdminLTE
我们使用的工具
下载一个全新的 Laravel
通过 Bower 下载 AdminLTE
将 AdminLTE 的starter.html 转化为 Blade 模板
最后的润色工作
{{ $page_description or null }} " > {{ $page_title or "Page Title" }} {{ $page_description or null }}
测试页面
Randomly Generated Tasks
{{$task['progress']}}% " > {{ $task['name'] }} {{$task['progress']}}%
Second Box
首页 后端开发 php教程 在Laravel5. 中使用 AdminLTE

在Laravel5. 中使用 AdminLTE

Jun 13, 2016 pm 12:26 PM
class gt lt quot

在Laravel5.* 中使用 AdminLTE

image

在Laravel5.* 中使用 AdminLTE

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

我们使用的工具

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

下载一个全新的 Laravel

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

<code>    composer create-project laravel/laravel myapp --prefer-dist</code>
登录后复制

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

通过 Bower 下载 AdminLTE

进入到 myapp/public 文件夹

<code>   cd myapp/public</code>
登录后复制

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

<code>    bower install admin-lte </code>
登录后复制

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

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

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

<code>    Route::get(&#39;admin&#39;, function () {        return view(&#39;admin_template&#39;);    });    </code>
登录后复制

然后,将bower_components/admin-lte/starter.html中的内容复制到我们视图模板中,并且将其中的相关链接指向我们的 AdminLTE 的对应目录下
css 和 js 的相关的链接指向相应的目录下,而后我们通过 localhost:8000/admin 查看页面的变化,此时页面变成了如下图:
image

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

最后的润色工作

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

<code>@include(&#39;header&#39;)<!-- Sidebar -->@include(&#39;sidebar&#39;)<!-- Content Wrapper. Contains page content --><div class="content-wrapper">    <!-- Content Header (Page header) -->    <section class="content-header">        <h1 id="page-title-or-Page-Title-small-page-description-or-null-small">            {{ $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(&#39;content&#39;)    </section><!-- /.content --></div><!-- /.content-wrapper --><!-- Footer -->@include(&#39;footer&#39;)</code>
登录后复制

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

测试页面

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

1.创建 test.blade.php

<code>@extends(&#39;dashboard&#39;)@section(&#39;content&#39;)<div class=&#39;row&#39;>    <div class=&#39;col-md-6&#39;>        <!-- Box -->        <div class="box box-primary">            <div class="box-header with-border">                <h3 id="Randomly-Generated-Tasks">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 id="task-name-small-class-label-label-task-color-pull-right-task-progress-small">                        {{ $task[&#39;name&#39;] }}                        <small class="label label-{{$task[&#39;color&#39;]}} pull-right">{{$task[&#39;progress&#39;]}}%</small>                    </h5>                    <div class="progress progress-xxs">                        <div class="progress-bar progress-bar-{{$task[&#39;color&#39;]}}"   style="max-width:90%"></div>                    </div>                @endforeach            </div><!-- /.box-body -->            <div class="box-footer">                <form action=&#39;#&#39;>                    <input type=&#39;text&#39; placeholder=&#39;New task&#39; class=&#39;form-control input-sm&#39; />                </form>            </div><!-- /.box-footer-->        </div><!-- /.box -->    </div><!-- /.col -->    <div class=&#39;col-md-6&#39;>        <!-- Box -->        <div class="box box-primary">            <div class="box-header with-border">                <h3 id="Second-Box">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</code>
登录后复制

2.创建TestController.php

<code>    php artisan make:controller TestController --plain</code>
登录后复制

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

<code>        <?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[&#39;tasks&#39;] = [                        [                            &#39;name&#39; => &#39;Design New Dashboard&#39;,                            &#39;progress&#39; => &#39;87&#39;,                            &#39;color&#39; => &#39;danger&#39;                        ],                        [                            &#39;name&#39; => &#39;Create Home Page&#39;,                            &#39;progress&#39; => &#39;76&#39;,                            &#39;color&#39; => &#39;warning&#39;                        ],                        [                            &#39;name&#39; => &#39;Some Other Task&#39;,                            &#39;progress&#39; => &#39;32&#39;,                            &#39;color&#39; => &#39;success&#39;                        ],                        [                            &#39;name&#39; => &#39;Start Building Website&#39;,                            &#39;progress&#39; => &#39;56&#39;,                            &#39;color&#39; => &#39;info&#39;                        ],                        [                            &#39;name&#39; => &#39;Develop an Awesome Algorithm&#39;,                            &#39;progress&#39; => &#39;10&#39;,                            &#39;color&#39; => &#39;success&#39;                        ]                ];                return view(&#39;test&#39;)->with($data);            }        }        </code>
登录后复制

3.创建对应的路由

<code>    Route::get(&#39;test&#39;, &#39;[email&#160;protected]&#39;);</code>
登录后复制

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

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

华为GT3 Pro和GT4的差异是什么? 华为GT3 Pro和GT4的差异是什么? Dec 29, 2023 pm 02:27 PM

华为GT3 Pro和GT4的差异是什么?

Python中的class类和method方法的使用方法 Python中的class类和method方法的使用方法 Apr 21, 2023 pm 02:28 PM

Python中的class类和method方法的使用方法

修复:截图工具在 Windows 11 中不起作用 修复:截图工具在 Windows 11 中不起作用 Aug 24, 2023 am 09:48 AM

修复:截图工具在 Windows 11 中不起作用

使用jQuery替换元素的class名称 使用jQuery替换元素的class名称 Feb 24, 2024 pm 11:03 PM

使用jQuery替换元素的class名称

如何修复无法连接到iPhone上的App Store错误 如何修复无法连接到iPhone上的App Store错误 Jul 29, 2023 am 08:22 AM

如何修复无法连接到iPhone上的App Store错误

python中class是什么意思 python中class是什么意思 May 21, 2019 pm 05:10 PM

python中class是什么意思

SpringBoot怎么通过自定义classloader加密保护class文件 SpringBoot怎么通过自定义classloader加密保护class文件 May 11, 2023 pm 09:07 PM

SpringBoot怎么通过自定义classloader加密保护class文件

java的预定义Class对象的方法 java的预定义Class对象的方法 Jul 01, 2023 pm 06:41 PM

java的预定义Class对象的方法

See all articles