Django-分頁

后端分頁

????????Django提供了Paginator類來實現后端分頁。Paginator類可以將一個查詢集（QuerySet）分成多個頁面，每個頁面包含指定數量的對象。

from django.shortcuts import render, redirect, get_object_or_404
from .models import User
from .forms import UserForm
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger'''用戶列表
'''
def user_list(request):user_list = User.objects.all()# 處理自定義值try:# 獲取用戶選擇的每頁顯示數量，默認為 10per_page = int(request.GET.get('per_page', 10))per_page = int(per_page)  # 將 per_page 轉換為整數if per_page <= 0:  # 如果輸入的值小于等于0，設置為默認值10per_page = 10except (ValueError, TypeError):  # 如果 per_page 不是數字，設置為默認值10per_page = 10# 分頁paginator = Paginator(user_list, per_page)page_number = request.GET.get('page')try:page_obj = paginator.get_page(page_number)  # 獲取當前頁except PageNotAnInteger:  # 如果 page 不是整數，跳轉到第一頁page_obj = paginator.get_page(1)except EmptyPage:  # 如果 page 超出范圍，跳轉到最后一頁page_obj = paginator.get_page(paginator.num_pages)# 允許的每頁顯示數量列表allowed_per_page = [10, 20, 50, 100, 200]return render(request, 'myapp/user_list.html', {'page_obj': page_obj,'per_page': per_page,  # 將每頁顯示數量傳遞給模板'allowed_per_page': allowed_per_page,})

前端分頁

? ? ? 通用前端的分頁代碼支持輸入頁碼，也支持選擇頁碼，跳轉到對應頁面

<nav aria-label="Page navigation" class="mt-4"><ul class="pagination justify-content-center"><!-- 首頁按鈕 -->{% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?page=1&per_page={{ per_page }}" aria-label="First"><span aria-hidden="true">首頁</span></a></li>{% else %}<li class="page-item disabled"><span class="page-link">首頁</span></li>{% endif %}<!-- 上一頁按鈕 -->{% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}&per_page={{ per_page }}" aria-label="Previous"><span aria-hidden="true">上一頁</span></a></li>{% else %}<li class="page-item disabled"><span class="page-link">上一頁</span></li>{% endif %}<!-- 當前頁碼信息 --><li class="page-item active"><span class="page-link">第 {{ page_obj.number }} 頁，共 {{ page_obj.paginator.num_pages }} 頁</span></li><!-- 下一頁按鈕 -->{% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}&per_page={{ per_page }}" aria-label="Next"><span aria-hidden="true">下一頁</span></a></li>{% else %}<li class="page-item disabled"><span class="page-link">下一頁</span></li>{% endif %}<!-- 末頁按鈕 -->{% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.paginator.num_pages }}&per_page={{ per_page }}" aria-label="Last"><span aria-hidden="true">末頁</span></a></li>{% else %}<li class="page-item disabled"><span class="page-link">末頁</span></li>{% endif %}</ul><!-- 輸入頁碼跳轉和選擇每頁顯示數量 --><div class="d-flex justify-content-center mt-3"><!-- 輸入頁碼跳轉 --><form method="get" action="" class="form-inline mr-3"><div class="input-group"><input type="number" name="page" class="form-control" min="1" max="{{ page_obj.paginator.num_pages }}"placeholder="頁碼" aria-label="頁碼" required><input type="hidden" name="per_page" value="{{ per_page }}"><div class="input-group-append"><button type="submit" class="btn btn-outline-primary">跳轉</button></div></div></form><!-- 選擇每頁顯示數量 --><form method="get" action="" class="form-inline"><div class="input-group"><select name="per_page" class="form-control" aria-label="每頁顯示數量" onchange="this.form.submit()"><option value="10" {% if per_page == 10 %}selected{% endif %}>10 條/頁</option><option value="20" {% if per_page == 20 %}selected{% endif %}>20 條/頁</option><option value="50" {% if per_page == 50 %}selected{% endif %}>50 條/頁</option><option value="100" {% if per_page == 100 %}selected{% endif %}>100 條/頁</option><option value="200" {% if per_page == 200 %}selected{% endif %}>200 條/頁</option><option value="1" {% if per_page != 10 and per_page != 20 and per_page != 50 and per_page != 100 and per_page != 200 %}selected{% endif %}>自定義</option></select>{% if per_page != 10 and per_page != 20 and per_page != 50 and per_page != 100 and per_page != 200 %}<input type="number" name="per_page" class="form-control ml-2" min="1"value="{{ per_page }}" placeholder="自定義" aria-label="自定義" required>{% endif %}</div></form></div>
</nav>

靜態資源配置

使用

在前端中需要引入背景圖或者其他的靜態資源

配置settings.py

# 靜態資源
STATIC_URL = 'static/'
import os
# 靜態文件目錄
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),           # 全局靜態文件目錄os.path.join(BASE_DIR, 'user/static'),     # user app 的靜態文件目錄
]

目錄以及加載使用

html中使用

<!-- 加載靜態文件 -->
{% load static %}
<!-- 全局靜態文件 -->
<!--<body style="background-image: url('{% static '02.png' %}');">-->
<!-- 引入app下的的靜態文件 --><body style="background-image: url('{% static 'user/images/backgroud_image.png' %}');">

防止多次加載

????????在 Django 模板中，使用?{% block %}?來定義可覆蓋的區域，避免在多個模板中重復加載相同的靜態資源。（主要是使用這個其他通過繼承這部分內容 有點像是iframe標簽 引入了部分代碼塊）

# 在main.html中使用{% block content %}{% endblock %}<!-- 加載靜態文件 -->
{# main.html注釋哈 #}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}首頁{% endblock %}</title>
</head>
<!-- 全局靜態文件 -->
<!--<body style="background-image: url('{% static '02.png' %}');">-->
<!-- 引入app下的的靜態文件 比如使用app下的靜態資源不需要重復引入 -->
<body style="background-image: url('{% static 'user/images/backgroud_image.png' %}');">
<a href="{% url 'main' %}">首頁</a>
<a href="{% url 'register' %}">注冊</a>
<a href="{% url 'login' %}">登錄</a>
{# 主要是使用這個其他通過繼承這部分內容 有點像是iframe標簽 引入了部分代碼塊 #}
{% block content %}{% endblock %}
</body>
</html>

子類通過繼承{% extends 'main.html' %} 以及主類中的{% block 名稱%}

{# login.html的模版 繼承main的靜態資源只需要寫自己的相關代碼塊即可 #}
{% extends 'main.html' %}{% block content %}
用戶名：<input name="username" value ="" placeholder="請輸入用戶名"/>
密碼：<input name="password" value ="" placeholder="請輸入密碼"/>
{% endblock%}