脝脽隆壟脢脫脥錄潞脥脛攏擄氓 · tp5文檔

# 快速入門（七）：視圖和模板本章主要來學習視圖和模板的用法。前面只是在控制器方法里面直接輸出而沒有使用視圖模板功能，從現在開始來了解下如何把變量賦值到模板，并渲染輸出，主要內容包括： - - [模板輸出](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u6A21u677Fu8F93u51FA) - [分頁輸出](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u5206u9875u8F93u51FA) - [公共模板](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u516Cu5171u6A21u677F) - [模板定位](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u6A21u677Fu5B9Au4F4D) - [模板布局](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u6A21u677Fu5E03u5C40) - [標簽定制](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u6807u7B7Eu5B9Au5236) - [輸出替換](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u8F93u51FAu66FFu6362) - [渲染內容](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u6E32u67D3u5185u5BB9) - [助手函數](http://www.hmoore.net/thinkphp/thinkphp5_quickstart/147290#u52A9u624Bu51FDu6570) ## 模板輸出首先來看如何輸出一個數據集，我們修改`User`控制器的`index`方法如下： ``` <pre class="calibre18"> ``` <?phpnamespace app\index\controller; use app\index\model\User as UserModel; use think\Controller; class User extends Controller{ // 獲取用戶數據列表并輸出public function index(){ $list = UserModel::all(); $this->assign('list', $list); $this->assign('count', count($list)); return $this->fetch(); } } ``` ``` 這里的`User`控制器和之前模型章節有所不同，繼承了系統的`\think\Controller`類，該類對視圖類的方法進行了封裝，所以可以在無需實例化視圖類的情況下，直接調用視圖類的相關方法，包括：方法描述 assign 模板變量賦值 fetch 渲染模板文件 display 渲染內容 engine 初始化模板引擎這里用到的其中兩個方法`assign`和`fetch`，也是最常用的兩個方法。 `assign`方法可以把任何類型的變量賦值給模板，關鍵在于模板中如何輸出，不同的變量類型需要采用不同的標簽輸出。前面我們已經學習過，`fetch`方法默認渲染輸出的模板文件應該是當前控制器和操作對應的模板，也就是： ``` <pre class="calibre18"> ``` application/index/view/user/index.html ``` ``` 接下來，定義視圖文件的內容，采用`volist`標簽輸出數據集： ``` <pre class="calibre18"> ``` <!doctype html><html lang="en"><head><meta charset="UTF-8"><title>查看用戶列表</title><style>body{ color: #333; font: 16px Verdana, "Helvetica Neue", helvetica, Arial, 'Microsoft YaHei', sans-serif; margin: 0px; padding: 20px; }a{ color: #868686; cursor: pointer; }a:hover{ text-decoration: underline; } h2{ color: #4288ce; font-weight: 400; padding: 6px 0; margin: 6px 0 0; font-size: 28px; border-bottom: 1px solid #eee; }div{ margin:8px; }.info{ padding: 12px 0; border-bottom: 1px solid #eee; }.copyright{ margin-top: 24px; padding: 12px 0; border-top: 1px solid #eee; }</style></head><body><h2>用戶列表（{$count}）</h2> {volist name="list" id="user" } <div class="info"> ID：{$user.id}<br/> 昵稱：{$user.nickname}<br/> 郵箱：{$user.email}<br/> 生日：{$user.birthday}<br/></div> {/volist} <div class="copyright"><a title="官方網站" href="http://www.thinkphp.cn">ThinkPHP</a><span>V5</span><span>{ 十年磨一劍-為API開發設計的高性能框架 }</span></div></body></html> ``` ``` `ThinkPHP5.0`默認使用的是一個內置的編譯型模板引擎，包含了一系列的模板標簽，我們會陸續介紹一些常用的標簽用法。 index方法給模板賦值了兩個變量`count`和`list`，分別是標量和二維數組，標量的輸出很簡單，使用： `{$count}`便可，一看就明白。二維數組通常使用`volist`標簽輸出。 ``` <pre class="calibre18"> ``` {volist name="list" id="user"} ID：{$user.id} 昵稱：{$user.nickname} 郵箱：{$user.email} 生日：{$user.birthday} ------------------------ {/volist} ``` ``` `volist`標簽的`name`屬性就是模板變量的名稱，`id`屬性則是定義每次循環輸出的變量，在volist標簽中間使用`{$user.id}`表示輸出當前用戶的id屬性，以此類推下面的內容則依次輸出用戶的相關屬性。 ``` <pre class="calibre18"> ``` ID：{$user.id} 昵稱：{$user.nickname} 郵箱：{$user.email} 生日：{$user.birthday} ``` ``` 來看下實際的輸出效果，訪問URL地址： ``` <pre class="calibre18"> ``` http: //tp5.com/user/index ``` ``` 就可以看到頁面輸出結果如圖： ![](https://img.kancloud.cn/f8/50/f85016b4a0cb477df792df808b75cfc1_476x462.png) 當然，實際看到的數據可能有所出入。 ## 分頁輸出可以很簡單的輸出用戶的分頁數據，控制器`index`方法修改為： ``` <pre class="calibre18"> ``` // 獲取用戶數據列表public function index(){ // 分頁輸出列表每頁顯示3條數據$list = UserModel::paginate(3); $this->assign('list',$list); return $this->fetch(); } ``` ``` 模板文件修改為： ``` <pre class="calibre18"> ``` <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css" /> <h2>用戶列表（{$list->total()}）</h2> {volist name="list" id="user"} ID：{$user.id} 昵稱：{$user.nickname} 郵箱：{$user.email} 生日：{$user.birthday} ------------------------ {/volist} {$list->render()} ``` ``` > 注意，由于演示需要，在模板中引入了bootstrap樣式文件。請按照所示位置存放。多插入一些數據后，訪問下面的地址： ``` <pre class="calibre18"> ``` http: //tp5.com/user/index ``` ``` 后可以看到輸出如圖所示： ![](https://img.kancloud.cn/44/48/4448a054fdf482951dc3c8ef27b5378f_476x600.png) ## 公共模板加上之前定義的創建用戶的模板，現在已經有兩個模板文件了，為了避免重復定義模板，可以把模板的公共頭部和尾部分離出來，便于維護。我們把模板文件拆分為三部分： ``` <pre class="calibre18"> ``` application/index/view/user/header.html application/index/view/user/index.html application/index/view/user/footer.html ``` ``` `header.html`內容為： ``` <pre class="calibre18"> ``` <!doctype html><html lang="en"><head><meta charset="UTF-8"><title>查看用戶列表</title><style>body{ color: #333; font: 16px Verdana, "Helvetica Neue", helvetica, Arial, 'Microsoft YaHei', sans-serif; margin: 0px; padding: 20px; }a{ color: #868686; cursor: pointer; }a:hover{ text-decoration: underline; } h2{ color: #4288ce; font-weight: 400; padding: 6px 0; margin: 6px 0 0; font-size: 28px; border-bottom: 1px solid #eee; }div{ margin:8px; }.info{ padding: 12px 0; border-bottom: 1px solid #eee; }.copyright{ margin-top: 24px; padding: 12px 0; border-top: 1px solid #eee; }</style></head><body> ``` ``` `footer.html`內容為： ``` <pre class="calibre18"> ``` <div class="copyright"><a title="官方網站" href="http://www.thinkphp.cn">ThinkPHP</a><span>V5</span><span>{ 十年磨一劍-為API開發設計的高性能框架 }</span></div></body></html> ``` ``` `index.html`內容為： ``` <pre class="calibre18"> ``` {include file="user/header" /} <h2>用戶列表（{$count}）</h2> {volist name="list" id="user" } <div class="info"> ID：{$user.id} 昵稱：{$user.nickname} 郵箱：{$user.email} 生日：{$user.birthday} </div> {/volist} {include file="user/footer" /} ``` ``` 公共頭部模板文件中可能存在一些變量，例如這里的頁面標題不同的頁面會有不同，可以使用 ``` <pre class="calibre18"> ``` {include file="user/header" title="查看用戶列表" /} ``` ``` 然后把頭部模板文件中的 ``` <pre class="calibre18"> ``` <title>查看用戶列表</title> ``` ``` 改為： ``` <pre class="calibre18"> ``` <title>[title]</title> ``` ``` 再次訪問頁面可以看到輸出結果： ![](https://img.kancloud.cn/5b/14/5b1428373ea05fac9eb233d35dca4759_885x746.png) 如果需要傳遞多個變量，則使用多個屬性即可，例如： ``` <pre class="calibre18"> ``` {include file="user/header" title="查看用戶列表" keywords="thinkphp" /} ``` ``` 也可以支持傳遞動態變量的方式，例如： ``` <pre class="calibre18"> ``` {include file="user/header" title="$title" /} ``` ``` ## 模板定位 `fetch`方法的第一個參數表示渲染的模板文件或者模板表達式。通常我們都是使用的模板表達式，而不需要使用完整的文件名。模板文件名可以隨意命名，如果把`index.html`文件改成： ``` <pre class="calibre18"> ``` application/index/view/user/list.html ``` ``` index操作方法中的fetch方法需要改成： ``` <pre class="calibre18"> ``` return $this->fetch('list'); ``` ``` 而如果fetch方法改成： ``` <pre class="calibre18"> ``` return $this->fetch('index/list'); ``` ``` 那么實際渲染的模板文件則是 ``` <pre class="calibre18"> ``` application/index/view/index/list.html ``` ``` 當然，你可以設置更多的目錄級別，例如： ``` <pre class="calibre18"> ``` return $this->fetch('one/two/three/list'); ``` ``` 那么實際渲染的模板文件則是 ``` <pre class="calibre18"> ``` application/index/view/one/two/three/list.html ``` ``` 有一些和模板定位相關的設置參數能夠幫助你調整模板文件的位置和名稱。通常來說，模板相關的參數可以直接在配置文件中配置`template`參數，默認的配置如下： ``` <pre class="calibre18"> ``` 'template' => [ // 模板引擎類型支持 php think 支持擴展'type' => 'Think', // 模板路徑'view_path' => '', // 模板后綴'view_suffix' => '.html', // 模板文件名分隔符'view_depr' => DS, // 模板引擎普通標簽開始標記'tpl_begin' => '{', // 模板引擎普通標簽結束標記'tpl_end' => '}', // 標簽庫標簽開始標記'taglib_begin' => '{', // 標簽庫標簽結束標記'taglib_end' => '}', ], ``` ``` `view_path`參數決定了你的模板文件的根目錄，如果沒有設置的話系統會默認使用當前模塊的視圖目錄`view`。如果希望自定義模板文件的位置、命名和后綴，可以對模板參數稍加修改如下： ``` <pre class="calibre18"> ``` 'template' => [ // 模板引擎類型支持 php think 支持擴展'type' => 'Think', // 模板路徑'view_path' => '../template/index/', // 模板后綴'view_suffix' => '.tpl', // 模板文件名分隔符'view_depr' => '_', ], ``` ``` 通過配置我們把當前渲染的模板文件移動到了 ``` <pre class="calibre18"> ``` ROOT_PATH/template/index/user_index.tpl ``` ``` ## 模板布局現在使用模板布局來進一步簡化模板定義。首先需要定義一個布局模板文件，放到 `application/index/view/layout.html`內容如下： ``` <pre class="calibre18"> ``` {include file="user/header" /} {__CONTENT__} {include file="user/footer" /} ``` ``` `application/index/view/user/index.html`改成： ``` <pre class="calibre18"> ``` {layout name="layout" /} <h2>用戶列表（{$count}）</h2> {volist name="list" id="user" } <div class="info"> ID：{$user.id} 昵稱：{$user.nickname} 郵箱：{$user.email} 生日：{$user.birthday} </div> {/volist} ``` ``` 在index模板文件中開頭定義`layout`標簽，表示當前模板使用了布局，布局模板文件為`layout.html`，布局模板中的 `{__CONTENT__}`會自動替換為解析后的index.html內容。如果你的布局模板中不是使用`{__CONTENT__}`的話，可以改成： ``` <pre class="calibre18"> ``` {layout name="layout/newlayout" replace="[__REPLACE__]" /} ``` ``` 那么回自動讀取模板文件 `application/index/view/layout/newlayout.html`，內容如下： ``` <pre class="calibre18"> ``` {include file="user/header" /} [__REPLACE__] {include file="user/footer" /} ``` ``` 如果你所有的模板文件都統一使用布局，并且都是有同一個布局模板，那么可以統一配置而不需要在模板文件中使用`layout`標簽定義。在應用配置或者模塊配置中添加如下設置參數： ``` <pre class="calibre18"> ``` 'template' => [ 'layout_on' => true, 'layout_name' => 'layout', 'layout_item' => '[__REPLACE__]' ] ``` ``` 模板文件中只需要定義如下： ``` <pre class="calibre18"> ``` <h2>用戶列表（{$count}）</h2> {volist name="list" id="user" mod="2" } <div class="info"> ID：{$user.id} 昵稱：{$user.nickname} 郵箱：{$user.email} 生日：{$user.birthday} </div> {/volist} ``` ``` 訪問 ``` <pre class="calibre18"> ``` http: //tp5.com/user/index ``` ``` 可以看到頁面輸出結果和之前一樣： ![](https://img.kancloud.cn/5b/14/5b1428373ea05fac9eb233d35dca4759_885x746.png) 如果想動態控制模板文件使用布局，則可以在控制器中使用： ``` <pre class="calibre18"> ``` // 獲取用戶數據列表public function index(){ $list = UserModel::all(); $this->assign('list', $list); $this->assign('count', count($list)); // 動態使用布局$this->view->engine->layout('layout','[__REPLACE__]'); return $this->fetch(); } ``` ``` > 注意：這里調用的是`this->view->engine`對象的`layout`方法，并不是所有的模板引擎都支持布局功能，如果你使用的是其它的模板引擎，可能不提供`layout`方法。如果使用配置方式開啟了布局模板，也可以使用該方法臨時關閉布局，例如： ``` <pre class="calibre18"> ``` // 獲取用戶數據列表public function index(){ $list = UserModel::all(); $this->assign('list', $list); $this->assign('count', count($list)); // 臨時關閉布局$this->view->engine->layout(false); return $this->fetch(); } ``` ``` 或者直接在模板文件的開頭加上`{__NOLAYOUT__}`標簽： ``` <pre class="calibre18"> ``` {__NOLAYOUT__} <h2>用戶列表（{$count}）</h2> {volist name="list" id="user" mod="2" } <div class="info"> ID：{$user.id} 昵稱：{$user.nickname} 郵箱：{$user.email} 生日：{$user.birthday} </div> {/volist} ``` ``` ## 標簽定制可以設置模板標簽的定界符： ``` <pre class="calibre18"> ``` 'template' => [ // 模板引擎類型支持 php think 支持擴展'type' => 'Think', // 模板路徑'view_path' => '../template/index/', // 模板后綴'view_suffix' => '.tpl', // 模板文件名分隔符'view_depr' => '_', // 模板引擎普通標簽開始標記'tpl_begin' => '{', // 模板引擎普通標簽結束標記'tpl_end' => '}', // 標簽庫標簽開始標記'taglib_begin' => '<', // 標簽庫標簽結束標記'taglib_end' => '>', ], ``` ``` 并且修改`index.html`模板中的標簽修改如下： ``` <pre class="calibre18"> ``` <h2>用戶列表（{$count}）</h2><div class="info"><volist name="list" id="user" > ID：{$user.id}<br/> 昵稱：{$user.nickname}<br/> 郵箱：{$user.email}<br/> 生日：{$user.birthday}<br/></volist></div> ``` ``` ## 輸出替換為了更加清晰，需要把資源文件獨立出來，并在模板文件中引入，例如增加`public/static/common.css`文件： ``` <pre class="calibre18"> ``` body{ color: #333; font: 16px Verdana, "Helvetica Neue", helvetica, Arial, 'Microsoft YaHei', sans-serif; margin: 0px; padding: 20px; }a{ color: #868686; cursor: pointer; }a:hover{ text-decoration: underline; } h2{ color: #4288ce; font-weight: 400; padding: 6px 0; margin: 6px 0 0; font-size: 28px; border-bottom: 1px solid #eee; }div{ margin:8px; }.info{ padding: 12px 0; border-bottom: 1px solid #eee; }.copyright{ margin-top: 24px; padding: 12px 0; border-top: 1px solid #eee; } ``` ``` 我們在header.html文件中引入資源文件 ``` <pre class="calibre18"> ``` <html><head><meta charset="UTF-8"><title>[title]</title><link charset="utf-8" rel="stylesheet" href="/static/common.css"></head><body> ``` ``` 但這樣有一個問題，如果部署的目錄變化的話，資源文件的路徑就會跟著變化，這里我們采用輸出替換功能，使得資源文件的引入動態化可以在輸出之前對解析后的內容進行替換，使用： ``` <pre class="calibre18"> ``` // 讀取用戶數據public function read($id=''){ $user = UserModel::get($id); $this->assign('user',$user); $this->view->replace([ '__PUBLIC__' => '/static', ]); return $this->fetch(); } ``` ``` 模板文件改為： ``` <pre class="calibre18"> ``` <html><head><meta charset="UTF-8"><title>[title]</title><link charset="utf-8" rel="stylesheet" href="__PUBLIC__/common.css"></head><body> ``` ``` 最終輸出的時候，會自動進行`__PUBLIC__`替換。 ## 渲染內容有時候，并不需要模板文件，而是直接渲染內容或者讀取數據庫中存儲的內容，控制器方法修改如下： ``` <pre class="calibre18"> ``` <?phpnamespace app\index\controller; use app\index\model\User as UserModel; use think\Controller; class User extends Controller{ // 獲取用戶數據列表并輸出public function index(){ $list = UserModel::all(); $this->assign('list', $list); $this->assign('count', count($list)); // 關閉布局 $this->view->engine->layout(false); $content = <<<EOT <style> body{ color: #333; font: 16px Verdana, "Helvetica Neue", helvetica, Arial, 'Microsoft YaHei', sans-serif; margin: 0px; padding: 20px; } a{ color: #868686; cursor: pointer; } a:hover{ text-decoration: underline; } h2{ color: #4288ce; font-weight: 400; padding: 6px 0; margin: 6px 0 0; font-size: 28px; border-bottom: 1px solid #eee; } div{ margin:8px; } .info{ padding: 12px 0; border-bottom: 1px solid #eee; } .copyright{ margin-top: 24px; padding: 12px 0; border-top: 1px solid #eee; } </style> <h2>用戶列表（{\$count}）</h2> <div> {volist name="list" id="user" } ID：{\$user.id} 昵稱：{\$user.nickname} 郵箱：{\$user.email} 生日：{\$user.birthday} ------------------------ {/volist} </div> <div class="copyright"> <a title="官方網站" href="http://www.thinkphp.cn">ThinkPHP</a> V5 { 十年磨一劍-為API開發設計的高性能框架 } </div> EOT;return $this->display($content); } } ``` ``` `display`方法用于渲染內容而不是模板文件輸出，和直接使用`echo`輸出的區別是`display`方法輸出的內容支持模板標簽的解析。 ## 助手函數可以使用系統提供的助手函數view簡化模板渲染輸出（注意不適用于內容渲染輸出）：前面的模板渲染代碼可以改為： ``` <pre class="calibre18"> ``` <?phpnamespace app\index\controller; use app\index\model\User as UserModel; class User{ // 讀取用戶數據public function read($id=''){ $user = UserModel::get($id); return view('', ['user' => $user], ['__PUBLIC__' => '/static']); } } ``` ``` > 使用`view`助手函數，不需要繼承`think\Controller`類。該方法的第一個參數就是渲染的模板表達式。