在传统的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 星期一