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 相关文章推荐
不用mod_rewrite直接用php实现伪静态化页面代码
Oct 04 PHP
php 移除数组重复元素的一点说明
Nov 27 PHP
php ajax 静态分页过程形式
Sep 02 PHP
php实现利用phpexcel导出数据
Aug 24 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
Nov 04 PHP
PHP实现一维数组转二维数组的方法
Feb 25 PHP
谈谈 PHP7新增功能
Dec 16 PHP
解读PHP中上传文件的处理问题
May 29 PHP
PHP 将dataurl转成图片image方法总结
Oct 14 PHP
php+redis实现多台服务器内网存储session并读取示例
Jan 12 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
Feb 15 PHP
PHP判断json格式是否正确的实现代码
Sep 20 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强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python add_argument()用法解析
2020/01/29 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
师范生自荐信范文
2013/10/06 职场文书
医学生自荐信
2013/12/03 职场文书
优秀民警事迹材料
2014/01/29 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
校园文明标语
2014/06/13 职场文书
财务经理岗位职责
2015/01/31 职场文书
创业计划书之家教中心
2019/09/25 职场文书