Skip to content

第5.1章：Laravel 中的 Blade 模板

学习时间： 40分钟

1. 什么是 Blade？您的“智能”蓝图

到目前为止，我们已经接触过两种极端情况：纯 index.html 和来自 API 的纯 JSON 响应。但是，如何创建能够动态显示我们后端数据的完整网页呢？

Blade 是 Laravel 内置的模板引擎。它允许我们编写普通的 HTML，但具有“超能力”：

  • 以优雅的语法插入变量并执行 PHP 代码。
  • 创建可重用的页面“布局”（页眉、页脚）。
  • 直接在 HTML 代码中使用循环和条件语句。
  • 自动防范 XSS 攻击。

💡 宇宙类比：

想象一下，HTML 是宇宙飞船的简单蓝图。Blade 是一个先进的 CAD 系统。您不仅绘制线条，还添加“智能”对象。您说：“这里将是船员列表”，Blade 就会自动请求数据并填充它。“这里将是主屏幕”，Blade 就会插入标准界面。

所有 Blade 文件都以 .blade.php 扩展名结尾，并存储在 resources/views/ 文件夹中。

2. 语法基础：数据显示

Blade 最简单的功能就是输出数据。

{{ }} 语法

这对双花括号是 Blade 的命令：“获取变量并安全地输出其内容”。

示例：

  1. routes/web.php 中的路由： 

    <?php
Route::get('/mission-briefing', function () {
    $mission = 'Исследовать систему Kepler-186';
    return view('briefing', ['mission_name' => $mission]);
});

    • view('briefing', ...) 告诉 Laravel 查找 resources/views/briefing.blade.php 文件。
    • ['mission_name' => $mission] — 这是我们“传递”到视图中的数据数组。

  2. resources/views/briefing.blade.php 中的视图： 

    <h1>Миссия ЦУП</h1>
<p>Текущая задача: {{ $mission_name }}</p>

在浏览器中访问 /mission-briefing 的结果： 

<h1>Миссия ЦУП</h1>
<p>Текущая задача: Исследовать систему Kepler-186</p>

🛡️ 重要提示： Blade 会自动转义 {{ }} 内的所有数据。这意味着，如果变量包含 HTML 标签或恶意脚本，它们将作为普通文本输出，而不是执行。这是内置的 XSS 攻击防护。

要输出未转义的 HTML（请谨慎操作！），请使用 {!! $variable !!} 语法。

3. 指令：在 HTML 中添加逻辑

Blade 指令以 @ 符号开头。它们允许使用循环、条件语句等。

条件 (@if, @else)： 

@if($planet->is_habitable)
    <p style="color: green;">行星适宜居住！</p>
@else
    <p style="color: red;">需要宇航服。大气层充满敌意。</p>
@endif

循环 (@foreach, @forelse)：

@forelse 是一个非常方便的指令，它结合了循环和空检查。 

<h2>系统中的行星列表：</h2>
<ul>
    @forelse($planets as $planet)
        <li>
            {{ $loop->iteration }}. {{ $planet->name }}
            <!-- $loop - 循环中可用的特殊变量 -->
        </li>
    @empty
        <li>在该系统中未发现行星。</li>
    @endforelse
</ul>

4. 布局和区域：不要重复自己 (DRY)

Blade 最强大的功能是创建可重用布局（layouts）。您无需将网站的页眉和页脚复制到每个页面。

第 1 步：创建主布局 (layout)

创建 resources/views/layouts/app.blade.php 文件： 

<?php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>ЦУП - @yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <header>
        <h1>银河舰队指挥中心</h1>
    </header>

    <main>
        @yield('content') <!-- 这里将是页面的独特内容 -->
    </main>

    <footer>
        <p>&copy; {{ date('Y') }} Space Command. 版权所有。</p>
    </footer>
</body>
</html>
- @yield('title') 和 @yield('content') 是“插槽”或“占位符”。

第 2 步：创建使用布局的子视图

创建 resources/views/planets/index.blade.php 文件： 

<?php
@extends('layouts.app') {{-- 继承我们的主布局 --}}

@section('title', 'Список планет') {{-- 填充 'title' 区域 --}}

@section('content') {{-- 填充主要的 'content' 区域 --}}
    <h2>已注册行星</h2>
    <p>这是我们已知的所有世界的列表。</p>
    {{-- 这里可以是您的 @forelse 循环来输出行星 --}}
@endsection

现在，当 Laravel 渲染 planets.index 时，它会首先获取 layouts.app，然后将 @section 区域中的内容插入到其中。

巩固知识小测验

1. Blade 模板文件的扩展名是什么？

2. 如何在 Blade 中安全地输出变量 `$name`？

3. 哪个指令用于继承主布局？

4. `@yield('content')` 指令的作用是什么？

5. 哪个指令非常适合对可能为空的数组进行循环？

🚀 本章总结：

您已经学习了 Blade 的基础知识——一个创建动态网页的强大工具。现在您能够：

  • 输出数据并自动防御 XSS。
  • 使用指令添加逻辑（@if, @forelse）。
  • 使用 @extends 和 @yield 创建可重用布局。

我们已经为飞船的控制面板准备好了“蓝图”。 在下一章中，我们将为我们的 API 创建具体的“面板”（视图），并在上面显示真实数据。