Laravel 视图与模板引擎（Blade）：从基础到高级的完整教程

天天向上

发布： 2025-01-18 12:06:15

原创

988 人浏览过

在 Laravel 中，视图（View） 和 模板引擎（Blade） 是构建动态网页内容的核心工具。视图用于呈现数据，模板引擎 Blade 则帮助你更简洁、灵活地生成 HTML 内容。

1. 视图（View）

视图是用户在浏览器中看到的页面内容。在 Laravel 中，视图通常存储在 resources/views 目录下，视图文件默认使用 .blade.php 扩展名（表示使用 Blade 模板引擎）。

1.1 返回视图

在 Laravel 控制器中，可以通过 view() 函数返回视图。例如，在 UserController 中返回一个视图：

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
    public function index()
    {
        return view('user.index');
    }
}

这会加载 resources/views/user/index.blade.php 文件并返回给浏览器。

1.2 传递数据到视图

你可以通过 view() 函数的第二个参数将数据传递到视图。例如，向视图传递一个变量 name：

return view('user.index', ['name' => 'John Doe']);

在视图中可以使用 Blade 语法来显示传递的变量：

<h1>Hello, {{ $name }}</h1>

1.3 带有多个数据项

你可以传递多个数据项给视图，通过数组或者 compact() 函数：

return view('user.index', compact('name', 'age'));

在视图中，可以访问这些变量：

<h1>Name: {{ $name }}</h1>
<p>Age: {{ $age }}</p>

2. Blade 模板引擎

Blade 是 Laravel 提供的强大的模板引擎，它使得生成 HTML 页面更加简洁、灵活。Blade 文件使用 .blade.php 扩展名。

2.1 Blade 基本语法

2.1.1 输出数据

Blade 使用双大括号语法 {{ }} 来输出数据：

<h1>Hello, {{ $name }}</h1>

2.1.2 转义输出

Blade 会自动对变量进行 HTML 转义，防止 XSS 攻击。如果不想转义，可以使用 {!! !!} 语法：

<p>{!! $htmlContent !!}</p>

2.1.3 控制结构

Blade 提供了很多方便的控制结构，如条件语句、循环等。

条件语句：

@if ($user)
    <h1>Hello, {{ $user->name }}</h1>
@else
    <h1>Guest</h1>
@endif

循环语句：

@foreach ($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

其他控制结构：

@forelse ($users as $user)
    <p>{{ $user->name }}</p>
@empty
    <p>No users found.</p>
@endforelse

2.2 Blade 继承与布局

Laravel 的 Blade 引擎支持视图继承，允许你将公共部分提取到父布局文件中，以减少重复的代码。

2.2.1 定义父布局

通常，将布局文件放在 resources/views/layouts 目录下。例如，创建一个父布局文件 resources/views/layouts/app.blade.php：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel App</title>
</head>
<body>
    <header>
        <h1>Welcome to Laravel</h1>
    </header>

    <div class="content">
        @yield('content')
    </div>
</body>
</html>

2.2.2 子视图继承父布局

在子视图中使用 @extends 来继承父布局，并使用 @section 来定义具体内容：

@extends('layouts.app')

@section('content')
    <h2>This is the user dashboard.</h2>
    <p>Welcome, {{ $user->name }}.</p>
@endsection

通过这种方式，父布局中的 HTML 结构会被复用，而具体内容可以在子视图中进行修改。

2.3 Blade 部分视图（子视图）

Blade 允许你将视图文件拆分为多个部分，以便于复用和组织代码。常见的子视图可以放在 resources/views/partials 目录中。

例如，创建一个导航部分视图 resources/views/partials/nav.blade.php：

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

在主视图中通过 @include 来加载子视图：

@include('partials.nav')

2.4 Blade 组件

Laravel 还支持 Blade 组件，它们是可以重用的、封装的 UI 组件，适用于更复杂的界面。

2.4.1 创建组件

使用 Artisan 命令创建 Blade 组件：

php artisan make:component Alert

这将创建一个组件类 app/View/Components/Alert.php 和视图文件 resources/views/components/alert.blade.php。

在组件视图中可以定义 HTML 结构：

<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

2.4.2 使用组件

在 Blade 视图中使用组件：

<x-alert type="danger">
    Something went wrong!
</x-alert>

2.5 Blade 路由

Blade 还支持生成路由链接。你可以使用 route() 辅助函数生成命名路由的 URL：

<a href="{{ route('profile') }}">Go to Profile</a>

3. Blade 缓存

Blade 视图会被自动缓存，以提高性能。在生产环境中，Laravel 会缓存所有的视图文件。如果你对视图做了更改，可以通过 Artisan 命令清除视图缓存：

php artisan view:clear

4. Blade 性能优化

避免使用不必要的复杂逻辑：将复杂的业务逻辑从视图中提取到控制器或服务类中，保持视图简洁。
使用缓存：对于渲染复杂的视图，可以使用 Laravel 的视图缓存来提高性能。
精简布局文件：将公共部分提取到布局文件中，以减少视图的重复代码。