Day21-從基礎學習 ThinkPHP-內建標籤(1)

第 11 屆 iThome 鐵人賽

DAY 21

Modern Web

從基礎學習 ThinkPHP系列第 21 篇

11th鐵人賽 php 從基礎學習 thinkphp thinkphp

Ray

2019-09-22 00:06:32

1344 瀏覽

分享至

前言

前面有幾個章節我們其實已經用過幾個 ThinkPHP 內建的標籤語法，例如 volist，但卻沒有特別去介紹這幾個標籤的意思，所以將會有一個系列是介紹關於內建標籤的部分，首先我們就先來了解 volist 這個迴圈標籤吧!

volist 標籤

前面我們已經有使用過幾次這個迴圈標籤也就是 volist，那用法大致上如下：

{volist name="user" id="list"}
<ul class="list-group">
  <li class="list-group-item active">姓名:{$list.name}</li>
  <li class="list-group-item">體重:{$list.weight}</li>
  <li class="list-group-item">身高:{$list.height}</li>
</ul>
{/volist}

volist 標籤它是透過 name 來接收後端所傳送過來的資料，然後使用 id 來儲存並輸出，另外 volist 還有其他的參數可以使用，例如希望輸出的資料是從第二筆開始，那將會使用 offset 來設置起始值，不然希望限制長度是 1 呢?(當前資料表只有四筆)，那就會使用 length：

{volist name="user" id="list" offset="2" length="1"}
<ul class="list-group">
  <li class="list-group-item active">姓名:{$list.name}</li>
  <li class="list-group-item">體重:{$list.weight}</li>
  <li class="list-group-item">身高:{$list.height}</li>
</ul>
{/volist}

目前我資料庫有這四筆資料 ↓

預期會出現陳春嬌

所以接下來就可以來訪問看看是不是我們預期的結果吧~

預期成功

另外 volist 還有一個不錯的功能，也就是 empty，當如果內容沒有資料時，就會不輸出迴圈，而是改輸出 empty 的內容：

{volist name="user" id="list" offset="2" length="1" empty="無資料"}
<ul class="list-group">
  <li class="list-group-item active">姓名:{$list.name}</li>
  <li class="list-group-item">體重:{$list.weight}</li>
  <li class="list-group-item">身高:{$list.height}</li>
</ul>
{/volist}

但是可惜 empty 並不能直接寫入 HTML 格式，如果你想要傳入 HTML 格式，那就必須在 Controller 的 assign() 傳送 empty，例如：

$this->assign('empty','<span>無資料</span>')

然後前端就用 $empty 接收即可：

{volist name="user" id="list" offset="2" length="1" empty="$empty"}
<ul class="list-group">
  <li class="list-group-item active">姓名:{$list.name}</li>
  <li class="list-group-item">體重:{$list.weight}</li>
  <li class="list-group-item">身高:{$list.height}</li>
</ul>
{/volist}

那 KEY 呢?預設 ThinkPHP 如果你要輸出 KEY 的話，則是使用$i，除非你有特別設置 key 才會需要換寫法：

{volist name="user" id="list" key="index"}
<ul class="list-group">
  <li class="list-group-item">KEY:{$index}</li>
  <li class="list-group-item active">姓名:{$list.name}</li>
  <li class="list-group-item">體重:{$list.weight}</li>
  <li class="list-group-item">身高:{$list.height}</li>
</ul>
{/volist}

如果沒有設置 key 則只需使用默認 $i 即可：

{volist name="user" id="list"}
<ul class="list-group">
  <li class="list-group-item">KEY:{$i}</li>
  <li class="list-group-item active">姓名:{$list.name}</li>
  <li class="list-group-item">體重:{$list.weight}</li>
  <li class="list-group-item">身高:{$list.height}</li>
</ul>
{/volist}

for 標籤

for 的標籤比較單純，但是要注意這個迴圈並不能接收後端資料，所以只是單純的迴圈而已，假設你今天想要輸出 1~100，那就只需要這樣寫即可：

{for start="1" end="100" name="item"}
  {$item}
{for/}

這邊我就不示範了，如果你是希望偶數進行的話，那就加上 step，step 預設是 1：

{for start="1" end="100" step="2" name="item"}
  {$item}
{for/}

step 意旨累加方式，改為 2 就是迴圈每次都會 +2 以類推。

foreach 標籤

最後介紹另一個類似 volist 的標籤，這個 foreach 標籤與 volist 很雷同，但是寫法會稍微不同，這邊我拿原本的 volist 改寫作範例：

<div class="container">
  <h1>{$title} - foreach 標籤</h1>
  {foreach $user as $vo}
  <ul class="list-group">
    <li class="list-group-item">KEY:{$vo.id}</li>
    <li class="list-group-item active">姓名:{$vo.name}</li>
    <li class="list-group-item">體重:{$vo.weight}</li>
    <li class="list-group-item">身高:{$vo.height}</li>
  </ul>
  {/foreach}
</div>

只是 foreach 還有一個特性，可以不透過 Controller 直接跟 Model 溝通要資料：

<div class="container">
  <h1>{$title} - foreach 標籤</h1>
  {foreach :model(user)->all() as $vo}
  <ul class="list-group">
    <li class="list-group-item">KEY:{$vo.id}</li>
    <li class="list-group-item active">姓名:{$vo.name}</li>
    <li class="list-group-item">體重:{$vo.weight}</li>
    <li class="list-group-item">身高:{$vo.height}</li>
  </ul>
  {/foreach}
</div>

但是我個人不推薦這種作法，因為這樣子滿容易導致維護上的問題發生，所以我個人還是建議使用 volist 即可。