laravel-admin实战做个简单的客户管理——表格中点击，带参数跳转。

admin | 2021年2月10日 | 学习偶记 | 评论已关闭 | 1335

首先使用laravel-admin命令生成站点表的基本控制器。

php artisan admin:make FrontSiteController --model=App\Models\FrontSite //用命令生成控制器。

表单生成我采用了api的方式，获取用户ID，我专门写了一篇，laravel-admin 模型表单简单使用api范例。其中站点logo需要上传图片，为了能让logo统一大小，进行裁剪，需要安装composer require intervention/image ，可以参看laravel-admin上传/显示图片这篇文章。

但是在实际应用中，查找用户名，然后添加站点的方式，不如直接在用户列表中，点击用户行直接跳转到添加站点中来的直接。

因为用户站点信息只有一个网站名称，一个url，还有一个logo，所以我想实现类似 laravel-admin中快捷创建的功能。文档：https://laravel-admin.org/docs/zh/2.x/model-table-quick-create

但是快捷创建中没有上传图片的组件，并且还需要和用户关联，所以采用自定义表单的方式。文档：https://laravel-admin.org/docs/zh/2.x/data-form

经过试验，发现这种方式对于我这个项目比较复杂，就做了一些变动。采用了前端组件，自定义了一个添加站点的页面。文档：https://laravel-admin.org/docs/zh/1.x/widgets#%E8%A1%A8%E5%8D%95

这个页面中的方法代码如下：

    //添加站点
    public function addSite($id, Content $content)
    {
        if(!isset($id))
        {
            return $content
                -&gt;withError('错误', '请从用户列表点击添加网站进入本页面');
        }
        $customer = FrontCustomer::where('id',$id)-&gt;first();
        $content-&gt;title('网站添加');
        $content-&gt;description('添加用户'.$customer-&gt;user_name.'的站点');
        $content-&gt;breadcrumb(
            ['text' =&gt; '首页', 'url' =&gt; '/'],
            ['text' =&gt; '站点管理', 'url' =&gt; '/front-sites'],
            ['text' =&gt; '添加站点']
        );
        //获取该用户的站点列表
        $site_list = FrontSite::where('front_customers_id',$id)-&gt;orderBy('id', 'DESC')-&gt;get()-&gt;toArray();
        $cloud = '';
        for($i = 0; $i &lt; count($site_list); $i++)
        {
            if(!empty(trim($site_list[$i]['site_logo'])))
            {
                $path = config('filesystems.disks.admin.url').$site_list[$i]['site_logo'];
                $site_list[$i]['site_logo'] = $path;
            }
            $cloud .= '<a class="tagc'.rand(1,5).'" href="'.$site_list[$i]['site_url'].'" target="_blank" rel="noopener noreferrer">'.$site_list[$i]['site_name'].'</a>';
        }
        $form = new wForm();
        //配置表单
        $form-&gt;setWidth(8, 3);
        //提交的url
        $form-&gt;action('/admin/api/store-site');
        $form-&gt;hidden('front_customers_id')-&gt;default($id)-&gt;rules(['required', 'integer']);;
        $form-&gt;display('ignore_name','客户名称')-&gt;default($customer-&gt;user_name);
        $form-&gt;text('site_name', __('Site name'))-&gt;required()
            -&gt;rules(['required', "unique:front_sites"]);
        // 剪裁图片 添加图片删除按钮
        $form-&gt;image('site_logo', __('Site logo'))-&gt;resize(160, 120)-&gt;removable()-&gt;help('图片规格160*120，大图片会自动缩放。')-&gt;rules('nullable');
        $form-&gt;url('site_url', __('Site url'))-&gt;required()-&gt;help('需要输入http(s)://。')
            -&gt;rules(['required', "unique:front_sites", "url"]);
        //$form-&gt;setContainer('pjax-form'); //设置自己的标识，用于ajax提交
        //$content-&gt;body(view('admin.frontsites.addsitejs')); // 引入js视图模板的一种方式，视图的内容里就是<script src=xxx></script>
        //$content-&gt;view('admin.frontsites.addsite',['site_list'=&gt; $site_list, 'form' =&gt; $form-&gt;render(), 'cloud' =&gt; $cloud]);
        $form-&gt;changeSubmit(); //用button替换submit
        $form-&gt;disablePjax();
        $form_html = $form-&gt;render();

        $content-&gt;view('admin.frontsites.addsite',['site_list'=&gt; $site_list, 'form' =&gt; $form_html, 'cloud' =&gt; $cloud]);
        Admin::css('/css/admin_style.css');
        Admin::css('/css/cloudTag.css');
        //保存form组件，用于ajax方法使用form的rules
        session(['form' =&gt; $form]);
        return $content;
    }

//添加站点

public function addSite($id, Content $content)

{

if(!isset($id))

{

return $content

->withError('错误', '请从用户列表点击添加网站进入本页面');

}

$customer = FrontCustomer::where('id',$id)->first();

$content->title('网站添加');

$content->description('添加用户'.$customer->user_name.'的站点');

$content->breadcrumb(

['text' => '首页', 'url' => '/'],

['text' => '站点管理', 'url' => '/front-sites'],

['text' => '添加站点']

);

//获取该用户的站点列表

$site_list = FrontSite::where('front_customers_id',$id)->orderBy('id', 'DESC')->get()->toArray();

$cloud = '';

for($i = 0; $i < count($site_list); $i++)

{

if(!empty(trim($site_list[$i]['site_logo'])))

{

$path = config('filesystems.disks.admin.url').$site_list[$i]['site_logo'];

$site_list[$i]['site_logo'] = $path;

}

$cloud .= '<a class="tagc'.rand(1,5).'" href="'.$site_list[$i]['site_url'].'" target="_blank" rel="noopener noreferrer">'.$site_list[$i]['site_name'].'</a>';

}

$form = new wForm();

//配置表单

$form->setWidth(8, 3);

//提交的url

$form->action('/admin/api/store-site');

$form->hidden('front_customers_id')->default($id)->rules(['required', 'integer']);;

$form->display('ignore_name','客户名称')->default($customer->user_name);

$form->text('site_name', __('Site name'))->required()

->rules(['required', "unique:front_sites"]);

// 剪裁图片添加图片删除按钮

$form->image('site_logo', __('Site logo'))->resize(160, 120)->removable()->help('图片规格160*120，大图片会自动缩放。')->rules('nullable');

$form->url('site_url', __('Site url'))->required()->help('需要输入http(s)://。')

->rules(['required', "unique:front_sites", "url"]);

//$form->setContainer('pjax-form'); //设置自己的标识，用于ajax提交

//$content->body(view('admin.frontsites.addsitejs')); // 引入js视图模板的一种方式，视图的内容里就是<script src=xxx></script>

//$content->view('admin.frontsites.addsite',['site_list'=> $site_list, 'form' => $form->render(), 'cloud' => $cloud]);

$form->changeSubmit(); //用button替换submit

$form->disablePjax();

$form_html = $form->render();

$content->view('admin.frontsites.addsite',['site_list'=> $site_list, 'form' => $form_html, 'cloud' => $cloud]);

Admin::css('/css/admin_style.css');

Admin::css('/css/cloudTag.css');

//保存form组件，用于ajax方法使用form的rules

session(['form' => $form]);

return $content;

}

代码讲解:

这段代码中包含了一个云标签的数据，还有一个该用户的站点列表数据。所以看的时候注意。

方法中两个参数 id 就是用户的id,Content 相当于laravel-admin的一个空白页面，不过包含了顶部和左侧菜单栏。这个参数不用赋值，自动生成。所以加上路由后，直接执行 http://域名/add-site/ID即可。路由\app\Admin\routes.php添加：

$router-&gt;get('add-site/{id}', 'FrontSiteController@addSite', function ($id) {
        //
    })-&gt;where('id', '[0-9]+')-&gt;name('admin.addsite.index'); //自定义页面添加站点

$router->get('add-site/{id}', '[email protected]', function ($id) {

})->where('id', '[0-9]+')->name('admin.addsite.index'); //自定义页面添加站点

content的标题：title ，描述：description，右侧面包屑导航：breadcrumb
页面组件form必须use一下：

use Encore\Admin\Widgets\Form as wForm;

1

use Encore\Admin\Widgets\Form as wForm;

$form->changeSubmit(); 是我自行写的方法，主要作用是替换form生成的submit，改成button属性，方面使用ajax，禁用$form->disablePjax();
文件：\vendor\encore\laravel-admin\src\Widgets\Form.php

public function changeSubmit()
{
    array_delete($this-&gt;buttons, 'submit');
    //添加button
    $this-&gt;buttons = array_merge($this-&gt;buttons, ['button']);
    return $this;
}