Laravel教程三：視圖變量傳遞和Blade

上一篇我們簡單地說了Router，Views和Controllers的工作流程，這一次我就按照上一篇的計划，來說說下面幾個內容：

向視圖中傳遞變量
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.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