Laravel技巧库

Flash消息显示

此课程是收费课程,请先购买或加入会员后再访问。

flash消息是laravel中发送通知信息最好的方式了。flash的中文意思是闪一下,那么你应该可以猜到,他和正常的显示信息有什么区别了。
也就是使用它,出现的信息只会显示一次,当你再次刷新页面,消息是不会再次出现的。
https://laravel.com/docs/5.5/responses#redirecting-with-flashed-session-data

flash消息的使用,其实非常简单,我们这里以发布修改删除issue为例子来做演示。

定义

那好,我们在正式开发之前,先规定两种情况。

方法 意义 颜色
notice 通知、成功了 绿色
alert 警告 红色

controller

找到IssuesController中的store方法,这里也就是保存数据的地方。

public function store(Request $request)
{
    //...

    return redirect('/')->with('notice', 'Issue 新增成功~');
}

在跳转处,我们增加一个with,那这就是发送flash信息的方法了。

view

views/shared中,添加一个_flash.blade.php文件,里面放这样的代码。上面的notice就是用来显示正常通知信息的,下面的alert用来显示警告信息。他们的区别主要在于 am-alert-successam-alert-dangerclass不同,一个是绿色的,另一个是红色的。

@if (session('notice'))
    <div class="am-alert am-alert-success">
        <div class="am-container">
            {{ session('notice') }}
        </div>
    </div>
@endif

@if (session('alert'))
    <div class="am-alert am-alert-danger">
        <div class="am-container">
            {{ session('alert') }}
        </div>
    </div>
@endif

然后到 app.blade.php布局模板中,引用一下。

@include('shared._flash')

@yield('content')

css

接着到common.css 中,添加一点点css,这样看起来会更美观一些

.am-alert {
    margin: 0;
}

测试一下,已经可以正常显示flash信息了,刷新页面后,信息不会再次出现。

js

再来打开/public/assets/js/common.js,添加一点点js代码。

/**
 * 4秒钟后,自动隐藏flash信息
 */
var hideFlash = function () {
    $(".am-alert").fadeOut("slow");
}
setTimeout(hideFlash, 4000);

这样当flash消息显示出来4秒钟之后,就会自动消失不见了。

修改其他方法

IssuesController中,我们再对这些方法也加上flash提示消息。

public function update(Request $request, $id)
{
   //...

   return redirect(route('issues.show', $id))->with('notice', 'Issue 修改成功~');
}

/**
 * Remove the specified resource from storage.
 *
 * @param  int $id
 * @return \Illuminate\Http\Response
 */
public function destroy($id)
{
    //...

    return redirect('/')->with('alert', 'Issue 删除成功~');
}

CommentsController中,修改store方法

public function store(Request $request)
{
    //...

    return back()->with('notice', 'Comment 新增成功~');
}

现在就注册ITFun.tv会员
持续关注IT界最新技术,随时更新相关课程。在线学习IT课程或直接报名参加线下武汉PHP、Web前端培训。

仅仅30秒钟就可以简单注册

会员注册(免费)
×