前端

由学院君创建于1年前, 最后更新于 1年前版本号 #1 3764 views 0 likes 0 collects

介绍

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，并开发出了解决方案，以在主要利用他们选择的后端语言的情况下构建现代的 Web 应用程序界面。例如，在 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 的前端开发方式，使他们能够在 Laravel 的舒适环境中构建现代、动态的 Web 应用程序。通常，使用 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 方法传递给页面的数据将用于预取页面组件的 "props"：

<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 提供了一种轻量级的桥接方式，连接了您的后端和前端。

服务器端渲染

如果您因为应用程序需要服务器端渲染而对 Inertia 感到担忧，不用担心。Inertia 提供了服务器端渲染支持。并且，当通过 Laravel Forge 部署应用程序时，轻松确保 Inertia 的服务器端渲染进程始终在运行。

入门套件

如果你想使用 Blade 和 Livewire 来构建你的前端，你可以使用我们的 Breeze 或 Jetstream 入门套件来启动你的应用程序开发。这两个入门套件使用 Blade 和 Tailwind 来构建应用程序的后端和前端身份验证流程，以便你可以简单地开始构建你的下一个大想法。

如果你想使用 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，它是我们最简单的入门套件，通过提供前端和后端身份验证的脚手架来启动你的应用程序。