在Laravel中开始使用非阻塞的Toastr通知

今天，许多公司都在使用Laravel来设计他们的Web应用程序。然而，当开发人员在他们的应用程序中整合警报时，仍然会遇到一个挑战。

本教程将告诉你如何使用Toastr在Laravel应用程序中显示警报。

这些通知的范围从警告，错误，到成功信息。每个警报都有其自定义的背景颜色。

前提条件

要继续学习本教程, 你需要以下条件:

• 在你的本地开发环境中安装PHP 7.3及以上版本
• Laravel的基本知识.本教程使用Laravel 8.
• [Composer]。

教学目的

本教程将帮助你了解在Laravel中构建Web应用程序时的用户体验设计。

到最后, 你应该能够使用toastr包来显示通知，而不是使用默认的Laravel方法。

开始使用toastr包

Toastr是一个简单的JavaScript库，用于在Web应用中显示警报。

例如, 当新用户在你的网站上注册时, 你可能想给他们显示一个成功的提醒.

该包最初是为了支持基于JavaScript的应用程序。然而, 现在也可以在你的Laravel应用程序中使用它.

因此, 在本教程中, 我们将设置一个Laravel应用程序, 可以使用Toastr包来显示通知.

在你的Laravel应用程序中设置toastr包

现在我们了解了toastr包，让我们在Laravel应用程序中设置它。

要创建一个Laravel项目, 我们使用以下命令:

# install Laravel installer on your local machine
composer global require laravel/installer
#next install Laravel
laravel new toastrExample

cd toastrExample

php artisan serve

通过上面的命令, 我们首先安装了一个全局的Laravel安装程序, 然后创建了toastrExample 项目.

安装完成后, 我们导航到新创建的项目并启动服务器.

现在让我们继续，通过运行以下命令添加我们的toastr 包。

composer require yoeunes/toastr

上面的命令使用PHP包管理器, composer, 来安装yoeunes/toastr 包.

输出。

....
  - Installing yoeunes/toastr (v1.2.6): Loading from cache
  ....

下一步，在你的config/app.php 文件中添加服务提供者，如下图所示。

'providers' => [
    ...
    //the package we previously installed is being made available for use in our application
    Yoeunes\Toastr\ToastrServiceProvider::class
    ...
];

服务提供者是所有Laravel应用程序引导的中心位置。你的应用程序和所有Laravel的核心服务都是通过服务提供者引导的。

将这个包添加到提供者中, 可以确保它在我们启动应用的时候可以使用.

现在继续，通过运行以下命令发布这些文件。

 php artisan vendor:publish --provider='Yoeunes\Toastr\ToastrServiceProvider' --tag="toastr-config"

Copied File [/vendor/yoeunes/toastr/config/toastr.php] To [/config/toastr.php]
Publishing complete.

上述命令生成了一个新文件，config/toastr.php 。

<?php

return [
// some of the contents of this file
.....
    'options' => [
       ....
        'iconClasses'       => [
            'error'   => 'toast-error',
            'info'    => 'toast-info',
            'success' => 'toast-success',
            'warning' => 'toast-warning',
        ],
       ....
    ],
];

上述文件包含一些方法定义，我们将用这些方法来通知用户。这些方法包括错误、成功和警告信息。

为了使我们的通知能够很好地工作，我们需要添加jquery。这只有在views ，通过使用@jquery blade指令或通过内容交付网络（CDN）才能实现。

在这个应用中，我们将使用jquery指令，因为它们很容易在模板上添加。然而，你可以自由地使用jquery blade。

使用toastr通知的用户认证

之前，我们设置了我们的应用程序能够使用toastr包。

现在，让我们创建一个简单的用户认证系统，在注册时显示一个success message ，对返回的用户显示一个welcome alert 。

这个认证系统还应该在输入无效的凭证时显示错误提示。

让我们开始设置我们的User 模型，以适应我们的认证需求。

//app/Models/User.php
 protected $fillable = [
        'first_name',
        'last_name',
        'phone',
        'email',
        'password',
    ];

上面的模型列出了我们将用来验证用户的字段。你可以根据你的需要自由添加字段。

现在，更新user migrations 文件，如下图所示。

    ...
    Schema::create('users', function (Blueprint $table) {
    $table->string('first_name');
    $table->string('last_name');
    $table->string('email');
    $table->string('phone');
    });
    ...

上面的文件使用schema facade来创建我们的用户表列。

重要的是要记住，我们已经在User 模型中定义了这些字段。

现在我们的模型和迁移已经准备好了，继续用你的数据库凭证编辑你的.env 文件，如下图所示。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=toastr
DB_USERNAME=MyUserName
DB_PASSWORD=myPassword

下一步需要你迁移你的数据库。确保你已经更新了你的凭证，否则下一步会出现错误。

通过运行以下命令迁移你的数据库。

 php artisan migrate

让我们继续，创建一个authentications 控制器来处理用户注册和登录。

php artisan make:controller AuthenticationController

上面的命令在App/Controllers 目录下创建了一个新的控制器。在这个目录中，我们要定义我们的用户认证逻辑。

编辑App/Controllers/AuthenticationController.php 文件，如下所示。

....
public function registerUser(Request $request){
        $validator=Validator::make($request->all(),[
            'first_name' =>'required|string|min:2',
            'last_name'  =>'required|string|min:2',
            'email'     =>'email|unique:users|min:6',
            'phone'     =>'required|string|unique:users',
            'password'     =>'required',
        ]);
        if($validator->fails()){
            toastr()->error($validator->errors()->first());
            return back();
        }
        User::create([
            'first_name'    =>$request->input('first_name'),
            'last_name'    =>$request->input('last_name'),
            'email'    =>$request->input('email'),
            'phone'    =>$request->input('phone'),
            'password'    =>Hash::make($request->input('password')),
        ]);
        toastr()->success('You have successfully registered on our test application');
    }

在上面的脚本中，我们有一个registerUser(Request $request) 方法，以request 为参数。

这个方法然后验证用户的请求。例如，请求应该有所有的字段，并符合定义的正则表达式。

当上述验证失败时，我们使用toastr 包提醒用户。

如果验证测试通过，我们使用之前定义的User 模型将用户添加到数据库中。

注册成功后，我们会用一条确认信息通知用户。

值得注意的是，Toastr包有不同类型的警报。在我们的案例中，我们使用了背景颜色为绿色的success() 。

我们还使用了一个红色背景的error() 警报。其他函数包括warning() 方法，你可以用它来警告用户不要进行某些操作。

现在我们已经得到了一个功能性的用户注册，让我们继续前进，在routes/web.php 文件中创建我们的路由，如下图所示。

Route::post('auth/register',[\App\Http\Controllers\AuthenticationController::class,'registerUser'])->name('signup');

现在让我们通过在resources/view/auth.php 文件中添加视图来最终完成我们的应用程序。

<head>
    <title>Toastr.js</title>
    @toastr_css
</head>
<form method="POST" action="{{ route('signup') }}">
    @csrf
    <div class="form-group">
        <label for="first_name" class="col-md-4">{{ __('First Name') }}</label>

        <div class="col-md-6">
            <input id="first_name" name="first_name" type="text" class="form-control" required autofocus>
        </div>
    </div>

    <div class="form-group">
        <label for="last_name" class="col-md-4">{{ __('Last Name') }}</label>
        <div class="col-md-6">
            <input id="last_name" name="last_name" type="text" class="form-control" required autofocus>
        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="col-md-4">{{ __('Phone Number') }}</label>
        <div class="col-md-6">
            <input id="phone" name="phone" type="tel" class="form-control" required autofocus>
        </div>
    </div>

    <div class="form-group">
        <label for="email" class="col-md-4">{{ __('Email') }}</label>
        <div class="col-md-6">
            <input id="email" name="email" type="email" class="form-control" required>
        </div>
    </div>

    <div class="form-group row">
        <label for="password" class="col-md-4">{{ __('Password') }}</label>
        <div class="col-md-6">
            <input id="password" type="password" class="form-control" name="password" required>
        </div>
    </div>

    <div class="form-group row mb-4">
        <div class="col-md-6 offset-md-4">
            <button type="submit" class="btn btn-primary">
                {{ __('Register') }}
            </button>
        </div>
    </div>
</form>
@jquery
@toastr_js
@toastr_render

上面的模板是一个简单的注册表格，包含了我们在User 模型中定义的所有字段。

你注意到，我们正在指示我们的刀片文件使用@toastr_css ，它为警报提供了样式。

在模板的末尾，我们还有其他三个指令，@jquery ，@toastr_js 和@toastr_render 。

现在，如果你还记得，我们曾经说过Toastr包是基于JavaScript的，因此我们使用Jquery来确保通知在浏览器上的呈现。

输出。

结论

在本教程中，我们已经学会了如何使用toastr 包来向用户显示通知。

我们也看到了如何使用这个包来通知用户不同的警报，如警告、成功和错误信息。