Skip to content

Files

Latest commit

 

History

History
183 lines (128 loc) · 9.98 KB

frontend.md

File metadata and controls

183 lines (128 loc) · 9.98 KB

前端

簡介

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

在使用 Laravel 建立應用程式時，有兩種主要方式來處理前端開發，您可以選擇使用 PHP 或使用 JavaScript 框架如 Vue 和 React 來建立前端。我們將在下面討論這兩種選項，讓您可以就應用程式的前端開發最佳方式做出明智的決定。

使用 PHP

PHP 和 Blade

過去，大多數 PHP 應用程式使用簡單的 HTML 模板與 PHP echo 陳述式將 HTML 渲染到瀏覽器，這些陳述式會渲染在請求期間從資料庫擷取的資料：

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

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

<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 的一個獨立部分，並公開可以從應用程序的前端調用和互動的方法和數據。例如，一個簡單的 "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 的前端開發，使他們能夠在構建現代、動態 Web 應用程序時保持 Laravel 的舒適感。通常，使用 Livewire 的開發人員還將利用 Alpine.js 在前端上僅在需要時 "撒點" JavaScript，例如為了呈現對話框。

如果您是 Laravel 的新手，我們建議您熟悉 視圖 和 Blade 的基本用法。然後，請參考官方的 Laravel Livewire 文件，了解如何通過互動式 Livewire 元件將應用程序提升到下一個水平。

起始套件

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

使用 React 或 Vue

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

然而，如果沒有額外的工具支持，將 Laravel 與 React 或 Vue 搭配使用將需要解決各種複雜的問題，例如客戶端路由、數據注入和身份驗證。通常，使用具有明確意見的 React / Vue 框架（如 Next 和 Nuxt）可以簡化客戶端路由，但數據注入和身份驗證仍然是搭配後端框架像 Laravel 與這些前端框架時需要解決的複雜和繁瑣的問題。

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

Inertia

幸運的是，Laravel 提供了最佳的解決方案。Inertia 橋接了您的 Laravel 應用程序與現代 React 或 Vue 前端之間的差距，使您可以使用 React 或 Vue 構建完整的現代前端，同時利用 Laravel 的路由和控制器進行路由、數據注入和身份驗證 — 一切都在單一程式庫中。通過這種方法，您可以充分發揮 Laravel 和 React / Vue 的功能，而不會削弱任何工具的功能。

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

<?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 方法提供給頁面的數據將用於填充頁面元件的 "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 強大的前端之間提供輕量級的橋樑。

伺服器端渲染

如果您擔心深入研究 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 開始應用程式開發的最快方法是使用 我們的應用程式入門套件，這些套件通過提供前端和後端認證脚手架來快速啟動您的應用程式。

Note

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