跳至内容
Laravel

前端

简介

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

使用 Laravel 构建应用程序时，有两种主要方法可以解决前端开发，选择哪种方法取决于你是否希望通过利用 PHP 来构建前端，或者使用 Vue 和 React 等 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 应用程序期望的不断提高，许多开发人员发现需要构建更具动态性的前端，并且其交互感觉更加完善。鉴于此，一些开发人员选择使用 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，建议你先熟悉 视图 和 Blade 的基本用法。然后，查阅官方 Laravel Livewire 文档，了解如何使用交互式的 Livewire 组件将应用程序提升到新的水平。

入门套件

如果你希望使用 PHP 和 Livewire 来构建前端，可以使用我们的 Breeze 或 Jetstream 入门套件 来快速启动应用程序的开发。这两个入门套件都使用 Blade 和 Tailwind 为应用程序的后端和前端身份验证流程提供脚手架，以便你只需开始构建你的下一个大创意即可。

使用 Vue / React

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

但是，如果没有额外的工具，将 Laravel 与 Vue 或 React 配合使用会导致我们需要解决各种复杂的问题，例如客户端路由、数据水合和身份验证。客户端路由通常通过使用诸如 Nuxt 和 Next 等有见地的 Vue / React 框架来简化；但是，当将 Laravel 等后端框架与这些前端框架结合使用时，数据水合和身份验证仍然是难以解决的复杂问题。

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

Inertia

值得庆幸的是，Laravel 提供了二者的最佳结合。 Inertia 弥合了 Laravel 应用程序和现代 Vue 或 React 前端之间的差距，使你能够使用 Vue 或 React 构建功能齐全的现代前端，同时利用 Laravel 路由和控制器来进行路由、数据水合和身份验证 - 所有这些都在同一个代码库中。使用这种方法，你可以尽情享受 Laravel 和 Vue / React 的全部功能，而不会削弱任何工具的功能。

在将 Inertia 安装到 Laravel 应用程序后，你将像往常一样编写路由和控制器。但是，你将返回一个 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/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，请放心。Inertia 提供了 服务器端渲染支持。并且，当通过 Laravel Forge 部署应用程序时，确保 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 Breeze，我们的最简单入门套件，它通过提供前端和后端身份验证脚手架来启动您的应用程序。

lightbulb

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