Modèle de lame
- Afficher les données
- Blade & JavaScript Framework
- Switch Statement
- Loop
- PHP
- Formulaire
- Champ CSRF
- Champ Méthode
- Présentation des sous-vues
- Vues de rendu pour les collections
- Pile Personnalisée If Statement
- Introduction Blade est un moteur de modèle simple mais puissant fourni par Laravel. Contrairement à d'autres moteurs de modèles PHP populaires, Blade ne vous empêche pas d'utiliser du code PHP natif dans vos vues. Tous les fichiers de vue Blade seront compilés en code PHP natif et mis en cache, et ne seront pas recompilés à moins qu'ils ne soient modifiés, ce qui signifie que Blade n'ajoutera fondamentalement aucune charge à votre application. Les fichiers de vue Blade utilisent le répertoire
- .
Définir la mise en page
Les deux principaux avantages de Blade sont l'héritage de modèle
et les blocs
. Pour commencer, commençons par un exemple simple. Tout d’abord, examinons une mise en page « principale ». Étant donné que la plupart des applications Web utilisent la même mise en page sur différentes pages, il est facile de définir une seule vue de mise en page Blade : 模板继承
和区块
。为方便入门,让我们先通过一个简单的例子来上手。首先,我们来研究一个「主」页面布局。因为大多数 web 应用会在不同的页面中使用相同的布局方式,因此可以很方便地定义单个 Blade 布局视图:
<!-- 保存在 resources/views/layouts/app.blade.php 文件中 --> <html> <head> <title>App Name - @yield('title')</title> </head> <body> @section('sidebar') This is the master sidebar. @show <div class="container"> @yield('content') </div> </body> </html>
如你所见,该文件包含了典型的 HTML 语法。不过,请注意 @section
和 @yield
指令。 @section
指令定义了视图的一部分内容,而 @yield
指令是用来显示指定部分的内容。
现在,我们已经定义好了这个应用程序的布局,接下来,我们定义一个继承此布局的子页面。
扩展布局
在定义一个子视图时,使用 Blade 的 @extends
指令指定子视图要「继承」的视图。扩展自 Blade 布局的视图可以使用 @section
指令向布局片段注入内容。就如前面的示例中所示,这些片段的内容将由布局中的显示在布局中 @yield
指令控制显示:
<!-- 保存在 resources/views/child.blade.php 中 --> @extends('layouts.app') @section('title', 'Page Title') @section('sidebar') @parent <p>This is appended to the master sidebar.</p> @endsection @section('content') <p>This is my body content.</p> @endsection
在这个示例中, sidebar
片段利用 @parent
指令向布局的 sidebar 追加(而非覆盖)内容。 在渲染视图时,@parent
指令将被布局中的内容替换。
{tip} 和上一个示例相反,这里的
sidebar
片段使用@endsection
代替@show
来结尾。@endsection
指令仅定义了一个片段,@show
则在定义的同时 立即 yield 这个片段。
Blade 视图可以使用全局 view
助手自路由中返回:
Route::get('blade', function () { return view('child'); });
组件 & 插槽
组件和插槽提供了与片段和布局类似的好处;不过组件和插槽的思维模型更易于理解。我们先来看一个可复用的「alert」组件,我们想在应用中复用它:
<!-- /resources/views/alert.blade.php --> <div class="alert alert-danger"> {{ $slot }} </div>
{{ $slot }}
变量将包含我们想要注入到组件的内容。现在,我们使用 Blade 的 @component
指令构建这个组件:
@component('alert') <strong>Whoops!</strong> Something went wrong! @endcomponent
有时候为一个组件定义多个插槽是很有用的。修改 alert 组件以允许其注入 「title」。命名插槽可以通过与其匹配的 「回显」 变量显示:
<!-- /resources/views/alert.blade.php --> <div class="alert alert-danger"> <div class="alert-title">{{ $title }}</div> {{ $slot }} </div>
现在,我们能够使用 @slot
指令向命名插槽注入内容。不在 @slot
指令内的内容都将传递给组件中的 $slot
@component('alert') @slot('title') Forbidden @endslot You are not allowed to access this resource!@endcomponentComme vous pouvez le voir, ce fichier contient une syntaxe HTML typique. Cependant, veuillez être conscient des directives
@section
et @yield
. La directive @section
définit une partie de la vue et la directive @yield
est utilisée pour afficher le contenu de la section spécifiée. Maintenant que nous avons défini la mise en page de cette application, nous définissons ensuite une sous-page qui hérite de cette mise en page. 🎜🎜🎜@extends
spécifie les vues qui doivent être "héritées" par la sous-vue. Les vues qui étendent la disposition Blade peuvent injecter du contenu dans les sections de disposition à l'aide de la directive @section
. Comme le montre l'exemple précédent, le contenu de ces fragments sera affiché par la directive @yield
dans la mise en page : 🎜@component('alert', ['foo' => 'bar']) ... @endcomponent🎜Dans cet exemple, les fragments
sidebar
utilisent le < code>@parent pour ajouter (plutôt que d'écraser) le contenu à la barre latérale de la mise en page. Lorsque la vue est rendue, la directive @parent
sera remplacée par le contenu de la mise en page. 🎜🎜{tip} Contrairement à l'exemple précédent, ici le fragment🎜Les vues Blade peuvent être renvoyées à partir des routes à l'aide de l'assistant globalsidebar
se termine par@endsection
au lieu de@show
. La directive@endsection
définit uniquement une section, tandis que@show
rend cette section immédiatement lors de sa définition. 🎜
view
: 🎜use Illuminate\Support\Facades\Blade; Blade::component('components.alert', 'alert');🎜🎜
Composants et emplacements
🎜Les composants et les emplacements offrent des avantages similaires aux fragments et aux mises en page, mais le modèle mental des composants et des emplacements est plus facile à comprendre. Regardons d'abord un composant "alerte" réutilisable que nous souhaitons réutiliser dans notre application : 🎜@alert(['type' => 'danger']) You are not allowed to access this resource!@endalert🎜
{{ $slot }}
La variable contiendra le contenu que nous souhaitons injecter dans le composant. Maintenant, nous construisons ce composant en utilisant la directive @component
de Blade : 🎜@alert You are not allowed to access this resource!@endalert🎜Parfois, il est utile de définir plusieurs emplacements pour un composant. Modifiez le composant d'alerte pour lui permettre d'injecter "titre". Les emplacements nommés peuvent être affichés via leur variable "echo" correspondante : 🎜
Route::get('greeting', function () { return view('welcome', ['name' => 'Samantha']); });🎜 Nous pouvons maintenant injecter du contenu dans les emplacements nommés en utilisant la directive
@slot
. Le contenu ne figurant pas dans la directive @slot
sera transmis à la variable $slot
dans le composant : 🎜Hello, {{ $name }}.🎜🎜
Transmission de données supplémentaires au composant
Parfois, vous devrez peut-être transmettre des données supplémentaires au composant. Dans ce cas, les données contenant peuvent être organisées dans un tableau comme deuxième paramètre de la directive @component
. Toutes les données seront fournies au modèle de composant sous forme de modifications : @component
指令的第二个参数。所有的数据将作为变更提供给组件模板:
The current UNIX timestamp is {{ time() }}.
给组件起别名
如果组件存储在子目录中,你可能希望给它们起个别名以方便访问。举例来说,如果一个 Blade 组件存储在 resources/views/components/alert.blade.php
中,. 就可以使用 component
方法将 components.alert
的别名命名为 alert
。. 通常情况下,这一过程将在 AppServiceProvider
的 boot
方法中完成:
Hello, {!! $name !!}.
一旦组件有了别名,就可以使用一条指令渲染它:
<script> var app = <?php echo json_encode($array); ?>; </script>
如果没有额外的插槽,还可以省略组件参数:
<script> var app = @json($array); </script>
显示数据
可以通过包裹在双花括号内的变量显示传递给 Blade 视图的数据。比如给出如下路由:
<?php namespace App\Providers; use Illuminate\Support\Facades\Blade; use Illuminate\Support\ServiceProvider; class AppServiceProvider extends ServiceProvider{ /** * 引导任意应用服务。 * * @return void */ public function boot() { Blade::withoutDoubleEncoding(); } }
就可以这样利用 name
变量显示其内容:
<h1>Laravel</h1>Hello, @{{ name }}.
{tip} Blade
{{ }}
语句是自动经过 PHP 的htmlspecialchars
函数传递来防范 XSS 攻击的。
不限于显示传递给视图的变量的内容,你还可以显示任一 PHP 函数的结果。实际上,你可以在 Blade 的回显语句中放置你想要的任意 PHP 代码:
@verbatim <div class="container"> Hello, {{ name }}. </div>@endverbatim
显示非转义字符
默认情况下, Blade 中 {{ }}
语句自动经由 PHP 的 htmlspecialchars
函数传递以防范 XSS 攻击。如果不希望数据被转义,可以使用下面的语法:
@if (count($records) === 1) I have one record! @elseif (count($records) > 1) I have multiple records! @else I don't have any records! @endif
{note} 在回显应用的用户提供的内容时需要谨慎小心。在显示用户提供的数据时,有必要一直使用双花括号语法转义来防范 XSS 攻击。
渲染 JSON
有时,为了初始化一个 JavaScript 变量,你可能会向视图传递一个数据,并将其渲染成 JSON:
@unless (Auth::check()) You are not signed in.@endunless
不过,你可以使用 @json
Blade 指令代替手动调用 json_encode
函数:
@isset($records) // $records 被定义且不是 null... @endisset @empty($records) // $records 为空... @endempty
HTML 实体编码
默认情况下,Blade (以及 Laravel 的 e
助手)将对 HTML 实体双重编码。如果要禁用双重编码,可以在 AppServiceProvider
的 boot
中调用 Blade::withoutDoubleEncoding
@auth // 此用户身份已验证...@endauth @guest // 此用户身份未验证...@endguest
Alias des composants Si les composants sont stockés dans un sous-répertoire, vous souhaiterez peut-être pour leur donner des alias pour un accès plus facile. Par exemple, si un composant Blade est stocké dans resources/views/components/alert.blade.php
, vous pouvez utiliser la méthode component
pour mettre à jour components.alert L'alias de
est nommé alert
.
@auth('admin') // 此用户身份已验证...@endauth @guest('admin') // 此用户身份未验证...@endguest
@hasSection('navigation') <div class="pull-right"> @yield('navigation') </div> <div class="clearfix"> </div> @endif. 🎜Vous pouvez également omettre les paramètres du composant s'il n'y a pas d'emplacements supplémentaires : 🎜
@switch($i) @case(1) First case... @break @case(2) Second case... @break @default Default case...@endswitch🎜🎜🎜
Affichage data
🎜Les données transmises à la vue Blade peuvent être affichées via des variables entourées de doubles accolades. Par exemple, étant donné le parcours suivant : 🎜@for ($i = 0; $i < 10; $i++) The current value is {{ $i }} @endfor @foreach ($users as $user) <p>This is user {{ $user->id }}</p> @endforeach @forelse ($users as $user) <li>{{ $user->name }}</li> @empty <p>No users</p> @endforelse @while (true) <p>I'm looping forever.</p> @endwhile🎜 Vous pouvez utiliser la variable
name
pour afficher son contenu : 🎜@foreach ($users as $user) @if ($user->type == 1) @continue @endif <li>{{ $user->name }}</li> @if ($user->number == 5) @break @endif@endforeach
🎜{tip} Blade🎜Vous n'êtes pas limité à afficher le contenu des variables passées à la vue, vous pouvez également afficher les résultats de n'importe quelle fonction PHP. En fait, vous pouvez mettre n'importe quel code PHP dans l'instruction echo de Blade : 🎜{{ }}
L'instruction est automatique. Passée via la fonctionhtmlspecialchars
de PHP pour empêcher les attaques XSS. 🎜
@foreach ($users as $user) @continue($user->type == 1) <li>{{ $user->name }}</li> @break($user->number == 5) @endforeach
{{ } L'instruction
dans Blade est automatiquement transmise via la fonction htmlspecialchars
de PHP pour empêcher les attaques XSS. Si vous ne souhaitez pas que les données soient échappées, vous pouvez utiliser la syntaxe suivante : 🎜@foreach ($users as $user) @if ($loop->first) This is the first iteration. @endif @if ($loop->last) This is the last iteration. @endif <p>This is user {{ $user->id }}</p> @endforeach
🎜{note} Soyez prudent lorsque vous faites écho au contenu fourni par l'utilisateur depuis votre application. Lors de l'affichage des données fournies par l'utilisateur, il est nécessaire de toujours utiliser une syntaxe d'échappement à double accolade pour se protéger contre les attaques XSS. 🎜
@foreach ($users as $user) @foreach ($user->posts as $post) @if ($loop->parent->first) This is first iteration of the parent loop. @endif @endforeach@endforeach🎜Cependant, vous pouvez utiliser la directive Blade
@json
au lieu d'appeler manuellement la fonction json_encode
: 🎜{{-- This comment will not be present in the rendered HTML --}}
e
de Laravel) encodera deux fois les entités HTML. Si vous souhaitez désactiver le double encodage, vous pouvez appeler la méthode Blade::withoutDoubleEncoding
dans le boot
de AppServiceProvider
: 🎜@php //@endphp🎜🎜🎜🎜 🎜🎜
Blade & JavaScript Framework
Étant donné que de nombreux frameworks JavaScript utilisent également des accolades pour indiquer qu'une expression donnée sera affichée dans le navigateur, vous pouvez utiliser le symbole @
pour informer le moteur de rendu Blade qu'un certain l’expression doit rester inchangée. Un exemple est le suivant : @
符号通知 Blade 渲染引擎某个表达式应保持不变。示例如下:
<form method="POST" action="/profile"> @csrf ... </form>
在这个例子中, @
符号将被 Blade 删除;在 Blade 引擎中 {{ name }}
表达式将保持不变,取而代之的是 JavaScript 引擎将渲染该表达式。
@verbatim
指令
如果要在大段的模板中 JavaScript 变量,可以将 HTML 包裹在 @verbatim
指令中,这样就不需要为每个 Blade 回显语句添加 @
符号:
<form action="/foo/bar" method="POST"> @method('PUT') ... </form>
控制结构
除了模板继承和数据显示, Blade 还为分支和循环等 PHP 控制结构提供了方便的快捷方式。这些快捷方式提供了干净、简捷地处理 PHP 控制结构的方法,同时保持了与 PHP 中的对应结构的相似性。
If 语句
可以使用 @if
、 @elseif
、 @else
和 @endif
指令构造 if
语句。这些指令的功能与相应的 PHP 指令相同:
<div> @include('shared.errors') <form> <!-- Form Contents --> </form> </div>
方便起见, Blade 还提供了 @unless
指令:
@include('view.name', ['some' => 'data'])
除了已经讨论过的条件指令, @isset
和 @empty
指令可以作为各自对应的 PHP 函数的快捷方式:
@includeIf('view.name', ['some' => 'data'])
身份验证指令
@auth
和 @guest
指令能够用于快速确定当前用户是经过身份验证的,还是一个访客:
@includeWhen($boolean, 'view.name', ['some' => 'data'])
如果需要,可以在使用 @auth
和 @guest
指令时指定应被校验的 身份 :
@includeFirst(['custom.admin', 'admin'], ['some' => 'data'])
片段指令
可以使用 @hasSection
指令检查片断是否存在内容:
<input type="{{ $type ?? 'text' }}">
Switch 指令
可以使用 @switch
、 @case
、 @break
、 @default
和 @endswitch
use Illuminate\Support\Facades\Blade; Blade::include('includes.input', 'input');Dans cet exemple, le symbole
@
sera supprimé par Blade ; dans le moteur Blade, l'expression {{ name }}
restera inchangé et remplacé par C'est le moteur JavaScript qui restituera l'expression. @verbatim
directive
Si vous souhaitez utiliser des variables JavaScript dans un grand modèle, vous pouvez envelopper HTML Dans la directive @verbatim
, cela élimine le besoin d'ajouter le symbole @
pour chaque instruction d'écho Blade : @input(['type' => 'email'])🎜
Structure de contrôle
🎜En plus de l'héritage des modèles et de l'affichage des données, Blade fournit également des raccourcis pratiques pour les structures de contrôle PHP telles que les branches et les boucles. . Ces raccourcis offrent un moyen clair et simple de travailler avec les structures de contrôle PHP tout en conservant la similitude avec leurs homologues PHP. 🎜🎜🎜🎜@if
, Les directives @elseif
, @else
et @endif
construisent des instructions if
. Ces directives fonctionnent de manière identique aux directives PHP correspondantes : 🎜@each('view.name', $jobs, 'job')🎜Pour plus de commodité, Blade fournit également la directive
@unless
: 🎜@each('view.name', $jobs, 'job', 'view.empty')🎜En plus des directives conditionnelles déjà évoquées,
@isset Les directives code> et @empty
peuvent être utilisées comme raccourcis vers leurs fonctions PHP respectives : 🎜@push('scripts')
<script src="/example.js">
</script>
@endpush
🎜Directive d'authentification h4>🎜Les directives @auth
et @guest
peuvent être utilisées pour déterminer rapidement si l'utilisateur actuel est authentifié ou un invité : 🎜<head>
<!-- 头部内容 -->
@stack('scripts')
</head>
🎜Si nécessaire, vous pouvez utiliser < code Les directives >@auth et @guest
précisent l'identité qui doit être vérifiée : 🎜@push('scripts')
This will be second...@endpush// 然后...
@prepend('scripts')
This will be first...
@endprepend
🎜 fragment Commands< /h4>🎜Vous pouvez utiliser la commande @hasSection
pour vérifier si la section a du contenu : 🎜@inject('metrics', 'App\Services\MetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.</div>
🎜🎜🎜🎜🎜La commande Switch 🎜🎜 peut utiliser @switch
, @case
, @break
, @default< Les instructions /code > et @endswitch
construisent des instructions switch : 🎜<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider{
/**
* 执行注册后引导服务.
*
* @return void
*/
public function boot()
{
Blade::directive('datetime', function ($expression) {
return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});
}
/**
* 在容器中注册绑定.
*
* @return void
*/
public function register()
{
//
}
}
🎜🎜🎜🎜🎜🎜Boucles
En plus des instructions de branchement, Blade fournit également des instructions simplifiées qui sont les mêmes que la structure de boucle de PHP. Les fonctions de ces instructions sont également les mêmes que les instructions PHP correspondantes :
<?php echo ($var)->format('m/d/Y H:i'); ?>
{tip} Vous pouvez utiliser des variables de boucle dans une boucle pour obtenir des informations évaluables sur la boucle, par exemple si vous en êtes à la première itération ou la dernière itération de la boucle :
Dans une boucle, vous pouvez également terminer la boucle ou passer par cette itération :
use Illuminate\Support\Facades\Blade;
/**
* 执行注册后引导服务
*
* @return void
*/
public function boot(){
Blade::if('env', function ($environment) {
return app()->environment($environment);
});
}
Vous pouvez également déclarer des instructions avec des conditions sur une seule ligne :
@env('local')
// 应用在本地环境中运行...
@elseenv('testing')
// 应用在测试环境中运行...
@else
// 应用没有在本地和测试环境中运行...
@endenv
Loop variables
Pendant la boucle, dans Il y a une variable $loop
disponible dans le corps de la boucle. Cette variable donne accès à un petit nombre d'informations utiles comme l'index de la boucle en cours et s'il s'agit de la première ou de la dernière boucle : $loop
变量。该变量提供了用于访问诸如当前循环的索引、当前是否为第一次或最后一次循环之类的少数有用的信息的途径:
rrreee在嵌套循环中,可以借助 parent
属性访问父循环的 $loop
变量:
rrreee$loop
变量还包含其它几种有用的属性: