前端

簡介
使用 PHP
使用 React 或 Vue
- Inertia
- 入門套件
打包資源

簡介

Laravel 是一個後端框架，提供了構建現代 Web 應用程式所需的所有功能，例如路由、驗證、快取、佇列、檔案儲存等等。然而，我們認為為開發人員提供美好的全端體驗非常重要，包括用於構建應用程式前端的強大方法。

使用 Laravel 構建應用程式時，有兩種主要方法來處理前端開發，您選擇哪種方法取決於您是否希望通過利用 PHP 或使用 JavaScript 框架（如 Vue 和 React）來構建前端。我們將在下面討論這兩種選項，以便您可以就應用程式前端開發的最佳方法做出明智的決定。

使用 PHP

PHP 和 Blade

過去，大多數 PHP 應用程式都使用簡單的 HTML 模板（其中散佈著 PHP echo 語句）向瀏覽器呈現 HTML，這些語句呈現在請求期間從資料庫檢索的資料

1<div>
2    <?php foreach ($users as $user): ?>
3        Hello, <?php echo $user->name; ?> <br />
4    <?php endforeach; ?>
5</div>

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

在 Laravel 中，仍然可以使用視圖和Blade來實現這種呈現 HTML 的方法。Blade 是一種極輕量級的模板語言，它提供了方便、簡短的語法來顯示資料、迭代資料等等

1<div>
2    @foreach ($users as $user)
3        Hello, {{ $user->name }} <br />
4    @endforeach
5</div>

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

以這種方式構建應用程式時，表單提交和其他頁面互動通常會從伺服器接收全新的 HTML 文件，並且整個頁面由瀏覽器重新呈現。即使在今天，許多應用程式可能仍然非常適合以這種方式使用簡單的 Blade 模板構建其前端。

日益增長的期望

然而，隨著使用者對 Web 應用程式的期望不斷提高，許多開發人員發現需要構建更動態的前端，並具有更精緻的互動。鑑於此，一些開發人員選擇開始使用 JavaScript 框架（如 Vue 和 React）來構建應用程式的前端。

其他開發人員更喜歡堅持他們熟悉的後端語言，他們開發了解決方案，允許構建現代 Web 應用程式 UI，同時仍然主要使用他們選擇的後端語言。例如，在 Rails 生態系統中，這促使了 Turbo Hotwire 和 Stimulus 等程式庫的創建。

在 Laravel 生態系統中，主要通過使用 PHP 創建現代、動態前端的需求促使了 Laravel Livewire 和 Alpine.js 的創建。

Livewire

Laravel Livewire 是一個用於構建 Laravel 驅動的前端的框架，這些前端感覺動態、現代且充滿活力，就像使用現代 JavaScript 框架（如 Vue 和 React）構建的前端一樣。

使用 Livewire 時，您將創建 Livewire「組件」，這些組件呈現 UI 的離散部分，並公開可以從應用程式前端調用和互動的方法和資料。例如，一個簡單的「計數器」組件可能如下所示

 1<?php
 2 
 3namespace App\Http\Livewire;
 4 
 5use Livewire\Component;
 6 
 7class Counter extends Component
 8{
 9    public $count = 0;
10 
11    public function increment()
12    {
13        $this->count++;
14    }
15 
16    public function render()
17    {
18        return view('livewire.counter');
19    }
20}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

並且，計數器的相應模板將像這樣編寫

1<div>
2    <button wire:click="increment">+</button>
3    <h1>{{ $count }}</h1>
4</div>

<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

如您所見，Livewire 使您能夠編寫新的 HTML 屬性（例如 wire:click），將 Laravel 應用程式的前端和後端連接起來。此外，您可以使用簡單的 Blade 表達式呈現組件的當前狀態。

對於許多人來說，Livewire 徹底改變了使用 Laravel 進行前端開發的方式，使他們能夠在 Laravel 的舒適環境中構建現代、動態的 Web 應用程式。通常，使用 Livewire 的開發人員還會利用 Alpine.js 在前端「點綴」JavaScript，僅在需要的地方使用，例如為了呈現對話視窗。

如果您是 Laravel 的新手，我們建議您熟悉視圖和Blade的基本用法。然後，查閱官方 Laravel Livewire 文件，了解如何使用互動式 Livewire 組件將您的應用程式提升到新的水平。

入門套件

如果您想使用 PHP 和 Livewire 構建前端，您可以利用我們的Livewire 入門套件來快速開始應用程式的開發。

使用 React 或 Vue

儘管可以使用 Laravel 和 Livewire 構建現代前端，但許多開發人員仍然更喜歡利用 JavaScript 框架（如 React 或 Vue）的強大功能。這使開發人員可以利用通過 NPM 獲得的豐富 JavaScript 套件和工具生態系統。

然而，如果沒有額外的工具，將 Laravel 與 React 或 Vue 配對會使我們需要解決各種複雜的問題，例如客戶端路由、資料 hydration 和身份驗證。客戶端路由通常通過使用有主見的 React / Vue 框架（如 Next 和 Nuxt）來簡化；但是，當將 Laravel 等後端框架與這些前端框架配對時，資料 hydration 和身份驗證仍然是複雜且繁瑣的問題。

此外，開發人員還需要維護兩個獨立的程式碼儲存庫，通常需要協調跨兩個儲存庫的維護、發行和部署。雖然這些問題並非無法克服，但我們認為這不是一種高效或令人愉悅的應用程式開發方式。

值得慶幸的是，Laravel 提供了兩全其美的解決方案。 Inertia 彌合了您的 Laravel 應用程式和現代 React 或 Vue 前端之間的差距，讓您可以使用 React 或 Vue 構建功能完善的現代前端，同時利用 Laravel 路由和控制器進行路由、資料 hydration 和身份驗證——所有這些都在單個程式碼儲存庫中。通過這種方法，您可以享受 Laravel 和 React / Vue 的全部功能，而不會削弱任何一個工具的功能。

將 Inertia 安裝到 Laravel 應用程式後，您將像往常一樣編寫路由和控制器。但是，您將從控制器返回 Inertia 頁面，而不是從控制器返回 Blade 模板

 1<?php
 2 
 3namespace App\Http\Controllers;
 4 
 5use App\Http\Controllers\Controller;
 6use App\Models\User;
 7use Inertia\Inertia;
 8use Inertia\Response;
 9 
10class UserController extends Controller
11{
12    /**
13     * Show the profile for a given user.
14     */
15    public function show(string $id): Response
16    {
17        return Inertia::render('users/show', [
18            'user' => User::findOrFail($id)
19        ]);
20    }
21}

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * Show the profile for a given user.
     */
    public function show(string $id): Response
    {
        return Inertia::render('users/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Inertia 頁面對應於 React 或 Vue 組件，通常儲存在應用程式的 resources/js/pages 目錄中。通過 Inertia::render 方法傳遞給頁面的資料將用於 hydration 頁面組件的「props」

 1import Layout from '@/layouts/authenticated';
 2import { Head } from '@inertiajs/react';
 3 
 4export default function Show({ user }) {
 5    return (
 6        <Layout>
 7            <Head title="Welcome" />
 8            <h1>Welcome</h1>
 9            <p>Hello {user.name}, welcome to Inertia.</p>
10        </Layout>
11    )
12}

import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';

export default function Show({ user }) {
    return (
        <Layout>
            <Head title="Welcome" />
            <h1>Welcome</h1>
            <p>Hello {user.name}, welcome to Inertia.</p>
        </Layout>
    )
}

如您所見，Inertia 允許您在構建前端時利用 React 或 Vue 的全部功能，同時在 Laravel 驅動的後端和 JavaScript 驅動的前端之間提供輕量級橋樑。

伺服器端渲染

如果您擔心深入研究 Inertia，因為您的應用程式需要伺服器端渲染，請別擔心。 Inertia 提供伺服器端渲染支持。並且，當通過 Laravel Cloud 或 Laravel Forge 部署應用程式時，可以輕鬆確保 Inertia 的伺服器端渲染過程始終在運行。

入門套件

如果您想使用 Inertia 和 Vue / React 構建前端，您可以利用我們的 React 或 Vue 應用程式入門套件來快速開始應用程式的開發。這兩個入門套件都使用 Inertia、Vue / React、Tailwind 和 Vite 搭建應用程式的後端和前端身份驗證流程，以便您可以開始構建您的下一個偉大構想。

打包資源

無論您選擇使用 Blade 和 Livewire 還是 Vue / React 和 Inertia 開發前端，您都可能需要將應用程式的 CSS 打包到生產就緒的資源中。當然，如果您選擇使用 Vue 或 React 構建應用程式的前端，您還需要將組件打包到瀏覽器就緒的 JavaScript 資源中。

默認情況下，Laravel 使用 Vite 來打包您的資源。 Vite 在本地開發期間提供閃電般的構建速度和近乎即時的熱模組替換 (HMR)。在所有新的 Laravel 應用程式中，包括那些使用我們入門套件的應用程式，您都會找到一個 vite.config.js 文件，該文件加載我們輕量級的 Laravel Vite 插件，使 Vite 在 Laravel 應用程式中使用起來非常愉快。

開始使用 Laravel 和 Vite 的最快方法是使用我們的應用程式入門套件開始應用程式的開發，這些套件通過提供前端和後端身份驗證 scaffolding 來快速啟動您的應用程式。

有關將 Vite 與 Laravel 結合使用的更詳細文件，請參閱我們關於打包和編譯資源的專門文件。

序言

開始使用

架構概念

基礎

深入探討

安全性

資料庫

Eloquent ORM

測試

套件

前端

簡介

使用 PHP

PHP 和 Blade

日益增長的期望

Livewire

入門套件

使用 React 或 Vue

Inertia

伺服器端渲染

入門套件

打包資源

產品

套件

資源