depy

It is a long and beautiful life.

博客开发-搜索功能从0到1

项目

前言

之前的文章里,我为我的博客加了一个非常好用的留言板。

但是博客功能还不够完善,没有文章搜索的功能。刚爬完山,神清气爽,着手开始编写。

思考

业务逻辑大致如下

  1. 点击header部分的search,进入搜索控制器

  2. 控制器有个提交框,然后对index控制器进行提交get请求

  3. 数据库模糊查询获取相关文章列表

  4. 渲染前端

着手编写

根据评论功能魔改的搜索框,通过ajax发送接口给search控制器,达到动态修改界面内容

<div id="respond-post-2770" class="comment-container">
    <div id="comments" class="clearfix">
        <br/>
        <!--<span class="response">搜索</span>-->
        <center>
       <form onsubmit="return false" action="##" method="post" class="comment-form" id="form1" style="width:200px">
            <textarea name="text" id="textarea" style="height:25px" class="form-control" placeholder="搜索内容"  ></textarea>
            <button type="submit" class="submit" style="outline:none" id="submit" onclick="send()">搜索</button>
        </form>
        </center>

            </div>
</div>

我的意图是,点击搜索框后,js获取到textarea的值,然后以get请求访问seach控制器,相关代码如下:

	<script type="text/javascript">
	
	    function send(){
	        var textarea = $("#textarea").val();
	        if(!textarea){
	            layer.msg("你要搜索啥呀!");
        	    return false;
	        }else{
	           window.location.href="/index/search?word="+textarea; 
	        }
	        
	    }
	</script>

控制器代码

	//搜索
	public function index(){
	    $keyword = $this->request->param('word','','strval');
	    $keyword = addslashes($keyword);
	    if($keyword != null){
	        //定义搜索代码,预编译数据库语句实现sql注入防护
	    }
	    $this->view->assign('media', baseService::getMedia());  //网站关键词描述信息
		$this->view->assign('pid',0);
		$default_themes = config('depyseve.default_themes') ? config('depyseve.default_themes') : 'index';
		return view($default_themes.'/search');
	}

最终效果如下

604dc7bb7dc02.png

604dc7d8cfedc.png

当然啦,为了让搜索的value不重新渲染导致消失,使用

value="{:htmlentities($where)}"

防止反射型xss漏洞

后面对textarea不太熟悉,发现默认值无法设置,不过不设置就不设置吧,还少了一个攻击面。

604dcb581fdf2.png

后记

体验升级~非常开心!