寫好自動測試之後,我們回過頭來看看之前的網頁。
嗯⋯⋯
Laravel 雖然能直接編寫網頁 HTML 也還不錯,但是作為一個框架,難道沒有針對前端的一些協助,讓編寫網頁外觀更簡單的一些方式嗎?
當然有!這就是 Laravel 的 blade engine!讓我們一起來學學怎麼使用吧!
如 Lucas 邦友 在 Day 4 的留言內提到的,Blade 是 Laravel 使用的模板引擎,可以使用更簡潔的方式來產生前端的外觀。
設計網頁時,通常我們會使用某些外觀樣板,保證網頁大致的外觀相同。然後在特定頁面內,我們再填入每個頁面各自的內容。
利用 Laravel 的 Blade Engine,我們可以很容易達成這件事情
首先,我們建立 resources/views/layouts
資料夾。這個資料夾之後可以用來裝不同的模板
完成後,我們建立 resources/views/layouts/app.blade.php
檔案:
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="sidebar" style="width: 15%; float: left; background-color:#aaa;">
側邊欄
</div>
<div class="container">
@yield('content')
</div>
</body>
</html>
在這裡,我們用 @yield()
這個語法,標記出之後引用的頁面希望顯示內容的位置。
然後,我們建立 resources/views/about_us.blade.php
:
@extends('layouts.app')
@section('content')
<p>嗨!大家好!</p>
@endsection
相信聰明的讀者都看得出來,我們在這裡用 @section('content') @endsection
標記出我們希望顯示在 @yield('content')
裡面的內容
接著,我們建立一個 route 來呈現這個畫面。在 routes/web.php
裡面,我們加上:
Route::get('/about_us', function () {
return view('about_us');
});
就這樣!
現在,我們來看看畫面呈現的樣子
雖然有點不好看,不過我們可以看出來,利用 @extends('layouts.app')
這個語法,about_us.blade.php
這個樣板確實成功的引用了 layouts/app.blade.php
裡面的檔案
這樣,我們就能很簡單的在每個頁面裡,引用各自的模板樣式了!
能夠利用 layout 的方式,來讓網頁共用相同的模板確實不錯。不過作為網頁,總是要顯示一些後端送過去的資料才對嘛。
幸好!Laravel 的 Blade Engine 在這件事情上非常簡單!我們利用前面的 about_us
來做練習。
首先,我們稍微改寫一下 resources/views/about_us.blade.php
:
@extends('layouts.app')
@section('content')
<p>嗨!大家好!我們是{{$name}}</p>
@endsection
然後,就是從後端送出 $name
的內容了。我們這裡改寫 routes/web.php
使其送出內容:
Route::get('/about_us', function () {
return view('about_us', ['name' => 'Laravel 6.0 範例']);
});
這樣!我們就成功的將資料傳到 blade 裡面了!
畫面上的字成功地變成了「嗨!大家好!我們是Laravel 6.0 範例」
能將資料從後端傳到前端之後,我們可以做的操作選項就變得更豐富了。
以下簡單介紹幾個常用的控制語法:
在 blade 裡面使用 if 判斷的範例如下:
@if (count($records) === 1)
有一筆資料!
@elseif (count($records) > 1)
有多筆資料!
@else
沒有資料!
@endif
對應 if,在 blade 裡面使用 switch 判斷的範例如下:
@switch(count($records))
@case(1)
有一筆資料!
@break
@case(2)
有二筆資料!
@break
@default
有資料
@endswitch
在 blade 裡面使用迴圈的範例如下:
// fore 迴圈
@for ($i = 0; $i < 10; $i++)
現在迴圈跑到 {{ $i }}
@endfor
// foreach 迴圈
@foreach ($users as $user)
現在 user id 為 {{ $user->id }}
@endforeach
// while 迴圈
@while (true)
無窮迴圈
@endwhile
常用的幾個控制語法都在這邊了,但是筆者這邊要說明,並不是全部的語法都在這邊介紹完畢。Blade Engine 還有很多厲害的語法,各位可以去 https://laravel.com/docs/5.8/blade 研究一番,相信收穫會很豐富的。
這裏,我們學會了怎麼使用 blade 的 layout 來建立固定的樣板模式,學會了怎麼從後端傳輸資料進入畫面,還學會了怎麼使用基礎的控制語法來操作畫面。
希望各位讀者們覺得看了今天這篇文章能有收穫!我們明天見!