[thinkPHP5專案實戰_29]前臺首頁和文章搜尋功能完善
1.首頁功能
首頁展示出所有文章,因此需要單獨處理,首先在後臺將首頁的欄目刪除,並將首頁欄目下的文章移到其他欄目或者刪除;
在頭部導航header.html單獨對首頁進行處理;
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item" href="{:url('Index/index')}">首頁</a>
{volist name="navres" id="vo"}
<a class="blog-nav-item" href="
{if condition="$vo['type'] eq 0"}
{:url('lists/index',array('cateid'=>$vo['ID']))}
{else /}
{:url('guest/index',array('cateid'=>$vo['ID']))}
{/if}
">{$vo.catename}</a>
{/volist}
</nav>
</div>
</div>
點選首頁導航通過index.php控制器進行處理:
獲取所有的文章並通過聯表查詢每篇文章對應的欄目名:
<?php
namespace app\index\controller;
class Index extends Basic
{
public function index()
{
$artres= \think\Db::name('article')->alias('a')->join('cate c','c.ID = a.cateid','LEFT')->field('a.artid,a.title,a.pic,a.time,a.desc,a.click,a.keywords,c.catename')->order('a.artid desc')->paginate(2);
$this->assign('artres',$artres);
return $this->fetch();
}
}
首頁模板Index.html賦值,與文章列表模板賦值一樣:
<body>
<!-- 引入頭部 -->
{include file="Public/header" /}
<div class="container">
<div class="row">
<div class="col-sm-8 blog-main">
{volist name="artres" id="vo"}
<div class="post multi-post cate2 auth1">
<h4 class="post-date">{$vo.time|date="Y年m月d日",###}</h4>
<h2 class="post-title"><a href="{:url('Article/index',array('artid'=>$vo['artid']))}">{$vo.title}</a></h2>
<div class="post-body"><p>描述:{$vo.desc}</p>
{if condition="$vo['pic'] neq ''"}
<p style="text-indent: 0em;"><a title="" target="_self" href="{:url('Article/index',array('artid'=>$vo['artid']))}"><img src="__PUBLIC__{$vo.pic}"/></a></p>
{/if}
</div>
<h5 class="post-tags">關鍵詞: <span class="tags">
<?php
$arr=explode(',', $vo['keywords']);
foreach ($arr as $k => $v) {
echo "<a href='http://localhost/test/tp5/Public/index.php/index/Tags/index/tags/$v'>$v</a>";
echo ' ';
}
?>
</span></h5>
<h6 class="post-footer">
釋出:渣渣 | 分類:{$vo.catename} | 評論:6 | 瀏覽:{$vo.click} | <a href="{:url('Article/index',array('artid'=>$vo['artid']))}">閱讀全文 > </a>
</h6>
</div>
{/volist}
<div class="post pagebar">{$artres->render()}</div>
</div>
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>文章搜尋:</h4>
<form method="post" action="{:url('Search/index')}">
<input type="text" name="keywords" id="edtSearch" size="12" />
<input type="submit" value="提交" id="btnPost" />
</form>
</div>
</div>
</div>
</div>
{include file="public/footer" /}
</body>
2.文章搜尋
文章搜尋是通過搜尋文章標題實現;
將搜尋框放在每個頁面的側邊欄上,將搜素的關鍵詞在資料中對每篇文章題目進行比對,返回響應的文章資訊列表;
搜尋框:
<div class="sidebar-module sidebar-module-inset">
<h4>文章搜尋:</h4>
<form method="post" action="{:url('Search/index')}">
<input type="text" name="keywords" id="edtSearch" size="12" />
<input type="submit" value="提交" id="btnPost" />
</form>
</div>
對應的Search控制器方法為:
<?php
namespace app\index\controller;
class Search extends Basic
{
public function index()
{
$keywords=input('keywords');//獲取搜尋關鍵詞
if($keywords){
$map['title'] = ['like','%'.$keywords.'%'];//關鍵詞模糊搜尋語句
$seares=\think\Db::name('article')->where($map)->order('artid desc')->paginate(2);//查詢和分頁
$this->assign('seares',$seares);//模板賦值
$this->assign('keywords',$keywords);
}else{
$this->assign('keywords','沒有關鍵詞');//沒有關鍵詞的情況處理
$this->assign('seares',null);
}
return $this->fetch('search');
}
}
Search.html進行模板賦值:
需要對沒有文章的情況進行判斷
<body>
{include file="Public/header" /}
<div class="container">
<div class="row">
<div class="col-sm-8 blog-main">
<div class="post single-post cate0 auth0">
<h4 class="post-date"></h4>
<h2 class="post-title">關鍵詞:{$keywords}</h2>
<div class="post-body">
{if condition="$seares neq ' '"}
{volist name="seares" id="vo"}
<div>
<br/><font size="+0.5"><a target="_blank" href="{:url('article/index',array('artid'=>$vo['artid']))}">題目:{$vo.title}</a></font>
<br/>描述:{$vo.desc}
<br/>
<br/>
</div>
{/volist}
{else /}
沒有搜尋結果!
{/if}
</div>
</div>
</div>
</div>
{include file="Public/footer" /}
</body>
效果:
相關文章
- [thinkPHP5專案實戰_28]前臺文章"相關文章"的功能完善PHP
- [thinkPHP5專案實戰_30]留言板功能完善PHP
- DjangoRestFramework 實現分頁功能與搜尋功能DjangoRESTFramework
- 搭建直播平臺,給首頁配備搜尋框
- JN專案-app首頁訂票功能實現APP
- Elasticsearch搜尋功能的實現(五)-- 實戰Elasticsearch
- Vue + element.ui table 分頁功能+搜尋功能的實現VueUI
- Redis 實戰 —— 10. 實現內容搜尋、定向廣告和職位搜尋Redis
- 第 20 章 專案實戰--首頁內容介紹[上][3]
- 第 20 章 專案實戰--首頁內容介紹[下][4]
- 實現延遲搜尋功能
- 專案需求討論-標題欄上的搜尋功能
- HHDESK檔案內文字搜尋功能
- 部落格專案前臺實現
- GitHub 搜尋專案小技巧Github
- 【專案實戰】---SQL真分頁SQL
- 貓貓學iOS 之微博專案實戰(5)微博自己定義搜尋框searchBariOS
- 搜尋引擎:MapReduce實戰----倒排索引索引
- RxJava2 實戰知識梳理(3) 優化搜尋聯想功能RxJava優化
- 基於.NetCore開發部落格專案 StarBlog - (23) 文章列表介面分頁、過濾、搜尋、排序NetCore排序
- GitHub 倉庫專案搜尋技巧Github
- 文章內容分頁功能實現
- 實戰react技術棧+express前後端部落格專案(5)-- 前後端實現登入功能ReactExpress後端
- 簡單專案實戰flutter(功能篇)Flutter
- oracle全文搜尋功能Oracle
- vue + axios 實現分頁引數傳遞,高階搜尋功能實現VueiOS
- HoudahSpot for Mac多功能檔案搜尋軟體Mac
- HoudahSpot for Mac(多功能檔案搜尋軟體)Mac
- 實戰react技術棧+express前後端部落格專案(9)– 前端管理介面發表文章功能+後端對應介面ReactExpress後端前端
- Reddit採集API reddit文章評論和搜尋 實時資料介面API
- 基於SSH框架專案使用模糊查詢的搜尋功能開發框架
- 簡寫readStream的流動模式並完成文章搜尋功能模式
- 使用Elasticsearch快速實現社群/部落格文章全文搜尋Elasticsearch
- 谷歌高管炮轟雅虎 稱一頁到位搜尋為表面文章谷歌
- GAT專案前臺到後臺
- 微信小程式 簡易搜尋功能實現微信小程式
- 開發者神器庫 7--拼音啟動_支援首拼_快速搜尋功能
- Angular6-Filter實現頁面搜尋AngularFilter