萊蕪都市網(wǎng)最新招聘信息汕頭seo優(yōu)化培訓(xùn)
要想靈活的使用dcat-admin框架開發(fā),必須知道框架有哪些類提供給我們使用.
每一個自定義的按鈕,彈框,信息展示,小組件都用到特定的類和接口.
常用核心類
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實現(xiàn)了Illuminate\Contracts\Support\Renderable 接口
laravel 常用類
Illuminate\Http\Request 接收請求參數(shù)$request,定義此類
Illuminate\Support\Facades\DB
布局常用類
布局用的 行row 和 列column
用php代碼構(gòu)建多行多列的布局就需要用到
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() 模板調(diào)用
Admin:script() 控制器里加載js代碼
控制器
index
public function index(Content $content)
{$content->header('填寫頁面頭標(biāo)題');$content->description('填寫頁面描述小標(biāo)題');// 添加面包屑導(dǎo)航$content->breadcrumb(['text' => '首頁', 'url' => '/admin'],['text' => '用戶管理', 'url' => '/admin/users'],['text' => '編輯用戶']);// 填充頁面body部分，這里可以填入任何可被渲染的對象$content->body('hello world');$content->body('hello world2');
}
form
$form->saving(function(Form $form){dump($form->model()->status);//數(shù)據(jù)庫的原值dd($form->status);//要修改為});
數(shù)據(jù)表格的各個按鈕控制
$grid->disableActions(); 禁用操作按鈕
$grid->disableEditButton(); 禁用編輯操作
$grid->disableDeleteButton(); 禁用刪除操作
$grid->disableBatchActions(); 禁用批量操作
$grid->disableBatchDelete(); 禁用批量刪除操作
$grid->disableToolbar(); 禁用工具欄
$grid->disableRefreshButton(); 禁用刷新按鈕
$grid->disablePagination(); 禁用分頁
$grid->paginate(15); 設(shè)置分頁大小
普通組件
都用make生成組件實例.
Dcat\Admin\Widgets\Card卡片Dcat\Admin\Widgets\BoxBoxDcat\Admin\Widgets\Dropdown下拉菜單Dcat\Admin\Widgets\Radio單選框Dcat\Admin\Widgets\Checkbox復(fù)選框Dcat\Admin\Widgets\Tab選項卡Dcat\Admin\Widgets\Alert警告框Dcat\Admin\Widgets\Table表格
$alert = Alert::make(‘內(nèi)容’, ‘標(biāo)題’);
$alert->success();Dcat\Admin\Widgets\Tooltip提示框Dcat\Admin\Widgets\Markdown渲染markdown
以上是簡單的展示信息組件.無過多的交互
Dcat\Admin\Widgets\Modal模態(tài)窗,彈窗
模態(tài)窗口內(nèi)可以渲染 文字,模板,普通組件,異步組件,非異步組件, 工具表單,動作組件 等等內(nèi)容
開發(fā)交換功能.
圖表和數(shù)據(jù)統(tǒng)計卡片
Dcat Admin 引入了 apexcharts 圖表功能，
Dcat\Admin\Widgets\ApexCharts\Chart 這個類可以幫助開發(fā)者快速渲染圖表。
Dcat\Admin\Widgets\Metrics\Card 數(shù)據(jù)統(tǒng)計卡片
特殊組件
Dcat\Admin\Widgets\Form工具表單組件
例如: 行操作上,點擊修改用戶密碼,彈出表單填寫新密碼.
Dcat\Admin\Contracts\LazyRenderable異步加載接口- 傳遞自定義參數(shù)
Dcat\Admin\Traits\LazyWidget異步組件的traits,含有payload()方法 ,
可在傳入payload數(shù)據(jù),工具表單的各個方法里調(diào)用payload數(shù)據(jù)
<?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){// 獲取外部傳遞的參數(shù)$key1 = $this->payload['key1'] ?? null;$key2 = $this->payload['key1'] ?? null;return $this->success('保存成功');}public function form(){// 獲取外部傳遞的參數(shù)$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(){// 獲取外部傳遞的參數(shù)$key1 = $this->payload['key1'] ?? null;$key2 = $this->payload['key1'] ?? null;return ['name' => '...',];}
}
- 異步加載
Dcat\Admin\Support\LazyRenderable異步渲染接口
異步加載功能支持靜態(tài)資源按需加載的特性，
目前內(nèi)置的所有組件都支持使用異步渲染功能，
并且支持在頁面的任意位置中使用
通過異步加載功能可以讓頁面中的整體或局部組件使用 ajax 異步渲染，
從而提高頁面加載效率（例如彈窗異步加載表單）。
步驟: 見文檔的 頁面組件->異步加載
1.先定義一個異步渲染類，繼承 Dcat\Admin\Support\LazyRenderable
2.然后需要把渲染類實例傳入 Dcat\Admin\Widgets\Lazy 對象中，才能最終實現(xiàn)異步渲染的效果
namespace App\Admin\Renderable;use App\Admin\Widgets\Charts\Bar;
use Dcat\Admin\Support\LazyRenderable;class PostChart extends LazyRenderable
{public function render(){// 獲取外部傳遞的參數(shù)$id = $this->id;// 查詢數(shù)據(jù)邏輯$data = [...];// 這里可以返回內(nèi)置組件，也可以返回視圖文件或HTML字符串return Bar::make($data);}
}
控制器里$chart = PostChart::make(['id' => ...]); return $content->body(Lazy::make($chart));
或者模板里調(diào)用
$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('標(biāo)題')->delay(300) // 如果是異步渲染圖表則需要設(shè)置一個延遲時間，否則可能導(dǎo)致圖表渲染異常->body($chart);
異步加載數(shù)據(jù)表格
彈窗,異步展示數(shù)據(jù)表格
如果需要異步加載數(shù)據(jù)表格，則定義渲染類時需要繼承 Dcat\Admin\Grid\LazyRenderable
Dcat\Admin\Grid\LazyRenderable 用于異步渲染數(shù)據(jù)表格，是 Dcat\Admin\Support\LazyRenderable 的子類
簡化模式 - 去除簡化一些數(shù)據(jù)表格默認開啟的功能，默認不啟用
$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 模式
//監(jiān)聽異步加載完成事件
Dcat\Admin\Widgets\Lazy
Dcat\Admin\Widgets\LazyTable
參考工具表單
傳遞自定義參數(shù)
Dcat\Admin\Traits\LazyWidget 異步組件的traits,含有payload()方法 ,
可在傳入payload數(shù)據(jù),工具表單的各個方法里調(diào)用payload數(shù)據(jù)
//調(diào)用異步組件傳遞參數(shù)
$form = UserProfile::make()->payload(['key1' => '...', 'key2' => '...']);//組件內(nèi)使用傳入的參數(shù)
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){// 獲取外部傳遞的參數(shù)$key1 = $this->payload['key1'] ?? null;$key2 = $this->payload['key1'] ?? null;return $this->success('保存成功');}
}
異步工具表單
定義工具表單類，實現(xiàn) Dcat\Admin\Contracts\LazyRenderable，并載入 Dcat\Admin\Traits\LazyWidget 這個 trait
動作Action
開發(fā)者通過 Action 動作類可以非常方便的開發(fā)出一個含有特定功能的操作，可以非常方便的讓用戶與服務(wù)器產(chǎn)生交互。
展示一個按鈕,點擊按鈕可以有一些操作,例如彈出頁面,打開鏈接,下載文件,刷新頁面,刪除數(shù)據(jù),執(zhí)行js代碼,確認彈窗 ,等等操作.
例如，頁面上需要一個按鈕，用戶點擊之后可以向服務(wù)器發(fā)起請求，通過彈窗展示當(dāng)前登錄用戶的信息，那么這個功能按鈕就可以用 Action 來開發(fā)。
php artisan admin:action 創(chuàng)建action類
動作分為了好幾種, 數(shù)據(jù)表格動作,數(shù)據(jù)表單動作,數(shù)據(jù)詳情動作,樹狀模型動作, 通用動作.
Dcat\Admin\Actions\Action 動作基類
Dcat\Admin\Grid\GridAction 數(shù)據(jù)表格動作基類,在數(shù)據(jù)表格頁面調(diào)用.
Dcat\Admin\Grid\Tools\BatchAction 批量操作按鈕基類
Dcat\Admin\Grid\Tools\RowAction 行操作按鈕基類
Dcat\Admin\Form\AbstractTool 數(shù)據(jù)表單動作基類,在數(shù)據(jù)表單頁面調(diào)用
Dcat\Admin\Show\AbstractTool 數(shù)據(jù)詳情動作基類,在數(shù)據(jù)詳情頁面調(diào)用
Dcat\Admin\Tree\RowAction 模型樹動作基類,在樹狀模型頁調(diào)用
不同類是在不同地方使用的.
動作響應(yīng):
$this->response()->success(‘Processed successfully.’)->refresh();
模板里
js
<script>
// 用 Dcat.ready() 代替 $()
// 此方法會在所有 js 腳本加載完成后執(zhí)行
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沒有寫的其他組件,可以照著案例復(fù)制
https://3vshej.cn/AdminLTE/AdminLTE-3.x/pages/UI/timeline.html
表單驗證
Dcat Admin 集成了 bootstrap-validator 組件用于表單前端驗證的功能，
Dcat Admin 集成了 sweetalert2 彈窗插件
Dcat Admin 集成了 Toastr 提示框插件
權(quán)限
Admin::user(); 當(dāng)前用戶對象
Admin::user()->id 當(dāng)前用戶id
Admin::user()->roles; 用戶角色
Admin::user()->permissions; 用戶的權(quán)限
Admin::user()->isRole('developer');用戶是否有某個角色
Admin::user()->can('create-post');是否有某個權(quán)限
Admin::user()->cannot('delete-post'); 是否沒有某個權(quán)限
Admin::user()->isAdministrator();
Admin::user()->inRoles(['editor', 'developer']);// use Dcat\Admin\Http\Auth\Permission;
// 檢查權(quán)限，有create-post權(quán)限的用戶或者角色可以訪問創(chuàng)建文章頁面
Permission::check('create-post');