《：PHP的Laravel框架中使用adminLTE模板来编写网站后台界面》要点：
本文介绍了：PHP的Laravel框架中使用adminLTE模板来编写网站后台界面，希望对您有用。如果有疑问，可以联系我们。
PHP学习adminLTE 是一个基于bootstrap 3.x的免费高级管理控制面板主题,完全响应式管理,适合从小型移动设备到年夜型台式机很多的屏幕分辨率.
adminLTE的特色：
我们使用的工具
下载一个全新的 Laravel
如果不太清楚可以辞官方网站查看文档link
在此我们直接使用命令行即可
composer create-project laravel/laravel myapp --prefer-dist
通过这个命令我们创建了一个全新的名字为 myapp 的Laravel项目,如果你胜利的话你可以看到下面的图片
PHP进修
经由过程 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,而后我们为这个页面创建一个对应的路由.如下面我所创建的
PHP进修
Route::get('admin',function () { return vIEw('admin_template'); });然后,将bower_components/admin-lte/starter.HTML中的内容复制到我们视图模板中,而且将其中的相关链接指向我们的 adminLTE 的对应目录下,如下是我初步的设置：
<script src="{{ asset("/bower_components/adminLTE/plugins/jquery/jquery-2.1.4.min.Js")}}"></script><!-- bootstrap 3.3.5 --><script src="{{ asset("/bower_components/adminLTE/bootstrap/Js/bootstrap.min.Js")}}"></script><!-- adminLTE App --><script src="{{ asset("/bower_components/adminLTE/dist/Js/app.min.Js")}}"></script>类似这样,将CSS 和 Js 的相关的链接指向相应的目录下,而后我们通过 localhost:8000/admin 查看页面的变化,此时页面酿成了如下图：
PHP进修
现在我们拥有了所有的使用 adminLTE 的所有的资源,下面对我们的主要视图增加最后的收尾工作,我将分开这个模板为三个文件,sIDebar.blade.PHP,header.blade.PHP,和 footer.blade.PHP
这三个文件的内容分别是admin_template.blade.PHPheader 部门和 asIDe 部门和footer 部门,将这三部门截取出来依次放到三个文件中.
最后的润色工作
现在我们已经将我们的模板个性化的分离开了,下面我们必要设置我们的最初的admin_template.blade.PHP
模板以便于内容动态加载,如下所示：
<!DOCTYPE HTML><HTML>head><Meta charset="UTF-8"><Title>{{ $page_Title or "adminLTE Dashboard" }}</Title><Meta content='wIDth=device-wIDth,initial-scale=1,maximum-scale=1,user-scalable=no' name='vIEwport'><!-- bootstrap 3.3.2 --><link href="{{ asset("/bower_components/adminLTE/bootstrap/CSS/bootstrap.min.CSS") }}" rel="stylesheet" type="text/CSS" /><!-- Font Awesome Icons --><link href="https://maxcdn.bootstrapcdn.com/Font-awesome/4.3.0/CSS/Font-awesome.min.CSS" rel="stylesheet" type="text/CSS" /><!-- Ionicons --><link href="http://code.ionicframework.com/ionicons/2.0.0/CSS/ionicons.min.CSS" rel="stylesheet" type="text/CSS" /><!-- theme style --><link href="{{ asset("/bower_components/adminLTE/dist/CSS/adminLTE.min.CSS")}}" rel="stylesheet" type="text/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 href="{{ asset("/bower_components/adminLTE/dist/CSS/skins/skin-blue.min.CSS")}}" rel="stylesheet" type="text/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/libs/html5shiv/3.7.0/HTML5shiv.Js"></script><script src="https://oss.maxcdn.com/libs/respond.Js/1.3.0/respond.min.Js"></script><![endif]--></head><body ><div ><!-- header -->@include('header')<!-- SIDebar -->@include('sIDebar')<!-- Content Wrapper. Contains page content --><div > <!-- Content header (Page header) --> <section > <h1> {{ $page_Title or "Page Title" }} <small>{{ $page_description or null }}</small> </h1> <!-- You can dynamically generate breadcrumbs here --> <ol > <li><a href="#"><i ></i> Level</a></li> <li >Here</li> </ol> </section> <!-- Main content --> <section > <!-- Your Page Content Here --> @yIEld('content') </section><!-- /.content --></div><!-- /.content-wrapper --><!-- Footer -->@include('footer')<asIDe ><!-- Create the tabs --><ul > <li ><a href="#control-sIDebar-home-tab" data-toggle="tab"><i ></i></a></li> <li><a href="#control-sIDebar-settings-tab" data-toggle="tab"><i ></i></a></li></ul><!-- Tab panes --><div > <!-- Home tab content --> <div ID="control-sIDebar-home-tab"> <h3 >Recent Activity</h3> <ul > <li> <a href=":;"> <i ></i> <div > <h4 >Langdon's Birthday</h4> <p>Will be 23 on April 24th</p> </div> </a> </li> </ul> <!-- /.control-sIDebar-menu --> <h3 >Tasks Progress</h3> <ul > <li> <a href=":;"> <h4 > Custom Template Design <span >70%</span> </h4> <div > <div ></div> </div> </a> </li> </ul> <!-- /.control-sIDebar-menu --> </div> <!-- /.tab-pane --> <!-- Stats tab content --> <div ID="control-sIDebar-stats-tab">Stats Tab Content</div> <!-- /.tab-pane --> <!-- Settings tab content --> <div ID="control-sIDebar-settings-tab"> <form method="post"> <h3 >General Settings</h3> <div > <label > Report panel usage <input type="checkBox" 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 ></div></div><!-- ./wrapper --><!-- required Js SCRIPTS --><!-- jquery 2.1.3 --><script src="{{ asset ("/bower_components/adminLTE/plugins/jquery/jquery-2.1.3.min.Js") }}"></script><!-- bootstrap 3.3.2 Js --><script src="{{ asset ("/bower_components/adminLTE/bootstrap/Js/bootstrap.min.Js") }}" type="text/JavaScript"></script><!-- adminLTE App --><script src="{{ asset ("/bower_components/adminLTE/dist/Js/app.min.Js") }}" type="text/JavaScript"></script><!-- Optionally,you can add Slimscroll and FastClick plugins. Both of these plugins are recommended to enhance the user experIEnce --></body></HTML>在上面代码中,我们添加了contetn,这里包括着我们的主要的内容,增加了页面标题针对不同的页面,将其重命名为dashboard.blade.PHP现在这个模板已经可以使用了.
PHP进修测试页面
为了验证我们之前所做的工作,我将创立一个简单的页面
1.创立 test.blade.PHP
@extends('dashboard')@section('content')<div class='row'> <div class='col-md-6'> <!-- Box --> <div > <div > <h3 >Randomly Generated Tasks</h3> <div > <button data-Widget="collapse" data-toggle="tooltip" title="Collapse"><i ></i></button> <button data-Widget="remove" data-toggle="tooltip" title="Remove"><i ></i></button> </div> </div> <div > @foreach($tasks as $task) <h5> {{ $task['name'] }} <small >{{$task['progress']}}%</small> </h5> <div > <div ></div> </div> @endforeach </div><!-- /.Box-body --> <div > <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 > <div > <h3 >Second Box</h3> <div > <button data-Widget="collapse" data-toggle="tooltip" title="Collapse"><i ></i></button> <button data-Widget="remove" data-toggle="tooltip" title="Remove"><i ></i></button> </div> </div> <div > 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 -->@endsection2.创立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.打开对应的页面,如果你没有失足的 应该如下图所示
PHP进修
内存溢出培训学院每天发布《：PHP的Laravel框架中使用adminLTE模板来编写网站后台界面》等实战技能，PHP、MysqL、liNUX、APP、Js,CSS全面培养人才。
总结以上是内存溢出为你收集整理的PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面全部内容，希望文章能够帮你解决PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）