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

Jiangqh發表於2020-03-30

Dcat Admin

前言

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

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

POEkfnSRk7.png!large

一年時間，有過不知前路的迷茫，也有過妄自菲薄、自我懷疑，甚至懷疑這個專案存在的意義，但最終我還是堅持了下來，還是選擇認真打磨產品而不是三分鐘熱度。我相信，只要把產品的品質做好了，大家是能看到的。而現在也終於到了可以跟大家見面的時刻了，正式版即將在近期釋出，希望這個專案可以幫到大家！歡迎大家安裝體驗，如果對這個專案有興趣也歡迎參與進來！

如有問題大家可以在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。

其實這個弱點也不是絕對的，jQuery專案也不是代表質量差，你也可以在你的專案中採用laravel mix+es6+scss編寫出高質量的前端程式碼。

設計方向

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 協議》，轉載必須註明作者和本文連結

jqhph

Dcat Admin v1.0.0 釋出 - 對後端開發友好的高顏值後臺系統構建工具，簡單高效，開箱即用
2020-04-16
後端
Dcat Admin v1.6.5 釋出 - 高顏值後臺系統構建工具，增加全新表格樣式 (更符合國內審美)
2020-07-29
Dcat Admin v1.2.0 釋出 - 對後端開發者友好的高顏值後臺系統構建工具，增加編輯器以及新的主題配色
2020-04-27
後端
Dcat Admin v1.3.0 釋出 - 對後端開發者友好的高顏值後臺系統構建工具，自定義主題配色以及 PHP7.4 支援
2020-05-06
後端PHP
Dcat Admin v1.2.0 釋出 - 對後端開發者友好的高顏值後臺系統構建工具，PHP7.4、自定義主題配色、新配色
2020-04-27
後端PHP
Dcat Admin 後臺系統構建工具--表單元件自定義（按鈕聯動和選擇框三級地址聯動）
2020-05-17
元件
[Dcat Admin]表單無限極select
2023-07-12
Dcat Admin 構建頁面佈局
2021-09-26
分享5款簡單而高效的小工具
2023-12-19
Dcat Admin實現簡單的excel匯入功能
2021-03-24
Excel
基於 vue-element-admin 高效開發後臺管理系統
2019-12-17
Vue
一款適用於後端開發人員的（高顏值）後臺擴充套件
2020-04-20
後端套件
react 高效高質量搭建後臺系統系列 —— 系統佈局
2023-01-31
React
hyperf-admin 釋出啦, 配置化後臺開發工具, 後臺搭建從此簡單.
2020-06-19
Dcat Admin 自定義 Form 表單實現後臺系統配置內容的自定義，並可擴充套件配置項。
2022-03-27
ORM套件
react 高效高質量搭建後臺系統系列 —— 登入
2023-01-13
React
基於Hyperf + Vue + Element 構建的後臺管理系統（內建聊天系統）
2022-02-10
Vue
為建設而建設，為系統而系統
2010-11-02
Dcat admin 配置多後臺獨立應用記錄
2021-08-28
react 高效高質量搭建後臺系統系列 —— 表格的封裝
2023-02-11
React封裝
? Slow Admin - 使用Laravel和Amis快速構建你的後臺
2022-08-25
Laravel
簡單搭建後臺管理系統佈局
2017-05-10
基於thinkphp6 + layui[fix] 開源的一款高顏值可商用的後臺框架
2022-05-25
PHPUI框架
開源後臺系統*mee-admin*
2020-10-07
從原始碼構建一個極簡的Linux作業系統
2023-02-23
原始碼Linux作業系統
極簡單欄部落格系統
2019-05-11
OpenStack的高可用系統構建(1)
2014-03-12
OpenStack的高可用系統構建(2)
2014-03-20
react 高效高質量搭建後臺系統系列 —— 請求資料
2023-01-04
React
react 高效高質量搭建後臺系統系列 —— 腳手架搭建
2022-12-22
React
react 高效高質量搭建後臺系統系列 —— 前端許可權
2023-02-16
React前端
Dcat Admin 教程 - 如何從 Laravel admin 遷移到 dcat admin？
2020-05-08
Laravel
簡單又好用的高效工具
2021-04-12
使用飛冰+dva快速構建一個後臺系統
2018-11-17
簡單的後臺管理系統vue-cli3.0+element-ui
2018-10-09
VueUI
Mac上一款簡單實用的系統清理和最佳化工具
2020-11-16
Mac
【MySQL】如何構建高效能MySQL系統
2017-04-19
MySql
構建高併發&高可用&安全的IT系統-高併發部分
2017-07-27