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