0

0

在Laravel5.* 中使用 AdminLTE

php中文网

php中文网

发布时间:2016-06-20 12:45:36

|

1580人浏览过

|

来源于php中文网

原创

在Laravel5.* 中使用 AdminLTE

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

我们使用的工具

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

    类似这样,将css 和 js 的相关的链接指向相应的目录下,而后我们通过 localhost:8000/admin 查看页面的变化,此时页面变成了如下图:

    WeWedding婚纱影楼小程序
    WeWedding婚纱影楼小程序

    婚纱影楼小程序提供了一个连接用户与影楼的平台,相当于影楼在微信的官网。它能帮助影楼展示拍摄实力,记录访客数据,宣传优惠活动。使用频率高,方便传播,是影楼在微信端宣传营销的得力助手。功能特点:样片页是影楼展示优秀摄影样片提供给用户欣赏并且吸引客户的。套系页是影楼根据市场需求推出的不同套餐,用户可以按照自己的喜好预定套系。个人中心可以查看用户预约的拍摄计划,也可以获取到影楼的联系方式。

    下载

    现在我们拥有了所有的使用 AdminLTE 的所有的资源,下面对我们的主要视图增加最后的收尾工作,我将分开这个模板为三个文件,sidebar.blade.php, header.blade.php, 和 footer.blade.php
    这三个文件的内容分别是admin_template.blade.phpheader 部分和 aside 部分和footer 部分,将这三部分截取出来依次放到三个文件中。

    最后的润色工作

    现在我们已经将我们的模板个性化的分离开了,下面我们需要设置我们的最初的admin_template.blade.php
    模板以便于内容动态加载,如下所示:

    head>{{ $page_title or "AdminLTE Dashboard" }}
    @include('header')@include('sidebar')

    {{ $page_title or "Page Title" }} {{ $page_description or null }}

    @yield('content')
    @include('footer')

    在上面代码中,我们添加了contetn,这里包含着我们的主要的内容,增加了页面标题针对不同的页面,将其重命名为dashboard.blade.php现在这个模板已经可以使用了。

    测试页面

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

    1.创建 test.blade.php

    @extends('dashboard')@section('content')

    Randomly Generated Tasks

    @foreach($tasks as $task)
    {{ $task['name'] }} {{$task['progress']}}%
    @endforeach

    Second Box

    A separate section to add any kind of widget. Feel free to explore all of AdminLTE widgets by visiting the demo page on Almsaeed Studio.
    @endsection

    2.创建TestController.php

        php artisan make:controller TestController --plain

    下面是这个控制器的代码部分:

             '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.打开对应的页面,如果你没有出错的 应该如下图所示

    这样整个过程就完成了,当然有什么问题可以下面留言。

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
    包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

    本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

    24

    2026.02.10

    MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法
    MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法

    本专题汇总了MC.JS官网入口和网页版快速畅玩方法,提供免安装访问、不同版本(1.8.8、1.12.8)在线体验指南,以及正版网页端操作说明,帮助玩家轻松进入MC.JS世界,实现即时畅玩与高效体验。

    18

    2026.02.10

    谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程
    谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程

    本专题汇总了谷歌邮箱网页版的最新登录入口和注册方法,详细提供官方账号快速访问方式、网页版操作教程及安全登录技巧,帮助用户轻松管理Gmail邮箱账户,实现高效、安全的邮箱使用体验。

    14

    2026.02.10

    铁路12306订票与退改全攻略_高效购票与座位选取技巧
    铁路12306订票与退改全攻略_高效购票与座位选取技巧

    本专题全面汇总铁路12306订票、退票、改签及候补订单操作技巧,提供车厢座位分布参考、抢票攻略和高铁安检注意事项,帮助新手用户快速掌握高效购票与退改流程,提高出行效率和体验。

    11

    2026.02.10

    TensorFlow2深度学习模型实战与优化
    TensorFlow2深度学习模型实战与优化

    本专题面向 AI 与数据科学开发者,系统讲解 TensorFlow 2 框架下深度学习模型的构建、训练、调优与部署。内容包括神经网络基础、卷积神经网络、循环神经网络、优化算法及模型性能提升技巧。通过实战项目演示,帮助开发者掌握从模型设计到上线的完整流程。

    0

    2026.02.10

    Vue3组合式API与组件开发实战
    Vue3组合式API与组件开发实战

    本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧,深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例,指导前端开发者实现高性能、结构清晰的 Vue 应用,提升开发效率与代码可维护性。

    4

    2026.02.10

    Go语言微服务架构与gRPC实战
    Go语言微服务架构与gRPC实战

    本专题面向有 Go 基础的开发者,系统讲解微服务架构设计与 gRPC 的高效应用。内容涵盖服务拆分、RPC 通信、负载均衡、错误处理、服务注册与发现等关键技术。通过实战案例,帮助开发者搭建高性能、可扩展的 Go 微服务系统。

    1

    2026.02.10

    React 18状态管理与Hooks高级实践
    React 18状态管理与Hooks高级实践

    本专题专注于 React 18 的高级开发技术,详细讲解 useState、useEffect、useReducer、useContext 等 Hooks 的使用技巧,以及 Redux、Zustand 等状态管理工具的集成与优化方法。通过真实案例,帮助前端开发者构建可维护、性能优良的现代 React 应用。

    4

    2026.02.10

    Node.js后端开发与Express框架实践
    Node.js后端开发与Express框架实践

    本专题针对初中级 Node.js 开发者,系统讲解如何使用 Express 框架搭建高性能后端服务。内容包括路由设计、中间件开发、数据库集成、API 安全与异常处理,以及 RESTful API 的设计与优化。通过实际项目演示,帮助开发者快速掌握 Node.js 后端开发流程。

    2

    2026.02.10

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Kotlin 教程
    Kotlin 教程

    共23课时 | 3.4万人学习

    SQL 教程
    SQL 教程

    共61课时 | 3.8万人学习

    【web前端】Node.js快速入门
    【web前端】Node.js快速入门

    共16课时 | 2万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号