Django项目(四、前端技巧)

模版的继承

为了使得Django的前端html代码可以复用, Django允许以模版形式使得html之间可以继承。

#base.html
{% block XX %}{% endblock %}



#index.html
{% extend 'base.html' %}

{% block XX %}
    atom
{% endblock %}

显示media

如果我们需要在前端显示models中的image, 我们需要一些不同于staticfiles的配置。
首先,需要在配置文件中做一些设置:

#settings.py
...
#绝对路径中的文件夹
MEDIA_URL = '/media/'
#media文件夹的绝对路径
MEDIA_ROOT = os.path.join(BASE_DIR,"media")
...

前端显示models的URL:

#xxx.html

...
src = "{{ MEDIA_URL }}{{ xxx.image }}"
...

最后, urls.py中还要一些配置:

#urls.py

from django.views.static import serve
from .settings import MEDIA_ROOT

...
urlpatterns = [
    ...
    url(r'^media/(?P<path>.*)$',serve,{"document_root":MEDIA_ROOT})
]
...

分页器

首先, 下载开源的分页组件:

pip3 install django-pure-pagination

接下来, 在settings.py中进行配置:

#settings.py
...
INSTALL_APPS = [
    ...
    "pure_pagination",
]

PAGINATION_SETTINGS = {
    #一共多少页码标签
    'PAGE_RANGE_DISPLAYED':10,
    'MARGIN_PAGES_DISPLAYED':2,
    'SHOW_FIRST_PAGE_WHEN_INVALID':True
}

接下来, 在views.py中编写分页:

#settings.py
...
from pure_pagination import Paginator,PageNotAnInteger

...
#文章目录
def articleCatalog(request):
    #tag_list = set([one.category for one in Article.objects.all()])
    tag_list = ArticleTag.objects.all()
    querytag = request.GET.get('tag')
    if querytag:
        article_list = Article.objects.filter(category = querytag)
        querytag = int(querytag)
    else:
        article_list = Article.objects.all()
    #分页器
    try:
        page_num = request.GET.get('page_num', 1)
    except PageNotAnInteger:
        page_num = 1

    page_robot = Paginator(article_list,20,request=request)
    article_list = page_robot.page(page_num)

    return render(request,'articleCatalog.html',{'page':'articles','article_list':article_list,'article_tag':querytag,'tag_list':tag_list})

接下来注意, 前端代码中取article_list的时候, 不能直接对article_list进行迭代, 而要对article_list.object_list进行迭代:

#xxx.html
...
{% for one in article_list.object_list %}
    <tr>
      <td>
        <h5 class="ui left aligned header">
          <a href="{% url 'articleDetail' one.id %}">{{ one.title }}</a>
        </h5>
      </td>
      <td class="ui center aligned single line">{{ one.category }}</td>
      <td class="ui center aligned single line">{{ one.pub_date }}</td>
      <td class="ui center aligned single line">{{ one.update_time }}</td>
      <td class="ui center aligned single line">{{ one.read_num }}</td>
    </tr>
{% endfor %}
...

<div class="ui right floated pagination menu">
  {% if article_list.has_previous %}
      <a href="?page_num={{ article_list.previous_page_number }}{% if tag %}&tag={{ tag }}{% endif %}" class="item">上一页</a>
  {% endif %}

  {% for page in article_list.pages %}
    {% if page %}
      {% ifequal page article_list.number %}
          <a class="disabled item">{{ page }}</a>
      {% else %}
          <a href="?page_num={{ page }}{% if tag %}&tag={{ tag }}{% endif %}" class="item">{{ page }}</a>
      {% endifequal %}
    {% else %}
      <span class="item">...</span>
    {% endif %}
  {% endfor %}

  {% if article_list.has_next %}
      <a href="?page_num={{ article_list.next_page_number }}{% if tag %}&tag={{ tag }}{% endif %}" class="item">下一页</a>
  {% endif %}
</div>

面包屑导航

#xxx.html
...
{% block custom_bread %}
<section>
    <div class="wp">
        <ul  class="crumbs">
            <li><a href="/">首页</a>></li>
        </ul>
    </div>
</section>
{% endblock %}

全局搜素

全局搜索通过用户给出的关键字匹配出对应的数据:

#articles/views.py
...
class ArticleCatalogView(View):
    def get(self,request):
        tag_list = ArticleTag.objects.all()
        querytag = request.GET.get('article_tag','')

        if querytag:
            article_list = Article.objects.filter(category = querytag)
            querytag = int(querytag)
        else:
            article_list = Article.objects.all()

        search_keywords = request.GET.get('keywords', '')
        if search_keywords:
            article_list = article_list.filter(title__icontains=search_keywords)

        #分页器
        try:
            page_num = request.GET.get('page_num', 1)
        except PageNotAnInteger:
            page_num = 1

        page_robot = Paginator(article_list,20,request=request)
        article_list = page_robot.page(page_num)

        return render(request,'articleCatalog.html',{'page':'articles','article_list':article_list,'article_tag':querytag,'tag_list':tag_list})