PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面

2024-09-27 16:47:59

AdminLTE 是一个基于Bootstrap 3.x的免费高级管理控制面板主题，完全响应式管理，适合从小型移动设备到大型台式机很多的屏幕分辨率。

AdminLTE的特点：

充分响应
可分类的仪表盘
18插件和3自定义插件
重量轻和快速
与大多数主流浏览器兼容
完全支持Glyphicons,Fontawesome和图标

我们使用的工具

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 的对应目录下，如下是我初步的设置：

<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 查看页面的变化，此时页面变成了如下图：

现在我们拥有了所有的使用 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 class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

<!-- Header -->
@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')
<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="label label-danger pull-right">70%</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 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现在这个模板已经可以使用了。

测试页面

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

1.创建 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.创建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

目录结构变化 laravel5最先强调的是项目目录结构的变化,与4.2区别还是蛮大的,逐条来说吧. 新的目录结构看上去像这样: app Commands Console Events Handlers Commands Events Http Controllers Middleware Requests Kernel.php routes.ph
Laravel5权限管理方法详解

本文实例讲述了Laravel5权限管理的实现方法.分享给大家供大家参考,具体如下: 关于权限管理的思考最近用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认证部分非常好做,就是管理员登录,记录session.这个laravel中也有自带Auth来实现这个.最麻烦就是权限认证. 权限认证本质上就是谁有权限管理什么东西.这里有两个方面的维度,谁,就是用户维度,在用户维度,权限管理的粒度可以是用户一个人,也可以是将用户分组,如果将用户分组,则涉及到
Laravel实现用户注册和登录

Laravel身为最优雅的PHP框架,很多学习PHP的小伙伴造就对Laravel垂涎欲滴.今天就来实现你的愿望,让我们一起从零开始,利用Laravel实现Web应用最常见的注册和登录功能!所有的课程源码已放在Github上:laravel-start. Race Start ! 首先我们来明确一下我们这个课程需要的东西: Laravel 4.2 Bootstrap 3.3 Laravel就是我们关心的核心部分,Bootstrap用来快速设置一些前端的CSS样式. 1.安装Laravel 简单说明
SSO单点登录的PHP实现方法（Laravel框架）

Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力. 简单说一下我的逻辑,我也不知道我理解sso对不对. 假如三个站点 a.baidu.com b.baidu.com c.baidu.com a.baidu.com 作为验证用户登录账户. b和c作为客户端(子系统). b和c需要登录的时候跳转到a,并且携带参数source指明登陆后跳转的链接
Laravel5中contracts详解

我们先来看看官方文档中对contracts的定义: Laravel's Contracts are a set of interfaces that define the core services provided by the framework. 意思是说Laravel的Contracts是一个由框架提供的定义了核心服务接口的集合. 也就是说,每一个Contract都是一个接口,对应一个框架核心服务. 那它的意义何在?官网给出的解释也很简单:使用接口是为了松耦合和简单 . 先
laravel5创建service provider和facade的方法详解

本文实例讲述了laravel5创建service provider和facade的方法.分享给大家供大家参考,具体如下: laravel5创建一个facade,可以将某个service注册个门面,这样,使用的时候就不需要麻烦地use 了.文章用一个例子说明怎么创建service provider和 facade. 目标我希望我创建一个AjaxResponse的facade,这样能直接在controller中这样使用: class MechanicController extends Contr
Laravel搭建后台登录系统步骤详解

本文实例讲述了Laravel搭建后台登录系统的方法.分享给大家供大家参考,具体如下: 今天想用laravel搭建一个后台系统,就需要最简单的那种,有用户登录系统,试用了下,觉得laravel的用户登录这块做的还真happy.当然,前提就是,你要的用户管理系统是最简单的那种,就是没有用户权限,能登录就好. 我这里就不用默认的user表做例子了,那样很容易和laravel的一些默认设置混淆. 首先确认,后台的用户表,我设计表叫做badmin,每个管理员有用户名(username),有昵称(nickn
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法

本文实例讲述了Laravel5.1数据库连接.创建数据库.创建model及创建控制器的方法.分享给大家供大家参考,具体如下: 前言:laravel创建数据库,实际可以手动创建,如古老的phpmyadmin 等均可以. 一.数据库连接: 在根目录(laravel5.1下面有个.env文件,如果没有则会有个.env.example然后将此文件修改成.env文件即可) 打开文件: 找到: DB_HOST=127.0.0.1 //连接地址不使用localhost DB_DATABASE=homestea
Laravel框架学习笔记（一）环境搭建

为什么选择laravel框架,是因为laravel框架目前是Php最流行的框架,深入研究后发现和asp.net mvc框架在功能上基本上是伯仲之间.只是各自的实现方法不同. php在windows下的开发环境搭建 1.下载php地址http://windows.php.net/download/注意相关版本,我的服务器用的iis7.5 32 系统 VC11 x86 Non Thread Safe 解压之后放到相应的目录,配置php.ini文件,这里注意里面的dll启用的相关配置,这个网上有也不多
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面

AdminLTE 是一个基于Bootstrap 3.x的免费高级管理控制面板主题,完全响应式管理,适合从小型移动设备到大型台式机很多的屏幕分辨率. AdminLTE的特点: 充分响应可分类的仪表盘 18插件和3自定义插件重量轻和快速与大多数主流浏览器兼容完全支持Glyphicons,Fontawesome和图标我们使用的工具 Laravel AdminLTE 2.3.2 Bower Composer 下载一个全新的 Laravel 如果不太清楚可以去官方网站查看文档link 在此我们直
Laravel框架中自定义模板指令总结

介绍最近在学习laravel,在Laravel框架中使用模板的一种方法就是通过控制器布局,通常我们在视图模板中编写复杂的逻辑,看上去显得很杂乱,那么使用自定义的模板Directives,可以简化你的视图逻辑,编写出更优雅的代码,Laravel Blade是一种将其特殊语法编译成PHP和HTML的模板引擎.其特殊语法指令,指令是加糖功能,在其后隐藏杂乱的代码.模板包含大量的内置指令,例如@foreach/@if/@section/@extends等等,内置的指令对于做一个简单的项目足以,但是当你
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例

本文实例讲述了laravel框架实现为 Blade 模板引擎添加新文件扩展名.分享给大家供大家参考,具体如下: 因为一些原因,我准备把 Blessing Skin 的框架换成 Laravel 了(之前是自己搭建的一个框架),但是在模板迁移的时候遇到了一点问题. 之前我是使用的 XiaoLer/blade这个从 Laravel 中抽离出来的 Blade 模板引擎,并且自定义为使用 .tpl文件后缀.你问为啥不用默认的 .blade.php 而是用这个 Smarty 的模板扩展名?能有啥,好看呗 :
Laravel框架中实现使用阿里云ACE缓存服务

之前我写了一篇在 Laravel 4 框架中使用阿里云 OCS 缓存的文章,介绍了如何通过扩展 Laravel 4 来支持需要 SASL 认证的阿里云 OCS 缓存服务.有网友问我,ACE 的缓存怎么在 Laravel 4 中使用.我本来觉得应该可以完全用相同的办法,后来自己尝试的时候才发现,ACE 的缓存差别非常大.所以再写一篇,介绍一下如何在 Laravel 框架中使用阿里云 ACE 的缓存服务. 如何扩展 Laravel 的缓存驱动在 Laravel 4 中使用 Cache::get($
Laravel框架中VerifyCsrfToken报错问题的解决

前言本文主要给大家介绍了关于Laravel框架中VerifyCsrfToken报错问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 报错情况 form 表单进行 post 方式提交数据时,遇到如下的报错情况. TokenMismatchException in VerifyCsrfToken.php line 67: in VerifyCsrfToken.php line 67 at VerifyCsrfToken->handle(object(Request)
Laravel框架中缓存的使用方法分析

本文实例讲述了Laravel框架中缓存的使用方法.分享给大家供大家参考,具体如下: 1. Laravel为各种不同的缓存系统提供了一致的API,支持的缓存有File.Memcached和Redis等 2. 主要方法 put().add().forever().has().get().pull().forget() 3. 配置文件路径 /config/cache.php 4. 添加路由 Route::get('/cache1', 'HomeController@cache1'); Route::g
在laravel框架中使用model层的方法

创建model:php artisan make:model privilegeModel(名字随便写,可以不加Model) 控制器层加载model <?php namespace App\Http\Controllers\Admin; //注意命名空间 use App\Http\Controllers\Controller; use app\privilegeModel; function index(){ $model=new \App\PrivilegeModel(); //实例化mode
阿里对象存储OSS在laravel框架中的使用方法

最近比较忙,也没来得及写博客.加上最近也确实没有接触到什么新技术,有点尴尬... 在昨天算是第一次接触对象存储这个东西,研究了一天,算是在项目中走得通了,所以在此分享给大家,是最基础的OSS上传图片部分,希望能自己以后能少踩坑,也希望能帮助到大家. 首先呢,现在百度出来的,基本都是laravel大神自己封装的composer包,可惜我实在是不能用,所以只能老老实实的在项目中引入SDK了... 1.引入阿里的SDK文件如图所示,其实我也不知道该放哪里合适,不过laravel的好处是命名空间比较好
Laravel框架中集成MongoDB和使用详解

* 推荐组件 composer require jenssegers/mongodb ^3.3 -vvv(本人的laravel版本是5.5) 修改config/app.php * 注册服务 Jenssegers\Mongodb\MongodbServiceProvider::class, * 添加 Facades 'Mongo' => Jenssegers\Mongodb\MongodbServiceProvider::class, * 修改数据库配置文件 config/database.php
关于laravel框架中的常用目录路径函数

简介 1.app目录的绝对路径$path = app_path();->还可以使用app_path函数为相对于app目录的给定文件生成绝对路径:$path = app_path('Http/Controllers/Controller.php'); 2.项目根目录的绝对路径$path = base_path();->还可以使用base_path函数为相对于应用目录的给定文件生成绝对路径$path& 1.app目录的绝对路径 $path = app_path(); ->还可以使用a

PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面

相关推荐

随机推荐