Django----列表分页（使用Django的分页组件）

目的：是为了实现列表分页

1、定制URL
http://127.0.0.1:8000/blog/get_article?page=3
之前定制URL是在url后增加了/id，这次使用参数的方式

def get_article(request):
    page=request.GET.get('page');---------->使用GET.get方法来获取URL后的page参数的值，同理，如果将来url后跟了其他更多的参数，也可以使用这种方法指定返回
    if page:------------------->此处可以简单对page进行处理，因为使用get返回的值是Str类型，需要转成int
        page=int(page);
    else:
        page=1;--------->默认为1 print('PAGE 参数为：',page);

 

 

2、引入Djanjo的分页组件

from django.core.paginator import Paginator;--------->重点，这就是Django的分页组件

#列表页
def get_article(request):
    page=request.GET.get('page');
    if page:
        page=int(page);
    else:
        page=1;
    print('PAGE 参数为：',page);
    article_list=Article.objects.all();
    #实例化一个分页组件，第一个参数是需要被分页的列表，第二个参数是每一个的item个数，比如这边指定每页个数为2
    paginator=Paginator(article_list,2); #page方法，传入一个参数，表示第几页的列表，这边传入的page，是你在地址中写的参数
    page_article_list=paginator.page(page);----------------->获得指定page的列表
    page_num=paginator.num_pages;------------------->获得列表被分页处理后，总共被分为多少页
    #print('page_num:',page_num);
    #判断是否存在下一页
    if page_article_list.has_next():
        next_page=page+1;

    else:
        next_page=page;
   #是否存在上一页 if page_article_list.has_previous():
        previous_page=page-1;
    else:
        previous_page=page;

    return render(request,'index.html',{
#根据前端，我们需要知道当前page的列表，需要知道点击【上一页】，跳转，点击下一页的跳转，需要知道被分了几页 'article_list':page_article_list,------->当前page的list 'page_num':range(1,page_num+1),---------->被分了几页，这个返回一个数组，前端直接for循环渲染 'curr_page':page,---------->当前页数 'next_page':next_page,---------->下一页 'previous_page':previous_page————————————————>上一页
    })

 

3、前端修改
引入bootstrap的分页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页--文章列表页</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

      <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
    <h1>文章列表
    <small>by zhonghuihong </small></h1>

</div>
<div class="container page-body">
    <div class="col-md-9" role="main">
        <div class="body-main">
            <div>
                {% for article in article_list %}
                    <h2><a href="get_detail/{{ article.article_id }}">{{article.article_title}}</a></h2>
                          <p>{{article.article_content}}</p>
                {% endfor %}

            </div>

        </div>
    <div class="body-footer">
        <div class="col-md-4 col-md-offset-3">
        <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="/blog/get_article?page={{ next_page }}" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
  {% for num in page_num %}
      <li>
          <a href="/blog/get_article?page={{ num }}">{{ num }}</a>
      </li>
      {% endfor %}

    <li>
      <a href="/blog/get_article?page={{ previous_page }}" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>

  </ul>
</nav>
    </div>
    </div>
    </div>
    <div class="col-md-3" role="complementary">
        <div><h2>最新文章</h2>
            {% for article in article_list  %}

            <h4><a href="get_detail/{{ article.article_id }}">{{article.article_title}}</a></h4>
            {% endfor %}
        </div>
    </div>
</div>

</body>
</html>

 

 

4、调试验收--确认功能正常无报错

 

 

 

 

耶！！！继续努力