Dcat Admin 后台系统构建工具 使用爬坑记录 --简单高效,开箱即用
由于需要在短时间内完成一个后台管理系统,要考虑到美观、扩展、维护、快速上手等几方面原因,选取了 @Jiangqh 大佬构建的 Dcat Admin - 一款高颜值的后台系统构建工具。
使用了大概一天的时间就基本上搭建好了一个后台该有的功能 CURD、RBAC,这个后台框架我感觉对新人挺友好的,亲近新人,根据 Dcat Admin中文文档(Dcat Admin中文文档),好了也不多说了,下面附上我使用Dcatd的爬坑记录(新人)
- 首次安装时会遇见各种问题
1. 数据库问题
执行命令 >php artisan admin:install 发现报错 Specified key was too long; max key length is 767 bytes 这是数据表进行迁移时提示的key的问题 解决:打开目录 app\Providers 下 AppServiceProvider 文件 在文件中先引入 Illuminate\Support\Facades\Schema 然后在下面的 boot 方法里输入 Schema::defaultStringLength(191) ,基本上这个问题就解决完了,然后删除数据库已经迁移完的表,重新执行迁移命令 (还有的同学在执行 php artisan admin:install 命令时会报错:没有发现数据库、数据库表不存在,这个问题说明没有找到创建需要的数据库,需要创建数据库,在执行该命令)
自定义按钮问题
1. 自定义操作按钮
$grid->actions(function (Grid\Displayers\Actions $actions) { $id = $actions->getKey();//获取该行数据id值 $url = admin_url('top_info').'/'.$id;//帮助函数admin_url url地址拼接 $actions->append("<a href={$url}><i class='fa fa-eye'>详细信息</i></a>"); }); (自定义按钮需要重新拼接url,要注意是否可以获取到要拼接url后面的参数值)
2.自定义新增按钮
$grid->tools("<div class='btn-group' id='tools-group' style='margin-right:3px'> <a href='{$url}' class='btn btn-primary'> <i class='feather icon-plus'></i> <span class='d-none d-sm-inline'> 新增</span> </a> </div>"); 使用该方法进行自定义新增按钮,但是这个新增按钮显示出来的样式是偏左
大概是红框的位置,如果可以满足需求那么就不需要调整,如果不满足需求可以自己写js进行调整位置 Admin::script( <<<JS var test = (".top #tools-group").html(); $(".top #tools-group").remove(); $("div[data-responsive-table-toolbar='grid-table']").append(test); JS );//获取div的标签名,然后进行移除,重新赋值,就可以挪到右上角位置了,仅供参考
3.自定义新增页面和编辑页面的列表按钮
由于自定义了列表页导致列表页与原来的列表页url冲突,需要重新定义url参数等问题 $form->tools(function (Form\Tools $tools) use($id_ley){ $tools->disableList();//禁止原列表按钮 $url = admin_url('top_info/'.$id_ley); $tools->append("<a class='btn btn-sm btn-white' href='{$url}'><i class='feather icon-list'></i><span> 列表</span></a>"); }); 这需要注意一个地方就是id_ley值的问题,如果你通过访问新增或者编辑页面进行传参,然后赋值,要注意是否是空值
4.自定义form表单的提交按钮
1、$form->action('top_info?id='.$id_ley);(直接自定义提交按钮) 2、$form->saved(function (Form $form, $result){(保存后进行回调此事件新增和修改操作共用) if ($form->isCreating()) {//判断是否是新增操作 $form->isEditing() 判断是否是编辑操作 $newId = $form->getKey();//获取新增id 仅新增操作适用 if (! $newId) { return $form->error('数据保存失败'); } $info = InformationInfoModel::where('id',$newId)->first(); return $form->redirect('information_info/'.$info->information_id, '保存成功'); (自定义参数要时刻关注是否存在,否则为空会导致跳转失败) } }); 3、$form->saving(function (Form $form) {//保存前回调 if ($form->isCreating()) { } });
5.自定义开关组提交链接
因自定义列表页导致需要重新自定义开关组链接 $router->put('information_info/{id}/{s_id}','InformationInfoController@information_info');//状态更改 直接在 app\Admin下面的 routes.php 路由文件里定义一个put路由 protected function information_info(Request $request) { $url = $request->url();//获取url $id = str_replace('/','',strrchr($url,'/'));//获取url传参 $id_ley = $request->input('placement');//获取状态值 //直接进行数据库更新操作,然后返回,在返回时需要注意传参 $arr = [ 'status'=>true, 'message'=>"更新成功 !", 'redirect'=>admin_url('information_info/'.$id), ]; return $arr; //同理自定义删除按钮也是类似的操作
6.自定义类型 type select(访问api自定义) 这个需要注意的是严格按照文档提示进行编写 //列表 type $grid->type('类型')->display(function ($type) { return InformationModel::find($type)->information_name; });; //筛选 select $filter->equal('type')->select('/info?id='.$id_key); 注意:返回值必须是:['id'=>'','text'=>'']
自定义页面
1.自定义列表页 重写数据仓库方法,这个问题需要参考[DcatAdmin文档](http://www.dcatadmin.com/docs/master/introduction.html "DcatAdmin文档")的表格的数据源以及数据仓库文档 第一步:找到需要组装的数据仓库文件,在文件里重写get方法 第二部:在get方法里进行数据组装,然后参照文档里的方法 进行返回,分页需要自己来写(如果组成的数据是数组 : //总条数 $count = count($list); // 获取当前页数 $currentPage = $model->getCurrentPage(); // 获取每页显示行数 $perPage = $model->getPerPage(); //偏移量,当前页-1乘以每页显示条数 $start=($currentPage-1)*$perPage; //获取一页显示的数据 $list = array_slice($list,$start,$perPage); return $model->makePaginator( $count ?? 0, // 传入总记录数 $list ?? [],// 传入数据二维数组 );
进行数据传输,如果要分页需要在页面输出的方法里面进行分页禁用
编辑器问题
1.ueditor编辑器问题 项目部署到线上时遇到了图片无法居中浮动问题需要更改配置项中 img 在 里面加入 style 配置 ueditor.config.js img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex','style'], 2.editor编辑器问题 在线上进行图片传输保存时,发现保存的是绝对路径,编辑器自动保存的 需要在项目中添加配置项 app\Admin下 bootstrap.php文件中添加如下代码即可: use Dcat\Admin\Form\Field\Editor; Editor::resolving(function (Editor $editor) { // 设置默认配置 $editor->options([ 'selector'=>'textarea', 'convert_urls'=>false, ]);
其他问题
1.项目在线上无法保存图片
答:php扩展fileinfo扩展是否开启
2.时间显示问题
答:需要在model文件中引入use Dcat\Admin\Traits\HasDateTimeFormatter; class A extends Model { use HasDateTimeFormatter; }
3.隐藏开发工具
答:关闭 .env 文件里的 APP_DEBUG=true 改为false
6.自定义页面
1.列表页 public function index() { $id = $_POST; return Admin::content(function (Content $content) use ($id){//数据传递 // 选填 $content->header('发布专题'); // 选填 $content->description('表单'); // 添加面包屑导航 $content->breadcrumb( ['text' => '新闻发布'], ['text' => '发布专题'] ); $content->body(function (Row $row) use ($id){//数据传递 $grid = new Grid(new SpecialModel());// $grid->created_at(); $row->column(6,$grid); $grid = new Grid(new SpecialModel());//声明 grid 类并实例化model (数据来源)new Grid(SpecialModel::where('id',$id)) $grid->id();//需要展示那些字段 $row->column(6,$grid);//把内容输入到列内进行输出 }); }); }//下面是大概的思路 1、引入 admin 2、调用admin 的content方法进行内容的输入 3、页面分为三部分,左标提 右标题,内容 4、$content->header 页面标题 $content->description 小标题 5、导航 $content->breadcrumb( ['text' => '首页', 'url' => '/admin'], ['text' => '用户管理', 'url' => '/admin/users'], ['text' => '编辑用户'] ); 以上这些文档都有说明 6、接下来就是自定义内容了 $content->body() 或者 $content->row() 都可以进行内容输入 $content->body(function(Row $row){//调用Row方法创建一行进行行内的列布局 这就完成2列的布局了,接下来是数据的查询进行列表展示 列表 是 grid 类 先实例化并修改数据来源,然后吧grid在内容里输出 $row->column(6,$grid); $row->column(6,$grid); } });
2.表单页面
public function index()
{
return Admin::content(function (Content $content) {
// 选填
$content->header('发布专题');
// 选填
$content->description('表单');
// 添加面包屑导航
$content->breadcrumb(
['text' => '新闻发布'],
['text' => '发布专题']
);
$content->body(function (Row $row){
$form = new Form();//实例化Form 类 进行表单构建
$form->datetime('created_at');//表单需要展示字段
$form->datetime('updated_at');
$row->column(12,$form);//进行表单输出
});
});
}
(此文会随着使用持续更新,希望能给一些新入坑的同学提供一些帮助,如果以上例子有错误,欢迎指出,感谢)
推荐文章: