介绍
Blade 是 Laravel 的默认模板引擎,Blade 模板文件使用.blade.php 作为文件扩展名,被存放在resources/views目录中,
Blade 模板的常见特性和语法:
1.输出变量:
双花括号 {``{ $variable }}
来输出变量的值。eg.{``{ $name }}
将输出名为 $name
的变量的值。
注意:在 Laravel 的 Blade 模板引擎中,
{``{ }}
用于输出 PHP 变量并自动进行 HTML 转义,但是一些前端框架如Vue.js、Angular等也使用{``{ }}
作为模板语法来绑定 JavaScript 变量,Blade 会尝试解析这些{``{ }}
,从而导致错误或意外的行为。所以在 Blade 模板中使用@
前缀来跳过{``{ }}
的解析。这样,Blade 会忽略这些带@
前缀的{``{ }}
,并将其原样输出,以便前端框架(如 Vue.js)能够正确解析。// Blade 引擎会将其编译为对应的 PHP 代码 {{ $phpData }} // Blade 引擎编译时会移除 @,保留 {{ $vueData }} 结构 @{{ $vueData }}
2.原始输出:
单花括号 {!! $variable !!}
来原样输出变量的值,包括其中的 HTML 代码,因为它不会对内容进行转义
场景举例:在表单通过富文本编辑器编辑后提交的表单数据内容通常包含 HTML 标签,就需要直接渲染,否则浏览器会将这些内容显示为普通文本,而不是渲染为 HTML;
这样{!! $variable !!}编译后的代码就是 <?php echo $variable; ?>
'HTML'转义是一种安全机制,用于将特殊字符转换为 HTML 实体,以防止这些字符被浏览器解析为 HTML 或 JavaScript 代码,来防止XSS攻击,下面是一些常见转义字符
字符 描述 HTML 实体 <
小于号(开始标签) <
>
大于号(结束标签) >
"
双引号 "
'
单引号 '
或'
&
和号(特殊字符前缀) &
空格
3.注释:
使用 {{--注释--}} 来添加 Blade 注释。这些注释将在渲染时被忽略,不会出现在生成的 HTML 中。
4.Blade 常用指令:
(1)If 语句:用 @if ,@elseif ,@else和@endif指令构造 if
语句。这些指令功能与它们所对应的 PHP 语句完全一致
@if (count($records) === 1)
// 有一条记录
@elseif (count($records) > 1)
// 有多条记录
@else
// 没有记录
@endif
为了方便, Blade 还提供了一个 @unless
指令(相当于 @if (! Auth::check()) @endif
):
@unless (Auth::check())
// 还没有登录
@endunless
双冒号
::
是 PHP 中的范围解析操作符用于访问类的静态成员或常量。使用类名::静态方法名()/
静态属性名/常量名
(2)循环语句,这些语句的功能和它们所对应的 PHP 语法一致:
@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
//$i = 0初始化变量;$i < 10判断变量是否小于10;小于10则$i++变量循环加1;(最后输出10行)
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
//$users:要遍历的数组或集合。$user:当前遍历的元素($users有几个输出几行)
@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
//foreach的进阶版,就是多了个空输出
@while (true)
<p>I'm looping forever.</p>
@endwhile
//只要是ture,无限循环
在遍历
foreach
循环时,您可以使用 循环变量 去获取有关循环的有价值的信息,例如,您处于循环的第一个迭代亦或是处于最后一个迭代。
这是比较常用的命令,想了解其他请参考Blade 模板 | Laravel中文文档
5.包含视图:
使用 @include('view.name')
来包含其他视图。您可以将常用的部分(如页眉、页脚、导航栏等)定义为独立的视图,并在需要时包含它们。
传递数据给被包含的视图:
@include('partials.header', ['title' => '欢迎来到我的网站'])
包含视图的嵌套:同理啦
<header> <h1>{{ $title }}</h1> @include('partials.nav') </header>
视图名称:要包含的视图文件路径,不需要加
.blade.php
后缀。数据数组(可选):传递给被包含视图的数据。
6.表单处理:
使用 @csrf
指令来生成 CSRF 令牌,以防止跨站请求伪造。使用 @method('PUT')
、@method('DELETE')
等指令来指定表单的 HTTP 方法。
(1)@csrf:
在表单中使用 @csrf
指令,Blade 会自动生成一个隐藏的<input>
字段,包含 CSRF 令牌,Laravel 会自动验证该令牌,确保请求是合法的。
eg:
<form action="/submit" method="POST">
@csrf
<input type="text" name="name">
<button type="submit">提交</button>
</form>
//应用
<form action="/submit" method="POST">
<input type="hidden" name="_token" value="随机生成的 CSRF 令牌">
<input type="text" name="name">
<button type="submit">提交</button>
</form>
//生成的html
(2)@method:因为
HTML 表单仅支持 GET
和 POST
方法,所以要使用其他 HTTP 方法(如 PUT
、PATCH
、DELETE
等),需要通过 @method
指令伪造方法。在表单中使用 @method
指令,Blade 会生成一个隐藏的 _method
字段,Laravel 会根据该字段的值处理请求。
eg:
<form action="/update/1" method="POST">
@csrf
@method('PUT')
<input type="text" name="name" value="John">
<button type="submit">更新</button>
</form>
//方法
<form action="/update/1" method="POST">
<input type="hidden" name="_token" value="随机生成的 CSRF 令牌">
<input type="hidden" name="_method" value="PUT">
<input type="text" name="name" value="John">
<button type="submit">更新</button>
</form>
//生成的html页面
7.布局:
使用 <x-app-layout>
标签来定义应用程序的布局。默认情况下,它会渲染 app/View/Components/AppLayout.php
文件,可以根据需要自定义布局组件。举个例子吧:
{``{ $slot }}
是一个特殊的变量,它会被替换为 <x-app-layout>
标签内部的内容。
<x-app-layout>
<h1>Welcome to my website!</h1>
<p>This is the main content of the page.</p>
</x-app-layout>
上面的<h1>
和 <p>
标签的内容会被插入到 layouts.app
视图的 {``{ $slot }}
位置。
8.模板继承:
创建一个基础布局模板(布局模板通常放在 resources/views/layouts
目录下),并使用 @yield
指令来定义可被子视图替换的内容块。使用 @extends
、@section
和 @yield
来实现模板继承。
从ai上找了简单的代码示例,可以非常清晰地了解他们的用法
- 创建布局模板
创建一个名为
app.blade.php
的布局模板:<!DOCTYPE html> <html> <head> <title>@yield('title', '默认标题')</title> </head> <body> <header> <h1>网站标题</h1> </header> <main> @yield('content') </main> <footer> <p>版权所有 © 2023</p> </footer> </body> </html>
@yield('title', '默认标题')
:定义一个可替换的区域,名称为title
,并提供一个默认值(如果子模板没有填充title
,则显示默认标题
)。
@yield('content')
:定义另一个可替换的区域,名称为content
。
- 创建子模板
子模板继承布局模板,并填充或覆盖布局模板中的可替换区域。例如,创建一个名为
home.blade.php
的子模板:@extends('layouts.app') @section('title', '首页') @section('content') <p>这是首页的内容。</p> @endsection
@extends('layouts.app')
:指定子模板继承layouts/app.blade.php
布局模板。
@section('title', '首页')
:填充布局模板中的title
区域,内容为首页
。
@section('content')
:填充布局模板中的content
区域,内容为<p>这是首页的内容。</p>
。
- 渲染子模板
在控制器中渲染子模板时,Blade 会自动将子模板的内容插入到布局模板的相应位置:
// 在控制器中 public function index() { return view('home'); }
- 最终渲染结果
Blade 会将子模板的内容插入到布局模板中,生成最终的 HTML:
<!DOCTYPE html> <html> <head> <title>首页</title> </head> <body> <header> <h1>网站标题</h1> </header> <main> <p>这是首页的内容。</p> </main> <footer> <p>版权所有 © 2023</p> </footer> </body> </html>
emmmm这可能考的不多,我也没找到啥题型。。。。。