要想灵活的使用dcat-admin框架开发,必须知道框架有哪些类提供给我们使用.
每一个自定义的按钮,弹框,信息展示,小组件都用到特定的类和接口.
常用核心类
Dcat\Admin\Http\Controllers\AdminController
需要继承的公共控制器
Dcat\Admin\Layout\Content
布局核心
Dcat\Admin\Grid
表格列表页面
Dcat\Admin\Form
表单页面
Dcat\Admin\Show
详情页面
Dcat\Admin\Grid\RowAction
扩展行操作
其中Dcat\Admin\Form
和Dcat\Admin\Show
实现了Illuminate\Contracts\Support\Renderable
接口
laravel 常用类
Illuminate\Http\Request
接收请求参数$request,定义此类
Illuminate\Support\Facades\DB
布局常用类
布局用的 行row 和 列column
用php代码构建多行多列的布局就需要用到
Dcat\Admin\Layout\Column
Dcat\Admin\Layout\Row
$content->row(function (Row $row) {$row->column(4, 'foo');$row->column(8, function (Column $column) {$column->row('111');$column->row('222');$column->row('333');});});
常用方法
view() 模板调用
Admin:script() 控制器里加载js代码
控制器
public function index(Content $content)
{$content->header('填写页面头标题');$content->description('填写页面描述小标题');// 添加面包屑导航$content->breadcrumb(['text' => '首页', 'url' => '/admin'],['text' => '用户管理', 'url' => '/admin/users'],['text' => '编辑用户']);// 填充页面body部分,这里可以填入任何可被渲染的对象$content->body('hello world');$content->body('hello world2');
}
数据表格的各个按钮控制
$grid->disableActions(); 禁用操作按钮
$grid->disableEditButton(); 禁用编辑操作
$grid->disableDeleteButton(); 禁用删除操作
$grid->disableBatchActions(); 禁用批量操作
$grid->disableBatchDelete(); 禁用批量删除操作
$grid->disableToolbar(); 禁用工具栏
$grid->disableRefreshButton(); 禁用刷新按钮
$grid->disablePagination(); 禁用分页
$grid->paginate(15); 设置分页大小
普通组件
都用make生成组件实例.
Dcat\Admin\Widgets\Card
卡片Dcat\Admin\Widgets\Box
BoxDcat\Admin\Widgets\Dropdown
下拉菜单Dcat\Admin\Widgets\Radio
单选框Dcat\Admin\Widgets\Checkbox
复选框Dcat\Admin\Widgets\Tab
选项卡Dcat\Admin\Widgets\Alert
警告框
$alert = Alert::make(‘内容’, ‘标题’);
$alert->success();Dcat\Admin\Widgets\Tooltip
提示框Dcat\Admin\Widgets\Markdown
渲染markdown
以上是简单的展示信息组件.无过多的交互
Dcat\Admin\Widgets\Modal
模态窗,弹窗
模态窗口内可以渲染 文字,模板,普通组件,异步组件,非异步组件, 工具表单,动作组件 等等内容
开发交换功能.
图表和数据统计卡片
Dcat Admin
引入了 apexcharts
图表功能,
Dcat\Admin\Widgets\ApexCharts\Chart
这个类可以帮助开发者快速渲染图表。
Dcat\Admin\Widgets\Metrics\Card
数据统计卡片
特殊组件
Dcat\Admin\Widgets\Form
工具表单组件
例如: 行操作上,点击修改用户密码,弹出表单填写新密码.
Dcat\Admin\Contracts\LazyRenderable
异步加载接口- 传递自定义参数
Dcat\Admin\Traits\LazyWidget
异步组件的traits,含有payload()方法 ,
可在传入payload数据,工具表单的各个方法里调用payload数据
<?phpnamespace App\Admin\Forms;use Dcat\Admin\Contracts\LazyRenderable;
use Dcat\Admin\Traits\LazyWidget;
use Dcat\Admin\Widgets\Form;class UserProfile extends Form implements LazyRenderable
{use LazyWidget;public function handle(array $input){// 获取外部传递的参数$key1 = $this->payload['key1'] ?? null;$key2 = $this->payload['key1'] ?? null;return $this->success('保存成功');}public function form(){// 获取外部传递的参数$key1 = $this->payload['key1'] ?? null;$key2 = $this->payload['key1'] ?? null;$this->text('name', trans('admin.name'))->required()->help('用户昵称');$this->image('avatar', trans('admin.avatar'))->autoUpload();$this->password('old_password', trans('admin.old_password'));$this->password('password', trans('admin.password'))->minLength(5)->maxLength(20)->customFormat(function ($v) {if ($v == $this->password) {return;}return $v;})->help('请输入5-20个字符');$this->password('password_confirmation', trans('admin.password_confirmation'))->same('password')->help('请输入确认密码');}public function default(){// 获取外部传递的参数$key1 = $this->payload['key1'] ?? null;$key2 = $this->payload['key1'] ?? null;return ['name' => '...',];}
}
- 异步加载
Dcat\Admin\Support\LazyRenderable
异步渲染接口
异步加载功能支持静态资源按需加载的特性,
目前内置的所有组件都支持使用异步渲染功能,
并且支持在页面的任意位置中使用
通过异步加载功能可以让页面中的整体或局部组件使用 ajax 异步渲染,
从而提高页面加载效率(例如弹窗异步加载表单)。
步骤: 见文档的 页面组件->异步加载
1.先定义一个异步渲染类,继承 Dcat\Admin\Support\LazyRenderable
2.然后需要把渲染类实例传入 Dcat\Admin\Widgets\Lazy
对象中,才能最终实现异步渲染的效果
namespace App\Admin\Renderable;use App\Admin\Widgets\Charts\Bar;
use Dcat\Admin\Support\LazyRenderable;class PostChart extends LazyRenderable
{public function render(){// 获取外部传递的参数$id = $this->id;// 查询数据逻辑$data = [...];// 这里可以返回内置组件,也可以返回视图文件或HTML字符串return Bar::make($data);}
}
控制器里$chart = PostChart::make(['id' => ...]); return $content->body(Lazy::make($chart));
或者模板里调用
$chart = Lazy::make(PostChart::make(['id' => ...]));
return $content->body(view('admin.xxx', ['chart' => $chart]));
如果是 Dcat\Admin\Widgets\Card、Dcat\Admin\Widgets\Box、Dcat\Admin\Widgets\Modal、Dcat\Admin\Widgets\Tab 等组件,则可以略过 Dcat\Admin\Widgets\Lazy 组件,直接传递渲染类实例
$chart = PostChart::make(['id' => ...]);
$modal = Modal::make()->lg()->title('标题')->delay(300) // 如果是异步渲染图表则需要设置一个延迟时间,否则可能导致图表渲染异常->body($chart);
异步加载数据表格
弹窗,异步展示数据表格
如果需要异步加载数据表格,则定义渲染类时需要继承 Dcat\Admin\Grid\LazyRenderable
Dcat\Admin\Grid\LazyRenderable
用于异步渲染数据表格,是 Dcat\Admin\Support\LazyRenderable
的子类
简化模式 - 去除简化一些数据表格默认开启的功能,默认不启用
$table = UserTable::make()->simple(); return $content->body(LazyTable::make($table));
注意,如果把渲染类实例直接注入到 Dcat\Admin\Widgets\Card、Dcat\Admin\Widgets\Box、Dcat\Admin\Widgets\Tab 和 Dcat\Admin\Widgets\Modal 等组件时,则会自动启用 simple 模式
//监听异步加载完成事件
Dcat\Admin\Widgets\Lazy
Dcat\Admin\Widgets\LazyTable
参考工具表单
传递自定义参数
Dcat\Admin\Traits\LazyWidget 异步组件的traits,含有payload()方法 ,
可在传入payload数据,工具表单的各个方法里调用payload数据
//调用异步组件传递参数
$form = UserProfile::make()->payload(['key1' => '...', 'key2' => '...']);//组件内使用传入的参数
namespace App\Admin\Forms;use Dcat\Admin\Contracts\LazyRenderable;
use Dcat\Admin\Traits\LazyWidget;
use Dcat\Admin\Widgets\Form;class UserProfile extends Form implements LazyRenderable
{use LazyWidget;public function handle(array $input){// 获取外部传递的参数$key1 = $this->payload['key1'] ?? null;$key2 = $this->payload['key1'] ?? null;return $this->success('保存成功');}
}
异步工具表单
定义工具表单类,实现 Dcat\Admin\Contracts\LazyRenderable,并载入 Dcat\Admin\Traits\LazyWidget 这个 trait
动作Action
开发者通过 Action 动作类可以非常方便的开发出一个含有特定功能的操作,可以非常方便的让用户与服务器产生交互。
展示一个按钮,点击按钮可以有一些操作,例如弹出页面,打开链接,下载文件,刷新页面,删除数据,执行js代码,确认弹窗 ,等等操作.
例如,页面上需要一个按钮,用户点击之后可以向服务器发起请求,通过弹窗展示当前登录用户的信息,那么这个功能按钮就可以用 Action 来开发。
php artisan admin:action
创建action类
动作分为了好几种, 数据表格动作,数据表单动作,数据详情动作,树状模型动作, 通用动作.
Dcat\Admin\Actions\Action
动作基类
Dcat\Admin\Grid\GridAction
数据表格动作基类,在数据表格页面调用.
Dcat\Admin\Grid\Tools\BatchAction
批量操作按钮基类
Dcat\Admin\Grid\Tools\RowAction
行操作按钮基类
Dcat\Admin\Form\AbstractTool
数据表单动作基类,在数据表单页面调用
Dcat\Admin\Show\AbstractTool
数据详情动作基类,在数据详情页面调用
Dcat\Admin\Tree\RowAction
模型树动作基类,在树状模型页调用
不同类是在不同地方使用的.
动作响应:
$this->response()->success(‘Processed successfully.’)->refresh();
模板里
js
<script>
// 用 Dcat.ready() 代替 $()
// 此方法会在所有 js 脚本加载完成后执行
Dcat.ready(function () {// 写入你的 js 代码console.log('所有 js 脚本加载完毕啦~~');
});
</script>
bootstrap
颜色
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
更多bootstrap文档资料
https://getbootstrap.net/docs/utilities/borders/
AdminLTE还带了一些dcat-admin没有写的其他组件,可以照着案例复制
https://3vshej.cn/AdminLTE/AdminLTE-3.x/pages/UI/timeline.html
表单验证
Dcat Admin 集成了 bootstrap-validator 组件用于表单前端验证的功能,
Dcat Admin 集成了 sweetalert2 弹窗插件
Dcat Admin 集成了 Toastr 提示框插件
权限
Admin::user(); 当前用户对象
Admin::user()->id 当前用户id
Admin::user()->roles; 用户角色
Admin::user()->permissions; 用户的权限
Admin::user()->isRole('developer');用户是否有某个角色
Admin::user()->can('create-post');是否有某个权限
Admin::user()->cannot('delete-post'); 是否没有某个权限
Admin::user()->isAdministrator();
Admin::user()->inRoles(['editor', 'developer']);// use Dcat\Admin\Http\Auth\Permission;
// 检查权限,有create-post权限的用户或者角色可以访问创建文章页面
Permission::check('create-post');