在传统的Laravel后台管理页面的开发中,一般都会包含列表页面,新建页面,编辑页面,详情页面,以及相应的对保存,更新,删除等请求的处理。
在类Restful的风格下,我们一般都会这么做:Controller中包含
PHP
public function index(){}
public function create(){}
public function store(Request $request){}
public function edit($id){}
public function update(Request $request, $id){}
public function destroy($id){}
1
2
3
4
5
6
publicfunctionindex(){}
publicfunctioncreate(){}
publicfunctionstore(Request$request){}
publicfunctionedit($id){}
publicfunctionupdate(Request$request,$id){}
publicfunctiondestroy($id){}
然后相应的创建
index.blade.php, show.blade.php, create.blade.php,edit.blade.php。
在实际使用中会遇到如下的问题:
从列表页跳转至编辑页面,保存后返回列表页,无法记住之前列表的查询参数
返回列表页 不能记住滚动条的位置
通过Flash包显示消息后,默认应该只显示一次,但是点击浏览器返回,仍然会显示
页面之间都是通过页面跳转的方式,用户体验不佳
所以我们尝试使用IFrame的方式来改进上述问题,同时避免引入过多js代码,方便于后端开发人员
项目位于:http://git.bulo.cn:3000/lxr/laravel-iframe
主要代码:
弹出层使用layui的layer,对IFrame的支持较好 文档:https://www.layui.com/doc/modules/layer.html
后台的css框架基于AdminLTE https://adminlte.io
用户提示使用laracasts/flash
主要布局分为2个: main.blade.php 和 layer.balde.php 其中main.balde.php和之前的一样 ,layer.blalde.php 用于弹出层
main.blade.php中的关键JS代码如下,用于显示操作完成后的消息通知。
JavaScript
// 在父页面显示通知消息,供IFrame层调用
function layerNotify(params) {
$.notify(params);
}
@foreach (session('flash_notification', collect())->toArray() as $message)
$.notify({
message: '{{ $message['message'] }}'
},{
type: 'success',
delay: 3000,
timer: 500,
placement: {
from: "top",
align: "center"
},
});
@endforeach
{{ session()->forget('flash_notification') }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 在父页面显示通知消息,供IFrame层调用
functionlayerNotify(params){
$.notify(params);
}
@foreach(session('flash_notification',collect())->toArray()as$message)
$.notify({
message:'{{ $message['message'] }}'
},{
type:'success',
delay:3000,
timer:500,
placement:{
from:"top",
align:"center"
},
});
@endforeach
{{session()->forget('flash_notification')}}
列表页的JS代码,用于打开弹出层,关键代码在yes回调,在点击弹出层的确定按钮后,获取iframe页的表单,然后提交
JavaScript
$('.btn-create, .btn-edit').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
layer.open({
title: $(this).data('title') ? $(this).data('title') : '页面标题',
area: ['500px', '60%'],
type: 2,
btn: ['确定', '取消'],
content: page,
yes: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.submit();
},
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.btn-create, .btn-edit').on('click',function(e){
e.preventDefault();
varpage=$(this).attr('href');
layer.open({
title:$(this).data('title')?$(this).data('title'):'页面标题',
area:['500px','60%'],
type:2,
btn:['确定','取消'],
content:page,
yes:function(index,layero){
variframeWin=window[layero.find('iframe')[0]['name']];
iframeWin.submit();
},
});
});
控制器的store和update方法的返回需要处理一下,返回一个特殊的view,在该view中关闭当前弹出层,然后刷新父页面
PHP
public function store(PermissionRequest $request)
{
$permission = new Permission();
$permission->name = $request->name;
$permission->display_name = $request->display_name;
$permission->description = $request->description;
$permission->save();
flash('权限新建成功')->success();
return view('common.layer_result');
}
1
2
3
4
5
6
7
8
9
10
publicfunctionstore(PermissionRequest$request)
{
$permission=newPermission();
$permission->name=$request->name;
$permission->display_name=$request->display_name;
$permission->description=$request->description;
$permission->save();
flash('权限新建成功')->success();
returnview('common.layer_result');
}
PHP
@push('scripts')
//假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
parent.location.reload();
@endpush
1
2
3
4
5
6
7
8
@push('scripts')
//假设这是iframe页
varindex=parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
parent.layer.close(index);//再执行关闭
parent.location.reload();
@endpush
本文由
陆, 向荣创作,除注明转载/出处外,均为本站原创,转载前请务必署名
最后编辑时间为: 2019-07-08 12:00 星期一