Laravel-admin的使用入門(2)


安裝

注意
當前版本(1.5)需要安裝PHP 7+和Laravel 5.5

首先確保安裝好了laravel,並且數據庫連接設置正確。

composer require encore/laravel-admin

然后運行下面的命令來發布資源:

php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"

在該命令會生成配置文件config/admin.php,可以在里面修改安裝的地址、數據庫連接、以及表名,建議都是用默認配置不修改。

然后運行下面的命令完成安裝:

php artisan admin:install

Notice
運行這個命令的時候,如果遇到了下面的錯誤:

SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes (SQL: alter tableusersadd uniqueusers_email_unique(email))

參考這個issue來解決 https://github.com/z-song/laravel-admin/issues/1541

啟動服務后,在瀏覽器打開 http://localhost/admin/ ,使用用戶名 admin 和密碼 admin登錄.

生成的文件

配置文件

安裝完成之后,laravel-admin所有的配置都在config/admin.php文件中。

后台項目文件

安裝完成之后,后台的安裝目錄為app/Admin,之后大部分的后台開發編碼工作都是在這個目錄下進行。

app/Admin
├── Controllers
│   ├── ExampleController.php
│   └── HomeController.php
├── bootstrap.php
└── routes.php

app/Admin/routes.php文件用來配置后台路由。

app/Admin/bootstrap.phplaravel-admin的啟動文件, 使用方法請參考文件里面的注釋.

app/Admin/Controllers目錄用來存放后台控制器文件,該目錄下的HomeController.php文件是后台首頁的顯示控制器,ExampleController.php為實例文件。

靜態文件

后台所需的前端靜態文件在/public/vendor/laravel-admin目錄下.

快速開始

數據表結構和模型

Laravel自帶的users表舉例,表結構為:

users
    id          - integer
    name        - string
    email       - string
    password    - string
    created_at  - timestamp
    updated_at  - timestamp

對應的數據模型為文件 App\User.php

使用laravel-admin可以通過使用以下幾步來快速生成users表的CURD操作頁面:

創建控制器

使用下面的命令來創建一個App\User模型對應的控制器

// Mac os、 Linux
php artisan admin:make UserController --model=App\\User

// Windows
php artisan admin:make UserController --model=App\User

v1.8.0版本可以使用admin:controller命令創建控制器:

php artisan admin:controller --model=App\User

上面的命令會創建控制器文件app/Admin/Controllers/UserController.php.

添加路由

在路由配置文件app/Admin/routes.php里添加一行:

$router->resource('users', UserController::class);

添加菜單欄入口

打開菜單管理頁http://localhost:8000/admin/auth/menu,添加對應的menu, 然后就能在后台管理頁面的左側邊欄看到用戶管理頁面的鏈接入口了。

其中uri填寫不包含路由前綴的的路徑部分,比如完整路徑是http://localhost:8000/admin/demo/users, 那么就填demo/users

如果要添加外部鏈接,只要填寫完整的url即可,比如http://laravel-admin.org/.

編寫CURD頁面邏輯

通過admin:make命令創建的控制器app/Admin/Controllers/UserController.php如下:

<?php

namespace App\Admin\Controllers;

use App\Models\User;
use Encore\Admin\Controllers\AdminController;
use Encore\Admin\Form;
use Encore\Admin\Grid;
use Encore\Admin\Show;

class UserController extends AdminController
{
    protected $title = 'Users';

    protected function grid()
    {
        $grid = new Grid(new User());

        $grid->column('id', __('Id'));
        $grid->column('name', __('Name'));
        $grid->column('email', __('Email'));
        $grid->column('password', __('Password'));
        $grid->column('created_at', __('Created at'));
        $grid->column('updated_at', __('Updated at'));

        return $grid;
    }

    protected function detail($id)
    {
        $show = new Show(User::findOrFail($id));

        $show->field('id', __('Id'));
        $show->field('name', __('Name'));
        $show->field('email', __('Email'));
        $show->field('password', __('Password'));
        $show->field('created_at', __('Created at'));
        $show->field('updated_at', __('Updated at'));

        return $show;
    }

    protected function form()
    {
        $form = new Form(new User());

        $form->textarea('name', __('Name'));
        $form->textarea('email', __('Email'));
        $form->textarea('password', __('Password'));

        return $form;
    }
}

$title屬性用來設置這個CURD模塊的標題,可以將它修改為任何其它的字符串。

grid方法對應數據的列表頁,實現列表頁的相關功能邏輯。

detail方法對應數據的詳情頁,在列表頁操作列的詳情顯示按鈕點擊進入,實現詳情頁的相關功能邏輯。

form方法對應數據的創建和編輯頁,實現數據創建和編輯頁的相關功能邏輯。

配置

安裝完成之后,會生成兩個配置文件,用來對管理后台進行配置,config/admin.phpapp/Admin/bootstrap.php

config/admin.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin name
    |--------------------------------------------------------------------------
    |
    | 登錄頁面的大標題,顯示在登錄頁面
    |
    */
    'name' => 'Laravel-admin',

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin logo
    |--------------------------------------------------------------------------
    |
    | 管理頁面的logo設置,如果要設置為圖片,可以設置為img標簽
    | <img src="http://logo-url" alt="Admin logo">'.
    |
    */
    'logo' => '<b>Laravel</b> admin',

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin mini logo
    |--------------------------------------------------------------------------
    |
    | 當左側邊欄收起時顯示的小logo,也可以設置為html標簽
    |
    */
    'logo-mini' => '<b>La</b>',

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin bootstrap setting
    |--------------------------------------------------------------------------
    |
    | 用來設置啟動文件
    |
    */
    'bootstrap' => app_path('Admin/bootstrap.php'),

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin route settings
    |--------------------------------------------------------------------------
    |
    | 后台路由配置,應用在`app/Admin/routes.php`里面
    |
    */
    'route' => [

        'prefix' => 'admin',

        'namespace' => 'App\\Admin\\Controllers',

        'middleware' => ['web', 'admin'],
    ],

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin install directory
    |--------------------------------------------------------------------------
    |
    | 后台的安裝目錄,如果在運行`admin:install`之前修改它,那么后台目錄將會是這個配置的目錄
    |
    */
    'directory' => app_path('Admin'),

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin html title
    |--------------------------------------------------------------------------
    |
    | 所有頁面的<title>標簽內容
    |
    */
    'title' => 'Admin',

    /*
    |--------------------------------------------------------------------------
    | Access via `https`
    |--------------------------------------------------------------------------
    |
    | 后台是否使用https
    |
    */
    'https' => env('ADMIN_HTTPS', false),

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin auth setting
    |--------------------------------------------------------------------------
    |
    | 后台用戶使用的用戶認證配置
    |
    */
    'auth' => [

        'controller' => App\Admin\Controllers\AuthController::class,

        'guards' => [
            'admin' => [
                'driver'   => 'session',
                'provider' => 'admin',
            ],
        ],

        'providers' => [
            'admin' => [
                'driver' => 'eloquent',
                'model'  => Encore\Admin\Auth\Database\Administrator::class,
            ],
        ],

        // Add "remember me" to login form
        'remember' => true,

        // 登陸之后的跳轉地址
        'redirect_to' => 'auth/login',

        // 登陸驗證的排除URI
        'excepts' => [
            'auth/login',
            'auth/logout',
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin upload setting
    |--------------------------------------------------------------------------
    |
    | 在Form表單中的image和file類型的默認上傳磁盤和目錄設置,其中disk的配置會使用在
    | config/filesystem.php里面配置的一項disk
    |
    */
    'upload' => [

        // `config/filesystem.php`中設置的disk
        'disk' => 'admin',

        // image和file類型表單元素的上傳目錄
        'directory' => [
            'image' => 'images',
            'file'  => 'files',
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Laravel-admin database settings
    |--------------------------------------------------------------------------
    |
    | 安裝laravel-admin之后,默認會在數據庫中新建下面9張表,包括用戶、菜單、角色、權限、
    | 日志和它們之間的關系表,下面的配置是標的名字和對應的模型
    |
    | 其中的`connection`配置為下面幾個模型所使用的數據庫連接,對應`config/database.php`
    | 中的connections里面設置的connection,
    |
    | 如果你想修改數據庫里面這幾個表的名字,可以在運行`admin:install`之前修改它們
    | 如果install之后想修改,那么可以手動在數據庫中修改,然后再修改下面幾項的值
    |
    | 如果你需要在表里面增加字段,可以自定義模型,然后替換掉下面的模型設置即可,控制器的修改
    | 也可以通過覆蓋路由的方式、覆蓋掉內置的路由配置
    |
    */
    'database' => [

        // Database connection for following tables.
        'connection' => '',

        // User tables and model.
        'users_table' => 'admin_users',
        'users_model' => Encore\Admin\Auth\Database\Administrator::class,

        // Role table and model.
        'roles_table' => 'admin_roles',
        'roles_model' => Encore\Admin\Auth\Database\Role::class,

        // Permission table and model.
        'permissions_table' => 'admin_permissions',
        'permissions_model' => Encore\Admin\Auth\Database\Permission::class,

        // Menu table and model.
        'menu_table' => 'admin_menu',
        'menu_model' => Encore\Admin\Auth\Database\Menu::class,

        // Pivot table for table above.
        'operation_log_table'    => 'admin_operation_log',
        'user_permissions_table' => 'admin_user_permissions',
        'role_users_table'       => 'admin_role_users',
        'role_permissions_table' => 'admin_role_permissions',
        'role_menu_table'        => 'admin_role_menu',
    ],

    /*
    |--------------------------------------------------------------------------
    | User operation log setting
    |--------------------------------------------------------------------------
    |
    | 操作日志記錄的配置
    |
    */
    'operation_log' => [

        // 是否開啟日志記錄、默認打開
        'enable' => true,

        /*
         * 允許記錄請求日志的HTTP方法
         */
        'allowed_methods' => ['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'CONNECT', 'OPTIONS', 'TRACE', 'PATCH'],

        /*
         * 不需要被記錄日志的url路徑
         */
        'except' => [
            'admin/auth/logs*',
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | User default avatar
    |--------------------------------------------------------------------------
    |
    | 默認頭像
    |
    */
    'default_avatar' => '/vendor/laravel-admin/AdminLTE/dist/img/user2-160x160.jpg',

    /*
    |--------------------------------------------------------------------------
    | Admin map field provider
    |--------------------------------------------------------------------------
    |
    | model-form中map組件所使用的地圖配置,支持三個地圖服務商: "tencent", "google", "yandex".
    |
    */
    'map_provider' => 'google',

    /*
    |--------------------------------------------------------------------------
    | Application Skin
    |--------------------------------------------------------------------------
    |
    | 皮膚設置,參考https://adminlte.io/docs/2.4/layout設置
    |
    | 支持的設置為:
    |    "skin-blue", "skin-blue-light", "skin-yellow", "skin-yellow-light",
    |    "skin-green", "skin-green-light", "skin-purple", "skin-purple-light",
    |    "skin-red", "skin-red-light", "skin-black", "skin-black-light".
    |
    */
    'skin' => 'skin-blue-light',

    /*
    |--------------------------------------------------------------------------
    | Application layout
    |--------------------------------------------------------------------------
    |
    | 布局設置,參考https://adminlte.io/docs/2.4/layout
    |
    | 支持的設置為: "fixed", "layout-boxed", "layout-top-nav", "sidebar-collapse",
    | "sidebar-mini".
    |
    */
    'layout' => ['sidebar-mini', 'sidebar-collapse'],

    /*
    |--------------------------------------------------------------------------
    | Login page background image
    |--------------------------------------------------------------------------
    |
    | 登錄頁面的背景圖設置
    |
    */
    'login_background_image' => '',

    /*
    |--------------------------------------------------------------------------
    | Show version at footer
    |--------------------------------------------------------------------------
    |
    | 是否在頁面的右下角顯示當前laravel-admin的版本
    |
    */
    'show_version' => true,

    /*
    |--------------------------------------------------------------------------
    | Show environment at footer
    |--------------------------------------------------------------------------
    |
    | 是否在頁面的右下角顯示當前的環境
    |
    */
    'show_environment' => true,

    /*
    |--------------------------------------------------------------------------
    | Menu bind to permission
    |--------------------------------------------------------------------------
    |
    | 菜單是否綁定權限
    */
    'menu_bind_permission' => true,

    /*
    |--------------------------------------------------------------------------
    | 是否要開啟路由權限檢查
    |--------------------------------------------------------------------------
    */
    'check_route_permission' => true,

    /*
    |--------------------------------------------------------------------------
    | 是否要開啟菜單可見角色檢查
    |--------------------------------------------------------------------------
    */
    'check_menu_roles'       => true,

    /*
    |--------------------------------------------------------------------------
    | Enable default breadcrumb
    |--------------------------------------------------------------------------
    |
    | 是否開啟頁面的面包屑導航
    */
    'enable_default_breadcrumb' => true,

    /*
    |--------------------------------------------------------------------------
    | 是否開啟靜態資源文件的壓縮
    |--------------------------------------------------------------------------
    */
    'minify_assets' => [

        // 不需要被壓縮的文件
        'excepts' => [

        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | 是否要開啟側邊欄的菜單搜索
    |--------------------------------------------------------------------------
    */
    'enable_menu_search' => true,

    /*
    |--------------------------------------------------------------------------
    | 用來設置頂部的文字提示.
    |--------------------------------------------------------------------------
    */
    'top_alert' => '',

    /*
    |--------------------------------------------------------------------------
    | 設置數據表格的操作列顯示類
    |--------------------------------------------------------------------------
    */
    'grid_action_class' => \Encore\Admin\Grid\Displayers\DropdownActions::class,

    /*
    |--------------------------------------------------------------------------
    | Extension Directory
    |--------------------------------------------------------------------------
    |
    | 如果你要運行`php artisan admin:extend`命令來開發擴展,需要配置這一項,來存放你的擴展文件
    */
    'extension_dir' => app_path('Admin/Extensions'),

    /*
    |--------------------------------------------------------------------------
    | Settings for extensions.
    |--------------------------------------------------------------------------
    |
    | 每一個laravel-admin擴展對應的配置,都寫在這下面,擴展可以參考 https://github.com/laravel-admin-extensions
    |
    */
    'extensions' => [

    ],
];

每一個laravel-admin擴展對應的配置,都寫在這下面,擴展可以參考 https://github.com/laravel-admin-extensions

app/Admin/bootstrap.php

在這個配置文件中可以擴展或者移除你的組件,或者引入前端資源

<?php

/**
 * Laravel-admin - admin builder based on Laravel.
 * @author z-song <https://github.com/z-song>
 *
 * Bootstraper for Admin.
 *
 * Here you can remove builtin form field:
 * Encore\Admin\Form::forget(['map', 'editor']);
 *
 * Or extend custom form field:
 * Encore\Admin\Form::extend('php', PHPEditor::class);
 *
 * Or require js and css assets:
 * Admin::css('/packages/prettydocs/css/styles.css');
 * Admin::js('/packages/prettydocs/js/main.js');
 *
 */

Encore\Admin\Form::forget(['map', 'editor']);

版本升級

查看當前版本

composer show encore/laravel-admin

// or 

php artisan admin

更新到最新版本

composer require encore/laravel-admin -vvv

更新到開發版本

composer require encore/laravel-admin:dev-master -vvv

更新指定版本

composer require encore/laravel-admin:1.6.15 -vvv

** 注意**
由於每個版本的靜態資源或者語言包都有可能會有更新,所以升級版本之后最好運行下面的命令

// 強制發布靜態資源文件
php artisan vendor:publish --tag=laravel-admin-assets --force

// 強制發布語言包文件
php artisan vendor:publish --tag=laravel-admin-lang --force

// 清理視圖緩存
php artisan view:clear

最后不要忘記清理瀏覽器緩存

頁面內容 & 布局

后台頁面的整體布局如下:

---------------------------------------
|                頭部                  |
|-------------------------------------|
|    |                                |
|    |                                |
| 菜 |              內容               |
| 單 |                                |
| 欄 |                                |
|    |--------------------------------|
|    |           腳部                  |
---------------------------------------

其中頭部,菜單欄、腳部三部分有框架維護,開發工作主要放在內容區域,參考下面的文檔來定義內容區域的顯示。

頁面內容

laravel-admin的布局可參考后台首頁的布局文件HomeController.phpindex()方法。

Encore\Admin\Layout\Content類用來實現內容區的布局。Content::body($content)方法用來添加頁面內容:

一個簡單的后台頁面代碼如下:

public function index(Content $content)
{
    // 選填
    $content->title('填寫頁面頭標題');

    // 選填
    $content->description('填寫頁面描述小標題');

    // 添加面包屑導航 since v1.5.7
    $content->breadcrumb(
        ['text' => '首頁', 'url' => '/admin'],
        ['text' => '用戶管理', 'url' => '/admin/users'],
        ['text' => '編輯用戶']
    );

    // 填充頁面body部分,這里可以填入任何可被渲染的對象
    $content->body('hello world');

    // 在body中添加另一段內容
    $content->body('foo bar');

    // `row`是`body`方法的別名
    $content->row('hello world');

    // 直接渲染視圖輸出,Since v1.6.12
    $content->view('dashboard', ['data' => 'foo']);

    return $content;
}

其中$content->body();方法可以接受任何可字符串化的對象作為參數,可以是字符串、數字、包含了__toString方法的對象,實現了RenderableHtmlable接口的對象,包括laravel的視圖。

自定義頁面內容

內容區域完全可以自定義顯示,假設你要自定義模型詳情頁的顯示,先在控制器中定義show方法:

use App\Models\Product;
use Encore\Admin\Layout\Content;

class ProductController
{
    public function show($id, Content $content)
    {
        $product = Product::find($id);

        return $content->title('詳情')
            ->description('簡介')
            ->view('product.show', $product->toArray());
    }
}

然后定義視圖文件resources/product/show.blade.php:

<div class="box box-solid">
    <div class="box-header with-border">
        <i class="fa fa-text-width"></i>
        <h3 class="box-title">用戶詳情</h3>
    </div>
    <div class="box-body">
        <dl class="dl-horizontal">
            <dt>姓名</dt>
            <dd>{{ $name }}</dd>
            <dt>注冊時間</dt>
            <dd>{{ $created_at }}</dd>
        </dl>
    </div>
</div>

laravel-admin使用adminlte2作為前端框架,視圖文件的樣式,可以參考adminte編寫。

布局

laravel-admin的布局使用bootstrap的柵格系統,每行的長度是12,下面是幾個簡單的布局示例:

添加一行內容:

$content->row('hello');

---------------------------------
|hello                          |
|                               |
|                               |
|                               |
|                               |
|                               |
---------------------------------

行內添加多列:

$content->row(function(Row $row) {
    $row->column(4, 'foo');
    $row->column(4, 'bar');
    $row->column(4, 'baz');
});
----------------------------------
|foo       |bar       |baz       |
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
----------------------------------

$content->row(function(Row $row) {
    $row->column(4, 'foo');
    $row->column(8, 'bar');
});
----------------------------------
|foo       |bar                  |
|          |                     |
|          |                     |
|          |                     |
|          |                     |
|          |                     |
----------------------------------

列中添加行:

$content->row(function (Row $row) {

    $row->column(4, 'xxx');

    $row->column(8, function (Column $column) {
        $column->row('111');
        $column->row('222');
        $column->row('333');
    });
});
----------------------------------
|xxx       |111                  |
|          |---------------------|
|          |222                  |
|          |---------------------|
|          |333                  |
|          |                     |
----------------------------------

列中添加行, 行內再添加列:

$content->row(function (Row $row) {

    $row->column(4, 'xxx');

    $row->column(8, function (Column $column) {
        $column->row('111');
        $column->row('222');
        $column->row(function(Row $row) {
            $row->column(6, '444');
            $row->column(6, '555');
        });
    });
});
----------------------------------
|xxx       |111                  |
|          |---------------------|
|          |222                  |
|          |---------------------|
|          |444      |555        |
|          |         |           |
----------------------------------


免責聲明!

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



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