成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

在Laravel5.* 中使用 AdminLTE

Y3G / 1224人閱讀

摘要：在中使用是一個(gè)很棒的單純的由和構(gòu)建的后臺(tái)模板，在這片文章中，我將講述如何將和優(yōu)雅的整合在一起，而且我們可以通過來及時(shí)的更新和管理。

在Laravel5.* 中使用 AdminLTE

AdminLTE是一個(gè)很棒的單純的由 HTML 和 CSS 構(gòu)建的后臺(tái)模板，在這片文章中，我將講述如何將 AdminLTE 和 Laravel 優(yōu)雅的整合在一起，而且我們可以通過 Bower 來及時(shí)的更新和管理 AdminLTE。

我們使用的工具

Laravel

AdminLTE 2.3.2

Bower

Composer

下載一個(gè)全新的 Laravel

如果不太清楚可以去官方網(wǎng)站查看文檔link
在此我們直接使用命令行即可

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

通過這個(gè)命令我們創(chuàng)建了一個(gè)全新的名字為 myapp 的Laravel項(xiàng)目，如果你成功的話你可以看到下面的圖片

通過 Bower 下載 AdminLTE

進(jìn)入到 myapp/public 文件夾

    
    cd myapp/public

在這個(gè)文件夾下執(zhí)行下面的命令

    bower install admin-lte

一旦完成，你會(huì)發(fā)現(xiàn)多了一個(gè) bower_componets 的文件夾，而且在這個(gè)文件夾中你會(huì)看到 AdminLTE

將 AdminLTE 的starter.html 轉(zhuǎn)化為 Blade 模板

Laravel 在此使用了一個(gè)很好的模板引擎 Blade，為了更充分的利用Blade，我們需要將一些常規(guī)的通用的 HTML 的 起始頁面應(yīng)用到 Blade 模板中，首先創(chuàng)建一個(gè) view 在 resources/views文件夾中，命名為admin_template.blade.php，而后我們?yōu)檫@個(gè)頁面創(chuàng)建一個(gè)對(duì)應(yīng)的路由。如下面我所創(chuàng)建的

    
    Route::get("admin", function () {
        return view("admin_template");
    });

然后，將bower_components/admin-lte/starter.html中的內(nèi)容復(fù)制到我們視圖模板中，并且將其中的相關(guān)鏈接指向我們的 AdminLTE 的對(duì)應(yīng)目錄下，如下是我初步的設(shè)置：

類似這樣，將css 和 js 的相關(guān)的鏈接指向相應(yīng)的目錄下，而后我們通過 localhost:8000/admin 查看頁面的變化，此時(shí)頁面變成了如下圖：

現(xiàn)在我們擁有了所有的使用 AdminLTE 的所有的資源，下面對(duì)我們的主要視圖增加最后的收尾工作，我將分開這個(gè)模板為三個(gè)文件，sidebar.blade.php, header.blade.php, 和 footer.blade.php
這三個(gè)文件的內(nèi)容分別是admin_template.blade.phpheader 部分和 aside 部分和footer 部分，將這三部分截取出來依次放到三個(gè)文件中。

最后的潤色工作

現(xiàn)在我們已經(jīng)將我們的模板個(gè)性化的分離開了，下面我們需要設(shè)置我們的最初的admin_template.blade.php
模板以便于內(nèi)容動(dòng)態(tài)加載，如下所示：



head>

{{ $page_title or "AdminLTE Dashboard" }}





















@include("header")


@include("sidebar")




    
    

        

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

        
        
    
            
  1.  Level
    2. 
            
  2. Here
    3. 
        

    


    
    

        
        @yield("content")
    





@include("footer")

在上面代碼中，我們添加了contetn，這里包含著我們的主要的內(nèi)容，增加了頁面標(biāo)題針對(duì)不同的頁面，將其重命名為dashboard.blade.php現(xiàn)在這個(gè)模板已經(jīng)可以使用了。

測(cè)試頁面

為了驗(yàn)證我們之前所做的工作，我將創(chuàng)建一個(gè)簡(jiǎn)單的頁面

1.創(chuàng)建 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.創(chuàng)建TestController.php

    php artisan make:controller TestController --plain

下面是這個(gè)控制器的代碼部分：

    
     "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.創(chuàng)建對(duì)應(yīng)的路由

    Route::get("test", "TestController@index");

4.打開對(duì)應(yīng)的頁面，如果你沒有出錯(cuò)的 應(yīng)該如下圖所示

這樣整個(gè)過程就完成了，當(dāng)然有什么問題可以下面留言。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/21196.html

相關(guān)文章

  • laravel框架學(xué)習(xí)之路（二）pjax的使用

    摘要：繼第一篇文章發(fā)布之后框架學(xué)習(xí)之路一前后臺(tái)用戶認(rèn)證分離，忙著項(xiàng)目上的事情，一直沒有時(shí)間寫文章。進(jìn)入到新公司后，忙里偷閑，繼續(xù)我的框架學(xué)習(xí)之路。附件筆者的布局全局文件整頁刷新時(shí)，菜單顯示刪除按鈕確定刪除此項(xiàng)確定取消 繼第一篇文章發(fā)布之后laravel框架學(xué)習(xí)之路（一）前后臺(tái)用戶認(rèn)證分離，忙著項(xiàng)目上的事情，一直沒有時(shí)間寫文章。進(jìn)入到新公司后，忙里偷閑，繼續(xù)我的laravel框架學(xué)習(xí)之路。如需...

    lily_wang 評(píng)論0 收藏0

  • laravel框架學(xué)習(xí)之路（二）pjax的使用

    摘要：繼第一篇文章發(fā)布之后框架學(xué)習(xí)之路一前后臺(tái)用戶認(rèn)證分離，忙著項(xiàng)目上的事情，一直沒有時(shí)間寫文章。進(jìn)入到新公司后，忙里偷閑，繼續(xù)我的框架學(xué)習(xí)之路。附件筆者的布局全局文件整頁刷新時(shí)，菜單顯示刪除按鈕確定刪除此項(xiàng)確定取消 繼第一篇文章發(fā)布之后laravel框架學(xué)習(xí)之路（一）前后臺(tái)用戶認(rèn)證分離，忙著項(xiàng)目上的事情，一直沒有時(shí)間寫文章。進(jìn)入到新公司后，忙里偷閑，繼續(xù)我的laravel框架學(xué)習(xí)之路。如需...

    gotham 評(píng)論0 收藏0

  • laravel框架學(xué)習(xí)之路（二）pjax的使用

    摘要：繼第一篇文章發(fā)布之后框架學(xué)習(xí)之路一前后臺(tái)用戶認(rèn)證分離，忙著項(xiàng)目上的事情，一直沒有時(shí)間寫文章。進(jìn)入到新公司后，忙里偷閑，繼續(xù)我的框架學(xué)習(xí)之路。附件筆者的布局全局文件整頁刷新時(shí)，菜單顯示刪除按鈕確定刪除此項(xiàng)確定取消 繼第一篇文章發(fā)布之后laravel框架學(xué)習(xí)之路（一）前后臺(tái)用戶認(rèn)證分離，忙著項(xiàng)目上的事情，一直沒有時(shí)間寫文章。進(jìn)入到新公司后，忙里偷閑，繼續(xù)我的laravel框架學(xué)習(xí)之路。如需...

    vvpale 評(píng)論0 收藏0

  • Laravel+VueJs開發(fā)知乎

    摘要：基于開發(fā)項(xiàng)目地址前言基于社區(qū)知乎系列項(xiàng)目后臺(tái)采用功能用戶登錄注冊(cè)郵件認(rèn)證用戶設(shè)置頭像上傳至七牛云存儲(chǔ)修改密碼忘記密碼郵件認(rèn)證用戶相互關(guān)注郵件提醒用戶發(fā)送私信消息通知顯示私信已讀和未讀標(biāo)志私信標(biāo)志私信全部已讀回復(fù)私信個(gè)人主頁各項(xiàng)數(shù)據(jù)問 Laravel-Zhihu 基于Laravel5.3 開發(fā) 項(xiàng)目地址 https://github.com/GeekGhc/zhihu-app 前言 基于...

    melody_lql 評(píng)論0 收藏0

  • yii2搭建完美后臺(tái)并實(shí)現(xiàn)rbac權(quán)限控制實(shí)例教程

    摘要：利用渲染后臺(tái)模板后臺(tái)的模板我們采用利用插播一曲是一個(gè)完全響應(yīng)管理模板?；诳蚣埽锥ㄖ颇０?。適合多種屏幕分辨率，從小型移動(dòng)設(shè)備到大型臺(tái)式機(jī)。內(nèi)置了多個(gè)頁面，包括儀表盤郵箱日歷鎖屏登錄及注冊(cè)錯(cuò)誤錯(cuò)誤等頁面。 作者：白狼 出處：http://www.manks.top/yii2_fra... 本文版權(quán)歸作者，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保...

    neu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<