前端
介绍
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,它是我们最简单的入门套件,通过提供前端和后端身份验证的脚手架来启动你的应用程序。
有关在 Laravel 中使用 Vite 的更详细文档,请参阅我们有关打包和编译你的资源文件的专门文档。
No Comments