Django搭建个人博客:简单搜索博客文章

2414阅读 · 13评论 · 2018/12/31发布   前往评论

不管是最新文章列表也好、最热文章列表也罢,都是把所有的文章数据全部展示给了用户。

但是如果用户只关心某些特定类型的文章,抽取全部数据就显得既不方便、又不效率了。

因此,给用户提供一个搜索功能,提供给用户感兴趣的几篇文章,就大有用处了。

准备工作

逻辑

尽管细节不同,但是搜索和列表有很多类似的地方:它们都是先检索出一些文章对象,并将其展示给用户。上一章已经说过,代码重复是万恶之源,好的实践必须把功能类似的模块尽量复用起来。基于这个原则,我们打算继续在原有的article_list()上添砖加瓦,让其功能更加的强大。

随着项目越来越庞大,又需要将功能复杂的模块拆分成更简单的多个模块。目前我们还不用担心这个问题。

更酷的是,我们希望搜索出来的文章也能够按照时间、热度等各种方式进行排序。因此需要构造一个新的参数search,能够和之前的order参数进行联合查询。

GET还是POST?

用户搜索内容时提交的文本,可以用GET请求提交,也可以用POST请求提交。根据实际的需要进行选择。

因为order是用GET提交的,并且翻页是GET请求,因此选择GET方式提交搜索文本,可以方便地和之前的模块结合起来。

之前我们已经用过表单组件<form method="POST">,通过POST请求提交数据。表单组件同样也可以提交GET请求,只要去掉method="POST"属性就可以了。

Q对象

Model.objects.all()能够返回表中的所有对象。

对应的,Model.objects.filter(**kwargs)可以返回与给定参数匹配的部分对象。

还有Model.objects.exclude(**kwargs)返回与给定参数不匹配的对象

如果想对多个参数进行查询怎么办?比如同时查询文章标题和正文内容。这时候就需要Q对象

视图

那么按照前面说好的,修改article_list()

article/views.py

...

# 引入 Q 对象
from django.db.models import Q

def article_list(request):
    search = request.GET.get('search')
    order = request.GET.get('order')
    # 用户搜索逻辑
    if search:
        if order == 'total_views':
            # 用 Q对象 进行联合搜索
            article_list = ArticlePost.objects.filter(
                Q(title__icontains=search) |
                Q(body__icontains=search)
            ).order_by('-total_views')
        else:
            article_list = ArticlePost.objects.filter(
                Q(title__icontains=search) |
                Q(body__icontains=search)
            )
    else:
        # 将 search 参数重置为空
        search = ''
        if order == 'total_views':
            article_list = ArticlePost.objects.all().order_by('-total_views')
        else:
            article_list = ArticlePost.objects.all()

    paginator = Paginator(article_list, 3)
    page = request.GET.get('page')
    articles = paginator.get_page(page)

    # 增加 search 到 context
    context = { 'articles': articles, 'order': order, 'search': search }

    return render(request, 'article/list.html', context)

...

重点知识如下:

  • 新增参数search,存放需要搜索的文本。若search不为空,则检索特定文章对象。

  • 留意filterQ对象的用法。Q(title__icontains=search)意思是在模型的title字段查询,icontains不区分大小写的包含,中间用两个下划线隔开。search是需要查询的文本。多个Q对象用管道符|隔开,就达到了联合查询的目的。

icontains不区分大小写,对应的contains区分大小写

  • 为什么需要search = ''语句?如果用户没有搜索操作,则search = request.GET.get('search')会使得search = None,而这个值传递到模板中会错误地转换成"None"字符串!等同于用户在搜索“None”关键字,这明显是错误的。

完成本章内容后,可以删除此语句看看效果

除此之外还有一点小的代码优化工作:将需要重复用到order = request.GET.get('order')提取到顶部,让模块稍稍清爽一点。

模板

还是修改文章列表的模板文件。

需要修改的内容稍多,仔细一些不要看错:

templates/article/list.html

...

<div class="container">
    <!-- 修改,面包屑的href增加search参数 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}?search={{ search }}">
                    最新
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}?order=total_views&search={{ search }}">
                    最热
                </a>
            </li>
        </ol>
    </nav>

    <!-- 新增,搜索栏 -->
    <div class="row">
        <div class="col-auto mr-auto">
            <form class="form-inline" >
                <label class="sr-only">content</label>
                <input type="text" 
                    class="form-control mb-2 mr-sm-2" 
                    name="search" 
                    placeholder="搜索文章..." 
                    required
                >
            </form>
        </div>
    </div>

    <!-- 新增,搜索提示语 -->
    {% if search %}
        {% if articles %}
            <h4><span style="color: red">"{{ search }}"</span>的搜索结果如下:</h4>
            <hr>        
        {% else %}
            <h4>暂无<span style="color: red">"{{ search }}"</span>有关的文章。</h4>
            <hr>
        {% endif %}
    {% endif %}


...

<!-- 修改,页码href增加search参数 -->
<a href="?page=1&order={{ order }}&search={{ search }}" class="btn btn-success">
...
<a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}" class="btn btn-secondary">
...
<a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}" class="btn btn-secondary">
...
<a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}"class="btn btn-success">

...
  • 面包屑组件、页码组件都改动了href:增加了search参数
  • 新增搜索栏,以GET请求提交search参数;required属性阻止用户提交空白文本
  • 新增搜索提示语。好的UI必须让用户了解当前的状态

Emmm...想想也不用改动其他东西了。

开始测试吧!

测试

还是打开文章列表页面:

出现了搜索栏!并且翻页、最热等功能一切正常。

在搜索栏中输入“PYTHON”,结果如下:

成功将标题或正文中含有"python"关键字的文章检索出来了,并且是忽略大小写的。点击最热可以让检索结果按浏览量排序,翻页功能也正常工作。很好,达成了目标!

学到这里的读者应该感到自豪:你用了同一个url,集成了很多种功能,展示了不同的内容!这对新手来说其实并不容易做到。

这种方法有一个小缺点:有的时候url中会包含像search=''(空值)这样无意义的字符串,强迫症简直不能忍。所幸这无伤大雅,通常用户并不会关心你的url是什么样子的,只要网页美观好用就行。

总结

本章完成了一个简单的搜索功能,这对于个人博客来说应该够用了。

更加复杂、深度定制的搜索可以借助第三方模块,如Haystack

另外笔者这样实现搜索不一定是最优的。相信你已经掌握多种途径来实现搜索功能了(POST请求?搜索专用视图?另写url?),尽情尝试一番吧。




本文作者: 杜赛
发布时间: 2018年12月31日 - 17:27
最后更新: 2019年01月28日 - 21:29
知识共享许可协议   转载请保留原文链接及作者


登录 后回复

共有13条评论

avatar
pidada 么么哒! 3

博主,请问下:你注释中的这句话“需要重复用到order = request.GET.get('order')提取到顶部,让模块稍稍清爽一点。”是什么意思?

5个月前 回复


avatar
杜赛 [博主] pidada 么么哒! 3

不要过度理解了smiley

就是把变量集中在顶部赋值而已,这样子一眼就能看清楚,代码结构好一些

5个月前 回复


avatar
pidada 么么哒! 4

article_list   这个变量需要设置成全局变量吧?

5个月前 回复


avatar
杜赛 [博主] pidada 么么哒! 3

可以设置,也可以不设置。在这里差别不大

5个月前 回复


avatar
ac1864 么么哒! 4

搜索过关。

老大,问下,关于一些比较高级的搜索功能,是否有可能通过django实现。

4个月前 回复


avatar
ac1864 ac1864 么么哒! 3

老大,有没有好的资料推荐。

4个月前 回复


avatar
杜赛 [博主] ac1864 么么哒! 3

功能比较复杂的搜索,你看一下django-haystack

用这个可以实现模块化搜索、索引词高亮之类的功能

先看看官方文档,有兴趣的话再搜索一下教程,应该有很多相关的资料。

我用过haystack,不过暂时不打算写到教程里来。

4个月前 回复


avatar
南霁姑娘 么么哒! 5

你好,我这里有一个问题,搜索框输入值回车后,是那部分代码让url变成http://127.0.0.1:8000/article/article-list/?search=6的呢?也就是url后面跟上了?search=

点击最新/最热/翻页的时候我是理解的,因为html里面设置了,但是直接回车这里我不太明白呢

是list.html文件里面,搜索那个form里面,因为name=search,所以在这个搜索框里输入内容回车后,url后面就会多?search=吗

1个月前 回复


avatar
杜赛 [博主] 南霁姑娘 么么哒! 2

是的,这个 form 是用 get 方法请求了本页面的后端视图。你可以试试把表单内容修改一下,比如 name 或者 method='post',看看有什么效果

1个月前 回复


avatar
seekdoor 么么哒! 3

indecision学到这里感觉虽然有点懂了,但是之前的东西自己写的话还是写不出来啊

1个月前 回复


avatar
杜赛 [博主] seekdoor 么么哒! 2

抄多了自然就会写了

1个月前 回复


avatar
1581779395@qq.com 么么哒! 1

博主,各位同学,我也是一行一行赋值的代码,为什么搜索功能没有生效,有遇到的同学吗?

25天前 回复


avatar
杜赛 [博主] 1581779395@qq.com 么么哒! 1

多用 print() 找 bug

25天前 回复