Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
Foreword
. Implement a simple article search function
thanks to the great God of the tutorial: Django to build personal blog .
A. Search for articles
1. Modify the view function
article/views.py:
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)
2. Modify the template
article/list.html:
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
首页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 定义放置文章标题的div容器 -->
<div class="container">
<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 %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{% url 'article:article_list' %}">
最新
</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'article:article_list' %}?order=total_views">
最热
</a>
</li>
</ol>
</nav>
<div class="row mt-2">
{% for article in articles %}
<!-- 文章内容 -->
<div class="col-4 mb-4">
<!-- 卡片容器 -->
<div class="card h-100">
<!-- 标题 -->
<h4 class="card-header">{{ article.title }}</h4>
<!-- 摘要 -->
<div class="card-body">
<p class="card-text">{{ article.body|slice:'100' }}...</p>
</div>
<!-- 注脚 -->
<div class="card-footer">
<a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">阅读本文</a>
<!-- 显示浏览量 -->
<span>
<small class="col align-self-end" style="color: gray;">
浏览: {{ article.total_views }}
</small>
</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- 页码导航 -->
<div class="pagination row">
<div class="m-auto">
<span class="step-links">
<!-- 如果不是第一页,则显示上翻按钮 -->
{% if articles.has_previous %}
<a href="?page=1&order={{ order }}&search={{ search }}" class="btn btn-success">« 首页</a>
<span>...</span>
<a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}"
class="btn btn-secondary">
{{ articles.previous_page_number }}
</a>
{% endif %}
<!-- 当前页面 -->
<span class="current btn btn-danger btn-lg">
{{ articles.number }}
</span>
<!-- 如果不是最末页,则显示下翻按钮 -->
{% if articles.has_next %}
<a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}"
class="btn btn-secondary">{{ articles.next_page_number }}</a>
<span>...</span>
<a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}"
class="btn btn-success">尾页 »</a>
{% endif %}
</span>
</div>
</div>
{% endblock content %}
Written in the last
This article is some personal study notes, if infringement, please contact me to delete, thank you.