前端-Laravel 文档-果果开发

简介

Laravel 是一个后端框架，提供了构建现代 Web 应用程序所需的所有功能，例如路由、验证、缓存、队列、文件存储等。不过，我们认为为开发者提供出色的全栈开发体验至关重要，这其中应包含用于构建应用程序前端的强大方法。

在使用 Laravel 构建应用程序时，处理前端开发主要有两种方式，选择哪种方式取决于你希望借助 PHP 来构建前端，还是使用诸如 React、Svelte 和 Vue 之类的 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 中，可通过视图和Blade来实现这种渲染 HTML 的方式。Blade 是一种极为轻量级的模板语言，提供了便于显示数据、遍历数据等操作的简洁语法：

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

以这种方式构建应用程序时，表单提交以及其他页面交互通常会从服务器接收一个全新的 HTML 文档，随后浏览器会对整个页面进行重新渲染。即便在当下，许多应用程序依然非常适合采用这种借助简单 Blade 模板构建前端的方式。

日益提升的期望

然而，随着用户对 Web 应用程序的期望愈发成熟，许多开发者发现有必要构建更具动态性、交互体验更精良的前端。鉴于此，一些开发者选择使用诸如 React、Svelte 和 Vue 之类的 JavaScript 框架来着手构建应用程序的前端。

另一些开发者则倾向于继续使用自己熟悉的后端语言，并开发出了相应的解决方案，使得在主要运用所选后端语言的同时，还能构建出现代 Web 应用程序的用户界面。例如，在 Rails 生态系统中，这种需求催生了诸如 Turbo、Hotwire 以及 Stimulus 之类的库。

在 Laravel 生态系统中，这种主要借助 PHP 构建现代、动态前端的需求，促成了 Laravel Livewire 和 Alpine.js 的诞生。

Livewire

Laravel Livewire 是一个用于构建基于 Laravel 驱动的前端的框架，其呈现出的效果就像使用 React、Svelte 和 Vue 这类现代 JavaScript 框架构建的前端一样，具备动态性、现代感且充满活力。

使用 Livewire 时，你需要创建 Livewire “组件”，这些组件负责渲染用户界面的独立部分，并且暴露出一些方法与数据，可供应用程序前端调用并进行交互。例如，一个简单的“计数器”组件可能如下所示：

<?php

use Livewire\Component;

new class extends Component
{
    public $count = 0;

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

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

正如你所见，Livewire 使你能够编写诸如 wire:click 这类新的 HTML 属性，用于连接 Laravel 应用程序的前端与后端。此外，还能借助简单的 Blade 表达式来渲染组件的当前状态。

对于许多人而言，Livewire 革新了基于 Laravel 的前端开发方式，让他们在构建现代、动态的 Web 应用程序时，依旧可以留在熟悉的 Laravel 环境中。通常，使用 Livewire 的开发者还会运用 Alpine.js，仅在必要之处为前端“添加” JavaScript，比如为了渲染一个对话框窗口。

如果你刚接触 Laravel，建议先熟悉视图和Blade的基本用法。随后，查阅官方的 Laravel Livewire 文档，了解如何借助交互式的 Livewire 组件让应用程序更上一层楼。

入门套件

如果你想借助 PHP 和 Livewire 来构建前端，那么可以利用我们的 Livewire 入门套件，快速启动应用程序的开发工作。

使用 React、Svelte 或 Vue

尽管借助 Laravel 和 Livewire 可以构建现代前端，但许多开发者依旧更倾向于利用像 React、Svelte 或 Vue 这类 JavaScript 框架的强大功能。如此，开发者便能充分利用通过 NPM 可获取的丰富 JavaScript 包和工具生态系统。

然而，若没有额外的工具，将 Laravel 与 React、Svelte 或 Vue 搭配使用，我们便需要解决一系列复杂的问题，例如客户端路由、数据注水以及身份验证。借助诸如 Next 和 Nuxt 这类具有自身设计思路的 React / Svelte / Vue 框架，客户端路由往往能得到简化；不过，当将 Laravel 这类后端框架与这些前端框架搭配使用时，数据注水和身份验证依旧是棘手且繁琐的问题。

此外，开发者还得维护两个独立的代码仓库，常常需要协调两个仓库的维护、发布以及部署工作。虽然这些问题并非无法解决，但我们认为这并非高效且令人愉悦的应用开发方式。

Inertia

好在，Laravel 能兼顾两者的优势。Inertia 弥合了 Laravel 应用程序与现代 React、Svelte 或 Vue 前端之间的鸿沟，使你既能借助 React、Svelte 或 Vue 构建功能完备的现代前端，又能利用 Laravel 的路由和控制器来完成路由、数据注水以及身份验证，且所有这些操作都在单一代码仓库内进行。采用这种方式，你既能尽享 Laravel 的全部威力，又能发挥 React / Svelte / Vue 的完整功能，且不会削弱任一工具的能力。

将 Inertia 安装到 Laravel 应用程序后，你可以像平常一样编写路由和控制器。只不过，在控制器中不再返回 Blade 模板，而是返回一个 Inertia 页面：

<?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、Svelte 或 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、Svelte 或 Vue 的全部威力，同时在基于 Laravel 的后端和基于 JavaScript 的前端之间搭建起一座轻量级的桥梁。

服务端渲染

如果你因应用程序需要进行服务端渲染，而对引入 Inertia 有所顾虑，不必担心。Inertia 提供了服务端渲染支持。并且，当通过 Laravel Cloud 或 Laravel Forge 部署应用程序时，确保 Inertia 的服务端渲染进程持续运行是件轻而易举的事。

入门套件

如果你想使用 Inertia 以及 React / Svelte / Vue 构建前端，可以利用我们的 React、Svelte 或 Vue 应用程序启动套件来快速启动应用程序的开发。所有这些启动套件都会基于 Inertia、React / Svelte / Vue、Tailwind 和 Vite 来搭建应用程序的后端以及前端身份验证流程，让你可以着手打造下一个伟大的构想。

打包资源

无论你选择使用 Blade 和 Livewire，还是 React / Svelte / Vue 与 Inertia 来开发前端，很可能都需要将应用程序的 CSS 打包成可投入生产环境的资源。当然，如果你选择使用 React、Svelte 或 Vue 构建应用程序的前端，还需要将组件打包成可供浏览器使用的 JavaScript 资源。

默认情况下，Laravel 使用 Vite 来打包资源。Vite 提供了极快的构建速度，并且在本地开发过程中可以实现近乎瞬时的热模块替换（HMR）。在所有全新的 Laravel 应用程序中，包括使用我们启动套件的应用程序，你都能找到 vite.config.js 文件，该文件加载了我们轻量级的 Laravel Vite 插件，让 Vite 在 Laravel 应用程序中的使用体验变得十分愉悦。

开始使用 Laravel 和 Vite 的最快方式，是利用我们的应用程序启动套件来启动应用程序的开发，该套件通过提供前端与后端身份验证的脚手架，助力你快速推进应用程序的开发。

若想获取关于在 Laravel 中使用 Vite 的更详细文档，请参阅我们的关于打包和编译资源的专门文档。