使用Laravel轻松实现闪消息功能
在构建Web应用时,向用户显示临时通知信息是一种常见的需求,比如操作成功提示或错误信息。Laracasts/Flash 是一个专为Laravel框架设计的开源包,它简化了这种闪消息(Flash Messages)的创建和展示过程,且完美地与Twitter Bootstrap集成。
安装与配置
安装 Laracasts/Flash 非常简单,只需通过Composer来添加依赖:
composer require laracasts/flash
然后,为了让消息样式与Bootstrap保持一致,你需要引入Bootstrap的CSS库到你的HTML文件中:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
使用方法
在控制器中,你可以调用 flash()
函数在重定向前设置消息:
public function store()
{
flash('欢迎加入!');
return home();
}
还可以设置不同的消息主题,如:
flash('Message')->success()
: 设置为成功主题。flash('Message')->error()
: 设置为错误主题。flash('Message')->warning()
: 设置为警告主题。flash('Message')->overlay()
: 以覆盖层形式展示消息。flash()->overlay('Modal Message', 'Modal Title')
: 显示带有标题的模态覆盖层。flash('Message')->important()
: 添加关闭按钮到消息上。flash('Message')->error()->important()
: 显示必须被用户手动关闭的危险消息。
在设置好消息后,可以在视图中使用 @include('flash::message')
来显示。
示例
下面是一个简单的示例页面,展示了如何使用这个包:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
@include('flash::message')
<p>欢迎来到我的网站...</p>
</div>
<!-- 如果使用了重要消息或覆盖层,需要引入Twitter Bootstrap的JS -->
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$('#flash-overlay-modal').modal();
</script>
</body>
</html>
自定义与扩展
如果你希望修改默认的消息模板,可以运行以下命令:
php artisan vendor:publish --provider="Laracasts\Flash\FlashServiceProvider"
然后,模板将位于 resources/views/vendor/flash/
目录下。
你可以自由调整这些模板以满足项目的需求。
消息隐藏
有时我们想要让消息在几秒钟后自动消失,只需要在页面底部添加一小段JavaScript代码,例如使用jQuery:
<script>
$('div.alert').not('.alert-important').delay(3000).fadeOut(350);
</script>
这会使得非重要的消息在三秒后淡出。
多条消息
如果要同时显示多条消息,也很简单:
flash('消息1');
flash('重要消息2')->important();
return redirect('somewhere');
以上,就是 Laracasts/Flash 的基本用法和特性,它能让你的Laravel应用的用户体验更上一层楼。
学习更多
为了深入理解该包的工作原理,你还可以在Laracasts上找到相关的教学视频,从头开始创建这样的包。
准备好给你的Laravel应用带来一流的闪消息体验了吗?立刻尝试 Laracasts/Flash 吧!