[thinkPHP5專案實戰_29]前臺首頁和文章搜尋功能完善

騎著程式碼去流浪發表於2017-11-12

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>
效果:



相關文章