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 相关文章推荐
NT IIS下用ODBC连接数据库
Oct 09 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
Jun 28 PHP
Apache启动报错No space left on device: AH00023该怎么解决
Oct 16 PHP
ThinkPHP使用Smarty第三方插件方法小结
Mar 19 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
Mar 16 PHP
Laravel5中Cookie的使用详解
May 03 PHP
在laravel中使用Symfony的Crawler组件分析HTML
Jun 19 PHP
php基于数组函数实现关联表的编辑操作示例
Jul 04 PHP
PHP基于curl模拟post提交json数据示例
Jun 22 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
Dec 21 PHP
PHP Swoole异步MySQL客户端实现方法示例
Oct 24 PHP
Laravel 集成微信用户登录和绑定的实现
Dec 27 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
PHP与SQL注入攻击[三]
2007/04/17 PHP
PHP实现事件机制的方法
2015/07/10 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
javascript定时器完整实例
2015/02/10 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
详细分析Node.js 模块系统
2020/06/28 Javascript
python设计模式大全
2016/06/27 Python
浅谈python中的占位符
2017/11/09 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python3中数组逆序输出方法
2020/12/01 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
高中生自我评语大全
2014/01/19 职场文书
环保宣传标语
2014/06/12 职场文书
保密工作目标责任书
2014/07/28 职场文书
单位考核聘任报告
2015/03/02 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
python中如何对多变量连续赋值
2021/06/03 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android