Blade 模板引擎与视图

这一课你将能做到

1. 用 Blade 输出变量、条件渲染、循环渲染，并理解转义与安全
2. 用 @extends / @section 组织布局，用组件（class-based + anonymous）封装可复用 UI
3. 在 Blade 中处理表单、CSRF、验证错误回显和分页链接

为什么要学

虽然很多新项目采用前后端分离，但服务端模板从未消失：管理后台、邮件模板、PDF 渲染、内容站、SEO 敏感的落地页，仍然首选服务端渲染。Laravel 的 Blade 是这一层的工具，定位相当于 Spring 生态的 Thymeleaf（而不是 JSP）：语法简洁、支持继承与组件、编译为纯 PHP 缓存执行。

学会 Blade 还有一个隐性收益：Breeze、Jetstream、大部分后台界面包的代码你都能读懂并改造。本课用一个「订单管理后台」把布局、列表、表单、错误回显完整串起来。

先建立图像

Controller
   │  return view('orders.index', ['orders' => $orders]);
   ▼
resources/views/
├── layouts/app.blade.php        ← 母版：<head>、导航、@yield('content')
├── components/
│   ├── alert.blade.php          ← 匿名组件：<x-alert type="success"/>
│   └── stat-card.blade.php
└── orders/
    ├── index.blade.php          ← @extends('layouts.app') + @section
    ├── create.blade.php
    └── show.blade.php

编译机制：Blade 文件第一次被访问时编译为 storage/framework/views/*.php（纯 PHP），原文件改动后自动重编译。等价 Thymeleaf 的模板缓存机制，但开发期零配置自动失效。

跟着做

步骤 1：渲染第一个视图

新建 resources/views/hello.blade.php：

<h1>你好，{{ $name }}</h1>
<p>当前时间：{{ now()->format('Y-m-d H:i') }}</p>

在 routes/web.php：

Route::get('/hello', function () {
    return view('hello', ['name' => '小李']);
});

要点：{{ $name }} 等价 htmlspecialchars($name, ENT_QUOTES)，输出自动转义，防 XSS。确认不需要转义（内容本身就是受信 HTML）才用 {!! $html !!}。

步骤 2：条件与循环

{{-- 这是 Blade 注释，不会出现在 HTML 源码里 --}}

@if($orders->isEmpty())
    <x-alert type="info">还没有订单，去<a href="{{ route('orders.create') }}">下一单</a>吧。</x-alert>
@else
    <p>共 {{ $orders->total() }} 笔订单。</p>
@endif

@isset($user)
    <p>欢迎，{{ $user->name }}</p>
@endisset

@unless(auth()->check())
    <a href="/login">登录</a>
@endunless

<ul>
@foreach($orders as $order)
    <li class="@if($loop->first) font-bold @endif">
        {{ $loop->iteration }}.
        <a href="{{ route('orders.show', $order) }}">{{ $order->order_no }}</a>
        — ¥{{ number_format($order->amount / 100, 2) }}
        @switch($order->status)
            @case('paid')      <span class="text-green">已支付</span> @break
            @case('cancelled') <span class="text-gray">已取消</span> @break
            @default           <span>{{ $order->status }}</span>
        @endswitch
    </li>
@else
    <li>无数据</li>
@endforeach
</ul>

{{-- 复杂循环用 forelse 更省心（空态内置） --}}
@forelse($orders as $order)
    ...
@empty
    <p>暂无订单</p>
@endforelse