laravel Blade 模板引擎

介绍

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 实体
<小于号(开始标签)&lt;
>大于号(结束标签)&gt;
"双引号&quot;
'单引号&apos;&#39;
&和号(特殊字符前缀)&amp;
空格&nbsp;

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 表单仅支持 GETPOST 方法,所以要使用其他 HTTP 方法(如 PUTPATCHDELETE 等),需要通过 @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上找了简单的代码示例,可以非常清晰地了解他们的用法

1. 创建布局模板

创建一个名为 app.blade.php 的布局模板:

<!DOCTYPE html>
<html>
<head><title>@yield('title', '默认标题')</title>
</head>
<body><header><h1>网站标题</h1></header><main>@yield('content')</main><footer><p>版权所有 &copy; 2023</p></footer>
</body>
</html>
  • @yield('title', '默认标题'):定义一个可替换的区域,名称为 title,并提供一个默认值(如果子模板没有填充 title,则显示 默认标题)。

  • @yield('content'):定义另一个可替换的区域,名称为 content

2. 创建子模板

子模板继承布局模板,并填充或覆盖布局模板中的可替换区域。例如,创建一个名为 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>

3. 渲染子模板

在控制器中渲染子模板时,Blade 会自动将子模板的内容插入到布局模板的相应位置:

// 在控制器中
public function index()
{return view('home');
}

4. 最终渲染结果

Blade 会将子模板的内容插入到布局模板中,生成最终的 HTML:

<!DOCTYPE html>
<html>
<head><title>首页</title>
</head>
<body><header><h1>网站标题</h1></header><main><p>这是首页的内容。</p></main><footer><p>版权所有 &copy; 2023</p></footer>
</body>
</html>

emmmm这可能考的不多,我也没找到啥题型。。。。。





本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33736.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

maven之自定义插件

写在前面 在使用maven肯定是离不开插件的&#xff0c;比如执行mvn clean或者时mvn compile其实运行的就是绑定的默认插件。虽然我们一般不需要来自定义插件&#xff0c;但是为了使用的过程中更加的清晰&#xff0c;来尝试自定义插件还是很有必要的&#xff0c;所以本文就一起来…

工程实践:如何使用SU17无人机来实现室内巡检任务

阿木实验室最近发布了科研开发者版本的无人机SU17&#xff0c;该无人机上集成了四目视觉&#xff0c;三维激光雷达&#xff0c;云台吊舱&#xff0c;高算力的机载计算机&#xff0c;是一个非常合适的平台用于室内外巡检场景。同时阿木实验室维护了多个和无人机相关的开源项目。…

【瞎折腾/Dify】使用docker离线部署Dify

文章目录 说在前面安装Docker(外网)获取Dify源码(外网)拉取docker镜像(外网)导出镜像(内网)导入镜像(内网)运行问题 说在前面 外网操作系统&#xff1a;windows内网操作系统&#xff1a;ubuntu外网docker desktop版本&#xff1a;4.29.0外网docker版本&#xff1a;version 26.0…

【Git】配置Git

配置Git 忽略特殊文件 在日常开发中&#xff0c;有些文件不想或不应该提交到远端&#xff0c;如保存数据库密码的配置文件。 在Git工作区的根目录下创建一个特殊的.gitignore文件&#xff0c;把要忽略的文件名填进去&#xff0c;Git就会自动忽略这些文件。 不需要从头写.gi…

mysql学习-常用sql语句

1、安装mysql参考网上链接&#xff0c;进入mysql数据库 mysql -u root -p 2、数据库操作 2.1、创建数据库 create database 数据库名 default character set utf8; 2.2、显示所有数据库 show databases; 2.3、选择数据库 use elementInfo; 2.4、删除数据库 drop database…

PostgreSQL16 的双向逻辑复制

一、配置 双向逻辑复制具体步骤 参考:PostgreSQL 16 双向逻辑复制与事务回环控制 - 墨天轮 1. 安装和准备环境 确保在所有参与复制的服务器上都安装了 PostgreSQL 16。主服务器&#xff1a;192.168.0.100从服务器&#xff1a;192.168.0.102 2. 配置 PostgreSQL 在每个服务…

FastAPI复杂查询终极指南:告别if-else的现代化过滤架构

title: FastAPI复杂查询终极指南:告别if-else的现代化过滤架构 date: 2025/3/14 updated: 2025/3/14 author: cmdragon excerpt: 本文系统讲解FastAPI中复杂查询条件的构建方法,涵盖参数验证、动态过滤、安全防护等18个核心技术点。通过引入策略模式、声明式编程等技术,彻…

C++前缀和

个人主页&#xff1a;[PingdiGuo_guo] 收录专栏&#xff1a;[C干货专栏] 大家好&#xff0c;今天我们来了解一下C的一个重要概念&#xff1a;前缀和 目录 1.什么是前缀和 2.前缀和的用法 1.前缀和的定义 2.预处理前缀和数组 3.查询区间和 4.数组中某个区间的和是否为特定…

机器学习基础

目录 泛化误差 偏差和方差 噪声 生成模型和判别模型 正态分布&#xff08;Normal Distribution&#xff09; 超参数选择 Grid Search 网格搜索 Random Search 随机搜索 Hyperopt Hyperas 参数估计方法对比 MLE 最大似然估计 MAP最大后验估计 贝叶斯估计 距…

中山六院团队发表可解释多模态融合模型Brim,可以在缺少分子数据时借助病理图像模拟生成伪基因组特征|顶刊解读·25-02-14

小罗碎碎念 在癌症诊疗领域&#xff0c;精准预测患者预后对临床决策意义重大。传统的癌症分期系统&#xff0c;如TNM分期&#xff0c;因无法充分考量肿瘤异质性&#xff0c;难以准确预测患者的临床结局。而基于人工智能的多模态融合模型虽有潜力&#xff0c;但在实际临床应用中…

系统可观测性(5)OpenTelemetry基础使用

系统可观测性(5)OpenTelemetry基础概念 Author: Once Day Date: 2025年3月12日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 本文档翻译整理自《OpenTelemetry Docs》&a…

OpenHarmony自定义子系统、部件与模块

如图所示&#xff0c;OpenHarmony系统源码中&#xff0c;大体上按照不同种类的功能分成多个子系统&#xff0c;然后一个子系统内部进一步在同类功能上的差异性划分成一个或多个部件&#xff0c;也就是说一个部件表示一个具体功能的源码集合。最后一个部件的源码再划分成一个或多…

【论文笔记】Contrastive Learning for Compact Single Image Dehazing(AECR-Net)

文章目录 问题创新网络主要贡献Autoencoder-like Dehazing NetworkAdaptive Mixup for Feature PreservingDynamic Feature Enhancement1. 可变形卷积的使用2. 扩展感受野3. 减少网格伪影4. 融合空间结构信息 Contrastive Regularization1. 核心思想2. 正样本对和负样本对的构建…

uni-app打包h5并部署到nginx,路由模式history

uni-app打包有些坑&#xff0c;当时运行的基础路径填写了./&#xff0c;导致在二级页面刷新之后&#xff0c;页面直接空白。就只能换一个路径了&#xff0c;nginx也要跟着改&#xff0c;下面是具体步骤。 manifest.json配置web 运行路径写/h5/&#xff0c;或者写你们网站的目…

SQLiteStudio:一款免费开源跨平台的SQLite管理工具

目录 1.简介 2.下载与安装 3.实现分析 4.总结 1.简介 SQLiteStudio 是一款专门用于管理 SQLite 数据库的图形化工具&#xff0c;由波兰开发者开发并维护。由于 SQLite 以其轻量级、零配置、嵌入式等特性被广泛应用于各种小型项目、移动应用和桌面应用中&#xff0c;而 SQLi…

Java入职篇(2)——开发流程以及专业术语

Java入职篇&#xff08;2&#xff09;——开发流程以及专业术语 开发流程 开发术语 测试用例&#xff08;用例&#xff09; 测试人员写的测试方案&#xff0c;基本上就是编写的测试过程&#xff0c;以及测试的预取结果 灰度测试 现在小部分范围内使用&#xff0c;然后逐步…

Figma介绍(基于云的协作式界面设计工具,主要用于UI/UX设计、原型制作和团队协作)

文章目录 注册和登录简单操作说明Figma介绍**核心特点**1. **云端协作与实时同步**2. **跨平台兼容**3. **高效设计工具**4. **原型交互与动效**5. **开发对接友好**6. **插件生态**7. **版本控制与历史记录** **适用场景**- **团队协作**&#xff1a;远程团队共同设计、评审、…

RAW图与BAYER图异同

RAW图是一种未经处理、未压缩的图像文件格式&#xff0c;它记录了图像传感器捕捉到的原始数据&#xff0c;包含了拍摄时的大量图像信息。下面从多个方面详细介绍RAW图&#xff1a; 参考&#xff1a;B站大清光学 定义与基本概念 定义&#xff1a;RAW文件是图像传感器将捕捉到…

mac安装navicat及使用

0.删除旧的 sudo rm -Rf /Applications/Navicat\ Premium.app sudo rm -Rf /private/var/db/BootCaches/CB6F12B3-2C14-461E-B5A7-A8621B7FF130/app.com.prect.NavicatPremium.playlist sudo rm -Rf ~/Library/Caches/com.apple.helpd/SDMHelpData/Other/English/HelpSDMIndexF…

Windows11【1001问】打开Windows 11控制面板的14种方法

在Windows 11中&#xff0c;尽管微软逐渐转向现代的“设置”应用&#xff0c;但传统的“控制面板”仍然是许多用户管理系统、调整硬件设置和自定义功能的首选工具。然而&#xff0c;由于Windows 11的界面设计更注重简洁性&#xff0c;控制面板的访问方式可能对部分用户来说不够…