在第三天，我們創建了一個“增強版”的文章模塊，實現了數據從數據庫到視圖端展示的流程。但是我們僅僅是實現了數據列表的展示，對於文章詳情等頁面跳轉並未涉及。
本文重點講解phpWeChat一個十分重要的前端函數U()。
今天我們進入《10天學會phpWeChat》系列教程的第四天：大U函數U()的使用。
一、U()函數是干什么的？
根據phpWeChat官方手冊的解釋：http://wiki.phpwechat.com/38
函數：U($mod='',$action='index',$para=array())
參數：$mod 所在功能模塊 $action 動作 $para 更多參數
功能：獲取模塊訪問URL
舉例1：
1 <?php 2 <a href="{U('news','index')}">鏈接</a> // 返回 <a href="index.php?m=news&a=index">鏈接</a> 3 ?>
舉例2：
1 <?php 2 <a href="{U('news','show',array('id'=>'185'))}">鏈接</a> // 返回 <a href="index.php?m=news&a=show&id=185">鏈接</a> 3 ?>
根據以上的官方函數說明，我們可以清晰的認識到U()函數是一個自動生成前台URL地址的函數。
二、繼續！豐富我們的hello world功能模塊，增加文章詳情展示
1、改造hello world模塊的前端視圖文件template/default/index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文檔</title> 6 </head> 7 8 <body> 9 <ul> 10 {loop $data $r} 11 <li> 12 <h1><a href="{U('hello','detail',array('id'=>$r['id']))}">{$r['title']}</a></h1> 13 <p>{$r['content']}</p> 14 </li> 15 {/loop} 16 </ul> 17 </body> 18 </html>
如上面的代碼所示，我們為文章標題增加了一個<a>鏈接，用於指向文章詳情的跳轉。刷新前端訪問URL：http://www.example.com/index.php?m=hello&a=index，則呈現了如下效果：
如上圖所示，跟昨天不同的是，每個新聞標題都成了一個<a>鏈接，在U()函數的自動生成下，每個新聞的鏈接指向都到了 http://www.example.com/index.php?m=hello&a=detail&id=文章ID。
此時如果訪問這個地址，則出現模板不存在的提示。跟第二天講的一樣，我們需要編寫a=detail時對應的控制器路由程序case 'detail':和對應的前端視圖文件detail.html
2、在template/default/下新建一個detail.html文件，作為文章詳情的視圖文件。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文檔</title> 6 </head> 7 8 <body> 9 這是文章詳情的視圖文件 10 </body> 11 </html>
訪問文章詳情地址：http://www.example.com/index.php?m=hello&a=detail&id=3 則正常出現了如圖的顯示：
3、編寫文章詳情模型讀取方法
打開include/hello.class.php，我們新增dataGet()方法用於根據文章Id獲取文章數據：
1 <?php 2 // +---------------------------------------------------------------------- 3 // | phpWeChat hello 操作類 Last modified 2016-12-28 00:02:22 4 // +---------------------------------------------------------------------- 5 // | Copyright (c) 2009-2016 phpWeChat http://www.phpwechat.com All rights reserved. 6 // +---------------------------------------------------------------------- 7 // | Author: 騎馬的少年 <phpwechat@126.com> <http://www.phpwechat.com> 8 // +---------------------------------------------------------------------- 9 namespace wechat\Hello; 10 11 use phpWeChat\Area; 12 use phpWeChat\CaChe; 13 use phpWeChat\Config; 14 use phpWeChat\DataInput; 15 use phpWeChat\DataList; 16 use phpWeChat\Member; 17 use phpWeChat\Module; 18 use phpWeChat\MySql; 19 use phpWeChat\Order; 20 use phpWeChat\Upload; 21 22 class Hello 23 { 24 public static $mPageString=''; // 這個靜態成員是系統自帶，請勿刪除 25 private static $mArticleTable='wechat_hello_article'; 26 27 static public function dataList() 28 { 29 //DB_PRE常量是phpWeChat自帶常量，指數據表前綴。 30 31 $data=MySql::fetchAll("SELECT * FROM `".DB_PRE.self::$mArticleTable."` ORDER BY `id` DESC"); 32 33 return $data; 34 } 35 36 static public function dataGet($id) 37 { 38 //DB_PRE常量是phpWeChat自帶常量，指數據表前綴。 39 40 $id=intval($id); 41 42 $data=MySql::fetchOne("SELECT * FROM `".DB_PRE.self::$mArticleTable."` WHERE `id` =".$id); 43 44 return $data; 45 } 46 } 47 ?>
4、編寫文章詳情控制器路由，新增case 'detail'規則
1 <?php 2 use wechat\hello\hello; 3 use phpWeChat\Area; 4 use phpWeChat\CaChe; 5 use phpWeChat\Config; 6 use phpWeChat\Member; 7 use phpWeChat\Module; 8 use phpWeChat\MySql; 9 use phpWeChat\Order; 10 use phpWeChat\Upload; 11 12 !defined('IN_APP') && exit('Access Denied!'); 13 14 switch($action) 15 { 16 case 'index': 17 //從數據表讀取數據並賦給數組$data 18 $data=Hello::dataList(); 19 20 break; 21 case 'detail': 22 $data=Hello::dataGet($id); //$id 可以改成$_GET['id'] 23 break; 24 //以下 case 條件僅為 示例。您可以根據業務邏輯自由修改和拓展 25 26 //case 'index': 27 28 //在此寫 index.php?m=hello&a=index 時的邏輯 29 30 //break; 31 32 //case 'list': 33 34 //在此寫 index.php?m=hello&a=list 時的邏輯 35 36 //break; 37 38 //以此類推... 39 40 //case '...': 41 42 //在此寫 index.php?m=hello&a=... 時的邏輯 43 44 //break; 45 46 default: 47 break; 48 } 49 ?>
5、將控制器獲取的數據賦給視圖文件，我們重新編寫template/default/detail.html視圖文件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>{$data['title']}</title> 6 </head> 7 8 <body> 9 這是文章詳情的視圖文件 10 <h1>{$data['title']}</h1> 11 <div> 12 {$data['content']} 13 </div> 14 </body> 15 </html>
我們再次訪問文章詳情鏈接：http://www.example.com/index.php?m=hello&a=detail&id=3 則成功實現了文章詳情的展示。
至此，一個簡單的前端文章列表展示加文章詳情展示功能模塊就做出來了。