Flask快速实现分页效果示例

你敢不敢出来 · 发表于 2023-2-10 22:58:46

先上整体效果图：

然后是分页图详情：

与本例相关的路由和模板包括：
路由：views.py

@app.route('/blog/list/<int:page>', methods=['GET'])
@login_required
def blog_list(page=None):
...

复制代码

模板：blog_list.html和pages.html
blog_list.html作为博客页面，pages.html模板为分页页面，呈现时会在blog_list.html中导入pages.html的内容。

{%import 'pages.html' as pg%}
{{pg.my_paginage(pagination,'art_list')}}

复制代码

首先从路由开始：
路由的设计思路是根据查询的页码作为参数，利用FlaskSQLAlchemy的Model进行查询并对查询结果进行分页处理。

@app.route('/blog/list/<int:page>', methods=['GET'])
@login_required
def blog_list(page=None):
#每个人只能看自己发表的blog
if not page:
page = 1
from models import Blog
from models import User
user_id = User.query.filter_by(username=session['user']).first().id
#paginate方法返回一个sqlalchemy.Pagination类型对象
blogs = Blog.query.filter_by(user_id=user_id).order_by(Blog.addtime.desc()).paginate(page=page,per_page=3)
category=[(1, '情感'), (2, '星座'), (3, '爱情')]
return render_template('blog_list.html', title='博客列表',session=session,blogs=blogs.items,category=category,pagination=blogs)

复制代码

分析一下上述代码：
1. @app.route装饰器定义了路由
2. @login_required是自定义装饰器，用来限定只有登录用户才可以浏览博客列表，未登录用户会进入登录页面
3. 作为Model的Blog中有一个外键属性user_id引用着用户表，用来记录博客的作者信息
4. blogs是一个FlaskSQLAlchemy中的Pagination类型对象。一个Query对象调用paginate方法就获得了Pagination对象。paginate方法传入了两个参数，一个是当前页，另一个是每一页最多显示多少博客。paginate的返回值为代表当前页的Pagination对象。一个Paginationi对象的常用属性有：

items 当前页面中的所有记录(比如当前页上有5条记录，items就是以列表形式组织这5个记录)
query 当前页的query对象(通过query对象调用paginate方法获得的Pagination对象)
page 当前页码(比如当前页是第5页，返回5)
prev_num 上一页页码
next_num 下一页页码
has_next 是否有下一页 True/False
has_prev 是否有上一页 True/False
pages 查询得到的总页数 per_page 每页显示的记录条数
total 总的记录条数

常用方法有：

prev() 上一页的分页对象Pagination
next() 下一页的分页对象Pagination
iter_pages(left_edge=2,left_current=2,right_current=5,right_edge=2)
iter_pages 用来获得针对当前页的应显示的分页页码列表。
假设当前共有100页，当前页为50页，按照默认的参数设置调用iter_pages获得的列表为：
[1,2,None,48,49,50,51,52,53,54,55,None,99,100]

5. 渲染blog_list.html模板时，传入渲染时需要的若干参数，比较重要的是传入blogs参数用来让模板显示查询出来的应该在本页面中显示的博客信息，另外是传入pagination参数，利用传入的Pagination对象的相关属性方法动态生成分页的相关内容。
看一下pages.html模板的内容：

{%macro my_paginate(pagination,url)%}
<nav>
<ul class="pagination">
{%if pagination.has_prev%}
<li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page-1)}}" rel="external nofollow" >上一页</a></li>
{%else%}
<li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a></li>
{%endif%}
{%for page in pagination.iter_pages(1,1,3,1)%}
{%if page%}
<li class="page-item {%if page==pagination.page%}active{%endif%}"><a class="page-link" href="{{url_for(url,page=page)}}" rel="external nofollow" >{{page}}</a></li>
{%else%}
<li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >…</a></li>
{%endif%}
{%endfor%}
{%if pagination.has_next%}
<li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page+1)}}" rel="external nofollow" >下一页</a></li>
{%else%}
<li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a></li>
{%endif%}
</ul>
</nav>
{%endmacro%}

复制代码

分析一下上述页面代码：、
整体来说就是根据当前对“上一页”，“页码”和“下一页”进行不同的设置
1. 使用JinJa2的宏，定义my_paginate方法，传入路径和pagination对象作为参数。通过调用宏的执行生成分页内容。
2. 通过设置class为pagination，可以使用FlaskBootStrap预置CSS样式
3. 利用JinJa2的if语句根据当前页是否还有前一页使用不同的元素和class。
如果当前页有上一页，则pagination对象的has_prev为True，此时li标签的class为page-item和active，采用的BootStrap样式意    为此时上一页是可点的。点击后跳转的链接会是url_for函数根据传入的路由方法名称（也就是url参数值）并添加上page参数，参数值为当前页码-1
如果当前页没有上一页，则pagination对象的has_prev为False，此时li标签的class为page-item和disable，采用的BootStrap样    式意为此时上一页是不可点的。跳转的链接会是#
4. 与“上一页”处理类似的是对“下一页”的处理。如果当前页有下一页时设置样式和点击跳转路径，如果没有下一页了，则设置为       不可点击并且跳转路径为#
5. 利用iter_page(1,1,3,1)会获得基于当前页应该显示的页码列表。如上面截图所示，如果当前页是第4页，获得的分页列表内容       就是[1,None,3,4,5,6,None,9]，如果当前页是第9页，获得的分页列表内容是[1,None,8,9]
6. 利用JinJa2的for语句遍历列表，如果是页码，就根据页码生成a标签中的文字并设置跳转路径并添加上page参数。如果是None，a标签中的文字为实体名表示的省略号，路径为“#”。额外的，如果遍历时获得了当前页码所对应的数字时，为li标签的class属性添加上额外的active以获得额外的样式。
最后在blog_list.html中要引入pages.html

{%import 'pages.html' as pg%}
{{pg.my_paginate(pagination,'blog_list')}}

复制代码

在blog_list.html中导入pages.html模板并调用pages.html中定义的my_pagination宏，传入两个参数，第一个参数是pagination对象，这个参数是从views.py中渲染blog_list.html的时候传入的，另外一个就是一个字符串'blog_list'，它对应的是views.py中路由方法的名称，有了这个名称在my_paginate中就可以利用url_for函数进行路由方法对应路径的寻找。
到此这篇关于Flask快速实现分页效果示例的文章就介绍到这了,更多相关Flask 分页内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			立即注册