【Laravel入門】10分鐘做出Laravel的Flash Message訊息顯示

Flash Message 一般用於當程式處理完成後以即時訊息來提示使用者,並且顯示之後就將資料加以刪除。這篇文章將告訴你如何利用 laracasts 所開發的套件來實作出來,文後也會告訴你如何去支持 Livewire 應用
Step 0.安裝套件
composer require laracasts/flash
Step 1.在要顯示訊息的視圖上加上Bootstrap樣式,一般放在標籤內,如下:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Step 2.在要顯示訊息的視圖上載入JS,一般放在之前
<!-- Flash Message Overlay會用到,需保留 -->
$('#flash-overlay-modal').modal();
<!-- Flash Message 3秒之後消失,非必須 -->
$('div.alert').delay(3000).fadeOut(350);
Step 3.在視圖上要顯示訊息的位置加入以下程式碼
@include('flash::message')
使用Flash Message
//app/Http/Controllers/OrderController.php
public function store(){
//儲存訂單到資料庫
flash('訂單建立完成!!')->success(); //綠色框
flash('訂單建立失敗!!')->error(); //紅色框
flash('請向客服確認此訂單!!')->warning(); //橘色框
flash('訂單建立完成!!')->overlay(); //跳出視窗
flash()->overlay('Modal Message', 'Modal Title'); //跳出帶標題視窗
flash('訂單建立完成')->important(); //加上關閉功能
flash('Message')->error()->important(); //結合外框與關閉功能
return redirect('/');
}
==如果需要顯示多個訊息,可多次呼叫flash()==
進階技巧
讓訊息顯示3秒後自動消失
<script>
$('div.alert').not('.alert-important').delay(3000).fadeOut(350);
</script>
複寫訊息的視圖
開啟Terminal,輸入以下指令
php artisan vendor:publish --provider="Laracasts\Flash\FlashServiceProvider"
==也可以不指定provider,只輸入vendor:publish,從選項去選也是一樣的==
訊息沒有顯示的可能原因
我曾出現因為Session內容結構改變(flash_notification型別為集合而非預設的物件,可能是因為做了多次的flash())導致Blade判斷時認為沒有訊息需要顯示
解決方案:
Step 1.執行以下指令
php artisan vendor:publish --provider="Laracasts\Flash\FlashServiceProvider"
Step 2.修改 resources/views/vendor/flash/message.blade.php成以下內容
@if (Session::has('flash_notification'))
@if (Session::has('flash_notification.overlay'))
@include('flash::modal', ['modalClass' => 'flash-modal', 'title' => Session::get('flash_notification.title'), 'body' => Session::get('flash_notification.message')])
@else
@foreach (Session::get('flash_notification') as $item)
@if (Session::has('flash_notification.important'))
<div class="alert alert-important alert-{{ $item->level }}">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
{{ $item->message }}
</div>
@else
<div class="alert alert-{{ $item->level }}">
{{ $item->message }}
</div>
@endif
@endforeach
@endif
@endif
如何在Livewire裡頭使用 Flash Message
因為 Livewire 並不會進行轉址以及重新渲染,導致無法正常顯示 Flash Message,這時候我們可以利用mattlibera/livewire-flash套件來達到同樣的效果
這個套件是在 Laracasts\Flash 套件的架構之上進行修改,因此使用時需要移除 Laracasts\Flash 以避免互相干擾的問題
安裝步驟
- Step 1.下載套件
composer require mattlibera/livewire-flash
- Step 2.加入樣式
此套件內建使用以下兩個樣式
TailwindCSS
透過CDN安裝
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
透過NPM安裝
FontAwesome
- Step 3.調整視圖
在要呈現 Flash Message 的位置加入以下程式碼
<livewire:flash-container />
使用方法
如要在正常轉址後呈現 Flash Message,可比照laracasts/flash套件的做法來撰寫,如下:
public function store()
{
flash('Success!');
return redirect()->back();
}
如果要在 Livewire 環境下呈現 Flash Message,請改成以下做法:
public function livewireAction()
{
flash('Your request was successful!')->success()->livewire($this);
}