Dcat Admin - 一款顏值極高的後臺系統構建工具，簡單而高效

Dcat Admin

前言

首先得感謝一下社群的大佬@z-song，這個專案是基於laravel-admin二次開發的，laravel-admin也是我搬磚至今用過的對後端程式設計師最友好的後臺構建工具，沒有之一，包括Laravel nova也沒有這個用的爽快。初次接觸laravel-admin我就被大佬的設計驚豔到了，就有一種原來後臺原來還能這樣寫的感覺。大家可以把這個專案視為laravel-admin的船新版本哈哈哈。

這個專案從commit的第一個版本開始，到現在已經接近一年時間，這一年不敢說是潛心開發，但也是耗費了許多心思和精力在這個專案裡面，上頭的時候甚至寫到半夜兩三點。因為想呈現出一個高品質的產品給大家，所以就一直未敢釋出，一直在默默的反覆打磨摳細節到了現在，希望能寫出真正有用的東西。

現在也終於到了可以跟大家見面的時刻了，正式版即將在近期釋出，希望這個專案可以幫到大家！歡迎大家安裝體驗，如果對這個專案有興趣也歡迎參與進來！

如有問題大家可以在GITHUB issue區或QQ群中反饋，我會及時解決。

QQ交流群：704661955

簡介

Dcat Admin是一個基於laravel-admin二次開發而成的後臺構建工具，只需極少的程式碼即可構建出一個功能完善且顏值極高的後臺系統。。

DEMO線上預覽 | Github(如果喜歡這個專案請點個star吧，感謝支援)

環境要求

php 7.1+
laravel 5.5 ~ 7.*

進度

目前這個專案的第一個版本的功能已全部開發完畢（包含laravel-admin最新版本的幾乎所有功能和其他新增功能），文件目前還在補充當中，等文件差不多了就會發布正式版，預計是4月初。
正式版本釋出之後大家可以放心使用，現在已基本沒有問題，如果有問題我也會及時解決。另外也不用擔心沒人維護的問題，這個專案我會持續維護和更新下去，當然如果支援的人多我會更新得更勤快哈哈哈。

接下來的工作重點是編寫單元測試用例和完善文件，這個專案將會有完善的單元測試用例和完善的文件，一個高品質的專案穩定性是必須的！

這裡不得不吹一下laravel dusk，用起來真的太爽了，可以模擬很多真人操作瀏覽器的動作。跑測試用例時時還可以彈出瀏覽器，可以直觀的看到單測邏輯執行的效果，結合元件功能，讓編寫模擬瀏覽器操作的相關邏輯變得更簡單，還增加了很多趣味性。

設計方向與適合人群

laravel-admin並沒有採用現在流行的前後端分離的模式開發，依然是用後端渲染頁面，前端框架用的是bootstrap3+jQuery2，這個特點既是laravel-admin的強大優勢，同時也是它的弱點。

優勢

採用bootstrap+jQuery實現後臺構建工具的優勢就是，它對後端程式設計師極度友好，後端程式設計師用這個技術棧可以很高效率地搭建出一個完善的後臺系統，而且上手簡單，學習成本很低。基本上就是隻要你會jQuery和Laravel，那麼從開發到維護和擴充套件都是非常輕鬆的事。

弱點

而所謂弱點，就是從技術的角度來看，bootstrap + jQuery的組合已經是比較落伍的技術棧，甚至可能很多精通大前端的同學們可能也已經看不上這個技術棧了，現在流行的前端框架是vue和react。

設計方向

Dcat Admin的優勢與缺點與laravel-admin是一脈相承的，我們並不太追求前端技術的新穎，而更注重易用性和高效率。白貓黑貓只要能抓到老鼠就是好貓，你看我香不香就行了，不是嗎？所以這個專案的設計方向已經很明確：
注重後端開發體驗和高效率，注重介面的美觀，注重程式碼的簡潔和優雅。

適合人群

分析了這個專案的優缺點之後，這個專案的適合人群也是顯而易見了。

• 1.適合個人站長，可滿足輕鬆、快速建站的需求
• 2.適合PHP初學者，上手簡單學習成本低
• 3.適合有快速建站需求，主要以滿足功能為主，不注重技術選型的專案。例如外包專案、公司內部辦公系統等等

如果你是抱著學習前端技術或追求的是前端技術的新穎的心態，那麼這個專案並不適合你，你可能更適合去用laravel nova。我這裡的意思也並不是說laravel nova不好用，只是相對於laravel admin而言，它的學習成本會更高，易用程度也有所不及，對開發人員的技術水平有更高的要求，如果說得不對歡迎指正，大家輕噴哈。

與Laravel-admin的不同

下面列一些本專案與laravel-admin的主要不同點

1.介面

本專案前端頁面採用vuexy(bootstrap4 + jQuery3)構建，如大家所見，介面更加美觀，bootstrap4的開發體驗也會更好一些，比bootstrap3強不少。

vuexy是一個商業收費專案，本專案已經取得了正版授權。

2.鬆散耦合的頁面構建與資料操作設計

Dcat Admin構建頁面不再直接依賴於Model，頁面的構建與資料的讀寫是分開的。換句話說，構建頁面是不需要關心資料的讀寫的，我把對資料的讀寫操作抽象成清晰易懂的介面，只需實現這些簡單、清晰的介面就能輕鬆切換資料來源。

當然為了方便我也保留了直接使用Model的功能，畢竟大多數時候直接使用Model也能滿足我們的需求。

3.無重新整理頁面JS按需載入

laravel-admin有一個讓人很不爽缺點就是不支援前端靜態資源的按需載入，所有靜態資源都必須一次性載入完畢，這就意味著你的系統不能隨意引入JS元件，否則會影響素有頁面的載入速度！

而在這個專案中我仍然採用PJAX構建無重新整理頁面，但是增加了支援按需載入前端檔案的功能，每個頁面只需載入這個頁面需要用的的JS檔案和CSS檔案。

這個功能對於開發體驗來說沒有任何影響，依然是按以前的方法引入script程式碼，只不過載入前端檔案的程式碼可以放在控制器中執行。

示例：
假設你想定義一個卡片元件，這個元件需要引入一些前端靜態資原始檔

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

class Card implements Renderable
{
    public static $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();
    }
}

在控制器中使用

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

class HomeController
{
    public function index(Content $content)
    {
        // 使用上面的Card元件
        // Card元件需要用到的靜態檔案只會在當前請求載入
        // 其他請求不會載入 
        return $content->body(new Card());
    }
}

4.構建無選單欄頁面

有時候我們會需要構建一個沒有選單欄和頂部導航欄的完整頁面(如登陸頁面，或需要在IFRAME中載入的頁面等等)。這時候就可以用Content::full這個方法了，通過此方法構建的頁面是可以使用Dcat Admin中的所有的功能和元件的，可以顯著地提高效率。

示例：
構建登陸頁面

use Dcat\Admin\Layout\Content;

class AuthController extends Controller
{
    public function getLogin(Content $content)
    {
        if ($this->guard()->check()) {
            return redirect($this->redirectPath());
        }
        // 使用full方法構建登陸頁面
        return $content->full()->body(view($this->view));
    }

    ...
}    

下面是登陸功能的模板內容，因為控制器中使用了Content::full方法構建頁面，所以不需要在模板中寫head，也不需要關心引入哪些靜態資源，只需寫當前頁面的HTML即可，並且還可以使用Dcat Admin中的所有功能，如下面用到的表單提交功能。

<style>
    html body {background: #fff;}
</style>

<link rel="stylesheet" href="{{ admin_asset('@admin/css/pages/authentication.css') }}">

<section class="row flexbox-container">
    <!-- 這裡是你的登陸頁面HTML程式碼 -->
    ...
</section>

<script>
    Dcat.ready(function () {
        // ajax表單提交
        $('#login-form').form({
            validate: true,
            success: function (data) {
                if (! data.status) {
                    Dcat.error(data.message);

                    return false;
                }

                Dcat.success(data.message);

                location.href = data.redirect;

                return false;
            }
        });
    });
</script>

這個登陸頁面使用了ajax表單提交功能，並且附帶了按鈕loading效果，比原來的登陸功能使用者體驗更好，大家可以點這裡體驗。

5.表單彈窗

在Dcat Admin中構建非IFRAME表單彈窗只需增加非常簡單的數行程式碼，同時兼顧使用者體驗和開發體驗。

表單構建控制器

use Dcat\Admin\Form;
use Dcat\Admin\Models\Repositories\Role;

class RoleController extends AdminController
{
    public function form()
    {
        return Form::make(new Role('permissions'), function (Form $form) {
            $roleTable = config('admin.database.roles_table');
            $connection = config('admin.database.connection');

            $id = $form->grtKey();

            $form->display('id', 'ID');

            $form->text('slug')
                ->required()
                ->creationRules(['required', "unique:{$connection}.{$roleTable}"])
                ->updateRules(['required', "unique:{$connection}.{$roleTable},slug,$id"]);

            $form->text('name')->required();
            $form->display('created_at');
            $form->display('updated_at');
        });
    }

    ...
}

在任意介面中構建你的表單彈窗

use App\Http\Controllers\Controller;
use Dcat\Admin\Form;
use Dcat\Admin\Layout\Content;

class ModalFormController extends Controller
{
    public function index(Content $content)
    {
        return $content->body($this->build());
    }

    protected function build()
    {
        // 新增模式彈窗
        Form::dialog('新增角色')
            ->click('.create-form') // 繫結點選按鈕
            ->url('auth/roles/create') // 表單頁面連結，此引數會被按鈕中的 “data-url” 屬性替換。。
            ->width('700px') // 指定彈窗寬度，可填寫百分比，預設 720px
            ->height('650px') // 指定彈窗高度，可填寫百分比，預設 690px
            ->success('Dcat.reload()'); // 新增成功後重新整理頁面

        // 編輯模式彈窗
        Form::dialog('編輯角色')
            ->click('.edit-form')
            ->success('Dcat.reload()'); // 編輯成功後重新整理頁面

        // 當需要在同個“class”的按鈕中繫結不同的連結時，把連結放到按鈕的“data-url”屬性中即可
        $editPage = admin_base_path('auth/roles/1/edit');

        return <<<HTML
<div style='padding:30px 0'>
    <span class='btn btn-outline-primary create-form'> &nbsp;&nbsp;&nbsp;新增表單彈窗&nbsp;&nbsp;&nbsp; </span> &nbsp;&nbsp;
    <span class='btn btn-primary edit-form' data-url='{$editPage}'> &nbsp;&nbsp;&nbsp;編輯表單彈窗&nbsp;&nbsp;&nbsp; </span>
</div>
HTML;
    }
}

效果

6.簡單易用的統計卡片

系統內建了常用的統計卡片功能，可以非常方便的展示統計資料，體驗。

卡片編寫示例

use Dcat\Admin\Widgets\Metrics\Line;
use Illuminate\Http\Request;

class NewUsers extends Line
{
    /**
     * 初始化卡片內容
     *
     * @return void
     */
    protected function init()
    {
        parent::init();

        // 卡片標題
        $this->title('New Users');
        // 下拉選項，用於與後端互動
        $this->dropdown([
            '7' => 'Last 7 Days',
            '28' => 'Last 28 Days',
            '30' => 'Last Month',
            '365' => 'Last Year',
        ]);
    }

    /**
     * 處理請求
     *
     * @param Request $request
     *
     * @return mixed|void
     */
    public function handle(Request $request)
    {
        // 生成用於展示的隨機資料
        $generator = function ($len, $min = 10, $max = 300) {
            for ($i = 0; $i <= $len; $i++) {
                yield mt_rand($min, $max);
            }
        };

        switch ($request->get('option')) {
            case '365':
                // 卡片內容
                $this->withContent(mt_rand(1000, 5000).'k');
                // 圖表資料
                $this->withChart(collect($generator(30))->toArray());
                break;
            case '30':
                // 卡片內容
                $this->withContent(mt_rand(400, 1000).'k');
                // 圖表資料
                $this->withChart(collect($generator(30))->toArray());
                break;
            case '28':
                // 卡片內容
                $this->withContent(mt_rand(400, 1000).'k');
                // 圖表資料
                $this->withChart(collect($generator(28))->toArray());
                break;
            case '7':
            default:
                // 卡片內容
                $this->withContent('89.2k');
                // 圖表資料
                $this->withChart([28, 40, 36, 52, 38, 60, 55,]);
        }
    }

    /**
     * 設定圖表資料.
     *
     * @param array $data
     *
     * @return $this
     */
    public function withChart(array $data)
    {
        return $this->chart([
            'series' => [
                [
                    'name' => $this->title,
                    'data' => $data,
                ],
            ],
        ]);
    }

    /**
     * 設定卡片內容.
     *
     * @param string $content
     *
     * @return $this
     */
    public function withContent($content)
    {
        return $this->content(
            <<<HTML
<div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px">
    <h2 class="ml-1 font-large-1">{$content}</h2>
    <span class="mb-0 mr-1 text-80">{$this->title}</span>
</div>
HTML
        );
    }
}

使用卡片

use NewUsers;

class MetricCardController extends Controller
{
    use PreviewCode;

    public function index(Content $content)
    {
        return $content
            ->body(function (Row $row) {
                $row->column(4, new TotalUsers());
                $row->column(4, new NewUsers());
                $row->column(4, new NewDevices());
            });
    }
}

7.無限層級結構資料表格

這個功能可以用於分頁展示層級結構資料，適合展示資料量大的層級結構資料，體驗

效果

8.組合表頭

此功能可以用於構建雙表頭表格，非常適合與展示報表功能，體驗
效果

更多不同

限於篇幅，更多的不同點這裡不再贅述，正式版釋出後大家可以在文件中檢視。

鳴謝

沒有laravl-admin就沒有這個專案，再次對大佬@z-song表示感謝，laravl-admin牛逼。

另外這裡還需要感謝一下社群的這位老哥@wongvio，這個專案的前端UI框架vuexy是@wongvio推薦的，這段時間跟老哥聊天改變了我很多想法，也很期待後面的合作。

本作品採用《CC 協議》，轉載必須註明作者和本文連結