前端

9.x

9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1

前端

介绍
使用 PHP
使用 Vue / React
- Inertia
- 入门套件
捆绑资产

介绍

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

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

使用 PHP

PHP 和Blade

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

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

在 Laravel 中，这种渲染 HTML 的方法仍然可以使用视图和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 新手，我们建议您熟悉视图和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 等后端框架与这些前端框架配对时，数据水合和身份验证仍然是需要解决的复杂而繁琐的问题。

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

值得庆幸的是，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;

class UserController extends Controller
{
/**
 * Show the profile for a given user.
 *
 * @param  int  $id
 * @return \Inertia\Response
 */
public function show($id)
{
    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，请不要担心。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开始您的应用程序开发，这是我们最简单的入门工具包，它通过提供前端和后端身份验证脚手架来启动您的应用程序。

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

前端 9.x 9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1

前端

服务器端渲染

前端

9.x

9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1