devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

深入讲解Laravel模板引擎Blade_laravel blade

作者：IT小白 | 2024-07-18 09:45:56

赞

踩

laravel blade

了解Laravel Blade及其使用方法

Laravel 的模板引擎支持 React、Vue 和其他库。然而，开发者最喜欢的还是 Laravel Blade 引擎的强大功能，它可以快速创建模块化、可重用的视图。Blade 可以让你毫不费力地扩展布局、定义版块，并使用控制结构生成数据驱动的内容。

这篇实践文章将探讨 Blade 是什么、如何工作以及如何增强你的 Laravel 应用程序。

使用 Laravel Blade 所需的一切

Laravel Blade 是 Laravel 框架的默认模板引擎。它能让你在 HTML 代码中直接使用变量、循环、条件语句和其他 PHP 功能。要创建 Blade 文件，只需在 Laravel 项目的 resources/views 目录下创建扩展名为 .blade.php 的文件，定义 Blade 视图，然后在这些文件中构建你喜欢的动态页面。

为什么要使用 Blade？

Blade的一个主要优点是它的模块化代码组织。Blade可以将代码组织成可重复使用的模块，您可以轻松地添加、删除或更新这些模块，而不会影响应用程序的其他部分。

代码封装是 Blade 的另一个优势。Blade 可帮助封装功能，使测试、调试和代码维护更加易于管理。这种方法有利于大型应用程序，因为没有组织的应用程序很快就会变得难以管理。

Blade 的模板引擎性能卓越，是我们测试过的速度最快的 PHP 框架。该引擎会将所有 Blade 视图编译成纯 PHP 代码，然后缓存起来，直到你修改它们。这种方法提高了渲染速度和整体性能。

如何使用 Laravel Blade

在本教程中，我们将创建一个 Laravel 应用程序来体验 Blade 模板的实际应用。学习定义和扩展 Blade 布局、在 Blade 视图之间传递数据、使用各种可用的控制结构，以及创建自己的 Blade。

先决条件

要学习本教程，请确保您具备以下条件：

  • 熟悉 PHP
  • 已安装 Composer。运行 composer -V 验证系统中是否安装了 Composer。

请查看完整的教程代码，以便在工作时获得指导。

如何创建 Laravel 应用程序

要创建 Laravel 应用程序示例，请运行：

composer create-project laravel/laravel my-app

按照终端上的提示完成应用程序的制作。

接下来，进入应用程序目录，使用此命令为其提供服务：

  1. cd my-app
  2.  
  3. php artisan serve

点击终端中的链接，在浏览器上打开 Laravel 欢迎页面。

如何定义布局

布局可让您配置网络应用程序的各个部分，以便在多个页面之间共享。例如，如果您的应用程序在各个页面中使用一致的导航栏和页脚，那么一次创建比为每个页面重新创建更有效。

在学习逐步说明之前，请先看看下面的骨架演示。

创建无布局网站的代码如下所示。它要求你为每个页面重新编写导航栏和页脚代码。

  1. <!-- Page 1 -->
  2.  
  3. <nav>. . . </nav>
  4.  
  5. Content for page 1
  6.  
  7. <footer> . . . </footer>
  8.  
  9. <!-- Page 2 -->
  10.  
  11. <nav>. . . </nav>
  12.  
  13. Content for page 2
  14.  
  15. <footer> . . . </footer>

相反，您可以使用布局轻松构建应用程序，在单个代码块中共享相同的组件：

  1. <!-- Main layout code -->
  2.  
  3. <nav>. . . </nav>
  4.  
  5. {slot}
  6.  
  7. <footer> . . . </footer>

一旦定义了布局，就可以在任何页面上使用：

  1. <!-- Page 1 or Page n -->
  2.  
  3. <main-layout>
  4.  
  5. Content for page n
  6.  
  7. </main-layout>

在旧版本的 Laravel 中，你必须使用模板继承来创建布局。然而，当公司添加了组件功能后，创建强大的布局就变得容易多了。

要使用 Laravel Blade 创建一个新布局，首先要运行这条命令来创建布局的组件：

php artisan make:component Layout

该命令会生成一个新的 layout.blade.php 文件，该文件位于 resources/views/ 目录下名为 components 的新文件夹中。打开该文件并粘贴以下代码：

  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>{{ $title ?? 'Example Website' }}</title>
  6.  
  7. <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
  8.  
  9. </head>
  10.  
  11. <body>
  12.  
  13. <nav>
  14.  
  15. <h3>Welcome to my website</h3>
  16.  
  17. <hr>
  18.  
  19. </nav>
  20.  
  21. {{ $slot }}
  22.  
  23. <footer>
  24.  
  25. <hr />
  26.  
  27. © 2023 example.com
  28.  
  29. </footer>
  30.  
  31. </body>
  32.  
  33. </html>

这段代码将创建一个具有简单导航栏和页脚的布局组件。 slot 函数定义了在扩展布局组件时传递主要内容的位置。

如何扩展布局

您可以使用标签在 blade  视图中轻松导入组件。此方法同样适用于你之前创建的布局组件。

要查看扩展布局的效果，请打开默认的 resources/views/welcome.blade.php 文件，并用以下代码替换该文件的内容：

  1. <x-layout>
  2.  
  3. <div>
  4.  
  5. <h1>Hello World!</h1>
  6.  
  7. <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
  8.  
  9. <button class="btn">Get Started</button>
  11. </div>
  13. </x-layout>

这种方法可以更新欢迎页面以使用布局组件，同时传递一个标题元素和一段模拟文本作为其内容。重新加载之前打开的链接，查看更改。

在布局定义中，请注意如果代码不传递标题数据，则会呈现默认为 “Example Website” 的标题数据。您可以通过 <x-slot name="slotName" /> 代码在视图中以命名槽的形式传递这些数据，在本例中就是 <x-slot name="title" /> 。用下面的代码更新 welcome.blade.php 文件，然后重新加载页面：

  1. <x-layout>
  2.  
  3. <x-slot name="title">
  4.  
  5. Home | Example Website
  6.  
  7. </x-slot>
  8.  
  9. <div>
  10.  
  11. <h1>Hello World!</h1>
  12.  
  13. <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
  14.  
  15. <button class="btn">Get Started</button>
  17. </div>
  19. </x-layout>

接下来，添加一些样式来增强应用程序的外观。在 /public/css 目录下新建一个 app.css 文件，然后粘贴该文件中的代码。

完成所有这些更新后，您在 http://127.0.0.1:8000/ 上预览应用程序时应该会看到以下输出。

Hello world

Hello world

如何加入后台数据

在前面的示例中，你通过插槽在组件和视图之间轻松地共享了数据。不过，从数据库或其他远程源加载数据有更好的方法。

在这种情况下，可以直接从路由器定义中加载和传递数据，并像访问前例中的命名槽一样访问数据。为此，请打开 routes/web.php 文件，并用以下代码替换其内容：

  1. <?php
  2.  
  3. use Illuminate\Support\Facades\Route;
  4.  
  5. Route::get('/', function () {
  6.  
  7. $name = "John Doe";
  8.  
  9. return view('welcome', ['name' => $name]);
  10.  
  11. });

在上面的代码中，您更新了网络路由，将名称 ” John Doe ” 传递给了欢迎视图。现在，像这样在 blade 视图中访问这个值：

  1. <div>
  2.  
  3. Hello, {{ $name }}
  4.  
  5. <!-- Outputs: Hello, John Doe -->
  6.  
  7. </div>

您可以使用这种方法从数据库加载数据。例如，假设您有一个包含待办事项列表的待办事项表。使用 DB facade 加载这些待办事项，并将它们传递给视图：

  1. <?php
  2.  
  3. use Illuminate\Support\Facades\DB; // Import DB Facade
  4.  
  5. use Illuminate\Support\Facades\Route;
  6.  
  7. Route::get('/', function () {
  8.  
  9. $todos = DB::table('todos')->get();
  10.  
  11. return view('welcome', ['todos' => $todos]);
  12.  
  13. });

不过，如果您没有数据库，可更新网络入口路由以传递静态待办事项数组。打开 routes/web.php 文件，用下面的代码更新默认 ( / ) 路由：

  1. Route::get('/', function () {
  2.  
  3. $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  4.  
  5. return view('welcome', ['todos' => $todos]);
  6.  
  7. });

用下面的代码替换 welcome.blade.php 文件的内容，以 JSON 编码数组的形式访问待办事项。

  1. <x-layout>
  2.  
  3. <x-slot name="title">
  4.  
  5. Home | Example Website
  6.  
  7. </x-slot>
  8.  
  9. <p>{{ json_encode($todos) }}</p>
  10.  
  11. <!-- Output: ["Learn Laravel","Learn Blade","Build Cool Stuff"] -->
  12.  
  13. </x-layout>

如何使用控制快捷键

Blade 模板引擎还支持多个指令，以有条件地呈现各种数据类型。例如，要遍历传给欢迎视图的 to-dos 返回数组，可在 welcome.blade.php 文件中粘贴以下代码，应用 foreach 循环：

  1. <x-layout>
  2.  
  3. <x-slot name="title">
  4.  
  5. Home | Example Website
  6.  
  7. </x-slot>
  8.  
  9. <ul>
  10.  
  11. @foreach ($todos as $todo)
  12.  
  13. <li>{{ $todo }}</li>
  14.  
  15. @endforeach
  16.  
  17. </ul>
  18.  
  19. </x-layout>

这一更改将以无序列表的形式显示待办事项，就像下面的截图一样。

无序列表中的待办事项

无序列表中的待办事项

要构建条件语句块，可使用 @if 、 @elseif 、 @else 和 @endif 指令。例如

  1. @if (count($todos) === 1)
  2.  
  3. <p>I have one task!</p>
  4.  
  5. @elseif (count($todos) > 1)
  6.  
  7. <p>I have multiple tasks!</p>
  8.  
  9. @else
  10.  
  11. <p>I don't have any tasks!</p>
  13. @endif

用上述代码替换 welcome.blade.php 文件的内容。各种 if-else 指令会计算待办事项，并在不同情况下显示自定义信息。如果您的待办事项数组中包含多个任务，您就会在浏览器中看到输出 “I have multiple tasks!”（我有多个任务！）。

你可以在 Laravel 文档中找到更多支持的指令。

如何构建自定义扩展

您也可以编写与上例类似的自定义指令。要探索这种技术，请创建一个自定义文本截断指令。

首先，运行以下命令创建一个新的服务提供器：

php artisan make:provider TruncateTextServiceProvider

该命令会生成一个新的服务提供器文件，文件名为 app/Providers/TruncateTextServiceProvider.php。打开该文件并将其内容替换为

  1. <?php
  2.  
  3. namespace App\Providers;
  4.  
  5. use Illuminate\Support\Facades\Blade;
  6.  
  7. use Illuminate\Support\ServiceProvider;
  8.  
  9. class TruncateTextServiceProvider extends ServiceProvider
  10.  
  11. {
  12.  
  13. public function register()
  14.  
  15. {
  16.  
  17. //
  18.  
  19. }
  20.  
  21. public function boot()
  22.  
  23. {
  24.  
  25. Blade::directive('truncate', function ($expression) {
  26.  
  27. list($text, $length) = explode(',', $expression);
  28.  
  29. return "<?php echo Str::limit($text, $length); ?>";
  30.  
  31. });
  32.  
  33. }
  34.  
  35. }

代码导入了 Blade Facade，并定义了一个名为 @truncate 的新自定义指令。该指令接受两个参数： $text 和 $length 。它使用 Str::limit() 方法将文本截断到指定长度。

最后，将服务提供者添加到 config/app.php 配置文件中的提供者数组中，注册服务提供者：

  1. 'providers' => [
  2.  
  3. // Other service providers
  4.  
  5. App\Providers\TruncateTextServiceProvider::class,
  6.  
  7. ],

在 Blade 模板（welcome.blade.php）中使用自定义指令，通过 @truncate 语法调用它。

  1. <div>
  2.  
  3. @truncate('Lorem ipsum dolor sit amet', 10)
  4.  
  5. <!-- Outputs: Lorem ipsu... -->
  6.  
  7. </div>

小结

本文探讨了 Laravel Blade 如何帮助你简化开发流程，同时为网络应用程序创建模块化和可重用的视图。然而，你的 Laravel 开发之旅不应该就此结束。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/844818
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号