使用 toastr JS 插件在 Laravel 中进行通知消息弹出

17 Mar 2025 | 4 分钟阅读

在本节中，我们将学习通知消息弹窗。我们将使用toastr JS插件和Laravel来实现。Toast是一种JavaScript库，用于显示非阻塞且不干扰用户体验的弹出框，以向我们的Web用户或移动设备发送信息。如果我们为toastr通知指定一个时间段，那么在该时间段之后，它将自动消失。当我们执行某些操作时，我们总是需要获得通知提醒，例如，如果我们从任何网站或表单或任何地方删除项目，就会弹出一个通知，显示“项目已成功删除”之类的消息。通知提醒对最终用户很重要，这样他们就可以轻松了解正在发生的事情，同时也为他们提供了更强的可读性。为了添加通知提醒，我们有各种版本的Laravel，如Laravel 5、6、7和8。

现在，我们可以通过添加toastr js插件来显示通知弹窗。该插件用于提供警告消息、信息消息、错误消息、成功消息等的通知。使用它，我们可以添加具有令人印象深刻布局的通知。为了显示通知，Laravel也有很多包，但在我们下面的应用程序中，我们将使用toastr JS插件。为了显示通知，我们将添加toastr jQuery的代码。之后，我们可以通过会话进行管理。toastr JS插件的实现和使用在下面的示例中有描述，而且它非常容易使用。为了添加通知，我们必须遵循一些步骤，如下所述

步骤 1

在此步骤中，我们将创建一个新路由。这个新路由将用于测试toastr通知，如下所示

app/Http/routes.php

步骤 2

在此步骤中，我们将添加控制器方法。我们将创建HomeController作为新的控制器。之后，我们将把以下代码添加到其中，如下所示

app/Http/Controllers/HomeController.php

namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
class HomeController extends Controller
{
    public function notification()
    {
        session()->set('success','Item is successfully created.');

        return view('notification-check');
    }	
}

步骤 3

在此步骤中，我们将为布局创建通知文件。我们将创建一个名为notification-check.blade.php的新文件作为布局。现在我们将使用我们的资源目录来创建这个文件。

resources/views/notification-check.blade.php

<!DOCTYPE html>
<html>
<head>
    <title> Notification message popup using toastr JS Plugin in Laravel</title>
    <script src="http://demo.javatpoint.com/plugin/jquery.js"></script>
    <link rel="stylesheet" href="http://demo.javatpoint.com/plugin/bootstrap-3.min.css">
</head>
<body>
@include('notification')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    Check for notification
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

步骤 4

在此步骤中，我们将显示toastr.js通知。为此，我们将创建一个名为notification.blade.php的文件，该文件将用于显示toastr.js通知。我们将此文件添加到我们的默认文件中，这样我们就无需在任何地方编写相同的代码。为此，我们将使用notification.blade.php文件。所以我们将把以下代码添加到其中，如下所示

resources/views/notification.blade.php

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
<script>
  @if(Session::has('success'))
  		toastr.success("{{ Session::get('success') }}");
  @endif
  @if(Session::has('info'))
  		toastr.info("{{ Session::get('info') }}");
  @endif
  @if(Session::has('warning'))
  		toastr.warning("{{ Session::get('warning') }}");
  @endif
  @if(Session::has('error'))
  		toastr.error("{{ Session::get('error') }}");
  @endif
</script>

现在我们的上述代码已经准备好运行了。当我们运行这段代码时，任何以下消息弹窗都将作为输出生成，这取决于我们的操作