3.2.5 使用V層顯示數據 · ThinkPHP5.0入門實例教程

#MVC 有一種設計模式叫做MVC，我們現在已經接觸了可以被用戶直接觸發的C，也有了可以直接訪問數據表的M，還差一個叫做視圖的V（View）。我們比喻的官方一些，MVC是這樣的：從用戶發送數據開始，經歷1-2-3-4-5-6步，再將數據返回給用戶。如下圖所示： ![](https://box.kancloud.cn/2016-06-13_575e5befcb576.png) 當然了，在沒有使用V以前，我們傳遞數據的過程是1-2-3-6。對于MVC的理解，下圖可能更加直觀： ![](https://box.kancloud.cn/2016-08-01_579ef65fad719.png) 推薦學習以下視頻： http://www.imooc.com/video/5019 ## 引用V層沒錯，V層就是用來對數據進行包裝的。那么C層呢，C層就是個大指揮官，它從這邊拿點數據，從那邊拿點數據，讓這個處理處理，讓那個處理處理。然后讓這個包裝一下，讓那個包裝一下，最后它感覺滿意了，再把包裝好的產品一并返回給用戶。 M層呢？就是用來被C層調用的，我們前面已經講過了怎么調用M層，本節主要講怎么調用V層。 ### 引用think\Controller 引用后代碼如下： ~~~ <?php namespace app\index\controller; // 該文件位于application\index\controller文件夾 use think\Controller; // 用于與V層進行數據傳遞 use app\common\model\Teacher; // 教師模型 /** * 教師管理，繼承think\Controller后，就可以利用V層對數據進行打包了。 */ class TeacherController extends Controller { public function index() { $Teacher = new Teacher; $teachers = $Teacher->select(); // 向V層傳數據 // 取回打包后的數據 // 將數據返回給用戶 } } ~~~ ### 建立V層文件和C層一樣，V層文件的位置也是固定的，每一個V層文件默認對應一個action。我們看到，V層的文件，位于同模塊下的view文件夾下，與控制器的名字和方法的名字相對應。如下圖所示： ![](https://box.kancloud.cn/0de080899f8c97d20d465ed4b767155a_713x248.png) **注意Teahcer文件夾名與控制器名完全對應（大小寫），并省略Controller后綴。** V層文件(application\index\view\Teacher\index.html)代碼如下： ~~~ Hello I am V of TeahcerController\index ~~~ V層代碼位置如下圖所示： ![](https://box.kancloud.cn/91b8f143d6f6d50d31543af76fc6b7b7_760x233.png) ### 補齊C層代碼 ~~~ public function index() { $Teacher = new Teacher; $teachers = $Teacher->select(); // 向V層傳數據 $this->assign('teachers', $teachers); // 取回打包后的數據 $htmls = $this->fetch(); // 將數據返回給用戶 return $htmls; } ~~~ 測試結果顯示如下： ![](https://box.kancloud.cn/726795404a0a5f9847dfa55f6e80845f_412x75.png) 在上述方法中，我們使用了$this->assign()調用了其父類(think\Controller)中的assign()函數。如果我們忘記在定義類時，做繼承操作，那么將會出現以下錯誤: **Call to undefined method app\index\controller\TeacherController::assign()** 譯為：調用了一個在app\index\controller\TeacherController中沒有被定義的assign()方法。解決的方法當然也很簡單了，將`class TeacherController`改為`class TeacherController extends Controller`就可以了。 > 什么是$this？簡單來說，$this = 我自己，$this->assign()調用我自己（自己沒有就找父類，父類沒有就找父父類）的assign()方法。前面已經講過了，我們這個類是沒有，但是它的父類有，正是我們繼承了think\Controller，所以我們也就可以在TeacherController里面使用think\Controller中的方法。 ### 在V層中查看變量我們在V層中的文件index.html中，輸入以下代碼： ~~~  {:var_dump($teachers)} ~~~ 測試結果顯示如下： ![](https://box.kancloud.cn/b32820e3b2690c87199bd6d883c0fa84_678x368.png) 沒有什么技巧，這東西是thinkphp規定好的，我們記住就可以了，至于為什么可以這樣用，我們在后續進階教程中會專門針對「標簽」這個東西，與大家進行詳細的交流。 #### assign() 我們再來看下Think\Controller中的assign()函數： ~~~ /** * 模板變量賦值 * @access protected * @param mixed $name 要顯示的模板變量 * @param mixed $value 變量的值 * @return void */ protected function assign($name, $value = '') { $this->view->assign($name, $value); } ~~~ 有人說，什么亂七八糟的代碼，我看不懂。沒關系，注釋能看懂就好了。注釋說的很清楚了，本函數的作用是給模板變量賦值，然后接收兩個變量，一個是要顯示在模板中的變量名，另一個是要傳入的變量的值。 > 良好的注釋習慣是通往優秀程序員的必經之路！重要的事情好像要說三遍：注釋、注釋、注釋！也就是說，我們也可以這樣寫： ~~~ public function index() { $Teacher = new Teacher; $teachers = $Teacher->select(); // 向V層傳數據 $this->assign('hello', $teachers); // 取回打包后的數據 $htmls = $this->fetch(); // 將數據返回給用戶 return $htmls; } ~~~ 然后我們在V層中這樣輸出： ~~~ {:var_dump($hello)} ~~~ 當然了，大多數情況下，我們都會這樣用 ~~~ // 向V層傳數據 $this->assign('teachers', $teachers); ~~~ 原因很簡單，變量名統一，更加易于記憶。 ### 引入html html代碼如下： ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>教師管理</title> </head> <body> <table> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>郵箱</th> <th>用戶名</th> </tr> <tr> <td>1</td> <td>張三</td> <td>男</td> <td>11@maol.com</td> <td>zhangsan</td> </tr> </table> </body> </html> ~~~ 測試效果： ![](https://box.kancloud.cn/c7c895005da4e70b2a18c967b10b1fd7_413x107.png) 測試發現整體沒有問題后，我們繼續，如果有界面不符合預期，需要先修改界面。 html的錯誤，直接通過firefox的查看源代碼來檢查，如果有錯誤，firefox會以紅色的字體標明。 ~~~ git checkout -f step3.2.5.1 ~~~ 執行上述命令后，上述示例代碼信息如下： C層： ![](https://box.kancloud.cn/dc1b22c4aaf68b691af75ea49b9ceb17_1112x501.png) V層： ![](https://box.kancloud.cn/5ae73b285f43d83c5f0dc2ffb753a37e_697x519.png) ### 加入動態數據在這里，我們用到一個標簽，叫做`volist`，作用是循環輸出一個數組。關于標簽的知識，我們以后需要參考官方的thinkphp5快速入門教程來進行單獨的學習。 > 有人說，太多了，我記不住。是的，我們也記不住。現在我們能夠不查手冊使用的，也就那么幾個常用的標簽，記住的原因還僅僅是我們用的多了而已。記住標簽不是我們學習的目標，每個框架的標簽都不一樣，記住去哪找標簽才是我們學習的目標。去哪找呢？thinkphp5官方手冊！加入volist標簽后的代碼如下： ~~~ <table> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>郵箱</th> <th>用戶名</th> </tr> {volist name="teachers" id="teacher"} <tr> <td>1</td> <td>張三</td> <td>男</td> <td>11@maol.com</td> <td>zhangsan</td> </tr> {/volist} </table> ~~~ 我們再測試一遍，測試的時候，我們只是刷新一次而已，并不麻煩，不要等寫了很多代碼后再統一刷新測試，并不是說那種方法不可以，而是說，我們現在的水平還沒有達到。測試結果如下所示： ![](https://box.kancloud.cn/2016-06-13_575e70e44a1c4.png) 我們看到成功的將張三的信息輸出了兩遍，說明volist成功的執行了。現在我們再加入一行測試代碼，讓我們能夠更清晰的看到teachers變量的結構。如下所示： ~~~ <body> <table> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>郵箱</th> <th>用戶名</th> </tr> {volist name="teachers" id="teacher"} <tr> <td>1</td> <td>張三</td> <td>男</td> <td>11@maol.com</td> <td>zhangsan</td> </tr> {/volist} </table> {:var_dump($teachers)} </body> ~~~ 測試結果如下所示： ![](https://box.kancloud.cn/1248c5790ac7afc91886501584f309ef_680x484.png) > 永遠不要認為加入測試代碼是件麻煩的事情，因為你盲人摸象才是真麻煩。在使用一個數據時，必須非常清楚的知道這個數據的類型及結構。好了，現在我們可以根據var_dump()出來的信息，進行數據的定制了。測試信息如下： ~~~ <body> <table> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>郵箱</th> <th>用戶名</th> </tr> {volist name="teachers" id="teacher" key="key"} <tr> <td>{$key}</td> <td>{$teacher->getData('name')}</td> <td>{$teacher->getData('sex')}</td> <td>{$teacher->getData('email')}</td> <td>{$teacher->getData('username')}</td> </tr> {/volist} </table> </body> ~~~ 刷新頁面，測試結果如下： ![](https://box.kancloud.cn/edf07f93bf29b70a37a31b7bdbac1c0c_491x129.png) ### 解決性別為0的問題性別為0，顯然不是我們想要的。這里，我們需要用到另外一個標簽 eq：即判斷如果是0，則顯示男，如果不是0，則顯示女。將性別一欄改寫為： ~~~ <td>{eq name='teacher->getData("sex")' value='0'}男{else /}女{/eq}</td> ~~~ >{eq}{/eq}我們叫做非自閉合標簽，也就是肯定有自己的另一半的。 >{else /}我們叫做自閉全標簽，不需要找自己的另一半。 >是的，這和HTML一樣。測試結果如下圖所示： ![](https://box.kancloud.cn/1561e6aa07ba2c89a41b3caee48c0f9f_483x129.png) 測試的時候，我們往往需要測試一個正確的，再測試一個錯誤的。拿到這里來講，就是我要測試一個男，還要測試一個女。這里的方法有兩個： 1、修改數據表：這個我們還沒怎么學。 2、修改代碼：是的，我們用這個。代碼修改為： ~~~ <td>{eq name='teacher->getData("sex")' value='1'}男{else /}女{/eq}</td> ~~~ 測試結果如下圖所示： ![](https://box.kancloud.cn/2016-06-13_575e70e5171b3.png) 最后，我們恢復正常的代碼，并且去除測試代碼： ~~~ <body> <table> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>郵箱</th> <th>用戶名</th> </tr> {volist name="teachers" id="teacher" key="key"} <tr> <td>{$key}</td> <td>{$teacher->getData('name')}</td> <td>{eq name='teacher->getData("sex")' value='0'}男{else /}女{/eq}</td> <td>{$teacher->getData('email')}</td> <td>{$teacher->getData('username')}</td> </tr> {/volist} </table> </body> ~~~ 最終，測試效果如下圖所示： ![](https://box.kancloud.cn/2016-06-13_575e70e5331ed.png) ~~~ git checkout -f step3.2.5.2 ~~~ 執行上述命令后，上述示例代碼信息如下： ![](https://box.kancloud.cn/394f9609a61de55ca5a66213e934a605_1098x568.png)