laravel-admin实战做个简单的客户管理——使用模板blade美化用户详情
laravel-admin 自动生成的单条记录详情代码大致如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
protected function detail($id) { $show = new Show(FrontCustomer::findOrFail($id)); $show->panel() ->style('info') ->title('客户 '.$show->getModel()->user_name.' 基本信息') ->tools(function ($tools) { //禁止显示删除按钮 $tools->disableDelete(); }); $show->field('id', __('Id')); $show->field('user_name', __('User name')); $show->field('user_type', __('User type')); $show->field('password', __('Password')); $show->divider(); $show->field('user_ip', __('User ip')); $show->field('login_cnt', __('Login cnt')); $show->field('locked', __('Locked')); $show->divider(); $show->field('amount', __('Amount')); $show->field('consumed', __('Consumed')); $show->divider(); $show->field('remember_token', __('Remember token')); $show->field('created_at', __('Created at')); $show->field('updated_at', __('Updated at')); return $show; } |
默认详情
为了美观，我们采用自定义页面方式显示单个用户的详情。因为按照设定，每个用户不仅仅有详情，还有站点信息以及站点关键词信息，所以我把页面分成3部分。、 为了美观，我把详情填写进入了3列里，等后面我们开始进行关联数据展示的时候，就会把相应的信息归类显示。 控制器，将detail注释掉，新增show方法。 app\Admin\Controllers\FrontCustomerController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//自定义详情显示页 public function show($id, Content $content) { $customer = FrontCustomer::findOrFail($id); return $content->title('客户详情') ->description('单个用户数据表详情') ->breadcrumb( ['text' => '首页', 'url' => '/admin'], ['text' => '客户管理', 'url' => '/admin/frontcustomer'], ['text' => '查看用户'] ) ->view('frontcustomer.show', $customer->toArray()); } |
模板的完整代码：\resources\views\frontcustomer\show.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<div class="box box-solid"> <div class="box-header with-border"> <h3 class="box-title"> </h3> <div class="box-tools"> <div class="btn-group pull-right" style="margin-right: 5px;"><a class="btn btn-sm btn-warning" title="编辑" href="{{ admin_url('/') }}/front-customer/{{ $id }}/edit"> <i class="fa fa-edit"></i><span class="hidden-xs"> 编辑</span> </a></div> <div class="btn-group pull-right" style="margin-right: 5px;"><a class="btn btn-sm btn-default" title="列表" href="{{ admin_url('/') }}/front-customer"><i class="fa fa-list"></i><span class="hidden-xs"> 列表</span></a></div> </div> </div> <div class="box-body"> <div class="row"> <div class="col-md-4"><!-- Widget: user widget style 1 --> <div class="box box-widget widget-user-2"><!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-blue"> <div class="widget-user-image"><img class="img-circle" src="/vendor/laravel-admin/AdminLTE/dist/img/user3-128x128.jpg" /></div> <!-- /.widget-user-image --> <h3 class="widget-user-username">{{ $user_name }}</h3> <h5 class="widget-user-desc">{{ $user_name }}</h5> </div> <div class="box-footer no-padding"> <ul class="nav nav-stacked"> <li><a href="#"> @switch($user_type) @case('mobile') 手机 @break @case('email') 邮箱 @break @default 微信 @endswitch <span class="pull-right badge bg-blue">用户类型</span></a></li> <li><a href="#">{{ $created_at }} <span class="pull-right badge bg-aqua">创建时间</span></a></li> <li><a href="#">{{ $updated_at }} <span class="pull-right badge bg-green">更新时间</span></a></li> </ul> </div> </div> <!-- /.widget-user --></div> <!-- /.col --> <div class="col-md-4"><!-- Widget: user widget style 1 --> <div class="box box-widget widget-user-2"><!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-yellow"> <div class="widget-user-image"><img class="img-circle" src="/vendor/laravel-admin/AdminLTE/dist/img/user4-128x128.jpg" /></div> <!-- /.widget-user-image --> <h3 class="widget-user-username">登录信息</h3> <h5 class="widget-user-desc">最后登录IP: @if (empty($user_ip)) 0.0.0.0 @else $user_ip @endif</h5> </div> <div class="box-footer no-padding"> <ul class="nav nav-stacked"> <li><a href="#"> @if (empty($user_ip)) 0.0.0.0 @else {{ $user_ip }} @endif <span class="pull-right badge bg-blue">最后登录IP</span></a></li> <li><a href="#"> @if ($login_cnt) {{ $login_cnt }} @else 0 @endif <span class="pull-right badge bg-aqua">登录次数</span></a></li> <li><a href="#"> @if ($locked) <span class="bg-red">冻结</span> @else <span class="bg-green">正常</span> @endif <span class="pull-right badge bg-red">冻结状态</span></a></li> </ul> </div> </div> <!-- /.widget-user --></div> <!-- /.col --> <div class="col-md-4"><!-- Widget: user widget style 1 --> <div class="box box-widget widget-user-2"><!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-green"> <div class="widget-user-image"><img class="img-circle" src="/vendor/laravel-admin/AdminLTE/dist/img/user5-128x128.jpg" /></div> <!-- /.widget-user-image --> <h3 class="widget-user-username">账户资金</h3> <h5 class="widget-user-desc">{{ $amount }}</h5> </div> <div class="box-footer no-padding"> <ul class="nav nav-stacked"> <li><a href="#">{{ $amount }} <span class="pull-right badge bg-blue">账户资金</span></a></li> <li><a href="#">{{ $consumed }} <span class="pull-right badge bg-aqua">已消耗</span></a></li> </ul> </div> </div> <!-- /.widget-user --></div> <!-- /.col --></div> </div> </div> |
显示效果：
修改后的详情
知识点：
- laravel-admin自动生成的控制器中detail 方法，可以用show来替代，实现美化的定制。自定义页面内容文档传送门
- 学会使用laravel模板blade中的if 等等用法。blade模板学习文档传送门
- 学会套用UI模板AdminLTE，https://adminlte.io/themes/AdminLTE/pages/UI/general.html
噢！评论已关闭。