前端

未匹配的标注
本文档最新版为 10.x,旧版本可能放弃维护,推荐阅读最新版!

前端

简介

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

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

使用 PHP

PHP 和 Blade

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

<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 应用程序的期望不断提高,许多开发者发现需要构建更具动态性的前端,提供更流畅的交互体验。基于此,一些开发者选择开始使用 JavaScript 框架(如 Vue 和 React)来构建应用程序的前端。

其他人则更喜欢使用他们熟悉的后端语言,开发出可利用他们首选的后端语言构建现代 Web 应用程序 UI 的解决方案。例如,在 Rails 生态系统中,这促使了诸如 TurboHotwireStimulus 这样的库的创建。

在 Laravel 生态系统中,主要使用 PHP 来创建现代动态前端的需求催生了 Laravel LivewireAlpine.js 的诞生。

Livewire

Laravel Livewire 是一个用于构建 Laravel 驱动的前端框架,它让前端感觉像使用现代 JavaScript 框架(如 Vue 和 React)构建的一样动态、现代和生动。

使用 Livewire 时,您将创建 Livewire “组件”,这些组件渲染用户界面的一个独立部分,并暴露可以从应用程序前端调用和交互的方法和数据。例如,一个简单的“计数器”组件可能如下所示:

<?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 允许你编写诸如 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 使用 BladeTailwind 为你的应用程序的后端和前端认证流程搭建骨架,让你可以专注于开发你的下一个大创意。

使用 Vue / React

尽管可以使用 Laravel 和 Livewire 构建现代前端,许多开发者仍然倾向于利用 Vue 或 React 这样的 JavaScript 框架的强大功能。这让开发者能够利用 NPM 提供的丰富的 JavaScript 包和工具生态系统。

然而,如果没有额外的工具,将 Laravel 与 Vue 或 React 结合使用会带来一系列复杂的问题,例如客户端路由、数据注入和认证。客户端路由通常可以通过使用类似 NuxtNext 这样的 Vue / React 框架来简化;然而,当将 Laravel 这样的后端框架与这些前端框架结合时,数据注入和认证仍然是复杂且繁琐的问题。

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

Inertia

幸运的是,Laravel 提供了一种兼顾两者的解决方案。Inertia 架起了 Laravel 应用程序和现代 Vue 或 React 前端之间的桥梁,允许你在一个代码库中使用 Vue 或 React 构建完整的现代前端,同时利用 Laravel 的路由和控制器来处理路由、数据注入和认证。通过这种方式,你可以充分利用 Laravel 和 Vue / React 的强大功能,而不会削弱任何一个工具的能力。

在将 Inertia 安装到你的 Laravel 应用程序后,你可以像往常一样编写路由和控制器。然而,从控制器返回的不是 Blade 模板,而是 Inertia 页面:

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * 显示给定用户的个人资料。
     */
    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/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、TailwindVite 为你的应用程序的后端和前端认证流程搭建骨架,让你可以专注于开发你的下一个大创意。

打包资源

无论你选择使用 Blade 和 Livewire 还是 Vue / React 和 Inertia 来开发前端,你都可能需要将应用程序的 CSS 打包成生产就绪的资源。当然,如果你选择使用 Vue 或 React 来构建前端,还需要将组件打包成浏览器可用的 JavaScript 资源。

默认情况下,Laravel 使用 Vite 来进行资源打包。Vite 提供极快的构建时间和本地开发时几乎瞬时的模块热替换(HMR)。在所有新的 Laravel 应用程序中,包括使用我们的 入门套件 的应用程序,你会找到一个 vite.config.js 文件,该文件加载了我们的轻量级 Laravel Vite 插件,使得在 Laravel 应用程序中使用 Vite 变得非常轻松。

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

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

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/laravel/11.x/fr...

译文地址:https://learnku.com/docs/laravel/11.x/fr...

上一篇 下一篇
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
贡献者:2
讨论数量: 0
发起讨论 只看当前版本


暂无话题~