laravelphp 中文文档      >

简介

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

在使用 Laravel 构建应用程序时，有两种主要的前端开发方式，选择哪种方式取决于你是想利用 PHP 构建前端，还是使用 Vue 和 React 等 JavaScript 框架。我们将在下面讨论这两种选择，以便你能够做出关于应用程序前端开发的最佳决策。

使用 PHP

PHP 和 Blade

过去，大多数 PHP 应用程序使用简单的 HTML 模板与 PHP php echo 语句混合，来呈现从数据库中检索到的数据的：

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

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

  1. <div>
  2.     @foreach ($users as $user)
  3.         Hello, {{ $user->name }} <br />
  4.     @endforeach
  5. </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 “组件”，这些组件渲染用户界面的一个独立部分，并暴露可以从应用程序前端调用和交互的方法和数据。例如，一个简单的“计数器”组件可能如下所示：

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

对应的计数器模板可以这样写：

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

正如你所看到的，Livewire 允许你编写诸如 php wire:click 这样的新 HTML 属性，将 Laravel 应用程序的前端和后端连接起来。此外，你可以使用简单的 Blade 表达式渲染组件的当前状态。

对于许多人来说，Livewire 革新了 Laravel 的前端开发，使他们能够在熟悉的 Laravel 环境中构建现代、动态的 Web 应用程序。通常，使用 Livewire 的开发者也会使用 Alpine.js 来“点缀”他们的前端，只在需要的地方添加 JavaScript，比如渲染一个对话框。

如果你是 Laravel 新手，我们建议你先熟悉 视图 和 Blade 的基本用法。然后，查阅官方的 Laravel Livewire 文档 来学习如何使用交互式的 Livewire 组件将你的应用提升到一个新的水平。

Starter Kits

如果你希望使用 PHP 和 Livewire 构建前端，可以利用我们的 Breeze 或 Jetstream starter kits 来快速启动你的应用开发。这些 starter kits 使用 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 应用程序后，你可以像往常一样编写路由和控制器。然而，从控制器返回的不是 Blade 模板，而是 Inertia 页面：

  1. <?php
  3. namespace App\Http\Controllers;
  5. use App\Http\Controllers\Controller;
  6. use App\Models\User;
  7. use Inertia\Inertia;
  8. use Inertia\Response;
  10. class UserController extends Controller
  11. {
  12.     /**
  13.      * 显示给定用户的个人资料。
  14.      */
  15.     public function show(string $id): Response
  16.     {
  17.         return Inertia::render('Users/Profile', [
  18.             'user' => User::findOrFail($id)
  19.         ]);
  20.     }
  21. }

Inertia 页面对应于一个 Vue 或 React 组件，通常存储在应用程序的 php resources/js/Pages 目录中。通过 php Inertia::render 方法传递给页面的数据将用于初始化页面组件的 “props”：

  1. <script setup>
  2. import Layout from '@/Layouts/Authenticated.vue';
  3. import { Head } from '@inertiajs/vue3';
  5. const props = defineProps(['user']);
  6. </script>
  8. <template>
  9.     <Head title="User Profile" />
  11.     <Layout>
  12.         <template #header>
  13.             <h2 class="font-semibold text-xl text-gray-800 leading-tight">
  14.                 Profile
  15.             </h2>
  16.         </template>
  18.         <div class="py-12">
  19.             Hello, {{ user.name }}
  20.         </div>
  21.     </Layout>
  22. </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 应用程序中，包括使用我们的 入门套件 的应用程序，你会找到一个 php vite.config.js 文件，该文件加载了我们的轻量级 Laravel Vite 插件，使得在 Laravel 应用程序中使用 Vite 变得非常轻松。

如果你想快速开始使用 Laravel 和 Vite，请从 Laravel Breeze 开始，这是我们最简单的 starter kit，提供了前端和后端认证的基本结构。


注意
想要了解更详细关于在 Laravel 中使用 Vite 的文档，请参阅我们的 专用文档。