Laravel-添加后台模板AdminLte的实现方法


Posted in PHP onOctober 08, 2019

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

1、新建laravel项目

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

2、使用前端包管理器添加AdminLte(可以使用npm或者yarn、bower),在项目根目录下执行如下命令:

yarn add admin-lte

会在项目根目录下看到,node_modules\admin-lte\

Laravel-添加后台模板AdminLte的实现方法

3、将admin-lte文件夹复制到public目录下,开始使用:

首先按照laravel模板的方式建立layouts基础样式模板 default.balde.php, 将admin-lte下的starter.html内容复制到default中,

并将头尾侧边栏等公用部分放入不同的子模板_header _footer _left中,如图:

Laravel-添加后台模板AdminLte的实现方法

最后的default模板代码:(注意修改好导入样式和js文件的路径)

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>后台管理系统</title>
 <!-- Tell the browser to be responsive to screen width -->
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <!-- Bootstrap 3.3.6 -->
 <link rel="stylesheet" href="/admin-lte/bootstrap/css/bootstrap.min.css" rel="external nofollow" >
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="external nofollow" >
 <!-- Ionicons -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="external nofollow" >
 <!-- Theme style -->
 <link rel="stylesheet" href="/admin-lte/dist/css/AdminLTE.min.css" rel="external nofollow" >
 <link rel="stylesheet" href="/admin-lte/dist/css/skins/skin-blue.min.css" rel="external nofollow" >
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
 @include('admin.layouts._header')
 @include('admin.layouts._left')
 @yield('content')
 @include('admin.layouts._footer')
 @include('admin.layouts._tip')
 <div class="control-sidebar-bg"></div>
</div>
<!-- jQuery 2.2.3 -->
<script src="/admin-lte/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/admin-lte/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/admin-lte/dist/js/app.min.js"></script>
</body>
</html>

项目中的其他页面就可以继承使用layouts模板了:

@extends('admin.layouts.default')
@section('content')
<div class="content-wrapper">
 <section class="content-header">
  <h1>
  Page Header
  <small>首页管理</small>
  </h1>
  <ol class="breadcrumb">
  <li><a href="#" rel="external nofollow" ><i class="fa fa-dashboard"></i> Level</a></li>
  <li class="active">Here</li>
  </ol>
 </section>
 <section class="content">
  <div class='row'>
 <div class='col-md-6'>
  <!-- Box1 -->
  <div class="box box-primary">
   <div class="box-header with-border">
    <h3 class="box-title">盒子一</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">
    <table></table>
   </div>
   <div class="box-footer">
    <form action='#'>
     <input type='text' placeholder='New task' class='form-control input-sm' />
    </form>
   </div>
  </div>
 </div>
 </div>
 </section>
</div>

@stop

想要使用admin-lte自带的任何样式,直接复制那部分的页面代码粘贴到需要的位置即可,

在本地电脑上直接打开admin-lte下index.html就可以查看到所有的样式效果

本例最后达到的效果如图:

Laravel-添加后台模板AdminLte的实现方法

以上这篇Laravel-添加后台模板AdminLte的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
用Socket发送电子邮件
Oct 09 PHP
无限级别菜单的实现
Oct 09 PHP
php下目前为目最全的CURL中文说明
Aug 01 PHP
coreseek 搜索英文的问题详解
Jun 08 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
Jul 03 PHP
IIS6.0中配置php服务全过程解析
Aug 07 PHP
跟我学Laravel之配置Laravel
Oct 15 PHP
PHP基于DOM创建xml文档的方法示例
Feb 08 PHP
CI(CodeIgniter)框架实现图片上传的方法
Mar 24 PHP
php类自动装载、链式操作、魔术方法实现代码
Jul 23 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
Jun 09 PHP
php进行md5加密简单实例方法
Sep 19 PHP
PHP7.3.10编译安装教程
Oct 08 #PHP
PHP使用redis位图bitMap 实现签到功能
Oct 08 #PHP
laravel-admin自动生成模块,及相关基础配置方法
Oct 08 #PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
Oct 08 #PHP
关于Laravel-admin的基础用法总结和自定义model详解
Oct 08 #PHP
laravel-admin 实现给grid的列添加行数序号的方法
Oct 08 #PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
Oct 08 #PHP
You might like
一些常用的php简单命令代码集锦
2007/09/24 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
定义select的边框颜色
2008/04/28 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
python多线程操作实例
2014/11/21 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
给医务人员表扬信
2014/01/12 职场文书
干部现实表现材料
2014/02/13 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
班主任寄语大全
2014/04/04 职场文书
财务稽核岗位职责
2015/04/13 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
初二英语教学反思
2016/02/15 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
如何用python绘制雷达图
2021/04/24 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle