前言
之前在Laravel專案結構中跟各位介紹過MVC的概念,View就是在MVC中的V,負責的是網站界面的呈現,也是我們所熟知的前端。今天要來跟各位介紹的就是在Laravel中怎麼管理View,以及相當強大且實用的Blade Template
Laravel的Views放在哪裡?
還記得我們之前改過一個檔案叫做welcome.blade.php嗎?沒錯,在/resources/views底下,而這裡就是Laravel專門存放view資料夾
如何召喚使用寫好的View?
還記得web.php這個route裡面寫些什麼嗎?讓我們打開它看看:
有沒有看到一個方法:
view('welcome');
這個就是我們召喚view的方式!
view($view_name)
是一個全域的方法,你可以在任何地方呼叫它,它會傳回在/views下的view
$view_name
是你想要使用的view的名字,像是如果你想要使用welcome.blade.php,它的名字就會是’welcome’
如果今天/views底下的view開始變多,勢必需要以資料夾去進行分類、管理。讓我們來試試看建立一個資料夾,命名為frontend,並且將welcome.balde.php放入frontend之中
這時,如果只是直接重新整理頁面,可就會顯示找不到view的錯誤囉!這是因為當view的路徑變化時, $view_name
也必須做一些小小的改變讓我們把web.php做一些修正:
Route::get('/', function () { return view('frontend.welcome'); });
此時重新整理一下你的頁面,就可以看見原本的welcome畫面啦!
所以當我們改變了view的路徑時,我們就必須去根據view的路徑變更傳給view()的名稱,資料夾可用斜線/或是點.來區隔都可以,我個人覺得斜線有點不方便閱讀,所以都是採用點.的方式
view('frontend/welcome'); view('frontend.welcome');
傳參數給View
為了讓頁面可以動態變換一些內容,我們會傳一些變數給View讓它顯示出來,讓我們來動手試試看!
將web.php做點小修改:
Route::get('/', function () { return view('frontend.welcome', ['name' => '大帥哥']); });
然後將welcome.blade.php也修改一下:
<div class="title m-b-md"> 很高興見到你,{{$name}} </div>
重新整理頁面後是不是看到很有趣的畫面呢XD
這就是傳遞參數的有趣厲害之處,你可以根據後端的資料,動態顯示前端的頁面
讓我們仔細看看它的內容:
view($view_name, $data)
要特別注意的是, $data
必須是一個鍵值對應(key/value pairs)的陣列,一個key對應到一個value,讓你在view中可以用 {{$key}}
的方式使用,像是範例中的’name’對應到’大帥哥’,然後在view中便可用 {{$name}}
去印出’大帥哥’
Blade Template簡介
Blade是Laravel的樣板引擎,Blade可以讓頁面有繼承的概念,讓頁面能夠輕易地拆分成區塊(section),並且重複使用,減少一般寫前端時可能會有許多重複的內容。
舉個例子來說,讓我們看看這個網頁(這也是我們之後將採用的前端樣板)
https://blackrockdigital.github.io/startbootstrap-business-casual/
根據它的頁面,我們可以將它劃分出幾個區塊,Header, Navigation, Content, Footer。其中Header, Footer在每個頁面都是一樣的,Navigation會根據在哪個頁面,將那個頁面的文字Highlight,Content則是每個頁面都是不一樣的內容
當我們應用Blade Template之後,它可以被這樣劃分
這有點像是物件導向中繼承的概念
有一個master.blade.php,它先include header, navbar, footer,留下一個content等著被實作(@yield)
而頁面home, about, product, store去繼承master(@extends),再各自去實作出content的內容
如此一來,可以大幅減少重複的內容,並且各個檔案都清楚被劃分,相當方便維護
Blade 語法
按照上面的範例,我這邊實際寫出簡單的架構給各位看看
master.blade.php
<!DOCTYPE html> <html lang="zh-TW"> <head> <title>Coffee Shop-@yield('title')</title> </head> <body> @include('frontend.layouts.header') @include('frontend.layouts.navbar') @yield('content') @include('frontend.layouts.footer') </body> </html>
home.blade.php
@extends('frontend.layouts.master') @section('title', 'Home') {{-- 因應不同頁面給予不同title --}} @section('content') {{-- 這邊放Home頁面的內容 --}} @endsection
@include($name)
– 插入 $name
view
@yield($name)
– 等待被繼承後填入內容
@extends($name)
– 繼承 $name
view
@section($name)
– 將內容填入 @yield($name)
,繼承的樣板中必須要有對應的yield
以上就是基礎的blade樣板語法,我們會在下一篇文章實際練習一次!
Blade控制語法
除了上述的基本語法之外,還有其他進階的語法可以使用,像是我們熟知的if判斷式、loop迴圈等等,以下就列出範例給各位參考
- if判斷
@if (count($records) === 1) I have one record! @elseif (count($records) > 1) I have multiple records! @else I don't have any records! @endif
- switch判斷
@switch($i) @case(1) First case... @break @case(2) Second case... @break @default Default case... @endswitch
- Loop迴圈,有基本的for, foreach, while,還有比較特別的forelse
@for ($i = 0; $i < 10; $i++) The current value is {{ $i }} @endfor @foreach ($users as $user) <p>This is user {{ $user->id }}</p> @endforeach @forelse ($users as $user) <li>{{ $user->name }}</li> @empty <p>No users</p> @endforelse @while (true) <p>I'm looping forever.</p> @endwhile
- 當然迴圈中也有continue跟break
@foreach ($users as $user) @continue($user->type == 1) <li>{{ $user->name }}</li> @break($user->number == 5) @endforeach
總結
好的,這次的教學就到這邊結束!
讓我們複習一下今天的內容
- view在Laravel的位置
- 用全域方法view()呼叫view的
- view()配合參數傳遞
- Blade Templates介紹
- Blade的基本語法
- Blade的控制語法
我們下一篇將會帶各位實際操作,以Laravel的Blade Templates去製作我們這系列網站的前端。
關於Blade語法有興趣的,可以到官方文件去看看唷~
https://laravel.com/docs/5.5/blade
See you!