前端 (Frontend)

簡介 (Introduction)

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

在使用 Laravel 構建應用程式時，主要有兩種方法來處理前端開發，您選擇哪種方法取決於您是想利用 PHP 構建前端，還是使用 Vue 和 React 等 JavaScript 框架。我們將在下面討論這兩個選項，以便您能夠就應用程式的最佳前端開發方法做出明智的決定。

使用 PHP (Using Php)

PHP 與 Blade (Php And Blade)

過去，大多數 PHP 應用程式使用簡單的 HTML 模板向瀏覽器渲染 HTML，其中穿插著 PHP echo 語句，用於渲染在請求期間從資料庫檢索的資料：

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

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

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

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

日益增長的期望 (Growing Expectations)

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

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

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

Livewire

Laravel Livewire 是一個用於構建 Laravel 驅動的前端的框架，這些前端感覺動態、現代且生動，就像使用 Vue 和 React 等現代 JavaScript 框架構建的前端一樣。

使用 Livewire 時，您將建立 Livewire「元件」，這些元件渲染 UI 的獨立部分，並公開可以從應用程式前端呼叫和互動的方法和資料。例如，一個簡單的「Counter」元件可能如下所示：

<?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');
    }
}

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

<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 Starter Kits)

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

使用 React 或 Vue (Using React Or Vue)

雖然可以使用 Laravel 和 Livewire 構建現代前端，但許多開發人員仍然更喜歡利用 React 或 Vue 等 JavaScript 框架的強大功能。這使開發人員能夠利用透過 NPM 提供的豐富 JavaScript 套件和工具生態系統。

然而，如果沒有額外的工具，將 Laravel 與 React 或 Vue 配對將使我們需要解決各種複雜的問題，例如客戶端路由、資料水合 (Data Hydration) 和驗證。使用諸如 Next 和 Nuxt 之類的固執己見的 React / Vue 框架通常可以簡化客戶端路由；然而，當將像 Laravel 這樣的後端框架與這些前端框架配對時，資料水合和驗證仍然是需要解決的複雜而繁瑣的問題。

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

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

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

<?php

namespace App\Http\Controllers;

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 方法傳遞給頁面的資料將用於水合頁面元件的「props」：

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 驅動的前端之間提供輕量級的橋樑。

開始使用 Laravel 和 Vite 的最快方法是使用我們的應用程式啟動套件開始您的應用程式開發，該套件透過提供前端和後端驗證鷹架來快速啟動您的應用程式。

[!NOTE] 有關將 Vite 與 Laravel 配合使用的更多詳細文件，請參閱我們關於打包和編譯資產的專用文件。

前端 (Frontend)

簡介 (Introduction)

使用 PHP (Using Php)

PHP 與 Blade (Php And Blade)

日益增長的期望 (Growing Expectations)

Livewire

啟動套件 (Php Starter Kits)

使用 React 或 Vue (Using React Or Vue)

Inertia

伺服器端渲染

啟動套件 (Inertia Starter Kits)

資產打包 (Bundling Assets)

On this page