🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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}&nbsp;</span> <span class="views"> 阅读 {$vo.views}&nbsp;</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)); } ~~~