第三方套件 Flash Message 訊息顯示

--- tags: laravel,套件 --- # 第三方套件 Flash Message 訊息顯示 ![](https://i.imgur.com/LofeHOs.png) Step 0.安裝套件 composer require laracasts/flash Step 1.在要顯示訊息的視圖上加上Bootstrap樣式，一般放在<head>標籤內，如下: ``` <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> ``` Step 2.在要顯示訊息的視圖上載入JS，一般放在</body>之前 ```  $('#flash-overlay-modal').modal();  $('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安裝](https://tailwindcss.com/docs/guides/laravel) ##### 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); } ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.