【19.0】Django框架补充之分页器推导

【一】引入

• 针对上一小节批量插入的数据
  • 我们在前端展示的时候发现一个很严重的问题
  • 一页展示了所有的数据，数据量太大，查看不方便
• 针对数据量大但又需要全部展示给用户观看的情况下
  • 我们统一做法都是做分页处理

【二】分页推导

【1】理论

• 首先我们需要明确的时候
  • get请求也是可以携带参数的
  • 所以我们在朝后端发送查看数据的同时可以携带一个参数告诉后端我们想看第几页的数据
• 其次我们还需要知道一个点
  • queryset对象是支持索引取值和切片操作的
  • 但是不支持负数索引情况

【2】分析

• 后端分析

# 获取用户想访问的页码  如果没有 默认展示第一页
current_page = request.GET.get("page",1)  

# 由于后端接受到的前端数据是字符串类型所以我们这里做类型转换处理加异常捕获
try:  
  current_page = int(current_page)
except Exception as e:
  current_page = 1
  
# 还需要定义页面到底展示几条数据
per_page_num = 10  # 一页展示10条数据
 
# 需要对总数据进行切片操作 需要确定切片起始位置和终止位置
start_page = ? 
end_page = ?

• 下面需要研究current_page、per_page_num、start_page、end_page四个参数之间的数据关系

per_page_num = 10
current_page                start_page                  end_page
    1                           0                           10
    2                           10                          20
    3                           20                          30  
    4                           30                          40
 
per_page_num = 5
current_page                start_page                  end_page
    1                           0                           5
    2                           5                           10
    3                           10                          15  
    4                           15                          20

• 可以很明显的看出规律

start_page = (current_page - 1) * per_page_num
end_page =  current_page* per_page_num

【三】手动切片

【1】后端

def ab_many(request):

    # 分页操作 推导

    # (1) 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
    # (2) 分页操作
    # 想访问的页数
    current_page = request.GET.get('page', 1)  # 如果获取不到当前页码就展示第一页
    # 异常捕获
    try:
        current_page = int(current_page)
    except Exception:
        current_page = 1
    # 每页展示多少条
    per_page_num = 10
    # 起始位置
    start_page = (current_page - 1) * per_page_num
    # 终止位置
    end_page = current_page * per_page_num
    # 切片
    book_queryset = models.Book.objects.all()[start_page:end_page]
    '''
    start_page = (current_page-1) * per_page_num
    end_page = current_page * per_page_num
    '''
    return render(request, 'ab_many.html', locals())

【2】前端

{% for book_obj in book_queryset %}
    <p>{
   { book_obj.title }}</p>
{% endfor %}

【3】路由访问

通过在 url 后面携带参数，完成分页操作
http://127.0.0.1:8000/ab_many/?page=3

但是这种当时方式，没有对前端页面进行优化，仅仅只是后端部分完成了分页

【四】分页器组件

【1】参考bootstrap

• 参考bootstrap官方文档，拷贝分页器代码进行优化