Frontend

Introduction

Laravel 是一个后端框架，提供构建现代 Web 应用程序所需的所有功能，例如routing,validation,caching,queues,文件存储， 和更多。但是，我们认为为开发人员提供漂亮的全栈体验非常重要，包括构建应用程序前端的强大方法。

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

使用 PHP

PHP 和刀片

过去，大多数 PHP 应用程序使用散布在 PHP 中的简单 HTML 模板向浏览器呈现 HTMLecho 呈现请求期间从数据库检索的数据的语句：

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

在 Laravel 中，这种呈现 HTML 的方法仍然可以使用views 和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 的新手，我们建议你熟悉 Laravel 的基本用法views 和Blade.然后，咨询官方Laravel Livewire 文档 了解如何使用交互式 Livewire 组件将您的应用程序提升到一个新的水平。

入门套件

如果您想使用 PHP 和 Livewire 构建前端，您可以利用我们的 Breeze 或 Jetstream入门套件 快速启动应用程序的开发。这两个入门工具包都使用脚手架应用程序的后端和前端身份验证流程Blade 和Tailwind 这样您就可以简单地开始构建您的下一个大创意。

使用 Vue/React

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

然而，如果没有额外的工具，将 Laravel 与 Vue 或 React 配对将使我们需要解决各种复杂的问题，例如客户端路由、数据水合和身份验证。客户端路由通常通过使用固执己见的 Vue / React 框架来简化，例如Nuxt 和Next;然而，在将像 Laravel 这样的后端框架与这些前端框架配对时，数据水合和身份验证仍然是复杂而繁琐的问题。

此外，开发人员需要维护两个独立的代码存储库，通常需要协调两个存储库之间的维护、发布和部署。虽然这些问题并非无法克服，但我们认为这不是开发应用程序的高效或愉快的方式。

Inertia

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

在你的 Laravel 应用程序中安装 Inertia 之后，你将像往常一样编写路由和控制器。但是，您将返回一个 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 方法将用于混合页面组件的“道具”：

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-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，请不要担心。惯性报价服务器端渲染支持.并且，通过以下方式部署您的应用程序时Laravel 锻造，确保 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 微风，我们最简单的入门工具包，可通过提供前端和后端身份验证脚手架来快速启动您的应用程序。

Note
有关将 Vite 与 Laravel 结合使用的更多详细文档，请参阅我们的有关捆绑和编译资产的专门文档.

豫ICP备18041297号-2
Please enter a query in order to search.