Dcat-admin自定义页面神技：10招搞定99%需求，效率翻3倍

 

Dcat-admin自定义页面实用技巧分享

在使用Dcat-admin构建后台管理系统时，自定义页面能够满足项目多样化的需求，提升用户体验和开发效率。本文将详细介绍Dcat-admin自定义页面的实用技巧，帮助开发者更好地利用这一强大工具。

 

 

1.Dcat-admin简介

 

Dcat-admin是一个基于Laravel-admin二次开发的后台系统构建工具，它允许开发者通过少量代码快速搭建出功能完善、界面美观的后台系统。Dcat-admin具有简洁优雅、灵活可扩展的API ，集成了用户管理、RBAC权限管理（支持无限极权限节点）、菜单管理等功能。使用pjax构建无刷新页面，支持按需加载静态资源，并且采用松耦合的页面构建与数据操作设计，方便切换数据源 。此外，它还支持自定义页面和主题配色，拥有多主题切换功能等。

 

2.自定义页面基础

 

2.1 创建自定义视图文件

 

在resources/views目录下创建admin文件夹（如果不存在），然后在admin文件夹内创建自定义页面的视图文件，例如custom_page.blade.php。视图文件可以使用Laravel的Blade模板语法进行编写，如下是一个简单示例：

 

@extends('admin.layouts.app')

 

@section('content')

    <div class="container">

        <h1>这是我的自定义页面</h1>

        <p>这里可以放置自定义的内容和组件。</p>

    </div>

@endsection

 

 

在上述代码中，@extends('admin.layouts.app')表示继承Dcat-admin的基础布局模板，@section('content')部分定义了页面的主要内容区域。

 

2.2 定义控制器

 

为了展示自定义页面，需要创建一个控制器。在app/Admin/Controllers目录下创建一个新的控制器，例如CustomPageController.php：

 

namespace App\Admin\Controllers;

 

use Dcat\Admin\Controllers\AdminController;

use Illuminate\Http\Request;

 

class CustomPageController extends AdminController

{

    public function index()

    {

        return view('admin.custom_page');

    }

}

 

在这个控制器中，index方法返回了之前创建的自定义视图文件。

 

 

2.3 配置路由

 

打开app/Admin/routes.php文件，添加自定义页面的路由：

 

Route::group([

    'prefix' => config('admin.route.prefix'),

    'namespace' => config('admin.route.namespace'),

   'middleware' => config('admin.route.middleware'),

], function ($router) {

    $router->get('custom-page', 'CustomPageController@index')->name('custom-page');

});

 

 

上述代码定义了一个名为custom-page的路由，当访问该路由时，会调用CustomPageController的index方法，展示自定义页面。

 

3.自定义页面布局与样式

 

3.1 利用内置布局组件

 

Dcat-admin提供了丰富的布局组件，如Row、Col、Card、Tab等，可以方便地构建复杂的页面布局。例如，使用Row和Col组件实现响应式的两列布局：

 

@extends('admin.layouts.app')

 

@section('content')

    <div class="container">

        <div class="row">

            <div class="col-md-6">

                <div class="card">

                    <div class="card-body">

                        <h3>第一列内容</h3>

                        <p>这里是第一列的具体内容。</p>

                    </div>

                </div>

            </div>

            <div class="col-md-6">

                <div class="card">

                    <div class="card-body">

                        <h3>第二列内容</h3>

                        <p>这里是第二列的具体内容。</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

@endsection

 

 

在这个例子中，.row类创建了一个水平排列的行，.col-md-6类将行分为两列，每列占6个网格宽度（基于Bootstrap的网格系统），从而实现两列等宽的布局效果。

 

3.2 自定义CSS样式

 

可以通过在自定义视图文件中添加标签或者引入外部CSS文件来自定义页面样式。例如，在custom_page.blade.php中添加自定义样式：

 

@extends('admin.layouts.app')

 

@section('content')

    <div class="container">

        <h1>这是我的自定义页面</h1>

        <p class="custom-paragraph">这里可以放置自定义的内容和组件。</p>

    </div>

</section>

 

@section('styles')

    <style>

       .custom-paragraph {

            color: #ff0000;

            font-weight: bold;

        }

    </style>

@endsection

 

 

在上述代码中，@section('styles')部分定义了自定义的CSS样式，将类名为custom-paragraph的段落文本颜色设置为红色，并加粗显示。

 

如果需要引入外部CSS文件，可以在@section('styles')中使用admin_css函数：

 

@section('styles')

    {{ admin_css('@admin/custom.css') }}

@endsection

 

 

其中，@admin/custom.css是相对于resources/views/vendor/dcat-admin目录的路径，确保custom.css文件存在于该目录下。

 

4.自定义页面数据交互

 

4.1 从数据库获取数据

 

在控制器中，可以通过Eloquent模型从数据库获取数据，并传递给视图。假设我们有一个名为users的表，对应的模型为User：

 

namespace App\Admin\Controllers;

 

use Dcat\Admin\Controllers\AdminController;

use App\Models\User;

use Illuminate\Http\Request;

 

class CustomPageController extends AdminController

{

    public function index()

    {

        $users = User::all();

        return view('admin.custom_page', compact('users'));

    }

}

 

 

在视图文件中，可以遍历$users变量来展示数据：

 

@extends('admin.layouts.app')

 

@section('content')

    <div class="container">

        <h1>用户列表</h1>

        <table class="table">

            <thead>

                <tr>

                    <<th>ID</</th>

                    <<th>姓名</</th>

                    <<th>邮箱</</th>

                </tr>

            </thead>

            <tbody>

                @foreach ($users as $user)

                    <tr>

                        <td>{{ $user->id }}</td>

                        <td>{{ $user->name }}</td>

                        <td>{{ $user->email }}</td>

                    </tr>

                @endforeach

            </tbody>

        </table>

    </div>

@endsection

 

 

4.2 表单提交与处理

 

在自定义页面中创建表单并处理提交数据是常见需求。首先，在视图中创建表单：

html

@extends('admin.layouts.app')

@section('content')

    <div class="container">

        <h1>添加用户</h1>

        <form action="{{ admin_url('custom-page/store') }}" method="post">

            @csrf

            <div class="form-group">

                <label for="name">姓名</label>

                <input type="text" class="form-control" id="name" name="name" required>

            </div>

            <div class="form-group">

                <label for="email">邮箱</label>

                <input type="email" class="form-control" id="email" name="email" required>

            </div>

            <button type="submit" class="btn btn-primary">提交</button>

        </form>

    </div>

@endsection

 

在上述表单中，action属性指定了表单提交的路由为admin_url('custom-page/store')，method为post，并包含了CSRF令牌以确保安全。

 

然后，在控制器中定义处理表单提交的方法：

 

php

namespace App\Admin\Controllers;

 

use Dcat\Admin\Controllers\AdminController;

use App\Models\User;

use Illuminate\Http\Request;

 

class CustomPageController extends AdminController

{

    public function index()

    {

        return view('admin.custom_page');

    }

 

    public function store(Request $request)

    {

        $validatedData = $request->validate([

            'name' =>'required|string|max:255',

            'email' =>'required|email|unique:users',

        ]);

 

        User::create($validatedData);

 

        return admin_redirect('custom-page')->with('success', '用户添加成功');

    }

}

 

 

在store方法中，首先对表单数据进行验证，然后使用User::create方法将数据保存到数据库，最后使用admin_redirect函数重定向回自定义页面，并附带成功提示信息。

 

4.3 AJAX请求与响应

 

为了实现无刷新的数据交互，可以使用AJAX请求。Dcat-admin内置了对AJAX的支持，结合jQuery可以方便地发送和处理AJAX请求。例如，在页面中添加一个按钮，点击按钮通过AJAX获取用户数据并展示：

 

html

@extends('admin.layouts.app')

 

@section('content')

    <div class="container">

        <h1>通过AJAX获取用户数据</h1>

        <button id="fetch-users" class="btn btn-primary">获取用户</button>

        <div id="user-result"></div>

    </div>

</section>

 

@section('scripts')

    <script>

        $(document).ready(function () {

            $('#fetch-users').click(function () {

                $.ajax({

                    url: '{{ admin_url('custom-page/fetch-users') }}',

                    type: 'GET',

                    success: function (response) {

                        $('#user-result').html(response);

                    },

                    error: function () {

                        alert('获取数据失败');

                    }

                });

            });

        });

    </script>

@endsection

 

 

在上述代码中，当点击id为fetch-users的按钮时，会发送一个AJAX GET请求到admin_url('custom-page/fetch-users')路由。如果请求成功，将服务器返回的数据填充到id为user-result的div中；如果请求失败，弹出错误提示。

 

在控制器中定义处理AJAX请求的方法：

 

php

namespace App\Admin\Controllers;

 

use Dcat\Admin\Controllers\AdminController;

use App\Models\User;

use Illuminate\Http\Request;

 

class CustomPageController extends AdminController

{

    public function index()

    {

        return view('admin.custom_page');

    }

 

    public function store(Request $request)

    {

        // 表单处理逻辑

    }

 

    public function fetchUsers()

    {

        $users = User::all();

        $html = '<table class="table">

                    <thead>

                        <tr>

                            <<th>ID</</th>

                            <<th>姓名</</th>

                            <<th>邮箱</</th>

                        </tr>

                    </thead>

                    <tbody>';

        foreach ($users as $user) {

            $html.= '<tr>

                        <td>'.$user->id.'</td>

                        <td>'.$user->name.'</td>

                        <td>'.$user->email.'</td>

                    </tr>';

        }

        $html.= '</tbody></table>';

 

        return $html;

    }

}

 

 

fetchUsers方法从数据库获取所有用户数据，并将其格式化为HTML表格字符串返回给前端。

 

 

5.自定义页面与权限管理

 

5.1 基于角色的访问控制（RBAC）

 

Dcat-admin的RBAC权限管理支持无限极权限节点，可以方便地控制用户对自定义页面的访问。首先，在数据库中创建角色和权限记录。假设我们有一个名为“管理员”的角色和一个名为“访问自定义页面”的权限。

 

在数据库的roles表中插入一条记录，例如：

 

sql

INSERT INTO roles (name, slug) VALUES ('管理员', 'admin');

 

 

在permissions表中插入权限记录：

 

sql

INSERT INTO permissions (name, slug) VALUES ('访问自定义页面', 'access-custom-page');

 

 

然后，将权限关联到角色，在role_permissions表中插入记录：

 

sql

INSERT INTO role_permissions (role_id, permission_id) VALUES (1, 1);

 

 

（假设角色ID为1，权限ID为1）

 

5.2 在控制器中应用权限

 

在自定义页面的控制器中，可以使用Dcat-admin提供的权限验证功能。例如，在CustomPageController中添加权限验证：

 

php

namespace App\Admin\Controllers;

 

use Dcat\Admin\Controllers\AdminController;

use App\Models\User;

use Illuminate\Http\Request;

use Dcat\Admin\Auth\Permission;

 

class CustomPageController extends AdminController

{

    public function __construct()

    {

        $this->middleware(function ($request, $next) {

            if (! Permission::check('access-custom-page')) {

                return admin_error('权限不足', '你没有权限访问此页面');

            }

            return $next($request);

        });

    }

 

    public function index()

    {

        return view('admin.custom_page');

    }

 

    // 其他方法...

}

 

 

在上述代码中，通过__construct方法添加了一个中间件，在每次访问控制器方法前，都会检查用户是否具有“

 

6.常见问题与解决方法

 

6.1 页面样式冲突

 

在自定义页面过程中，可能会出现自定义样式与Dcat-admin内置样式冲突的情况。解决方法是使用更具体的CSS选择器或者使用!important声明来提高自定义样式的优先级。例如：

 

css

.custom-class {

    color: #ff0000!important;

}

 

 

但要注意，尽量避免过度使用!important，以免造成样式难以维护。

 

6.2 数据加载缓慢

 

如果自定义页面涉及大量数据的加载和展示，可能会导致页面加载缓慢。可以采取以下优化措施：

 

- 分页加载：使用Dcat-admin提供的分页功能，将数据分页展示，减少单次加载的数据量。例如，在Eloquent查询中使用paginate方法：

 

php

$users = User::paginate(10);

 

 

- 缓存数据：对于不经常变化的数据，可以使用Laravel的缓存机制来减少数据库查询次数。例如：

 

php

$users = cache()->remember('users', 60, function () {

    return User::all();

});

 

 

上述代码将用户数据缓存60分钟，在缓存有效期内，直接从缓存中获取数据，而不是查询数据库。

 

6.3 表单验证错误提示不显示

 

如果表单验证失败但错误提示没有正确显示，可能是因为没有正确设置错误信息的展示方式。在Blade模板中，可以使用以下方式显示错误信息：

 

html

<div class="form-group">

    <label for="name">姓名</label>

    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" required>

    @error('name')

        <div class="invalid-feedback">{{ $message }}</div>

    @enderror

</div>

 

 

在上述代码中，@error('name')指令会检查名为name的字段是否有验证错误，如果有，则添加is-invalid类到输入框，并显示错误信息。

 

通过掌握以上Dcat-admin自定义页面的实用技巧，开发者可以更加灵活地构建符合项目需求的后台管理系统，提高开发效率和系统的用户体验。无论是简单的页面定制还是复杂的数据交互与权限管理，Dcat-admin都提供了强大而便捷的解决方案。

 

💡注意：本文所介绍的功能均基于公开信息整理，仅供用户参考。在使用任何软件时，请务必遵守相关法律法规及软件使用协议。同时，本文不涉及任何商业推广或引流行为，仅为用户提供一个了解和使用该工具的渠道。

 

在生活中时遇到了哪些问题？你是如何解决的？欢迎在评论区分享你的经验和心得！

 

希望这篇文章能够满足您的需求，如果您有任何修改意见或需要进一步的帮助，请随时告诉我！

 

作者郑重声明，本文内容为本人原创文章！