無密碼登入的實現方式包含：登入時在預先綁定的 mobile device 壓指紋驗證。或是傳簡訊或 Email 到之前註冊的手機或信箱，使用者依照簡訊或 Email 的內容 (通常是一串碼)，輸入網站做登入，等等。

實踐的方式各有變化，撰文的現在 (2023年7月) 還沒有一個通用的規範。

larry 之前關於 中華電信 Hami Video 的文章，Hami Video 就是用手機簡訊方式做無密碼登入。當然，那篇文章也提到：Hami Video 的背後是中華電信，只有電信商才能負擔這麼大量的手機簡訊費用。

無密碼登入適合哪種用戶使用？

無密碼登入適合哪種用戶使用？特別適合網站的低頻使用用戶，甚至一次性、或是幾個月、一兩年才使用一次的用戶。對於這些用戶，他們不用去管理密碼，並保密自己的密碼，自己設定的密碼強度也有可能不夠。

「保密自己的密碼」這句話邏輯上似乎有點好笑。但根據 larry 這麼多年服務客戶的經驗，還是有人直接密碼明碼給別人，請別人幫忙去處理事情。不是說不相信別人，而是我們就事論事，這樣密碼就有可能外洩。

有時候教育的成本很高，還不如設計無密碼登入。

Laravel 官網的文章與範例

今年 (2023) 三月份，larry 看到 Laravel 官網有一篇關於無密碼登入的文章。它是用寄 Email 給用戶的方式，Email 中包含一個簽署過的網址 (Signed URL)，用戶點該連結後直接登入。
https://laravel-news.com/passwordless-authentication-in-laravel

這篇 Laravel 官網文章有附作者的 GitHub Repo，程式架構的東西看文字不一定好懂，直接從作者的 sample project 來看可能會更為理解。

首先 resources/views/app/auth/login.blade.php 中包含了<livewire:auth.login-form />

resources/views/app/auth/register.blade.php 中包含了<livewire:auth.register-form />

它是用 Laravel Livewire 開發的，讀者不一定要使用 Livewire，本篇重點在理解 Laravel 官網文章的概念。

Livewire 的 component 概念可以參考我之前的文章 Laravel Blade Templates：Components, Slots, and Building Layouts

其中 class based component 的概念，Livewire 應該是基於此開發的。

上方提到的 <livewire:auth.login-form /> 對應到 app/Http/Livewire/Auth/LoginForm.php

<livewire:auth.register-form /> 對應到 app/Http/Livewire/Auth/RegisterForm.php

使用者送出 Email 時會觸發 LoginForm::submit 這個 function，裡面會觸發 app/Actions/Auth/SendLoginLink.php

SendLoginLink::handle 裡面會使用 Laravel 內建的 URL::temporarySignedRoute 將你指定的網址簽章編碼，並設定該連結的有效期限。Signed Route 是 Laravel 5.6 開始支援，時間過的真的好快啊。

SendLoginLink::handle 將簽章編碼好的連結傳給 Mailable，並寄給用戶。Mailable 是 app/Mail/Auth/LoginLink.php

使用者收信點連結後導回網站，由 controller LoginController::__invoke 檢查簽章、登入、以及轉向指定網頁。

以上就是整個 Email 用戶 Signed URL，使用者無密碼登入的流程。Laravel 官網文章也有附使用者無密碼「註冊」的 sample code，但只是無密碼登入的變化，這裡就不再重複。

結語

Passwordless Authentication 無密碼驗證登入不只是一個登入方式的變化，而是很值得參考的網路科技的趨勢，至少包含微軟、Google、Apple 態度上應該都是往這個方向走。

本篇討論的 Laravel 官網文章是用 Email 用戶 Signed URL 的方式，Laravel 早已有簽章網址的模組，可以很輕易且漂亮的實作，並且可以指定簽章網址的有效期限。

除了無密碼登入，很多商業應用都可以使用 Signed URL 的方式。Signed URL 概念上、實作上，應該是一個滿值得大家了解的功能。

伴隨著 PHP 8.1 的釋出，Laravel 8 的後繼版本已經支援 Enum Casting (當然 Laravel 9 之後的版本也會支援)。

延伸閱讀：Laravel 9 的新功能：最低要求 PHP 8.0，底層更新為 Symfony 6.0，開始使用 PHP 8.1 的 Enum

larry 想藉 Laravel 9 大幅更新 Accessor & Mutator 的這個機會，走一遍 Mutator & Casting 的官方文件。本篇文章會以 Laravel 9 Mutator & Casting 官方文件為主。
https://laravel.com/docs/9.x/eloquent-mutators

首先，依照官方文件的語意，Accessor 指的是 get 這個動作，Mutator 指的是 set。

什麼時機會使用到 Accessor / Mutator 呢？例如，每次存一個值都要 encrypt，或是取出來用時都要 decrypt。或是，你要每次都要把 array 轉成 json 存到資料庫，使用時取出 json 要再轉回 array。

也就是，如果你每次「存」或「取」都要做一定動作，可以考慮使用 Accessor / Mutator。Laravel 9 開始，假如你要存取一個 model 裡的 first_name attribute，要這樣寫

use Illuminate\Database\Eloquent\Casts\Attribute;

// 注意有 return type
// 注意是 protected method, 不允許調用端直接調用
protected function firstName(): Attribute
{
    // 可以只寫 get 或 set 其一
    return Attribute::make(
        get: fn ($value) => ucfirst($value),
        set: fn ($value) => strtolower($value),
    );
}

有時後程式邏輯需要把資料庫中的幾個欄位，重組成一個新的 object，Laravel 稱之為 value object。

use Illuminate\Database\Eloquent\Casts\Attribute;

// 注意是 protected method
// 當調用端存取 address 時會觸發這個 function 
// 也就是自動新增了一個 address attribute
protected function address(): Attribute
{
    // class Address 就是所謂的 value object
    return Attribute::make(
        get: fn ($value, $attributes) => new Address(
            $attributes['address_line_one'],
            $attributes['address_line_two'],
        ),
        set: fn (Address $value) => [
            'address_line_one' => $value->lineOne,
            'address_line_two' => $value->lineTwo,
        ],
    );
}

讀者可以觀察一下，get / set 使用的都是 PHP 7.4 的 arrow function。get return 的是一個新生成的 object，set 中設定的是一個 array。

class Address 就是所謂的 value object。調用端要使用，會像是 $user->address->lineOne。

定義 value object 時，lineOne、lineTwo 都要是 public。

class Address
{
    public $lineOne;
    public $lineTwo;

    public function __construct(...)
    {
        //…
    }
}

其實把 DB 中的欄位重新包裝成 value object (如上方的 class Address)，在程式邏輯中使用，已經算是 Attribute Casting。Laravel 提供了一個不用寫 Accessor / Mutator 的方式，將 DB 欄位轉成常用的資料格式。

Attribute Casting

例如 Laravel 的 DB migration boolean，實際在 MySql 裡是 tinyint(1)，存的值是 1 或 0。這時你可以 cast 成 boolean。

use Illuminate\Database\Eloquent\Casts\AsStringable;
use Illuminate\Database\Eloquent\Casts\AsArrayObject;
use Illuminate\Database\Eloquent\Casts\AsCollection;

class User extends Model
{
    protected $casts = [
        'is_admin' => 'boolean',
        'directory' => AsStringable::class,
        'options' => 'array',
        // 也可以 cast 成 PHP ArrayObject 或 Laravel Collection
        //'options' => AsArrayObject::class,
        //'options' => AsCollection::class,
    ];
}

也就是如果 DB migration 是 boolean，這樣可以使用沒錯。但如果要寫漂亮一點，model attribute 可以 cast 成 boolean。字串的部分，你也可以 cast 成 Laravel fluent string，方便後續操作。

另外，如果你的 DB migration 有 json 或 text，model attribute 可以 cast 成 array，存取時自動會在 array 和 json 格式轉換。等同於資料庫欄位可以直接存 array，這是很有趣的。

接下來是一個重要功能 Enum Casting (僅支援 PHP 8.1 以上的環境)

use App\Enums\ServerStatus;
 
protected $casts = [
    'status' => ServerStatus::class,
];

這樣要存或取 $model->status 都會直接轉換成 enum。

if ($server->status == ServerStatus::Provisioned) 
{
    $server->status = ServerStatus::Ready;
    $server->save();
}

Custom Casts

如果你執行 Artisan command

php artisan make:cast YourClass

就會新增一個 YourClass 在 app/Casts 目錄下。例如 class Address

use App\ValueObjects\Address as AddressValueObject;
use Illuminate\Contracts\Database\Eloquent\CastsAttributes;

class Address implements CastsAttributes
{
    public function get($model, $key, $value, $attributes)
    {
        // 將 DB 欄位轉成 value object return
        return new AddressValueObject(
            $attributes['address_line_one'],
            $attributes['address_line_two']
        );
    }

    public function set($model, $key, $value, $attributes)
    {
        if (! $value instanceof AddressValueObject) 
        {
            //throw exception
        }
 
        // return array 去設定 DB 欄位
        return [
            'address_line_one' => $value->lineOne,
            'address_line_two' => $value->lineTwo,
        ];
    }
}

記得文章上方的 Accessor / Mutator，使用的是 PHP 7.4 的 arrow function。function expression 內容就如同上方範例，只是 Custom Casts 把程式獨立到一個 class。

記得要設定 model，這樣等於新增了一個 address attribute (DB 存的是 address_line_one, address_line_two)

use App\Casts\Address;
 
protected $casts = [
    ‘address’ => Address::class,
];

結語

Accessor / Mutator 與 Casting 是一體的兩面。你可以寫 Accessor / Mutator，但如果正好有 Laravel 預先定義的 cast 資料類型，就直接用 casting 比較方便，包含 PHP 8.1 的 enum。

使用情境上，如果每次存取資料都有一個固定動作，可以考慮使用 Accessor / Mutator 或 Casting。例如每次存一個值都要 encrypt，或是每次都要把 array 轉成 json 存到資料庫，使用時取出 json 要再轉回 array。

或是轉成 Laravel Stringable 或 Collection 等資料格式，方便後續處理。將幾個 DB 欄位重新包裝成 value object 也是一個使用情境。

Accessor / Mutator 與 Casting 不是 Laravel 的大主題，但實際走過文件，還是有很多細節要注意。希望大家在資料庫欄位 / 程式邏輯之間的轉換 (ORM，Object Relational Mapping)，也有更深一層的理解囉。 

Laravel 9.19 開始 (2022/6/30)，Laravel 前端檔案管理工具從 Laravel Mix 改為 Vite。

每次寫關於軟體工程演進類的文章，都會有感於時間過得真的太快。2017~2022，五年多就這樣過去了。五年的時間，希望大家在人生中都有累積些什麼。

Laravel Mix 的底層是 Webpack，在 Laravel 根目錄會有 package.json, webpack.mix.js 兩支檔案。執行

npm install

會依照 package.json 去安裝套件到你的開發環境。

package.json 中有一個 “scripts” 欄位，定義了很多 npm 指令，並將 npm 指令轉成 mix 指令。mix 指令就會去跑 webpack.mix.js 這支檔案裡的 script，包含 compile css / js。

Laravel Vite 是基於 Vite，是一個基於原生 JavaScript ESM 的前端開發工具。與 Webpack 機制上不同的是，Webpack 一律依照 script 打包全部檔案素材 (dev mode 也是打包全部)。

而 Vite 在熱更新時 (hot module replacement，HMR)，是先 refresh 瀏覽器，檢查現在前端頁面有關的檔案是否有更新，如果有，才編譯與該頁面有關的檔案 (而不是每次都全部打包)。因此在開發階段，尤其是大型專案，會大幅加速開發時間。

Laravel Vite 一樣有 package.json，一樣要跑 npm install。只是根目錄 script 檔案不是 webpack.mix.js，改為用 vite.config.js。

Laravel Vite 的 package.json 中一樣有 “scripts” 欄位：

npm run dev  // 轉成 “vite”
npm run build  // 轉成 "vite build"

vite 指令就會去跑 vite.config.js 這支檔案裡的 script，預設是

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

入口的 css / js 一樣是 resources/sass/app.scss, resources/js/app.js。注意有一個設定 refresh: true，這代表在執行 npm run dev 時，如果底下這幾個路徑檔案有更新

• app/View/Components/**
• lang/**
• resources/lang/**
• resources/views/**
• routes/**

瀏覽器已 load 的頁面會整頁 refresh。以上是預設的監聽路徑，你也可以將自己想監聽的檔案路徑設定給 refresh 參數 (以設定 array 代替 true)，這樣 Vite 就會監聽你定義的路徑。

跟之前一樣 app.scss 中預設 import 隔壁的 _variables.scss。

app.js 中預設 import 隔壁的 bootstrap.js，在其中 load 你需要的套件，例如：jQuery，Bootstrap，Vue，等。

在前端檔案加一行 (與 Mix 不同，Vite 引用 css / js 在同一行)

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

就可以將 compile 好的 css / js 引入 (並加 preload 屬性)。如果是 Build Mode (npm run build)，css / js 檔名會加上版本號 (auto-versioning)。

目前如果先安裝 laravel/ui，build 出來的 css / js 會包含 Bootstrap 5.2.3，是目前 (2022年12月) Bootstrap 的最新版。

Vite 也可以處理前端素材檔案，例如圖檔跟字型檔。在 JS 的入口處 (app.js) 寫入

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

執行 npm run build，這樣 Vite 就會將素材檔名編碼過，並移到 public folder 底下。前端要用素材檔可以這樣寫

<img src="{{ Vite::asset('resources/images/logo.png') }}">
{{-- <img src="http://your-url.com/build/assets/logo.1234ooxx.png"> --}}

結論

從 Webpack 到 Vite，底層是完全不同了。但可以看出來 Laravel Vite 創作時，作者盡量不動 Laravel 的架構，與之前一樣的 css / js 入口檔案。

Vite config 當然有一些獨立的功能和寫法。既然 Laravel 決定改用 Vite 了，我們應該也要隨之學習和習慣 Vite 的使用。

larry 覺得這篇文章很好是在於，除了 API 串接的架構我們可以參考，另外關於 PHP 的寫法 (包含 PHP 8 的新語法)，還有一些軟體工程的概念，都很值得我們參考。

這篇教程是以範例的方式來進行。首先，新增一個 service
app/Services/MedicalTrust/MedicalTrustService.php

Laravel service container 的觀念，要做 service container binding

// app/Providers/AppServiceProvider.php

public function boot()
{
    $this->app->singleton(MedicalTrustService::class,
        fn () => new MedicalTrustService(
	    baseUrl: ‘......’,
            apiToken: ‘.....’,
	),
    );
}

注意教程範例中，MedicalTrustService 本身就是 concrete class，也沒有 implement 任何介面，其實不用特別寫 binding (系統會自動 resolve)。他這樣寫應該是為了餵參數進去，如果參數寫在 service 裡面，binding 這一段其實可以省掉。

新增一個 trait
app/Services/Concerns/BuildsBaseRequest.php

這邊用的是 Laravel HTTP Client 的用法
https://laravel.com/docs/9.x/http-client

trait BuildsBaseRequest
{
    public function buildRequestWithToken(): PendingRequest
    {
        //…
    }

    public function buildRequestWithDigestAuth(): PendingRequest
    {
        //…
    }
}

新增一個 trait
app/Services/Concerns/CanSendGetRequest.php

trait CanSendGetRequest
{
    public function get(PendingRequest $request, string $url): Response
    {
        return $request->get(
    	    url: $url,
    	);
    }
}

新增一個 trait
app/Services/Concerns/CanSendPostRequest.php

trait CanSendPostRequest
{
    public function post(PendingRequest $request, string $url, array $payload = []): Response
    {
        return $request->post(
    	    url: $url,
    	    data: $payload,
    	);
    }
}

注意這份教程所有輸入參數到 function，都使用 PHP 8 Named Arguments 的語法。

還記得本文最上方新增的
app/Services/MedicalTrust/MedicalTrustService.php
此時就可以把這些 trait 都用上

class MedicalTrustService
{
    use BuildBaseRequest;
    use CanSendGetRequests;
    use CanSendPostRequests;
 
    // PHP 8 的 Constructor property promotion
    public function __construct(
        private readonly string $baseUrl,
        private readonly string $apiToken,
    ) {}

    // ...
}

注意這份教程所有 class constructor，都使用 PHP 8 Constructor property promotion 的語法。

新增一個 service
app/Services/MedicalTrust/Resources/DentalResource.php

class DentalResource
{
    public function __construct(
        private readonly MedicalTrustService $service,
    ) {}
 
    public function list(string $identifier): Response
    {
        return $this->service->get(
    	    request: $this->service->buildRequestWithToken(),
    	    url: "/dental/{$identifier}/records",
    	);
    }
 
    public function addRecord(string $identifier, array $data = []): Response
    {
        return $this->service->post(
            request: $this->service->buildRequestWithToken(),
    	    url: "/dental/{$identifier}/records",
    	    payload: $data,
    	);
    }
}

MedicalTrustService 注入了 DentalResource，也可以說是 DentalResource 再包裝 MedicalTrustService。

注意這種寫法，MedicalTrustService 把牙醫的 API 實作完全分離出去了。也就是如果我們要新增，例如復健科，要另新增一個 RehabResource.php

教程的作者提到，這樣寫可以，但要輸入 payload 時，很有可能是長長一段 json 或是 array，所以教程的作者希望把 API 輸入做成 object。下面重寫了 function addRecord，把 payload 用 NewDentalTreatment object 去實作 (larry 本篇重點是了解 whole picture，資料結構做成物件的細節我們先不看)。

class DentalResource
{
    // 省略

    public function addRecord(string $identifier, NewDentalTreatment $request): Response
    {
        return $this->service->post(
      	    request: $this->service->buildRequestWithToken(),
      	    url: "/dental/{$identifier}/records",
      	    payload: $request->toArray(),
        );
    }
}

在調用端 (caller side)，我們新增一個 
app/Http/Controllers/Dental/Crowns/StoreController.php

class StoreController
{
    public function __construct(
        private readonly DentalResource $api,
	private readonly DentalTreatmentFactory $factory,
    ) {}
 
    public function __invoke(NewCrownRequest $request): RedirectResponse
    {
        // do some request validation here
	// if fails, throw Exception

    	$treatment = $this->api->addRecord(
    	    identifier: $request->get('patient'),
    	    request: $this->factory->make(
  	        attributes: $request->validated(),
  	    ),
  	);

  	// ...
    }
}

所以整個架構是 MedicalTrustService 注入 DentalResource，DentalResource 注入 controller。注意 controller function 的參數是 NewCrownRequest。

NewCrownRequest 是 custom form request，$request->validated() 將 post 資料餵給 factory，產生 NewDentalTreatment object，餵給 DentalResource。

Again，我們這篇主要是理解 whole picture，所以 factory method 如何產生 object 這一段我們暫時不看。

結論

基本上 get / post 等基礎工程寫在 MedicalTrustService，它是一個非常通用的 service。DentalResource 做的是針對這組 API，做 post 參數的格式，並將 payload 物件化，開有語意的 function 給 caller 端使用。將 DentalResource 注入 controller 就可以使用了。

本篇除了參考原教程作者串 API 的架構，另外就是參考他 PHP 的寫法。例如 trait 的使用，為什麼要用 MedicalTrustService 注入 DentalResource 這樣的分層。他也大量使用 PHP 8 的新寫法 Named Arguments 以及 Constructor property promotion。輸入的 array 資料物件化的部分也可以參考一下。

larry 最後想提的是，我們要參考的是原教程為什麼要這樣寫的精神，而不是拘泥於它的架構。實際上我們架構如何設計與撰寫，應該還是以實際的狀況和需求來判斷。

******* 以下文章是基於 Laravel 8 *******

Component & Slot 的概念從 Laravel 5.4 開始就有了，一直演進到目前是 Laravel 8。寫法上觀念上都有很大的改變，也看得出來 Laravel 前端 template 是越來越往 component based 的框架在走。前幾年開始到目前 (2021年5月)，似乎 component based 的前端框架還是主流，這點可以再做觀察。

本篇文章主要是講 Laravel 8 的 Component & Slot。如果基礎 Laravel Blade Templates 還不熟的讀者，可以參考我之前的文章：Laravel Blade Templates：The Basics

首先，Component 分為兩種：class based component 和 anonymous component。簡單來說，class based component 是由一支 Class 檔案搭配一支 view template 檔案。而 anonymous component 則是簡單只有一支 view template 檔案。

Class based component

如上方 Laravel 8 官方文件，要建立一個 class based component，可以下這個指令

php artisan make:component Alert

這個指令會在

• App\View\Components 新增一支 Class 檔案。
• resources/views/components 新增一支 view template 檔案。

建立 class based component 時也可以建立檔案結構 (比較好管理)

php artisan make:component Forms/Input

這個指令會在

• App\View\Components\Forms 新增一支 Class 檔案。
• resources/views/components/forms 新增一支 view template 檔案。

調用端如何使用？用 x- 開頭接 component class name，以小寫 dash (-) 分隔的方式

<x-alert/>

<x-user-profile/>

如果 component 是有檔案結構，如上例 Forms/Input，除了小寫 dash (-) 分隔的規則，檔案上下層以 dot (.) 分隔

<x-forms.input/>

Component 如何接收調用端的資料

component class 用 constructor 接收調用端的資料 (下例並非完整，僅用於勾勒出 component 如何接收資料，完整 class 請參考官方文件)

class Alert extends Component
{
    ...

    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    ...
}

這樣調用端就可以將 type, message 傳進 component。
注意傳 php 變數的屬性前要加 colon (:)

<x-alert type="error" :message="$message"/>

再看一下上方 class Alert。component class 的 view 可以直接使用 component class 的 public 變數，不用特別傳到 view 裡 (跟一般 Laravel controller 不同)。以上方 class Alert 來說，$type, $message 應該是 public 變數，class Alert 的 view 可以直接使用。

Component Attributes

所有不在 component constructor 接收的變數，都會自動存到 component 的 “attribute bag”，其實就是 component 預設的 $attributes 變數。所以如果沒有特別設定 component constructor，想直接顯示調用端所下的屬性，component view 可以這樣寫

<div {{ $attributes }}>
    <!-- Component content -->
</div>

很多時候，component view 本身可以設定 css class，同時也開放調用端下 css，可以使用 $attributes->merge

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

還記得 class Alert，$type 變數是 constructor 接收。如果調用端這樣寫

<x-alert type="error" :message="$message" class="mb-4"/>

上面 $attributes->merge 就會把 class=”alert alert-error” 跟 “mb-4” 合併在一起，最後產出的 html 是

<div class="alert alert-error mb-4">
    <!-- Contents of the $message variable -->
</div>

html 屬性不是只有 css class，其他屬性不見得能下多個值。如果 $attributes->merge 這樣寫

<button {{ $attributes->merge(['type' => 'button']) }}>
    {{ $slot }}
</button>

當調用端 x-button 沒有指定 type，最後產出的 html button type=”button”。
當調用端 x-button 有指定 type，最後產出的 html button type=調用端指定的值。
所以非 css class 的屬性，$attributes->merge 的行為是「覆寫」，而非「合併」

Slot

除了上段討論的 $attributes 變數，component 也預設了 $slot 變數。如果 component view 是

<span class="alert-title">{{ $title }}</span>

<div class="alert alert-danger">
    {{ $slot }}
</div>

調用端 x-alert 中間夾的內容，會自動填到 $slot 變數中。但 component view 還有一個 $title，此時調用端就要新增一個 <x-slot name=”title”>，中間夾的內容會填入 $title (這個地方 title 也是一個 slot)

<x-alert>
    <x-slot name="title">
        Server Error
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

slot 可以看成是一個比較快，不需要 component class，又可以將資料傳到 component 的機制。

Anonymous Component

anonymous component 不需要 component class，在 resources/views/components 新增一支 view template 檔案，調用端就可使用了 <x-your-component/>

resources/views/components 可以有檔案結構，調用端檔案上下層以 dot (.) 分隔，例如 <x-forms.input/>，這些都跟 class based component 相同。

因為沒有 component class，還是要有一個機制可以傳入指定變數。anonymous component 使用 @props directive，其中並可指定變數的預設值，例如下面 type 的預設值是 “info”

@props(['type' => 'info', 'message'])

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

使用 Component 做版面 layout

Laravel 演進到現在 (Laravel 8)，其實是鼓勵開發者用 component 做版面 layout，而不是用傳統的 @extends, @yield, @section 等。

用 component 做版面 layout，主要是上面提到的 slot 機制。例如 resources/views/components/layout.blade.php

<html>
    <head>
        <title>{{ $title ?? 'Todo Manager' }}</title>
    </head>
    <body>
        <h1>Todos</h1>
        <hr/>
        {{ $slot }}
    </body>
</html>

child view：resources/views/tasks.blade.php。其中 <x-layout> 中整段會填到 $slot，也注意到 title slot 的寫法，可以傳入 $title 變數。

<x-layout>
    <x-slot name="title">
        Custom Title
    </x-slot>

    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

相較於傳統的 @extends, @yield, @section 佈局方式

• child view 的角色是 component 的調用端
• master view 的角色是 component 本身

如果對 design pattern 有了解的讀者，傳統的佈局方式跟 component based 的佈局方式，是類似的 design pattern，所以使用上邏輯是很像的。

也可以參考我 Design Pattern 系列的文章

結論

本文主要是希望能勾勒出 Laravel 8 component 的使用，與使用 component 做版面 layout 的方式。沒有談太多細節、或變化型的使用，很多細節的部分應該是由開發者自行斟酌使用。Laravel 前端目前看起來是往 component based 的方向在走，習慣於 @extends, @yield, @section 佈局方式的開發者，可以考慮使用 component。