視圖

這裏會介紹如何在 Laravel 5 處理視圖（View）

Laravel 的視圖是放在 resource/views 目錄內

建立共用的視圖

我們網頁常常會出現 header 跟 footer 在不同的視圖中為相同的狀況，唯一有變的只有中間的內容隨著不同的請求而有變動，如果有這樣的設計需求，我們可以替所有視圖建立共用的視圖，假設我們把這個共用的視圖放在 resource/view/app.blade.php 下，其內容可能是：

<!-- resource/view/app.blade.php -->
<!doctype html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>我的網站</title>
</head>

<body>
    <div class="container">
        @yield('content')
    </div>

    @yield('other_info')
</body>

</html>

如果我們要顯示文章的資訊在 content 中，文章的說明在 other_info 中，我們可以在 blade 中這樣設定：

<!-- resource/view/article.blade.php -->
@extend('app')

@section('content')
    <h1>文章標題</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
    </p>
@stop


@section('other_info')
    其他資訊
@stop

這樣 Laravel 就會幫我們把相對應的資訊塞到 app.blade.php 當中相對應的位置

引入共用的視圖

假如我們要在特定的某幾頁使用 Facebook 留言板，像是：

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.3&appId=12345566";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="http://laravel5-book.kejyun.com/" data-numposts="5" data-colorscheme="light"></div>

但我們不想要這些相同的程式碼片段散落在各個不同的視圖中，我們可以把它整理在 resource/views/vendor/_fbcomment.blade.php 當中

然後在文章視圖當中我們就可以這樣去引入 Facebook 留言板：

<!-- resource/view/article.blade.php -->
@extend('app')

@section('content')
    <h1>文章標題</h1>
    <p>
        Lorem ipsum dolor sit amet
    </p>

    @include('vendor/_fbcomment')
    @include('vendor._fbcomment')
@stop


@section('other_info')
    其他資訊
@stop

傳入變數到引用的視圖當中

在我們新增與編輯文章的視圖當中，幾乎所有的視圖都是一樣的，不一樣的地方可能只有「表單處理的 action 不同（create & edit）」、「送出的按鈕文字不同（新增違章 & 編輯文章）」

但我們還是希望兩個視圖能夠一起被引用，把其他不同的地方當作變數傳入，就可以達到視圖重構的效果，避免類似的視圖重複出現在不同地方，像是：

<!-- resource/view/partials/articles/_form.blade.php -->
{!! Form::label('title','標題') !!}
{!! Form::text('title', null) !!}

{!! Form::label('content','內文') !!}
{!! Form::text('content', null) !!}

{!! Form::submit($submitButtonText) !!}

當我們要引用表單的視圖，則必須把按鈕的文字傳送給表單，像是：

<!-- resource/view/article.blade.php -->
@extend('app')

@section('content')
  @include('partials/articles/_form', ['submitButtonText' => '新增文章'])

  @include('partials/articles/_form', ['submitButtonText' => '編輯文章'])
@stop


@section('other_info')
    其他資訊
@stop

備註

引用或載入視圖路徑

在使用 blade 中的 @extend() 或 @include() 函數，他所參照的視圖相對位置是從 resource/views/ 開始的

所以如果你的視圖是放在 resource/views/partials/other.blade.php 中，你要引用或載入的話則可以用 . 或 / 去指定相對的視圖位置，像是：

<!-- 引用 -->
@extend('partials._other')
@extend('partials/_other')

<!-- 載入 -->
@include('partials._other')
@include('partials/_other')

設計模式

樣板檔案名稱

通常若不是完整的視圖，僅是部分的視圖，通常會將檔案名稱最前面加上底線 _，用來告知團隊程式設計師這個 blade 視圖不是完整的視圖

參考資訊

KeJyun 最新新書推薦
Laravel 5 for beginner 新手道場：優雅運用框架快速開發 PHP 網站
Laravel框架开发详解：从零基础到运用框架快速开发PHP网站

Laravel 是 PHP 的框架（Framework），提供了很多開發網站或 API 所需的工具及環境，經過簡單的設定就可以完成資料的處理及顯示，使開發者可以很優雅且快速的開發出各個不同的產品。本書適合有 PHP 基礎的人，但不知道要怎麼選擇框架，或者不用框架的人也能夠明白它的好處。

雖然 WordPress 也能夠架站，但如果有客製化需求，要開發各式各樣的網站，或提供 App 使用的 API，如此一來你只能選擇用框架，而 Laravel 是目前最受歡迎的。

本書將解說為什麼要使用框架，以及理解框架的優缺點後，要怎麼選擇框架，並用框架快速建構一個網站。除非必要，否則書中會避免專業技術用語，盡量使用最生活化易懂的例子及語氣，讓大家更容易進入 Laravel 的世界。

購書連結

購書連結

results matching ""

    No results matching ""