前臺首頁功能實現 · TP5常用代碼

[TOC] ## 知識點 1、菜單項-分類列表 2、最新文章 3、最新圖片 4、熱門文章 5、本站推薦 6、分類目錄 7、圖文列表 ## 模型字段修改 ### 問題描述 ~~~ 問題：SQLSTATE[42S22]: Column not found: 1054 Unknown column 'listorder' in 'order clause' ~~~ ### 原因分析字段名稱與數據庫名稱一致的話，就會出現錯誤，方法就是更換字段名稱 ### 解決辦法 1、修改副表字段為listorder（有幾個模型就要修改幾次） 2、修改模型字段文件位置：public\data\sfox_newmodel.sql 代碼：兩處需要修改 ~~~ INSERT INTO `@cmsprefix@models_field` VALUES (null, '@modelid@', 'listorder', '排序', '', 'number', 'a:1:{s:12:\"defaultvalue\";s:1:\"0\";}', '1', '12'); CREATE TABLE `@cmsprefix@@cmstablename@` ( `listorder` int(11) NOT NULL DEFAULT '0' COMMENT '排序', ) ENGINE=MyISAM DEFAULT CHARSET=utf8; ~~~ 3、修改主表字段為listorder（有幾個模型就要修改幾次） 4、修改后臺控制器content 5、修改后臺content模塊的content.html ## 一、菜單項-分類列表思路：無限極分類（調用后臺menu模型） ### 1、引入類庫 ~~~ use think\Controller; use think\Db; use app\admin\model\Menu; ~~~ ### 2、控制器 ~~~ public function index(){ // 菜單 $categoryArray = Db::name('cate')->order('order')->select(); $categoryList = Menu::tree($categoryArray); $this->assign('menu',$categoryList); return view(); } ~~~ ### 3、前端模板 ~~~ <ul class="down-menu nav-menu"> <li class="current-menu-item"><a rel="nofollow" href="/"><i class="fa fa-home"></i> 首頁</a></li> {volist name="menu" id="vo"} <li> <a href="#"> {$vo.catname}</a> <ul class="sub-menu"> {volist name="vo.son" id="voson"} <li><a href="#"> {$voson.catname}</a></li> {/volist} </ul> </li> {/volist} </ul> ~~~ ## 二、最新文章 ### 1、控制器 ~~~ $wenz = Db::name('wenz')->field('id,catid,title,thumb,description,inputtime,views')->limit(2)->order('listorder desc')->select(); $this->assign('wenz',$wenz); dump($wenz); ~~~ ### 2、前端顯示 ~~~ {volist name="article" id="vo"} <article class="post type-post status-publish format-standard hentry"> <figure class="thumbnail"> <a href="#"> <img src="__UPLOADS__/image/{$vo.thumb}" alt=""></a> <span class="cat"> <a href="#">{$vo.catid}</a></span> </figure> <header class="entry-header"> <h2 class="entry-title"><a href="#" rel="bookmark">{$vo.title}</a></h2> </header> <div class="entry-content"> <div class="archive-content">{$vo.description}</div> <br/> <span class="title-l"></span> <span class="entry-meta"> <span class="date">{$vo.inputtime} </span> <span class="views"> 閱讀 {$vo.views} </span> <span class="comment"><a href="#"> <i class="fa fa-comment-o"></i> 查看評論</a></span> </span> <div class="clear"></div> </div> <span class="entry-more"> <a href="#" rel="bookmark">閱讀全文</a></span> </article> {/volist} ~~~ ### 3、上傳路徑 ~~~ // 視圖輸出字符串內容替換 'view_replace_str' => [ '__UPLOADS__' => '/uploads', '__INDEX__' => '/static/index', ], ~~~ ### 4、模板中調用函數 ~~~ {$vo.catid|getCatInfoById=catname} ~~~ ## 三、最新圖片 ### 1、控制器 ~~~ $photo = Db::name('photo')->field('id,title,thumb')->limit(4)->order('listorder desc')->select(); $this->assign('photo',$photo); ~~~ ### 2、前端顯示 ~~~ <div class="line-four"> {volist name="photo" id="vo"} <div class="xl4 xm4"> <div class="picture-h"> <figure class="picture-h-img"><a href="#"><img src="__UPLOADS__/{$vo.thumb}" alt="{$vo.title}"></a></figure> <h3 class="picture-h-title"><a href="#" rel="bookmark">{$vo.title}</a></h3> </div> </div> {/volist} <div class="clear"></div> </div> ~~~ ## 四、熱門文章 ### 1、控制器 ~~~ $article_hot = Db::name('article')->field('id,title')->limit(8)->order('views desc')->select(); $this->assign('article_hot',$article_hot); ~~~ ### 2、前端顯示 ~~~ <aside class="widget widget_hot_post"> <h3 class="widget-title"><i class="fa-bars fa"></i>熱門文章</h3> <div id="hot_post_widget"> <ul> {volist name="article_hot" id="vo"} <li><span class="li-icon li-icon-{$key+1}">{$key+1}</span><a href="#">{$vo.title}</a></li> {/volist} </ul> </div> </aside> ~~~ ### 3、模板中自增功能關鍵：{$key+1}（TP循環自帶key） ~~~ <ul> {volist name="article_hot" id="vo"} <li><span class="li-icon li-icon-{$key+1}">{$key+1}</span><a href="#">{$vo.title}</a></li> {/volist} </ul> ~~~ ## 五、本站推薦 ### 1、添加模型字段recommend 否|0 是|1 默認0，數字型 ### 2、控制器 ~~~ $article_recommend = Db::name('article')->where('recommend',1)->field('id,title,thumb,views')->limit(3)->order('listorder desc')->select(); $this->assign('article_recommend',$article_recommend); ~~~ ### 3、前端顯示 ~~~ <div id="hot" class="hot_commend"> <ul> {volist name="article_recommend" id="vo"} <li> <figure class="thumbnail"><a href="#"><img src="__UPLOADS__/{$vo.thumb}" alt="{$vo.title}"></a></figure> <div class="hot-title"><a href="#">{$vo.title}</a></div> <div class="views">閱讀 {$vo.views}</div> <i class="fa-thumbs-o-up fa"> 0</i> </li> {/volist} </ul> <div class="clear"></div> </div> ~~~ ## 六、分類目錄 ~~~ <aside class="widget widget_categories"> <h3 class="widget-title"><i class="fa-bars fa"></i>分類目錄</h3> <ul> {volist name="menu" id="vo"} <li class="cat-item"> <a href="#">{$vo.catname}</a></li> {/volist} </ul> <div class="clear"></div> </aside> ~~~ ## 七、圖文列表 >思路：不用tp5的自帶關聯模型，因為官方關聯模型得出的是對象，還必須轉化成數組，有點麻煩。這里換一種方法：即：模型（modelid） => 分類（catid） => 文章方法：手動組合數據 ### 1、根據模型ID查出分類信息 ~~~ $category = Db::name('category')->where('modelid',1)->order('listorder')->select(); ~~~ ### 2、根據分類ID查出所有文章 ~~~ foreach ($category as $key => $value) { $category[$key]['article'] = Db::name('article')->where('catid',$value['id'])->field('id,title,description,thumb,inputtime')->order('listorder desc')->limit(6)->select(); } ~~~ ### 3、前端顯示 ~~~ <div class="line-big"> {volist name="category" id="vo"} <div class="xl3 xm3"> <div class="cat-box"> <h3 class="cat-title"><i class="fa-bars fa"></i><a href="#">{$vo.catname}</a></h3> <div class="clear"></div> <div class="cat-site"> {volist name="vo.article" id="voson" offset="0" length="1"} <h2 class="entry-title"><a href="#" rel="bookmark">{$voson.title}</a></h2> <figure class="thumbnail"><a href="#"><img src="__UPLOADS__/{$voson.thumb}" alt=""></a></figure> <div class="cat-main">{$voson.description}</div> {/volist} <div class="clear"></div> <ul class="cat-list"> {volist name="vo.article" id="voson" offset="1" length="5"} <span class="list-date">{$voson.inputtime|timeToDate}</span> <li class="list-title"><a href="#" rel="bookmark">{$voson.title}</a></li> {/volist} </ul> </div> </div> </div> {/volist} <div class="clear"></div> </div> ~~~ ### 4、文章偏移量 ~~~ {volist name="vo.article" id="voson" offset="0" length="1"} <h2 class="entry-title"><a href="#" rel="bookmark">{$voson.title}</a></h2> <figure class="thumbnail"><a href="#"><img src="__UPLOADS__/{$voson.thumb}" alt=""></a></figure> <div class="cat-main">{$voson.description}</div> {/volist} <ul class="cat-list"> {volist name="vo.article" id="voson" offset="1" length="5"} <span class="list-date">{$voson.inputtime|timeToDate}</span> <li class="list-title"><a href="#" rel="bookmark">{$voson.title}</a></li> {/volist} </ul> ~~~ ### 5、時間格式化函數位置：application\common.php ~~~ function timeToDate($time){ return date("m-d",strtotime($time)); } ~~~