前端

未匹配的标注
本文档最新版为 11.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 来实现。Blade 模板引擎语法简洁,支持优雅的数据绑定与循环控制:

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

在这种方式下构建应用程序时,表单提交和其他页面交互通常会从服务器接收一个全新的 HTML 文档,整个页面会由浏览器重新渲染。即使在今天,许多应用程序仍然适合通过简单的 Blade 模板构建其前端。

不断提高的期望

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

在 Laravel 生态系统中,主要使用 PHP 来创建现代动态前端的需求催生了 Laravel Livewire 和 Alpine.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 组件将你的应用提升到一个新的水平。

入门套件

如果你用 PHP 和 Livewire 构建前端,可以利用我们的 Livewire 门套件 来加速应用程序的开发。

使用 Vue / React

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

然而,如果没有额外的工具,将 Laravel 与 Vue 或 React 结合使用会带来一系列复杂的问题,例如客户端路由、数据注入和认证。客户端路由通常可以通过使用类似 NextNuxt 这样的 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\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * 显示给定用户的个人资料。
     */
    public function show(string $id): Response
    {
        return Inertia::render('users/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}

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

import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';

export default function Show({ user }) {
    return (
        <Layout>
            <Head title="Welcome" />
            <h1>Welcome</h1>
            <p>Hello {user.name}, welcome to Inertia.</p>
        </Layout>
    )
}

如你所见,Inertia 允许你在构建前端时充分利用 Vue 或 React 的强大功能,同时提供了一个轻量级的桥梁,将 Laravel 驱动的后端与 JavaScript 驱动的前端连接起来。

服务器端渲染

如果你担心使用 Inertia 会影响应用程序的服务器端渲染,不必担心。Inertia 提供服务器端渲染支持。而且,当你通过 Laravel CloudLaravel Forge 部署应用程序时,确保 Inertia 的服务器端渲染过程始终运行非常简单。

入门套件

如果你希望使用 Inertia 和 Vue / React 构建前端,你可以利用我们的 React 或 Vue 应用入门套件 来加速应用程序的开发。这些入门套件使用 Inertia、Vue / React、Tailwind 和 Vite 为你的应用程序提供后端和前端认证脚手架,以便你可以开始构建下一个大创意。

打包资源

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

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

开始使用 Laravel 和 Vite 的最快方法是使用 我们的应用程序入门工具包开始你的应用程序开发,它通过提供前端和后端身份验证脚手架来启动你的应用程序。

[!NOTE]
有关使用 Laravel 和 Vite 的更详细文档,请参阅我们专门的文档,了解如何打包和编译你的资源。

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

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

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

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

上一篇 下一篇
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~