Dcat Admin 入门

2022-04-21
dcatadmin laravel php

Dcat Admin 是一个基于 Admin admin 二次开发的后台构建工具，支持页面一键生成 CURD 代码且具有丰富的后台组件。并拥有简洁的 API 和用户、权限、菜单管理，同时使用 PJAX 构建盒子模型（支持按需加载静态资源，可无限扩展但不影响性能）并采用松耦合的页面构建雨数据操作和涉及。

打牌自定义页面和主题配色，以及多主题的切换让其变得高颜值并支持插件、可视化代码生成器以及数据表格的构建，支持表头、数据导出和搜索等批量操作以及异步上传文件等。

对于构建 Dcat Admin 可以通过 composer 在构建完 Laravel 之后的操作，即使用

composer create-project --prefer-dist laravel/laravel dcat-admin

!!! ad-warning
	title: Laravel 版本控制
	collapse: close
	同样的你可以通过 composer create-project --prefer-dist laravel/laravel dcat-admin 7.

之后通过 .env 配置文件，在此基础上填写 Mysql 文件以及安装 dcat-admin 等，在此基础上直接通过 composer require dcat/laravel-admin:"2.**" -vvv ，之后 php artisan admin:publish 完成后。

通过 composer install\composer update 完成依赖的安装，使用 php artisan migrate 完成 Model 的定义，并通过 php artisan admin:install 将 Dactadmin 的必要数据(user and pass)数据映射到数据库中。

之后 Dcat-admin 的所有配置都在 config/admin.php 文件夹和目录中，之后的后台目录 app/Admin 中来进行开发：

app/Admin
	├── Controllers //存放 Dcat-admin 启动文件 
│   ├── AuthController.php //DcatAdmin 登录鉴权控制器
│   └── HomeController.php //DcatAdmin 首页控制器
├── Metrics //数据统计卡片 Demo
│   └── Examples
│       ├── NewDevices.php
│       ├── NewUsers.php
│       ├── ProductOrders.php
│       ├── Sessions.php
│       ├── Tickets.php
│       └── TotalUsers.php
├── bootstrap.php  //Dcat-admin 启动文件
└── routes.php //后台路由文件

1	DcatAdmin 的前端静态文件在 ```/public/vendor/dcat-admin``` 目录下，同样的对应数据库迁移文件于同步文件在 ```/database/migrations/``` 目录中。

由于是基于 Laravel Admin 而二次开发的，因此他的语言文件包在 /resources/lang 目录中，可根据环境自行进行选择。

之后，我们还需要在开发环境中开启 Debug 模式，这主要是因为 DactAdmin 所提供的开发工具需要在 debug 下才可使用，我们只需要在 .env 配置文件中的 APP_DEBUG 值设置为 true 即可。

Controller 生成

可以通过访问 Admin | 代码生成器新建并提交一个数据表文件，之后 DcatAdmin 会在 app/Admin/Controllers 中生成一个名为 UserController 的控制器，并会在 App\Models\ 中自动创建一个名为 User 的模型。

之后我们需要做的是只需要在 app/Admin/routes.php 加入一条路由语法 $router->resource('name' , 'UserController');，即可，就会生成一组数据列表 Admin | 管理员，在下一章节中将会详细讲解并使用 DcatAdmin 构建的表格。

之后打开 [Admin | 菜单](http://127.0.0.1:8000/admin/auth/menu) 就可以查看对应的 menu 即在管理后台左侧页面中查看用户管理的页面链接路口，同样的你还可以进行相应的编辑。

Repositories

Dcat Admin 在 Laravel Admin 中引入了一个新的概念，即 Dcat Admin 构建的页面并不直接依赖于 Model，而是直接引入 Repositories 作为中间层，不在与数据的读写产生强耦合的关系。

比如之前我们通过代码生成器所构建的 User，他也会在数据仓库即 app\Admin\Repositories\User 中创建同名的数据仓库文件，其内容为：

<?php

namespace App\Admin\Repositories;

use Dcat\Admin\Repositories\EloquentRepository;
use App\User as UserModel;

class User extends EloquentRepository
{
     protected $eloquentClass = UserModel::class;
 }

Import js

Dcat Admin 使用的是 jquery-pjax - npm (npmjs.com) 所构建的无刷页面，你可以通过集成 Pjax 实现网站无刷新加载 | Liuyib’s Blog 这一文档来了解 Pjax 的实现过程。因此引入 Js 的方式也与传统的引入方法不同。

由于 Dcat Admin 构建的是一个单页应用，加载 JS 只会被执行以此，所以在框架为问哦们提供的 Admin::script 方法的载入非常实用，主要分为两个场景，引入文件和引入 JS Code.

JS file import

DcatAdmin 所提供的两种方式，主要使用的是 Admin:script 以及 Dcat.ready ，主要使用的是 Renderable 契约来进行实现，对于文件官方给了一套详细的写法说明：

<?php

use Illuminate\Contracts\Support\Renderable;
use Dcat\Admin\Admin;

class Card implements Renderable
{
    public static $js = [
        // js脚本不能直接包含初始化操作，否则页面刷新后无效
        'xxx/js/card.min.js',
    ];
    public static $css = [
        'xxx/css/card.min.css',
    ];

    public function script()
    {
        return <<<JS
        console.log('所有JS脚本都加载完了');
        // 初始化操作
        $('xxx').card();
JS;        
    }

    public function render()
    {
        // 在这里可以引入你的js或css文件
        Admin::js(static::$js);
        Admin::css(static::$css);

        // 需要在页面执行的JS代码，例如初始化代码
        // 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行
        Admin::script($this->script());

        return view('...')->render();
    }
}

之后即可通过刚刚写完的 Card 组件引入到 Controller 中，以此来使用 Card 组件，需要注意的是，Card 组件需要用到的静态文件只会在当前请求中加载，以此符合“按需引入”的概念。

1	需要注意的是 ```Card``` class 并没有强制要求的存放目录，理论上来说只要能加载，放在什么地方都可以。

use Dcat\Admin\Layout\Content;
use Card;

class HomeController
{
    public function index(Content $content)
    {
        // 使用上面的Card组件
        // Card组件需要用到的静态文件只会在当前请求加载
        // 其他请求不会加载 
        return $content->body(new Card());
    }
}

blade import JS

至于 Js Code 的引入则较为方便，直接在 Laravel模板文件中添加即可，但需要注意的是需要把 Js code 放入 Dcat.ready 中执行。

<?php
namespace App\Admin\Controllers;

use App\Admin\Metrics\Examples;
use App\Http\Controllers\Controller;
use Dcat\Admin\Http\Controllers\Dashboard;
use Dcat\Admin\Layout\Column;
use Dcat\Admin\Layout\Content;
use Dcat\Admin\Layout\Row;
use Dcat\Admin\Admin;

class HomeController extends Controller
{
    public function index(Content $content)
    {
        return $content
            -%3Eheader('Dashboard')
            ->description('Description...')
            ->body(function (Row $row) {
                $row->column(6, function (Column $column) {
                    $column->row(Dashboard::title());
                    $column->row(new Examples\Tickets());
                });

                $row->column(6, function (Column $column) {
                    $column->row(function (Row $row) {
                        $row->column(6, new Examples\NewUsers());
                        $row->column(6, new Examples\NewDevices());
                    });

                    $column->row(new Examples\Sessions());
                    $column->row(new Examples\ProductOrders());
                });

                Admin::script(
                    <<<JS
(function () {
    var name = 'test';
    console.log('all end', name)
})()
JS
                );
            });
    }
}>)

为了方便理解我们可以将上述代码分为两个部分，我们都知道，DactAdmin 主要使用了 Bootstrap + Jquery 主要满足了 Dact Admin 外观以及无刷加载、动画等方面的功能，因此，你可以将下面 Code 分为 Bootstrap 附加功能：

<?php  
  
namespace App\Admin\Controllers;  
  
use App\Admin\Metrics\Examples;  
use App\Http\Controllers\Controller;  
use Dcat\Admin\Http\Controllers\Dashboard;  
use Dcat\Admin\Layout\Column;  
use Dcat\Admin\Layout\Content;  
use Dcat\Admin\Layout\Row;  
use Dcat\Admin\Admin;  
  
class HomeController extends Controller  
{  
 public function index(Content $content)  
 { return $content  
 ->header('Dashboard')  
 ->description('Description...')  
 ->body(function (Row $row) {  
 $row->column(6, function (Column $column) {  
 $column->row(Dashboard::title());  
 $column->row(new Examples\Tickets());  
 });  
  
 $row->column(6, function (Column $column) {  
 $column->row(function (Row $row) {  
 $row->column(6, new Examples\NewUsers());  
 $row->column(6, new Examples\NewDevices());  
 });  
  
 $column->row(new Examples\Sessions());  
 $column->row(new Examples\ProductOrders());  
 });  
 });  
 }  
}

这主要是 Dact Admin 下的布局，也就是使用的 bootstap 的栅格系统，在此需要认清楚，row 是行的意思，而 column 是列的意思，至于详细的你可以访问开发前必读 | 入门 |《Dcat Admin 中文文档 2.x》| Laravel China 社区 (learnku.com) 查阅 Dcat Admin 的官方文档。

而之后以 Admin::script 起头的 DcatAdmin 方法主要是引入 JS Code，而在此之后 DcatAdmin 还提供了类似于模板的语法操作 Dcat.ready 方法，但在此之前我们主要先了解下 Js Code 在 Controller 的使用：

 Admin::script(  
 <<<JS  
(function () {  
 var name = 'test'; console.log('javaScript code >', name)})()  
JS  
 );

之后你就可以访问 Admin | Dashboard 页面来查看该 JavaSCript Code 的执行效果，而在此之后我们主要会在页面组件中去使用下一个方法。

⬅️ Go back