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 相关文章推荐
PHP 图片文件上传实现代码
Dec 29 PHP
PHP函数篇之掌握ord()与chr()函数应用
Dec 05 PHP
PHP持久连接mysql_pconnect()函数使用介绍
Feb 05 PHP
PHP保存session到memcache服务器的方法
Jan 19 PHP
php $_SESSION会员登录实例分享
Jan 19 PHP
浅析Laravel5中队列的配置及使用
Aug 04 PHP
PHP对象克隆clone用法示例
Sep 28 PHP
PHP之十六个魔术方法详细介绍
Nov 01 PHP
PHP微信分享开发详解
Jan 14 PHP
PHP多进程编程之僵尸进程问题的理解
Oct 15 PHP
PHP工厂模式、单例模式与注册树模式实例详解
Jun 03 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
Oct 16 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 伪静态之IIS篇
2014/06/02 PHP
jquery text()要注意啦
2009/10/30 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
js函数调用的方式
2014/05/06 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
详解python持久化文件读写
2019/04/06 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
Python list运算操作代码实例解析
2020/01/20 Python
Python模块 _winreg操作注册表
2020/02/05 Python
python 如何调用 dubbo 接口
2020/09/24 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
美容师的职业规划书
2013/12/27 职场文书
质量负责人任命书
2014/06/06 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2014年采购工作总结
2014/11/20 职场文书
二手车转让协议书
2015/01/29 职场文书
神农溪导游词
2015/02/11 职场文书
车辆管理制度范本
2015/08/05 职场文书
资产移交协议书
2016/03/24 职场文书
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js