[Laravel] 04 - Blade templates
前言
一、大纲
From: https://www.imooc.com/video/12509
Blade视图页面 --> 编译 --> 原生PHP --> 并缓存起来。
既然是个模板:通用的“头部”和“尾部”。
二、添加模板文件 (.blade.php)
Blade 模板
一、模板继承
- 定义布局 - [1]
section, yield, extends, parent四个关键字。
[resources/views/layouts.blade.php]
- 初步理解关键字
@section
定义视图片段。
@yield
类似占位符,显示某个制定section所代表的内容。用子模板去实现它。
不可扩展。只是声明了一个视图片段。
- 加载布局
Route --> Controller --> template for view.
[1] 路由
Route::any('section1', ['uses' => 'StudentController@section1']);
[2] 控制器
public function section1()
{
return view('student.section1'); // 渲染模板
}
student/section1可以;student.section1也可以,但推荐后者。
[3] 视图 加载布局
新建 resources/views/student/section1.blade.php
Jeff: 这里,视图继承了layouts的内容。
@extends('layouts')
这样,便加载了默认 resources/views 下的 layouts.blade.php。
- 继承布局 - [2]
先通过 @extends 继承父模板主体。
其实就是“重写布局”局部内容。
- 若干疑难点
[1] yield与section的区别?
** 初步理解:
- @yield() 可以理解为一个占位符。
- @section('head') 表示一个存储区域,这个区域内定义的内容,在子模板中可以通过 @parent 进行调用。
** 不能被扩展如何理解:
@yield 不能被扩展,所以即使加上了 @parent 也不起作用,输出的内容只有“新的标题”,替换了“默认的标题”。
@section 定义的部分,由于使用了 @parent 关键字,父模板中的内容会被保留,然后再扩展后添加的内容进去。
[2] @section ... @stop ... @show ... @endsection
Ref: Laravel5.4初试-@yield @section @show @stop @append标签区别
Ref: Blade 模板中有关 section 的那些事【这才是原文】
** @endsection
这个在 4.0 版本中已经被移除,虽然向下兼容,但是不建议使用
** @show 与 @stop
@show 指的是执行到此处时将该 section 中的内容输出到页面,
@stop 则只是进行内容解析,并且不再处理当前模板中后续对该section的处理,除非用 @override覆盖(详见下一部分)。
通常来说,在首次定义某个 section 的时候,应该用 @show;而在替换它或者扩展它的时候,不应该用 @show,应该用 @stop。
{{-- layout.master --}}
<div id="zoneA">
@section('zoneA')
AAA
@show
</div> <div id="zoneB">
@section('zoneB')
BBB
@stop
</div> <div id="zoneC">
@section('zoneC')
CCC
@show
</div> ---------------------------------------------------
代码如下:
{{-- page.view --}}
@extends('layout.master') @section('zoneA')
aaa
@stop @section('zoneB')
bbb
@stop @section('zoneC')
ccc
@show
最终显示结果:
从结果可以看到,zoneB 的内容丢失,因为没有用 @show 告诉引擎输出这部分的内容,而 zoneC 的内容会显示两次,并且还破坏了 layout.master 的页面结构,因为 @show 出现了两次。
ccc // 来自 page.view
<div class="zoneA">
aaa
</div> <div class="zoneB"> </div> <div class="zoneC">
ccc
</div>
一个理解:
@section('content')
<h1>Test</h1>
@show
is equivalent to @section('content')
<h1>Test</h1>
@stop @yield('content')
二、模板调用PHP
- view 使用 "变量 from controller"
Controller中定义了一个变量:
public function section1()
{
$name = 'sean‘ ;
return view('student.section1', [
'name' => $name
]);
}
view的模板文件 [resources/views/student/section1.blade.php]:
@section('content')
content <p>{{ $name }} </p>
@stop
效果如下:
- 直接调用php代码
[1] 视图中使用代码如下:
其中最后一样的or写法是上一行三元表达式的替代写法在blade中。
[2] 控制器中定义变量。
public function section1()
{
$name = 'sean‘;
$arr = ['sean', 'imooc'];
return view('student.section1', [
'name' => $name,
'arr' => $arr,
]);
}
- 转移字符@
<p>@{{ $name }}</p>
- 模板中注释
模板的注释在解析后的html中是看不到的。
<!-- 一二三 --> # php注释 {{-- 四五六 --}} # 模板注释,用于比较隐私的注释方法
三、include的使用
- 类似子函数
引入子视图,不是都需要,但用的地方也不少。
[1] Create sub-view as common1.blade.php
[2] sub-view,相当于 "将被调用" 的子函数。
<p> 我是include {{ $message }}</p>
[3] main-view 调用 sub-view 如下。
@include('student.common1', ['message' => '我是错误信息']) 这里,调用了student目录下的common1.blade.php,并给参数message传入了一个值:'我是错误信息'
- 实际使用示范
有点占位符的意思。
四、流程控制
- 条件判断
[1] 视图中可以使用if foreach等。
<br>
@if ($name == 'sean')
I'm sean
@elseif ($name == 'imooc')
I'm imooc
@else
Who am I?
@endif <br>
@If (in_array($name, $arr))
true
@else
false
@endif
[2] unless 相当于 if 取反。
<br>
@unless($name == 'sean')
I'm sean
@endunless
- 循环遍历
方法一 <br>
@for ($i = 0; $i < 10; $i++)
<p>{{ $i }}</p>
#endfor 方法二 <br>
@foreach($students as $student)
<p>{{ $student->name }}</p>
@endforeach
方法三
<br>
@forelse($students as $student)
<p>{{ $student->name }}</p>
@empty
<p>null</p>
@endforelse
五、模板中的URL
- 点击链接后跳转到这里
[1] 路由
[app/Http/routes.php]
Route::any('url', ['as' => 'url', 'uses' => 'StudentController@urlTest']);
[2] 路由 --> 控制函数
[app/Http/Controllers/StudentController.php]
public function urlTest()
{
return 'urlTest';
}
- 建立这个链接
在此,section1中添加一个链接:url()
看上去,貌似以下三个调用的分别是Route的那行代码的三个不同的部分。
方式一
<a href="{{ url('url') }}">url()</a> 方式二
<a href="{{ action('StudentController@urlTest') }}">action()</a> # 写得太长 方式三
<a href="{{ route('url') }}">route()</a>
添加后效果:
[Laravel] 04 - Blade templates的更多相关文章
- TODO:Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- laravel 模板 blade
控制器布局 在Laravel框架中使用模板的一种方法就是通过控制器布局.通过在控制器中指定 layout 属性,对应的视图会被创建并且作为请求的默认返回数据. 在控制器中定义一个布局 class Us ...
- Laravel 4 Blade模板引擎
http://my.oschina.net/5say/blog/201290 模板输出 基本输出 1 <!-- app/views/example.blade.php --> 2 < ...
- Laravel 解决blade模板转义html标签问题
当我们使用富文本编译器(如:Ueditor编译器)保存编辑的内容后,在blade模板中,想要显示原生的html标签内容时该怎么做? 首先,了解下laravel {{ 变量名 }} 与{!! 变量名 ! ...
- laravel的blade模板的布局嵌套
测试路由 Route::get('/', function() { $value = [,,]; return view('home.index', array('data' => $value ...
- laravel中Blade模板继承
Blade模板继承 和 区块 <!-- 文件保存于 resources/views/layouts/app.blade.php --> <html> <head> ...
- js中写laravel模板blade语法和PHP逻辑解决方法
在js中是否能够执行blade的语法?或者说在js中能否处理PHP逻辑呢? 答案是,当然的 下面来看需求:在提交表单,完成入库操作后,使用 return redirect(route('admin.u ...
- [Code::Blocks] Install wxWidgets & openCV
The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...
- 本人SW知识体系导航 - Programming menu
将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...
随机推荐
- C#基础_循环
1,三元运算符 表达式1?表达式2:表达式3 栗子1:bool result=5>3?true:false; 栗子2: int num=5>3?1:0; 注意事项以及相应规则: 2, 3, ...
- register form
<code class="language-html"><div class="width100 marT15 content_news_list&qu ...
- android:四种基本布局
一个丰富的界面总是要由很多个控件组成的,那我们如何才能让各个控件都有条不紊地 摆放在界面上,而不是乱糟糟的呢?这就需要借助布局来实现了.布局是一种可用于放置很 多控件的容器,它可以按照一定的规律调整内 ...
- 最课程阶段大作业之01:使用SVN实现版本控制
版本控制在友军那里都是放在整个培训的最后阶段才开始讲的,但我们打算放到SE阶段.与其匆匆在项目实战阶段弄个半生不熟,然后进入实际工作中接受他人对你的怀疑,不如……早死早超生~~~. 可是,我们毕竟现在 ...
- PKCS 15 个标准
PKCS 全称是 Public-Key Cryptography Standards ,是由 RSA 实验室与其它安全系统开发商为促进公钥密码的发展而制订的一系列标准. 可以到官网上看看 What i ...
- Android 里的数据储存
数据持久化 关于数据储存,这个话题已经被反复讨论过很多次了,我是不建议把网络存储这种方式纳入到数据储存的范围的,因为这个和Android没多少关系,因此就有如下的分类: 本地储存(也称之为数据持久化, ...
- 使用go语言操作db2
操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 db2版本: db2_v101_linuxx64_expc 问题描述 怎么使用go语言在CentO ...
- jenkins执行shell提示命令不存在
问题描述: jenkins编译项目,不继承linux环境变量 ~/.bash_profile ~/.bashrc /etc/profile,导致在执行shell脚本,提示命令找不到! [sz-hg ...
- dos 批量重命名 bat
@echo off setlocal enabledelayedexpansion echo %var% set /a i = i + var for %%x in (*) do ( if not & ...
- AJAX技术之DWR框架
DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...