前端

介绍
使用 PHP
使用 React 或 Vue
- Inertia
- 入门套件
打包资源

介绍

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

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

使用 PHP

PHP 和 Blade

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

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

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

在 Laravel 中，仍然可以使用视图和Blade 实现这种渲染 HTML 的方法。Blade 是一种非常轻量级的模板语言，它提供了方便、简洁的语法来显示数据、迭代数据等等

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

<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 的离散部分，并公开可以从应用程序前端调用和交互的方法和数据。例如，一个简单的“计数器”组件可能如下所示

 1<?php
 2 
 3namespace App\Http\Livewire;
 4 
 5use Livewire\Component;
 6 
 7class Counter extends Component
 8{
 9    public $count = 0;
10 
11    public function increment()
12    {
13        $this->count++;
14    }
15 
16    public function render()
17    {
18        return view('livewire.counter');
19    }
20}

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

并且，计数器的相应模板将这样编写

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

<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 和 Livewire 构建前端，您可以利用我们的Livewire 入门套件来快速启动您的应用程序开发。

使用 React 或 Vue

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

然而，如果没有额外的工具，将 Laravel 与 React 或 Vue 配对会让我们需要解决各种复杂的问题，例如客户端路由、数据注水和身份验证。客户端路由通常可以通过使用有主见的 React / Vue 框架（如 Next 和 Nuxt）来简化；但是，当将 Laravel 这样的后端框架与这些前端框架配对时，数据注水和身份验证仍然是复杂且繁琐的问题。

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

幸运的是，Laravel 提供了两全其美的方案。Inertia 弥合了您的 Laravel 应用程序和现代 React 或 Vue 前端之间的差距，使您可以使用 React 或 Vue 构建成熟的现代前端，同时利用 Laravel 路由和控制器进行路由、数据注水和身份验证——所有这些都在一个代码仓库中完成。通过这种方法，您可以享受 Laravel 和 React / Vue 的全部功能，而不会削弱任何一种工具的功能。

在您的 Laravel 应用程序中安装 Inertia 后，您将像往常一样编写路由和控制器。但是，您将返回一个 Inertia 页面，而不是从控制器返回 Blade 模板

 1<?php
 2 
 3namespace App\Http\Controllers;
 4 
 5use App\Http\Controllers\Controller;
 6use App\Models\User;
 7use Inertia\Inertia;
 8use Inertia\Response;
 9 
10class UserController extends Controller
11{
12    /**
13     * Show the profile for a given user.
14     */
15    public function show(string $id): Response
16    {
17        return Inertia::render('users/show', [
18            'user' => User::findOrFail($id)
19        ]);
20    }
21}

<?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”

 1import Layout from '@/layouts/authenticated';
 2import { Head } from '@inertiajs/react';
 3 
 4export default function Show({ user }) {
 5    return (
 6        <Layout>
 7            <Head title="Welcome" />
 8            <h1>Welcome</h1>
 9            <p>Hello {user.name}, welcome to Inertia.</p>
10        </Layout>
11    )
12}

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 最快的方法是使用我们的应用程序入门套件开始您的应用程序开发，该套件通过提供前端和后端身份验证脚手架来快速启动您的应用程序。

有关将 Vite 与 Laravel 结合使用的更详细文档，请参阅我们关于打包和编译您的资源的专门文档。

序言

入门指南

架构概念

基础知识

深入了解

安全

数据库

Eloquent ORM

测试

软件包

前端

介绍

使用 PHP

PHP 和 Blade

不断增长的期望

Livewire

入门套件

使用 React 或 Vue

Inertia

服务端渲染

入门套件

打包资源

产品

软件包

资源