Dcat Admin 后台系统构建工具 使用爬坑记录 --简单高效,开箱即用

由于需要在短时间内完成一个后台管理系统,要考虑到美观、扩展、维护、快速上手等几方面原因,选取了 @Jiangqh 大佬构建的 Dcat Admin - 一款高颜值的后台系统构建工具
使用了大概一天的时间就基本上搭建好了一个后台该有的功能 CURD、RBAC,这个后台框架我感觉对新人挺友好的,亲近新人,根据 Dcat Admin中文文档Dcat Admin中文文档),好了也不多说了,下面附上我使用Dcatd的爬坑记录(新人)

  1. 首次安装时会遇见各种问题
    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. 自定义按钮问题

    1. 自定义操作按钮

    Dcat Admin 后台系统构建工具  使用爬坑记录 --简单高效,开箱即用

        $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.自定义新增按钮

    Dcat Admin 后台系统构建工具  使用爬坑记录 --简单高效,开箱即用

     $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'>&nbsp;&nbsp;新增</span>
       </a>
       </div>");
       使用该方法进行自定义新增按钮,但是这个新增按钮显示出来的样式是偏左

    Dcat Admin 后台系统构建工具  使用爬坑记录 --简单高效,开箱即用

     大概是红框的位置,如果可以满足需求那么就不需要调整,如果不满足需求可以自己写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.自定义新增页面和编辑页面的列表按钮

    Dcat Admin 后台系统构建工具  使用爬坑记录 --简单高效,开箱即用

    由于自定义了列表页导致列表页与原来的列表页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>&nbsp;列表</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.自定义开关组提交链接

    Dcat Admin 后台系统构建工具  使用爬坑记录 --简单高效,开箱即用

     因自定义列表页导致需要重新自定义开关组链接
     $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'=>'']
  2. 自定义页面

      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 ?? [],// 传入数据二维数组
          );

    Dcat Admin 后台系统构建工具  使用爬坑记录 --简单高效,开箱即用

      进行数据传输,如果要分页需要在页面输出的方法里面进行分页禁用
  3. 编辑器问题

      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,
        ]);
  4. 其他问题
    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);//进行表单输出

        });

    });
}

(此文会随着使用持续更新,希望能给一些新入坑的同学提供一些帮助,如果以上例子有错误,欢迎指出,感谢)

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 1

有没有好用的系统配置插件啊,就是可以上传图片 文字之类的。

3天前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!