免费视频教程地址https://laravist.com/series/laravel-5-basic

上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上一篇的计划,来说说下面几个内容:

  1. 向视图中传递变量
  2. Blade模板的用法

向视图中传递变量

我们在开发web应用当中,通常都不是为了写静态页面而生的,我们需要跟数据打交道,那么这个时候,问题就来了,在一个MVC的框架中,怎么将数据传给视图呢?比如我们要在 ArticleController 的 index 方法的视图输出一个$title 的变量,在Laravel中,有下面几种常见的方法:

使用with()方法

 public function index()
{
$title = '文章标题1';
return view('articles.lists')->with('title',$title);
}

这样的 with('title',$title) 中,第一个 'title' 就是key,第二个 $title 就是值,这样我们就可以在我们的 articles/lists.blade.php 中输出这个变量了:

<body>
<h1><?php echo $title; ?></h1> </body>

刷新我们的 blog.dev ,就可以看到类似这样的页面了:

而在blade引擎中,我们可以这样输出变量:

<body>
<h1>{{ $title }}</h1> </body>

其实在blade引擎中, {{ $title }} 会被解析为类似 这样的输出 <?php echo $title; ?> ,不过这里的 {{ }} 符号会将数据原样输出,比如你将 $title 写成这样:

 public function index()
{
$title = '<span style="color: red">文章</span>标题1';
return view('articles.lists')->with('title',$title);
}

这个时候你用 {{ $title }} 输出,会看到类似下面这样:

如果你想将 $title 作为页面元素渲染输出,你需要这样写:

<h1>{!! $title !!}</h1>

这里的 {{ }} 和 {!! !!} 是blade的最基础的用法,这两个我们会用得特别多,后面我会详细说说blade的用法。

直接给view()传参数

使用这个方法的时候,你可以这样写:

public function index()
{
$title = '<span style="color: red">文章</span>标题1';
return view('articles.lists',['title'=>$title]);
}

刷新页面,你依然会看到一样的输出。这里需要说明一下,如果你传多个变量,比如:

 public function index()
{
$title = '<span style="color: red">文章</span>标题1';
$intro = '文章一的简介';
return view('articles.lists',[
'title'=>$title,
'introduction'=>$intro
]);
}

在传递的数组中:

[
'title'=>$title,
'introduction'=>$intro
]

每一个key会在视图中作为变量,而 value 就作为变量的值。所以在视图中我们需要这样输出:

<body>
<h1>{!! $title !!}</h1>
<p>{{ $introduction }}</p>
</body>

这里应写成 {{ $introduction }} ,而不是 {{ $intro }} 。

使用compact

使用compact是这样写的:

 public function index()
{
$title = '<span style="color: red">文章</span>标题1';
$intro = '文章一的简介';
return view('articles.lists',compact('title','intro'));
}

compact() 的字符串可以就是变量的名字,多个变量名用逗号隔开。这个时候注意更改视图的变量输出。

以上就是Laravel中常用的几种向视图传递变量的方法,选择一种你喜欢的方式并坚持这一种写法就可以了,我是使用第三种。

Blade的基本用法

上面的内容介绍了一点点blade的语法,这里我们再统一介绍blade,说说下面几个比较常用的:

@yield()
@extends()
@if() and @unless()
@foreach()

@yield() 和 @extends() 通常会结合者使用,实现我们通常所说的layouts布局:就是在web开发的过程中,我们将一些公用的部分如 header , footer 等直接放在一个视图文件中,然后在使用的使用直接继承 (使用@extends) 就可以了,比如我们在 resources/views/ 文件夹之下创建一个 app.blade.php :

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Laravel 5 教程</title>
<link rel='stylesheet' href="/css/all.css" type='text/css' media='all'/>
<script type='text/javascript' src="/js/all.js"></script>
</head>
<body>
<div id="wrapper"> @yield('content') <nav class="nav-container group" id="nav-footer">
<div class="nav-wrap">
<ul class="nav container group">
<li class="menu-item">
<a href="/" rel="nofollow" target="_blank">Laravel 5 Blog</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

写上这么一些内容,其中css这个 href="/css/all.css" ,需要我们手动在public/ 文件夹之下创建css/文件夹,并创建all.css这个文件,对于js的src="/js/all.js"也是同理,这两个文件是为了后面的页面美化而做的提前准备。

注意到@yield('content')这个语法,这里就是说,这里有一个content的内容区域,如果某个页面继承了这个app.blade.php,然后那个页面就可以动态改变@yield('content')的内容了。比如我们在articles/lists.blade.php中,我们继承一下app.blade.php:

@extends('app')
@section('content')
<h1>{!! $title !!}</h1>
<p>{{ $intro }}</p>
@endsection

这里的第一行@extends('app')就是声明这个页面继承于app.blade.php,也就是我们的articles/lists.blade.php可以使用到all.cssall.js文件,然后@section('content')就是对于app.blade.php@yield('content'),表明就是:在渲染加载articles/lists.blade.php的时候,@yield('content')这部分内容会被替换为下面的内容:


<h1>{!! $title !!}</h1>
<p>{{ $intro }}</p>

@if()通常是用于在视图中根据某些条件来判断是否该显示某些内容,比如我们可以很“无聊”地试试这样:

public function index()
{
$first = 'jelly';
$last = 'bool';
return view('articles.lists',compact('first','last'));
}

在views文件中,我们使用一下@if():

@extends('app')
@section('content')
@if($first == 'jellybool')
<h1>{{ $first }}</h1>
@else
<h1>{{ $last }}</h1>
@endif
@endsection

刷新一下就可以看到页面的输出,为$last的值。

上面的@if(),还有一个可以使用的标签就是@unless()@unless()就可以理解为 if( ! ),就是if not 这样理解就OK。

@foreach()用于循环输出变量,比如:

public function index()
{
$first = ['jelly','bool'];
return view('articles.lists',compact('first'));
}

我们传一个数组给视图,然后,我们就可以使用@foreach()循环输出了:

@extends('app')
@section('content')
@foreach( $first as $name)
<h1> {{ $name }}</h1>
@endforeach
@endsection

刷新一下页面,就可以看到循环的结果了:

blade的更多知识,可以参考文档:

http://laravel.com/docs/5.1/blade

Laravel 5 系列教程三:视图变量传递和Blade的更多相关文章

  1. Laravel教程 三:视图变量传递和Blade

    Laravel教程 三:视图变量传递和Blade 此文章为原创文章,未经同意,禁止转载. Blade 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上一 ...

  2. CRL快速开发框架系列教程三(更新数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  3. Android Studio系列教程三--快捷键

    Android Studio系列教程三--快捷键 2014 年 12 月 09 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang.com/ ...

  4. NGUI系列教程三

    接下来我们再来看Progress Bar和Slider,对比参数我们可以发现,Progress Bar和slider的明显区别在于slider多一个Thumb选项,这里的Thumb就是我们拖动的时候点 ...

  5. 黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级) 企业库验证应用程序模块之配置文件模式: ...

  6. 黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级) 企业库提供了一个很强大的验证应用程序模 ...

  7. Fastify 系列教程三 (验证、序列化和生命周期)

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) 验证 Fast ...

  8. webpack4 系列教程(三): 多页面解决方案--提取公共代码

    这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...

  9. WPF系列教程——(三)使用Win10 Edge浏览器内核 - 简书

    原文:WPF系列教程--(三)使用Win10 Edge浏览器内核 - 简书 在需要显示一些 H5网站的时候自带的WebBrowser总是显示不了,WebBrowser使用的是IE内核,许多H5新特性都 ...

随机推荐

  1. date "+Y-%m-%d %H:%M"

     date "+Y-%m-%d %H:%M"    date | awk '{print "Year:"$6  "\t month:"$2  ...

  2. [Leetcode Week8]Triangle

    Triangle 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/triangle/description/ Description Given a t ...

  3. django使用celery进行耗时任务的优化

    # 原创,转载请留言联系 在用django做项目的时候,做到注册模块时,需要发送短信验证码.本来简简单单的做好了,后来优化的时候发现,发送短信验证码的时候需要一点时间,在这个时间之内程序是阻塞的,用户 ...

  4. jQuery获取标签中的元素

    获取双标签之间的内容 在JavaScript中,获取双标签之间的内容是这样的: <!DOCTYPE html> <html lang="en"> <h ...

  5. python中deque类详解

    最近在pythonTip做题的时候,遇到了deque类,以前对其不太了解,现在特此总结一下 deque类是python标准库collections模块中的一项,它提供了两端都可以操作的序列,这意味着, ...

  6. solr requestHandler

    使用哪一个handler: 1. 可以通过在url中追加有名字的handler(以 ' / ' 开头命名)的名称来指定使用哪一个handler. 如: <requestHandler name= ...

  7. CF 612C. Replace To Make Regular Bracket Sequence【括号匹配】

    [链接]:CF [题意]:给你一个只含有括号的字符串,你可以将一种类型的左括号改成另外一种类型,右括号改成另外一种右括号 问你最少修改多少次,才能使得这个字符串匹配,输出次数 [分析]: 本题用到了栈 ...

  8. 51nod 1265 四点共面【计算几何+线性代数】

    1265 四点共面 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出三维空间上的四个点(点与点的位置均不相同),判断这4个点是否在同一个平面内(4点共 ...

  9. usaco1.4.3等差数列

    为这道苟题鼓掌 题目: 一个等差数列是一个能表示成a, a+b, a+2b,…, a+nb (n=0,1,2,3,…)的数列.在这个问题中a是一个非负的整数,b是正整数.写一个程序来找出在双平方数集合 ...

  10. 洛谷——P1024 一元三次方程求解

    P1024 一元三次方程求解 题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-10 ...