跳至內容
Laravel

前端

簡介

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

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

使用 PHP

PHP 和 Blade

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

<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 模板以這種方式建構其前端。

不斷增長的期望

然而，隨著使用者對 Web 應用程式的期望日益成熟，許多開發人員發現需要建構更具動態性、互動感更強的前端。鑑於此，一些開發人員選擇開始使用 Vue 和 React 等 JavaScript 框架來建構應用程式的前端。

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

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

Livewire

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

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

<?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 的前端開發，使他們能夠在建構現代動態 Web 應用程式的同時，保持在 Laravel 的舒適環境中。通常，使用 Livewire 的開發人員也會利用 Alpine.js 僅在需要時才將 JavaScript「灑」到他們的前端，例如為了呈現對話方塊。

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

入門套件

如果您想使用 PHP 和 Livewire 建構前端，您可以利用我們的 Breeze 或 Jetstream 入門套件來快速啟動應用程式的開發。這兩個入門套件都使用 Blade 和 Tailwind 來搭建應用程式的後端和前端身分驗證流程，以便您可以簡單地開始建構您的下一個偉大想法。

使用 Vue / React

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

但是，如果沒有其他工具，將 Laravel 與 Vue 或 React 配對將使我們需要解決各種複雜的問題，例如客戶端路由、資料水合和身分驗證。客戶端路由通常會透過使用諸如 Nuxt 和 Next 等固定的 Vue/React 框架來簡化；但是，當將 Laravel 等後端框架與這些前端框架配對時，資料水合和身分驗證仍然是複雜且繁瑣的問題需要解決。

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

Inertia

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

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

<?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/Profile', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Inertia 頁面會對應到一個 Vue 或 React 元件，通常儲存在您應用程式的 resources/js/Pages 目錄中。透過 Inertia::render 方法傳遞給頁面的資料，將會用來初始化頁面元件的「props」。

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/vue3';
 
const props = defineProps(['user']);
</script>
 
<template>
    <Head title="User Profile" />
 
    <Layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Profile
            </h2>
        </template>
 
        <div class="py-12">
            Hello, {{ user.name }}
        </div>
    </Layout>
</template>

如您所見，Inertia 讓您在建構前端時，能充分利用 Vue 或 React 的強大功能，同時在您的 Laravel 後端和 JavaScript 前端之間提供一個輕量級的橋樑。

伺服器端渲染

如果您因為應用程式需要伺服器端渲染而擔心深入使用 Inertia，請別擔心。Inertia 提供 伺服器端渲染支援。而且，當您透過 Laravel Forge 部署應用程式時，可以輕鬆確保 Inertia 的伺服器端渲染程序始終在執行。

入門套件

如果您想使用 Inertia 和 Vue / React 建構前端，可以利用我們的 Breeze 或 Jetstream 入門套件，以快速啟動您的應用程式開發。這兩個入門套件都使用 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 最快的方式是使用 Laravel Breeze 開始您的應用程式開發，這是我們最簡單的入門套件，它透過提供前端和後端驗證的搭建來快速啟動您的應用程式。

lightbulb

有關在 Laravel 中使用 Vite 的更詳細說明文件，請參閱我們關於打包和編譯資源的專屬文件。