一. 修改|-app/-main/views.py
我们之前访问主页路由时, 会返回数据库中所有的文章, 这样显得页面很庞大复杂, 于是我们对文章进行分页显示。
@main.route('/', methods=['GET', 'POST'])
def index():
form = PostForm()
#...
page = request.args.get('page', 1, type=int)
pagination = Post.query.order_by(Post.timestamp.desc()).paginate(page, per_page=current_app.config['FLASKY_POSTS_PER_PAGE'], error_out=False)
posts = pagination.items
return render_template('index.html', form=form, posts=posts, pagination=pagination)
- 如果我们访问主页路由, 127.0.0.1:5000, page的值就是默认值1,相当于访问127.0.0.1:5000?page=1;
- 如果我们访问127.0.0.1:5000?page=2, page的值就是2
- 在得到页数之后, 我们把原来的all()替换为paginate(), 第一个参数就必填参数page, 第二个参数是每页的记录数, 第三个参数error_out的默认值为True, 如果page超出范围的话返回404; 值为False, 超出范围返回一个空列表。
- paginate函数返回一个Pagination的类对象, 该分页对象的items属性返回该页的所有记录。
二. 新建|-app/templates/_macros.html
我们新建一个宏保存在_macros.html里面, 用来显示分页导航, 什么是分页导航? 看下面这个图我们就明白了:
是不是很眼熟哈哈。
{% macro pagination_widget(pagination, endpoint) %}
<ul class="pagination">
<li {% if not pagination.has_prev %} class="disabled" {%endif%}>
<a href="{% if pagination.has_prev %} {{ url_for(endpoint, page=pagination.page-1), **kwargs }} {% else %} # {% endif %}">«</a>
</li>
{% for p in pagination.iter_pages() %}
{% if p %}
{% if p == pagination.page %}
<li class="active">
<a href="{{ url_for(endpoint, page=p, **kwargs) }}">{{ p }}</a>
</li>
{% else %}
<li>
<a href="{{ url_for(endpoint, page=p, **kwargs) }}">{{ p }}</a>
</li>
{% endif %}
{% else %}
<li class="disabled"><a href="#">…</a></li>
{% endif %}
{% endfor %}
<li {% if not pagination.has_next %}class="disabled"{% endif %}>
<a href="{% if pagination.has_next %} {{ url_for(endpoint, page=pagination.page+1, **kwargs) }} {% else %} # {% endif %}">»</a>
</li>
</ul>
{% endmacro%}
三. 在index.html中使用该宏
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% import '_macros.html' as macros %}
#...
{% import '_posts.html' %}
{% if pagination %}
<div class="pagination">
{{ macros.pagination_widget(pagination, '.index') }}
</div>
{% endif %}
四. 在user.html中使用该宏
方法同上, user路由修改方法也类似index路由的修改, 不再多说。
五. 效果演示
未登录用户访问主页, 显示20篇博客, 页面末端显示分页导航。
已登录用户访问资料页