加入Dcat Admin使用大軍

my38778570發表於2022-12-09

文件

Dcat-Admin框架

安裝laravel

laravel new dcat-admin

安裝完 laravel 之後需要修改.env 檔案，設定資料庫連線設定正確

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dcat-admin
DB_USERNAME=dcat-admin
DB_PASSWORD=123456

安裝 dcat-admin

composer require dcat/laravel-admin:"2.*" -vvv

如果上一步出現報錯，則更改 composer.json 的引數 minimum-stability 的值為 dev。

然後執行下面的命令來發布資源：

php artisan admin:publish

然後執行下面的命令完成安裝：

php artisan admin:install

配置檔案

安裝完成之後，dcat-admin 所有的配置都在 config/admin.php 檔案中。

  • app/Admin/routes.php 檔案用來配置後臺路由。
  • app/Admin/bootstrap.php 是 dcat-admin 的啟動檔案，使用方法請參考檔案裡面的註釋.
  • app/Admin/Controllers 目錄用來存放後臺控制器檔案，該目錄下的 HomeController.php 檔案是後臺首頁的顯示控制器，AuthController.php 為後臺管理員登入鑑權控制器。
  • app/Admin/Metrics/Examples 裡面存放的是資料統計卡片(Metric Card)的示例程式碼.

靜態檔案

後臺所需的前端靜態檔案在 /public/vendor/dcat-admin 目錄下。

資料表遷移檔案

對應的資料表遷移檔案在 /database/migrations 目錄下。

語言包

語言包檔案在 /resources/lang 目錄下。

加入Dcat Admin使用大軍

配置檔案

config/admin.php

預設訪問域名跳到後臺

web.php修改為

Route::redirect('/', '/admin');

啟動

php artisan serve --port 8000 --host 0.0.00

訪問

http://ip:8000/admin/auth/login
賬戶:admin
密碼:admin

laravel預設語言修改為中文

config/app.php 修改為

'locale' => 'zh_CN',

預設時區修改

config/app.php 修改為

'timezone' => 'PRC',

新增路由

<?php

use Illuminate\Routing\Router;
use Illuminate\Support\Facades\Route;
use Dcat\Admin\Admin;

Admin::routes();

Route::group([
    'prefix' => config('admin.route.prefix'),
    'namespace' => config('admin.route.namespace'),
    'middleware' => config('admin.route.middleware'),
], function (Router $router) {

    $router->get('/', 'HomeController@index');

    //網站設定
    Route::get('/settings', 'SettingsController@index')->name('setting.index');

});

新增控制器

<?php

namespace App\Admin\Controllers;

use App\Http\Controllers\Controller;
use Dcat\Admin\Layout\Content;
use Dcat\Admin\Widgets\Card;

class SettingsController extends Controller
{
    public function index(Content $content)
    {
        return '網站設定';
    }
}

訪問

http://ip:8000/admin/settings

加入Dcat Admin使用大軍

新增選單

新增

加入Dcat Admin使用大軍

可拖動

加入Dcat Admin使用大軍

翻譯

加入Dcat Admin使用大軍

工具表單

工具表單
表單欄位使用
用命令 admin:form 來生成表單類檔案：

php artisan admin:form Setting

加入Dcat Admin使用大軍

表單設定

   /**
     * Build a form here.
     */
    public function form()
    {
        $this->confirm('您確定要提交設定嗎', '部分設定提交之後需要重新重新整理一下瀏覽器才能生效');
        $this->text('webname', '網站名稱')->default(admin_setting('crmname', 'NXCASE案件管理系統'));
        $this->url('weburl', '網站地址')->default(admin_setting('weburl', 'https://test.tt'))->help('正確填寫網址，並且必須以 / 結尾，否則會導致LOGO尤法顯示');
        $this->image('logo', '網站LOGO')->accept('jpg,png,gif,jpeg')->maxSize(512)->required()->autoUpload()->help('大小不要超過512K');
        $this->radio('horizontal menu', '選單位置')->options([0 => '側欄', 1 => '頂欄'])->default(admin_setting('horizontal menu', 0));
        $this->radio('styletype', '網站風格')->options([1 => '舊版', 2 => '大字版'])->default(admin_setting('style type', 2));
        $this->radio('sidebar style', '側欄顏色')->options(['light' => '白色', 'dark' => '黑色', 'primary' => '彩色'])->default(admin_setting('sidebar_style', 'dark'));
        $this->radio('logintheme', '登入頁樣式')->options(['bigpicture' => '大圖', 'simple' => '簡單']);
        $this->image('logobg', '登陸頁背景圖')->accept('jpgpng,gif,jpeg')->maxSize(1024)->autoUpload()->help('大小不要超過512K，僅在登入頁為大圖模式下生效');
    }

    /**
     * The data of the form.
     *
     * @return array
     */
    public function default()
    {
        return [
            'logp' => admin_setting('logo', public_path() . '/static/img/logo.png'),
            'color' => admin_setting('color', 'green'),
            'body_class' => admin_setting('body_class', 'sidebar-separate'),
            'sidebar_style' => admin_setting('sidebar_style', 'light'),
            'bodyclass' => admin_setting('body class', 'sidebar-separate'),
            'logintheme' => admin_setting('logintheme', 'bigpicture'),
            'logobg' => admin_setting('logobg'),
            'horizontal menu' => admin_setting('horizontal menu', 'false'),
            'style type' => admin_setting('style type', 1),
        ];
    }

加入Dcat Admin使用大軍

建立軟連結

php artisan storage:link

提交處理邏輯

    /**
     * Handle the form request.
     *
     * @param array $input
     *
     * @return mixed
     */
    public function handle(array $input)
    {
        // dump($input);

        // return $this->response()->error('Your error message.');

        return $this
            ->response()
            ->success('Processed successfully.')
            ->refresh();
    }

登入頁面重寫

<?php

namespace App\Admin\Controllers;

use Dcat\Admin\Http\Controllers\AuthController as BaseAuthController;
use Dcat\Admin\Layout\Content;

class AuthController extends BaseAuthController
{
    public function getLogin(Content $content)
    {
        if ($this->guard()->check()) {
            return redirect($this->getRedirectPath());
        }
        $is_rewrite = true;
        if ($is_rewrite) {
            $logintheme = 'admin.login.login';
        } else {
            $logintheme = $this->view;
        }
        return $content->full()->body(view($logintheme));
//        return $content->full()->body(view($this->view));
    }
}

加入Dcat Admin使用大軍

加入Dcat Admin使用大軍

Config配置重寫

重寫config/admin.php

加入Dcat Admin使用大軍

可以在app/Admin/bootstrap.php下修改

Admin::baseCss(['static/css/supply' . admin_setting('style type', 2) . '.css'], true);
Admin::asset()->alias('@nunito', null, '');
Admin::asset()->alias('@montserrat', null, '');


$site_url = admin_setting('weburl');
$logo = '< img src="' . $site_url . 'storage/' . admin_setting('logo') . '"> &nbsp;' . admin_setting('webname');
$logo_mini = '< img src="' . $site_url . 'storage/' . admin_setting('logo') . '">';
config([
    'app.url' => admin_setting('weburl'),
    'admin.title' => admin_setting('webname'),
    'admin.name' => admin_setting('webname'),
    'admin.logo' => $logo,
    'admin.logo-mini' => $logo_mini,
    'admin.layout.body class' => 'default',
    'admin.layout.sidebar style' => admin_setting('sidebar_style'),
    'admin.layout.dark mode switch' => true,
    'admin.layout.color' => 'blue-light',
    'admin.layout.horizontal menu' => admin_setting('horizontal menu')
]);

底部版權修改

把dcat-admin/vendor/dcat/laravel-admin/resources/views/layouts/container.blade.php複製到/dcat-admin/resources/views/vendor/admin/layouts/container.blade.php修改即可

加入Dcat Admin使用大軍

控制檯元件修改

生成元件

Blade 模板/元件

[root@iZvixj0oze6411Z dcat-admin]# php artisan make:component blank_tips

   INFO  Component [app/View/Components/blank_tips.php] created successfully.

加入Dcat Admin使用大軍

加入Dcat Admin使用大軍

在/dcat-admin/resources/views/admin/home/index.blade.php引入<x-blank_tips/>即可

使用插槽

blank_tips.blade.php

<div>
    Blade 控制檯元件<br/>
    <h1> {{$title}}</h1>
    <h5>  {{$slot}}</h5>
    <!-- Simplicity is the essence of happiness. - Cedric Bledsoe -->
</div>

/home/index.blade.php

<x-blank_tips>
    <x-slot name="title">
        歡迎使用後臺管理系統
    </x-slot>
    你可以從左側選單開始使用各項功能
</x-blank_tips>

加入Dcat Admin使用大軍

開發工具（重點）

程式碼生成器

新增測試表

加入Dcat Admin使用大軍

加入Dcat Admin使用大軍

生成資料表

php artisan migrate

新增路由

Route::group([
    'prefix'     => config('admin.route.prefix'),
    'namespace'  => config('admin.route.namespace'),
    'middleware' => config('admin.route.middleware'),
], function (Router $router) {

    $router->get('/', 'HomeController@index');

    $router->resource('test', 'TestController');

});

這樣一個簡單的 CURD 功能就構建完成了，剩下的工作就是深度構建資料表格和表單了，開啟 app/Admin/Contollers/TestController.php, 找到 form() 和 grid() 方法，然新增構建程式碼。
更多詳細使用請檢視資料表格和資料表單。

參考
LARAVEL後臺管理框架Dcat Admin入門教程

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

相關文章