当前位置：首页 > 编程语言 > 正文内容

了解Laravel Blade及其使用 ***

a811625533年前 (2023-08-10)编程语言20

的模板引擎支持 React、Vue 和其他库。然而，开发者最喜欢的还是 Laravel 引擎的强大功能，它可以快速创建模块化、可重用的视图。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 -V 验证系统中是否安装了 Composer。

请查看，以便在工作时获得指导。

如何创建 Laravel 应用程序

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

composer create-project laravel/laravel my-app

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

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

cd my-app
php artisan serve

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

如何定义布局

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

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

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

<!-- Page 1 -->
<nav>. . . </nav>
Content for page 1
<footer> . . . </footer>
<!-- Page 2 -->
<nav>. . . </nav>
Content for page 2
<footer> . . . </footer>

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

<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>

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

<!-- Page 1 or Page n -->
<main-layout>
Content for page n
</main-layout>

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

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

php artisan make:component Layout

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

<html>
<head>
<title>{{ $title ?? 'Example Website' }}</title>
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
</head>
<body>
<nav>
<h3>Welcome to my website</h3>
<hr>
</nav>
{{ $slot }}
<footer>
<hr />
© 2023 example.com
</footer>
</body>
</html>

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

如何扩展布局

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

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

<x-layout>
<div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
<button class="2345HAO54ca408de6d4ff2d btn">Get Started</button>
</div>
</x-layout>

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

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

<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
<button class="2345HAO408de6d4ff2d7a8e btn">Get Started</button>
</div>
</x-layout>

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

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

Hello world

如何加入后台数据

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

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

<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$name = "John Doe";
return view('welcome', ['name' => $name]);
});

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

<div>
Hello, {{ $name }}
<!-- Outputs: Hello, John Doe -->
</div>

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

<?php
use Illuminate\Support\Facades\DB; // Import DB Facade
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$todos = DB::table('todos')->get();
return view('welcome', ['todos' => $todos]);
});

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

Route::get('/', function () {
$todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
return view('welcome', ['todos' => $todos]);
});

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

<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<p>{{ json_encode($todos) }}</p>
<!-- Output:  ["Learn Laravel","Learn Blade","Build Cool Stuff"] -->
</x-layout>

如何使用控制快捷键

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

<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<ul>
@foreach ($todos as $todo)
<li>{{ $todo }}</li>
@endforeach
</ul>     
</x-layout>

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

无序列表中的待办事项

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

@if (count($todos) === 1)
<p>I have one task!</p>
@elseif (count($todos) > 1)
<p>I have multiple tasks!</p>
@else
<p>I don't have any tasks!</p>
@endif

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

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

如何构建自定义扩展

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

首先，运行以下命令创建一个新的：

php artisan make:provider TruncateTextServiceProvider

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

<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class TruncateTextServiceProvider extends ServiceProvider
{
public function register()
{
//
}
public function boot()
{
Blade::directive('truncate', function ($expression) {
list($text, $length) = explode(',', $expression);
return "<?php echo Str::limit($text, $length); ?>";
});
}
}

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

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

'providers' => [
// Other service providers
App\Providers\TruncateTextServiceProvider::class,
],

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

<div>
@truncate('Lorem ipsum dolor sit amet', 10)
<!-- Outputs: Lorem ipsu... -->
</div>

小结

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

扫描二维码推送至手机访问。

版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。

本文链接：http://2345hao.cn/blog/index.php/post/8052.html

分享给朋友：
返回列表

上一篇：如何使用Laravel进行CRUD（创建、读取、更新和删除）

下一篇：如何通过SSH进入Docker容器

“了解Laravel Blade及其使用 *** ” 的相关文章

什么是JavaScript？网络上最流行的脚本语言一瞥

什么是JavaScript？网络上最流行的脚本语言一瞥

谁在尝试访问某些网站时没有遇到过更新Java的请求？ 虽然许多人通过交互式网站功能熟悉Java，但用户可能不太熟悉JavaScript——或者，实际上，他们可能错误地认为两者是相同的。 在本文中，我们将讨论JavaScript 是什么以及Java和JavaScript之间的区别。然后我们将概...

宝塔面板教程之网站管理篇

宝塔面板教程之网站管理篇

宝塔面板中的网站管理是非常重要的一部分，也是站长经常需要使用到的功能模块。网站管理，主要用于管理和创建WEB站点。如果您是宝塔面板的使用用户，应该对此模块有充分的了解，以便于您更高效地管理网站。 宝塔面板网站管理模块包括：添加新网站、修改默认页、设置默认站点、站点列表、站点的运行与停止、备份站点、...

宝塔面板教程之监控管理篇

宝塔面板教程之监控管理篇

宝塔面板另外一个特质是，你无需通过Linux命令行来查看服务器各项指标状况，即可以阿里云服务器类似的可视化图表，查看资源使用、负载、CPU占用及内容使用百分比等指标。 默认监控是关闭，有需要的，可以开启，监控数据默认保存30天，可以自行修改，默认监控数据保存在日志，可手动清理该日志。 监控管理，...

什么是Node.js以及为什么要使用它

什么是Node.js以及为什么要使用它

JavaScript是世界上最流行的编程语言之一。今天，它为数百万个网站提供支持，并吸引了成群的开发人员和设计人员为Web构建功能。如果您是编程新手，那么 JavaScript很容易成为之一。 在最初的20年里，JavaScript主要用于客户端脚本。由于JavaScript只能在<scr...

MongoDB vs MySQL：哪个是更好的数据库管理系统？

MongoDB vs MySQL：哪个是更好的数据库管理系统？

由于市场上有各种可用的数据库，用户经常会就MongoDB与MySQL进行辩论，以找出更好的选择。 使用MySQL等关系数据库的组织在根据不断变化的需求管理和存储数据时可能会面临一定的困难。同时，新公司想知道选择什么数据库，这样他们就不会在开发过程中遇到问题。 同时，构建金融应用程序的开发人员...

27个学习PHP的最佳教程（免费和付费资源）

27个学习PHP的最佳教程（免费和付费资源）

对于初学者和那些刚刚进入WordPress开发的人来说，PHP是您可以开始的最佳起点之一。这是一种超级简单直接的语言，使其成为之一，因此相当容易上手，它构成了在线开发的支柱。另外，如果你想在WordPress后端工作，你肯定需要学习它。 但是，如果您不想在昂贵的大学课程上花费数月或数年时间怎么...

Copyright 2345hao.cn Rights Reserved.琼ICP备2025061540号-1

Powered By Z-BlogPHP. Theme by TOYEAN.

您是本站第463626名访客 今日有3篇新文章/评论