• 后端和前端分别实现分页


    分页后端实现

    lis = range(1, 51)
    from django.core.paginator import Paginator
    page_obj = Paginator(lis, 10) # Paginator类实例化,传一个list,再传每页显示的条数
    print(list(page_obj.page(1))) # 取某页的数据
    print(page_obj.count) # 总共多少条
    print(page_obj.num_pages) # 总共分了多少页
    print(page_obj.page_range) # 分页的范围
    cur_page = page_obj.page(1) # 当前页
    print(cur_page.has_previous()) # 判断是否有上页,如果当前是第一页,没有上页返回False
    print(cur_page.previous_page_number()) # 取上一页的页码,如果当前是第一页,没有页码就报错了
    print(cur_page.has_next()) # 判断是否有下页,返回False或True
    print(cur_page.next_page_number()) # 取下一页的页码
    print(cur_page.has_other_pages()) # 是否有其他页,返回False或True

    接下来在views.py里实现分页的功能,首先在user下新增一个const.py文件,在里面定义一个page_size,就是每页显示多少条,然后取出数据库里的全部文章,在views.py里新增的代码如下图:

    分页前端实现

    接下来在前端(http://127.0.0.1:8000)页面实现分页,在个人博客模板<<simple>>里复制list.htmltemplates下,list.html实现了分页的功能,于是找到分页的代码,把代码复制到index.html的article标签里,div class="r_box"的这个标签的下面,/div>的上面,如下图:

    刷新http://127.0.0.1:8000,往下拖动滚动条,可以看到页面,如下图:

    有点粗糙,需要稍微修改一下代码,99要改成上一页,1-9要进行循环,把2-9的页码代码删除,只保留1,新增的代码如下图:

    刷新http://127.0.0.1:8000,看到分页的效果如下图:

    因为views.pyindex函数的data中key是articles在<div class="pagelist">上面写{% if articles.has_other_pages %},在</div>下面写{% endif %},这个逻辑是如果有其他页,就执行div里面的代码,如果没有其他页,就不执行div里面的代码,因为只有一页,所以不执行div里面的代码,刷新http://127.0.0.1:8000,分页效果没有了,接下来在这里进行判断,后端的方法是有(),前端调用方法不用(),articles.paginator相当于分页后端实现里的page_obj,新增代码如下图:

    然后还要把const.pypage_size改成10,接下来在user下新建一个model_test.py文件,新增的代码如下图:

    刷新http://127.0.0.1:8000,可以看到分页的效果,如下图:

    输入http://127.0.0.1:8000/index/?page=6下一页按钮消失,输入http://127.0.0.1:8000/index/?page=1上一页按钮消失,逻辑实现了,但是每个页码都无法点击,因为是在views.py里的index函数上实现的分页,在首页上可以实现分页,但是点击其他分类就跳到了category这个函数上,但是这个函数没有分页,所以要优化代码,保证category上也能实现分页,新增代码如下图:

    同时在base.html里修改如下图:

    在urls.py里注释path('category/<int:id>', category),同时删掉导入的category,然后在model_test.py里修改代码如下图:

    刷新article表,可以看到新增31条category_id为2的数据,这个应该分成4页,刷新http://127.0.0.1:8000/,点击分类导航linux,可以看到如下图:

    另一种方法也可以实现,优点是路径变了至少前端这里代码不用改动,如果路径有可能会变,变成比如detail_abc,只改变urls.py里的代码,在urls.py里写上name='detail',固定格式name='detail',如下图:

    在index.html写上{% url 'detail' %}代替/detail,如下图:

    刷新http://127.0.0.1:8000/,点击任一分类,页面正常跳转,路径显示如下图:

  • 相关阅读:
    ASP.NET异步处理
    C# TPL学习
    canvas 动画库 CreateJs 之 EaselJS(上篇)
    kafka消息的可靠性
    流式处理框架storm浅析(下篇)
    流式处理框架storm浅析(上篇)
    网易严选后台系统前端规范化解决方案
    Question | 移动端虚拟机注册等作弊行为的破解之道
    Puppeteer入门初探
    ThreeJs 3D 全景项目开发总结
  • 原文地址:https://www.cnblogs.com/laosun0204/p/12238248.html
Copyright © 2020-2023  润新知