公司導入 Laravel 分享 - 4. 視圖

一、繼承

Laravel 的樣板系統有一個很方便的功能是「繼承」,主要是用來定義網站 html 的結構。
通常一個網頁的 page-header、page-footer、側邊選單是一個固定的結構並不常改變,幾乎每一個頁面都是一樣的,這個時候繼承這個功能就很好用。
  1. <!-- layouts/app.blade.php -->
  2. <html>
  3. <head>
  4. <title>應用程式名稱 - @yield('title')</title>
  5. </head>
  6. <body>
  7. <div class="page-header">
  8. 我是 Page Header
  9. </div>
  10.  
  11. <div class="page-sidebar">
  12. 我是側邊攔
  13. </div>
  14.  
  15. <div class="page-body">
  16. @yield('content')
  17. </div>
  18.  
  19. <div class="page-footer">
  20. 我是 Page Footer
  21. </div>
  22. </body>
  23. </html>
有了上面這個檔案,我們其他頁面的樣板要撰寫時就去繼承他
  1. // 頁面
  2. @extends('layouts.app')
  3.  
  4. @section('title', '頁面標題')
  5.  
  6. @section('content')
  7. <p>頁面內容。</p>
  8. @endsection
所以這樣組裝之後,其實我們得到的是
  1. <html>
  2. <head>
  3. <title>網站名稱 - 頁面標題</title>
  4. </head>
  5. <body>
  6. <div class="page-header">
  7. 我是 Page Header
  8. </div>
  9.  
  10. <div class="page-sidebar">
  11. 我是側邊攔
  12. </div>
  13.  
  14. <div class="page-body">
  15. <p>頁面內容。</p>
  16. </div>
  17.  
  18. <div class="page-footer">
  19. 我是 Page Footer
  20. </div>
  21. </body>
  22. </html>

二、載入

除了可以繼承之外當然我們還有載入可以用。
比如說我們在新增、編輯頁面看到的表單內容幾乎是一樣的,可又有些許不同,可能是 form action 或是 按鈕文字,這時我們可以把中間相同的部分截取出來做成一個新的檔案,讓新增、編輯頁面去載入他。
  1. <!-- _form.blade.php -->
  2. <div class="form-group">
  3. <label class="col-sm-2 control-label">標題</label>
  4. <div class="col-sm-10">
  5. <input class="form-control" type="text" name="title">
  6. </div>
  7. </div>
  8.  
  9. <div class="form-group">
  10. <label class="col-sm-2 control-label">內容</label>
  11. <div class="col-sm-10">
  12. <textarea class="form-control" name="content"></textarea>
  13. </div>
  14. </div>
  15.  
  16. <div class="text-center">
  17. <input type="submit" class="btn btn-primary" name="submit" value="送出">
  18. </div>
  1. // create.blade.php
  2. @extends('layouts.app')
  3.  
  4. @section('title', '新增')
  5.  
  6. @section('content')
  7. <form class="form-horizontal" action="{{ route('post.store') }}" method="post">
  8. @include('post._form')
  9. </form>
  10. @endsection

三、顯示變數

在樣板中我們如果要輸出變數可以適用「大括弧」把變數包起來,這會把變數當成「字串」直接輸出在網頁上
  1. {{ $name }}
  2.  
  3. {{ <input type="text"> }}
如果我們希望得到的結果是 html,則必須使用:
{!! <input type="text"> !!}

四、控制結構

1. if else

  1. @if (count($posts) === 1)
  2. 我有一篇文章!
  3. @elseif (count($posts) > 1)
  4. 我有多篇文章!
  5. @else
  6. 我沒有任何文章!
  7. @endif

2. loop

for

  1. @for ($i = 0; $i < 10; $i++)
  2. 目前的值為 {{ $i }}
  3. @endfor

foreach

  1. @foreach ($posts as $post)
  2. <p>文章標題:{{ $post->title }}</p>
  3. @endforeach

while

  1. @while (true)
  2. <p>
  3. 我永遠都在跑迴圈。NO~~~
  4. </p>
  5. @endwhile
迴圈有一個地方很常被應用到,知道是哪裡嗎?

留言