在laravel中使用AdminLTE后台模板


 

AdminLTE是一個基於Bootstrap 3.x的免費高級管理控制面板主題,基於Bootstrap3框架,高度可定制的,易於使用。適合從小型移動設備到大型台式機很多的屏幕分辨率。

composer安裝AdminLTE

使用AdminLTE的方式有很多,最直接的方式就是下載模板源文件到public目錄,然后在views目錄下的blade模板文件中引入對應的精通資源文件即可。

當然,我們這里不用這么簡單的方式,我們要用更加復雜的方式來使用AdminLTE。

使用composer安裝AdminLTE,在項目根目錄執行下面命令:

也可以先在composer.json文件中,添加下面配置:

然后在項目根目錄執行下面命令進行安裝:

這樣AdminLTE模板就會被下載到 vendor/almasaeed2010 目錄下。

在laravel中使用AdminLTE后台模板

安裝gulp和Elixir

gulp是基於node.js的,如果還沒有安裝,請到 Node.js官網 下載並安裝,安裝完成后執行下面命令確保安裝成功:

然后執行下面命令安裝gulp:

安裝完成后執行下面命令確保成功:

Laravel5安裝完成后在項目根目錄下自動包含了一個名為 package.json 的文件,該文件內容如下:

Node的 npm 包管理器使用 package.json 來安裝項目的Node模塊依賴。正如你所看到的,Laravel項目默認需要兩個Node包:gulp 和 laravel-elixir。你可以使用如下命令本地安裝這兩個包:

安裝完成之后,你會看到項目根目錄下新增了一個 node_modules 文件夾,在該文件夾內包含了我們剛剛安裝的 gulp 和 laravel-elixir 包。

拷貝靜態資源

利用gulp是一個自動構建工具,我們可以用他來管理我們的前端資源,這里使用gulp來拷貝我們所需的靜態資源。在項目根目錄下的gulpfile.js文件中,編寫以下內容:

然后在項目根目錄執行下面命令進行拷貝:

這樣就把模板需要的靜態資源文件拷貝到public目錄下了,然后我們就可以開始使用AdminLTE模板。

使用AdminLTE模板

在 resources/views/layouts 目錄下新建 dashboard.blade.php 模板文件,作為我們的父級模板。

然后拷貝 vendor/almasaeed2010/adminlte/starter.html 文件中的內容到 dashboard.blade.php ,將引用的資源文件路徑改為public下對應的資源文件的路徑。

然后我們在 resources/views/layouts 下新建Common目錄並創建 header.blade.php 、sidebar.blade.php 、 footer.blade.php文件,將 dashboard.blade.php 文件中的,header、aside、footer元素內的內容分別剪切到剛創建的對應文件中。

最后,在 dashboard.blade.php 文件對應位置引入這三個文件。至此,我們的父類模板也就完成了。

我們在 resources/views/admin 下創建一個模板文件 index.blade.php ,其內容如下:

光文字描述可能有些不清楚,此時的模板文件結構如下:

在laravel中使用AdminLTE后台模板

然后在 app/Http/routes.php 中配置測試路由:

訪問網站跟目錄,看到如下效果則表示成功:

在laravel中使用AdminLTE后台模板


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM