Laravel 5 系列教程三：视图变量传递和Blade

头像
JellyBool
    阅读 6 分钟
    4

    原文来自： https://jellybool.com/post/programming-with-laravel-5-blade-views-with-var

    系列文章： http://segmentfault.com/blog/jellybool

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

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

    1. 向视图中传递变量

    2. Blade模板的用法

    3. 原来的数据库配置放下一节了

    向视图中传递变量

    我们在开发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.css和all.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

    下一节

    貌似上面配置数据库链接之后还没有用到，不用着急，我接下来的一篇会具体说说Eloquent的用法，这个在Laravel中是很有代表性的部分，希望你可以学到一点东西。

    Happy Hacking

    phplaravel
    JellyBool
    16.2k 声望2k 粉丝

    给学网 GeiXue.com 创始人：让每一个热爱编程的人都学有所成的精品课程。

    « 上一篇
    Laravel 5 系列教程二：路由，视图，控制器工作流程
    下一篇 »
    Laravel 5系列教程四：数据库和Eloquent

    引用和评论

    推荐阅读
    头像
    PHP 7.4 新特性

    JellyBool赞 15阅读 5.3k

    头像
    这些年

    注销赞 2阅读 4k

    头像
    一个用JavaScript生成思维导图(mindmap)的github repo

    注销赞 1阅读 6.2k

    头像
    从零开始 Elasticsearh Docker 单机集群

    zzMeow赞 1阅读 2.8k

    头像
    如何使用Visual Studio Code调试PHP CLI应用和Web应用

    注销赞 1阅读 2.5k

    头像
    深度剖析 Swoole6 PHP 多线程实现原理

    韩天峰赞 1阅读 959

    头像
    浅谈Fiori Design Guidelines

    注销阅读 2.2k

    0 条评论
    得票最新