前端

简介

Laravel 是一个后端框架，它提供了构建现代 Web 应用程序所需的所有功能，例如路由、验证、缓存、队列、文件存储等。但是，我们认为为开发者提供一个美观的全栈体验非常重要，包括构建应用程序前端的强大方法。

使用 Laravel 构建应用程序时，有两种主要的前端开发方法，您选择哪种方法取决于您是希望通过利用 PHP 构建前端，还是使用 Vue 和 React 等 JavaScript 框架。我们将在下面讨论这两种选择，以便您可以就最适合您的应用程序的前端开发方法做出明智的决定。

使用 PHP

PHP 和 Blade

过去，大多数 PHP 应用程序使用简单的 HTML 模板向浏览器渲染 HTML，这些模板中散布着 PHP echo 语句，用于渲染在请求期间从数据库中检索到的数据：

<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 应用程序的期望越来越高，许多开发者发现需要构建更具动态性的前端，其交互感觉更流畅。鉴于此，一些开发者选择开始使用 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 的独立部分，并公开可以从应用前端调用和交互的方法与数据。例如，一个简单的 “计数器（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 让你可以使用诸如 wire:click 之类的新 HTML 属性，将 Laravel 应用的前端与后端连接起来。此外，你还可以使用简单的 Blade 表达式来渲染组件的当前状态。

对于许多人来说，Livewire 革新了 Laravel 的前端开发，使他们能够在熟悉的 Laravel 环境中构建现代、动态的 Web 应用。通常，使用 Livewire 的开发者还会结合 Alpine.js，仅在必要的地方为前端 “点缀” 少量 JavaScript，例如用于渲染对话框窗口。

如果你是 Laravel 新手，建议先熟悉视图和 Blade 的基本使用方法，然后查阅官方 Laravel Livewire 文档，学习如何通过交互式的 Livewire 组件将你的应用提升到新的水平。

入门套件

如果您希望使用 PHP 和 Livewire 构建前端，您可以使用我们的 Livewire 入门套件，加速你的应用开发。

使用 React 或 Vue

尽管可以使用 Laravel 和 Livewire 构建现代前端，但许多开发者仍然喜欢利用 React 或 Vue 等 JavaScript 框架的强大功能。这使开发者可以利用通过 NPM 获得的丰富的 JavaScript 包和工具生态系统。

然而，如果没有额外的工具，仅将 Laravel 与 React 或 Vue 搭配使用，会让我们面临一系列复杂问题，例如客户端路由、数据水合（data hydration）以及身份验证。客户端路由通常可以通过使用具有明确约定的 React/Vue 框架（如 Next 和 Nuxt）来简化；然而，当将后端框架 Laravel 与这些前端框架配合时，数据水合和身份验证仍然是复杂且繁琐的问题。

此外，开发者还需要维护两个独立的代码仓库，经常需要在两个仓库之间协调维护、发布和部署。虽然这些问题并非不可克服，但我们认为，这并不是一种高效或愉快的应用开发方式。

幸运的是，Laravel 提供了两全其美的解决方案。Inertia 桥接了 Laravel 应用与现代 React 或 Vue 前端之间的鸿沟，使你能够使用 React 或 Vue 构建完整、现代的前端，同时利用 Laravel 的路由和控制器处理路由、数据水合以及身份验证——而且这一切都在同一个代码仓库中完成。通过这种方式，你可以充分发挥 Laravel 与 React/Vue 的全部能力，而不会削弱任何一方的功能。

在将 Inertia 安装到你的 Laravel 应用后，你可以像平常一样编写路由和控制器。然而，与其从控制器返回 Blade 模板，你将返回一个 Inertia 页面：

<?php
 
namespace App\Http\Controllers;
 
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;
 
class UserController extends Controller
{
    /**
     * 显示给定用户的个人资料。
     */
    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 的最快方式，是通过我们的应用入门模板启动开发，这些模板为你的应用提供了前端和后端的认证脚手架，从而快速启动项目开发。

有关使用 Laravel 和 Vite 的更详细文档，请参阅我们关于捆绑和编译您的资产的专门文档。

目录结构

入门套件

前端

简介

使用 PHP

PHP 和 Blade

不断增长的期望

Livewire

入门套件

使用 React 或 Vue

Inertia

服务器端渲染

入门套件

捆绑资产