今天來小聊聊 MVC 的 View，在 Laravel 的 Blade，他們是什麼關係哇？基於個人的好奇，就淺淺來研究吧！
在 Laravel 中，View 是用來顯示資料的部分，我個人初淺的理解是負責前端的畫面，View 和 Controller、Model 是分開的，這樣做的好處是能讓程式碼結構更清晰，也讓維護變得簡單多了。
Laravel 的 View 通常放在 resources/views 目錄下，在 Laravel 中以 .blade.php 為副檔名。
Blade 是 Laravel 的模板引擎，用於創建和管理 View 的工具，提供了一種簡單的語法，讓我們可以輕鬆地編寫 HTML 和 PHP 的程式碼，以提高性能。Blade 的副檔名為 .blade.php，並支持使用變數、條件語句和迴圈等功能來處理顯示邏輯。
所有的 Blade 都是 View，但並不是所有的 View 都是 Blade 。Laravel 其實也可以用其他格式的 View，例如 HTML 和 PHP 檔案。不過大多數開發者都會選擇 Blade處理 HTML 和動態資料的結合，因為比較方便！
要建立一個新的視圖，只需在 resources/views 目錄下創建一個 .blade.php 檔案。
test.blade.php 的檔案：<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<h2>This is a test</h2>
</body>
</html>
view() 方法呼叫這個視圖：namespace App\\Http\\Controllers;
use Illuminate\\Routing\\Controller;
class TestController extends Controller
{
public function test()
{
return view('test'); // 呼叫 resources/views/test.blade.php
}
}
view() 方法傳遞資料到 pages/test.blade.php
public function test()
{
return view('pages.test', [
'name' => 'JohnsonLu',
'gender' => 'Man',
'items' => ['Milk', 'Tea']
]);
}
pages/test.blade.php ****中，可以使用這些變數：<h2>Hello, I am {{ $name }}</h2>
@if ($gender === 'Man')
<h4>Man</h4>
@else
<h4>Woman</h4>
@endif
<h4>Which one do you like?</h4>
<ul>
@foreach ($items as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
Blade 提供了簡潔的語法來處理顯示邏輯，包括變數輸出、條件語句和迴圈。
使用 {{ $variable }} 來顯示變數。
@if ($condition)
// 內容
@endif
@foreach ($items as $item)
<li>{{ $item }}</li>
@endforeach
Blade 支持視圖的佈局和繼承，使得 HTML 結構變得較為方便。
views/app.blade.php：<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>App Name - @yield('title')</title>
</head>
<body>
@section('page-name')
<h3>This page is：</h3>
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
views/test.blade.php ****這個佈局：@extends('layouts.app')
@section('title', 'Test Page')
@section('content')
<p>This is my body content.</p>
@endsection
views/includes/header.blade.php
<header>
<h1>Welcome to My Site</h1>
</header>
views/test.blade.php ****中，使用 Blade 的 @include 指令來引入子視圖：@include('includes.header')
@section('content')
<p>This is my body content.</p>
@endsection
以下是一個簡單的任務清單應用，從建立 View 到呈現資料的過程。
namespace App\\Http\\Controllers;
use Illuminate\\Routing\\Controller;
class TaskController extends Controller
{
public function index()
{
$tasks = ['Task 1', 'Task 2', 'Task 3'];
return view('tasks.index', compact('tasks'));
}
}
resources/views/tasks/index.blade.php
@extends('layouts.app')
@section('title', 'Task List')
@section('content')
<h1>My Tasks</h1>
<ul>
@foreach ($tasks as $task)
<li>{{ $task }}</li>
@endforeach
</ul>
@endsection
Route::get('/tasks', [TaskController::class, 'index']);
參考資料：
踏著身心靈的塔羅腳步，轉向技術與邏輯的工程師之路，就藉由塔羅日抽來紀錄今日的學習與生活吧！
聖杯國王：作為後端工程師，和前端開發者建立良好的溝通真的很重要，積極參加需求討論，了解用戶的期望。透過想像和合作，一起創造出更符合需求的解決方案，讓產品質量更加出色。
みんな笑ってみな。おっかないのは逃げちゃうから。
我們一起大笑看看，可怕的東西就會跑光光了唷！
－ 龍貓
iThome鐵人賽
看影片追技術