我的网站搭建(第11天) 博文搜索

  • 发布时间:2016年1月12日 16:52
  • 作者:杨仕航

这段时间主要针对网站的UI设计进行调整和写写博客。

随着博文越来越多,发现想找某篇博文不是很方便。so ~ 是时候添加搜索博文的功能了。


1、添加网址规则

首先,先修改urls.py。

因为搜索博文实际上也是把我们想要搜索的内容提交到服务器,再返回对应的博文数据。

那么提交数据,得要有一个网址给我们提交。所以需要先分配一个网址。


因为是对博文搜索,则在blog应用对应的urls.py添加网址规则。我打算访问name为search的网址,对应的参数通过请求的GET中获取。如下所示:

url(r'^search$','blog.views.search',name='search'),


2、添加访问函数

设置网址规则之后,需要写对应的函数:blog.views.search。打开blog应用下对应的views.py文件,添加如下函数:

def search(request):
    """show blogs' list"""
    try:
        wd=request.GET['wd']
        if not wd:
            return index(request)

        blogs = Blog.objects.filter(caption__contains=wd)
        paginator,blogs=getPages(request,blogs)

        #return data
        data = commonData()
        data["blogs"]=blogs
        data["paginator"]=paginator 
        data["wd"]=wd
    except Exception:
        raise Http404
    return render_to_response('blog/blog_search.html',data)


有几点要说明一下:

1) 获取搜索关键字的是wd参数

2) 没有对应搜索内容返回blog默认列表(前面有些index函数)

3) commonData()是我这个文件后面定义的一个获取公告数据的函数,可以忽略

4) getPages()是我封装起来的获取分页器函数,可以忽略。具体可以看前面的博文:Django分页器

5) 设置条件是对博客caption字段模糊搜索,需要加 __contains 修饰,表示子字符串。


3、添加对应的模版文件呈现数据

在前面优化期间,添加了tag标签筛选。由于比较简单,这部分没有写出来。大体类似,只供参考。

在blog应用模版文件夹的位置,新建blog_search.html文件。模版文件内容如下:

{% extends "blog/blog_list.html" %}

{% block title %}
	“{{wd}}” - 杨仕航的博客
{% endblock %}

{% block blog_header %}		
	<div class="alert alert-success" role="alert">
		关键字:“{{wd}}” 所有博文
	</div>
{% endblock %}

该模版还调用了博客列表模版,可以省很多事。传递进来的博客列表内容,会在blog_list.html文件中处理。


4、添加搜索框

万事俱备只欠东风。后台数据都准备好之后,给菜单栏添加搜索框。这个搜索框其实是一个Form表单。

我网站用了bootstrap框架。相关的教程可以看看宁皓网的视频教程其中的“导航”章节。大致代码如下:

<form action="{% url 'search'%}" class="navbar-form navbar-right">
    <input name="wd" type="text" placeholder="搜索博文" class="form-control">
    <button type="submit">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form>


设置表单提交给名字为search的网址;表单字段为name="wd"。这些都是相关的html知识,这里就不多说。

你也可以看上面的宁皓网教程。


5、添加样式

最好,再稍微调整一下css样式即可。

.navbar-form{
    position: relative;
    right: 10px;
}
.navbar-form button[type="submit"]{
    position: absolute;
    top:24%;
    right: 20px;
    background:none;
    border:none;
}
@media (max-width: 767px){
    .navbar-form button[type="submit"]{
        top:35%;
    }
}

同样,这些内容可以在宁皓网的教程里面找到(“导航”章节)。


这样就添加了搜索博文功能。不过搜索能力不强,只对博文标题模糊搜索。不支持多关键字什么的,后面再慢慢完善。

上一篇:我的网站搭建(第12天) 关闭调试

下一篇:利用Eval函数,简单实现回调机制

评论列表

智慧如你,不想发表一下意见吗?

新的评论

清空

猜你喜欢

  • 猜测中,请稍等...