The Flask Mega-Tutorial 之 Chapter 9: Pagination

最新推荐文章于 2021-03-20 14:38:20 发布

Kungreye

最新推荐文章于 2021-03-20 14:38:20 发布

阅读量236

点赞数

分类专栏： Flask 文章标签： Pagination

本文链接：https://blog.csdn.net/Kungreye/article/details/80715766

版权

Flask 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

小引

作为 social network 的特性之一， Chapter 8 已经完成 “followers - followed” 的 db 设置。
前面几节，一直使用 fake posts 作为权宜之计；本节将去掉 fake posts，替换成真的posts，并使 app能够接受 user 填写的 post，然后将其在 home & profile 页显示。

Submission of Blog Posts

Home 页面创建 post 提交功能。

1、创建 post submission form 。
app / forms.py: blog submission form.

class PostForm(FlaskForm):
    post = TextAreaField('Say something', validators=[
        DataRequired(), Length(min=1, max=140)])
    submit = SubmitField('Submit')

2、将 post submission form 加到 index template
app / templates / index.html:

{% extends "base.html" %}

{% block content %}
    <h1>Hi, {{ current_user.username }}!</h1>
    <form action="" method="post">
        {{ form.hidden_tag() }}
        <p>
            {{ form.post.label }}<br>
            {{ form.post(cols=32, rows=4) }}<br>
            {% for error in form.post.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
    {% for post in posts %}
    <p>
    {{ post.author.username }} says: <b>{{ post.body }}</b>
    </p>
    {% endfor %}
{% endblock %}

插入<form>..</form>，其中 {{ form.post(cols=32, rows=4) }} 尺寸，对应 form 中的 140 。

3、更改路由 ‘index’，添加 PostForm
app / routes.py: post submission form in index view function.

from app.forms import PostForm
from app.models import Post

@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
    form = PostForm()
    if form.validate_on_submit():
        post = Post(body=form.post.data, author=current_user)
        db.session.add(post)
        db.session.commit()
        flash('Your post is now live!')
        return redirect(url_for('index'))
    posts = [
        {
            'author': {'username': 'John'},
            'body': 'Beautiful day in Portland!'
        },
        {
            'author': {'username': 'Susan'},
            'body': 'The Avengers movie was so cool!'
        }
    ]
    return render_template("index.html", title='Home Page', form=form,
                           posts=posts)

引入 Post 及 PostForm
methods 添加 'POST' （需要接受 user 提交数据）
利用 Post 类处理 logic，完成 db 提交。
render_template 增加 form 参数，完成渲染

注： form 完成验证提交后，设置了重定向至 ‘index’，即所谓的 POST/Redirect/GET 模式。
因为浏览器的 re-fresh 操作，默认issue last request。
如果 form submission 完成提交后未设置重定向，则 user 在提交表单后而刷新，则会使浏览器二次提交表单（last request is POST）；浏览器对此感到异常，会让 user 确认duplicate submission。
如果 form submission 完成提交后设置了重定向，则 browser 的 last request 变成 GET。

It avoids inserting duplicate posts when a user inadvertently refreshes the page after submitting a web form.

Displaying Blog Posts

将 index 页面的 fake posts 替换为真实 posts

app / routes.py:： display real posts in home page.

@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
    # ...
    posts = current_user.followed_posts().all()
    return render_template("index.html", title='Home Page', form=form,
                           posts=posts)

注：

index 页展示 followed 的 users 的 posts
PostForm 亦展示，供 user 发布新 post
User 定义的 followd_posts()，已按照 post.timestamp desc() 排序
旧的 index.html ，因为完美匹配，无需更改

Making It Easier to Find Users to Follow

创建 Explore 页面，显示所有的 users 发布的 posts，便于查找 user 并 follow

1、创建路由 ‘explore’

app / routes.py:

@app.route('/explore')
@login_required
def explore():
    posts = Post.query.order_by(Post.timestamp.desc()).all()
    return render_template('index.html', title='Explore', posts=posts)

Explore 页面，无发布新 post 的位置，故无 PostForm
用 Post 类，获取所有 posts，并按 timestamp 逆向排序
template，借用 index.html，因为布局类似

2、更改模板 index.html，为其中<form></form> 添加条件语句，使其兼容 'index' 与 'explore'

{% extends "base.html" %}

{% block content %}
    <h1>Hi, {{ current_user.username }}!</h1>
    {% if form %}
    <form action="" method="post">
        ...
    </form>
    {% endif %}
    ...
{% endblock %}

3、在底板 base.html 中的导航栏，添加 Explore 链接

app / templates / base.html: link to explore page in navigation bar.

<a href="{{ url_for('explore') }}">Explore</a>

4、为 index 及 explore 页面中的 post 的 user 添加链接，便于查看并follow

app / templates / _post.html: show link to author in blog posts.

    <table>
        <tr valign="top">
            <td><img src="{{ post.author.avatar(36) }}"></td>
            <td>
                <a href="{{ url_for('user', username=post.author.username) }}">
                    {{ post.author.username }}
                </a>
                says:<br>{{ post.body }}
            </td>
        </tr>
    </table>

注：

调用此 _post.html 的页面包括 index、explore、user，分别对应 Home、Explore、Profile 页面
因为 Home 及 Explore 共用一个模板 index.html，故可改一处，使得两处生效

    ...
    {% for post in posts %}
        {% include '_post.html' %}
    {% endfor %}
    ...

Profile 对应的 user.html ，亦会调用此 sub_template（见后续下文）

这里写图片描述

Pagination of Blog Posts

完成 Home、Explore 页面的设置（新 post 提交、各自页面限定的 posts 的显示），现对各页面的 posts 进行编页（pagination）。
pagination 的方法即，给定 page size（POSTS_PER_PAGE），然后将总的 posts 按照要求的顺序排序，调用 paginate() 。
The paginate method can be called on any query object from Flask-SQLAlchemy.
>>> user.followed_posts().paginate(1, 20, False).items
- 1，page number
- 20, the number of items per page（可在 config 中设定）
- 标识符：如 True，则超出范围时，对客户端发出 404 错误；如 False，则超出范围时发送空的 list。

1、设定 paginate(page_num, page_size, error_flag) 的 page size

config.py: posts per page configuration.

class Config(object):
    # ...
    POSTS_PER_PAGE = 3

2、利用 query string argument，将 page_num 添加到 URLs，为 Home、Explore 进行 Paginating

app / routes.py:

@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
    # ...
    page = request.args.get('page', 1, type=int)
    posts = current_user.followed_posts().paginate(
        page, app.config['POSTS_PER_PAGE'], False)
    return render_template('index.html', title='Home', form=form,
                           posts=posts.items)

@app.route('/explore')
@login_required
def explore():
    page = request.args.get('page', 1, type=int)
    posts = Post.query.order_by(Post.timestamp.desc()).paginate(
        page, app.config['POSTS_PER_PAGE'], False)
    return render_template("index.html", title='Explore', posts=posts.items)

注：

posts 经过 paginate()，为 Pagination 类的对象，所以 render_template() 中的 posts 为 posts.items

The return value from paginate is a Pagination object. The items attribute of this object contains the list of items in the requested page.

paginate() 返回的是 Flask-SQLAlchemy 的 Pagination 类的对象，除了上面的 items 属性外，还有四类：

has_next: 当前页后，至少还有一页，则 True
has_prev: 当前页前，至少还有一页，则 True
next_num: 下页的页码
prev_num: 前页的页码

1、在 index 及 explore 路由函数中，设置 next_url, prev_url

app / routes.py: next and previous page links.

@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
    # ...
    page = request.args.get('page', 1, type=int)
    posts = current_user.followed_posts().paginate(
        page, app.config['POSTS_PER_PAGE'], False)
    next_url = url_for('index', page=posts.next_num) \
        if posts.has_next else None
    prev_url = url_for('index', page=posts.prev_num) \
        if posts.has_prev else None
    return render_template('index.html', title='Home', form=form,
                           posts=posts.items, next_url=next_url,
                           prev_url=prev_url)

 @app.route('/explore')
 @login_required
 def explore():
    page = request.args.get('page', 1, type=int)
    posts = Post.query.order_by(Post.timestamp.desc()).paginate(
        page, app.config['POSTS_PER_PAGE'], False)
    next_url = url_for('explore', page=posts.next_num) \
        if posts.has_next else None
    prev_url = url_for('explore', page=posts.prev_num) \
        if posts.has_prev else None
    return render_template("index.html", title='Explore', posts=posts.items,
                          next_url=next_url, prev_url=prev_url)

注：如果 next_url 或 prev_next 为 None，则根据模板的条件逻辑，最终不显示（见下面模板）。

2、在模板中增加 next_url 及 prev_url 的链接

app / templates / index.html: render pagination links on the template.

    ...
    {% for post in posts %}
        {% include '_post.html' %}
    {% endfor %}

    {% if prev_url %}
    <a href="{{ prev_url }}">Newer posts</a>
    {% endif %}

    {% if next_url %}
    <a href="{{ next_url }}">Older posts</a>
    {% endif %}
    ...

注：因为按照 timestamp 的 desc 排序，所以 next_url 为 Older posts。

这里写图片描述

Pagination in the User Profile Page

Home 及 Explore 已经完成 pagination & page navigation，按相同方式修改 Profile 页。

1、改路由 user

app / routes.py: pagination in the user profile view function.

@app.route('/user/<username>')
@login_required
def user(username):
    user = User.query.filter_by(username=username).first_or_404()
    page = request.args.get('page', 1, type=int)
    posts = user.posts.order_by(Post.timestamp.desc()).paginate(
        page, app.config['POSTS_PER_PAGE'], False)
    next_url = url_for('user', username=user.username, page=posts.next_num) \
        if posts.has_next else None
    prev_url = url_for('user', username=user.username, page=posts.prev_num) \
        if posts.has_prev else None
    return render_template('user.html', user=user, posts=posts.items,
                           next_url=next_url, prev_url=prev_url)

注：利用 user.posts 获取此 user 的所有posts（posts 为 virtual field）

2、更改 Profile 的模板 user.html

app / templates / user.html: pagination links in the user profile template.

    ...
    {% for post in posts %}
        {% include '_post.html' %}
    {% endfor %}
    {% if prev_url %}
    <a href="{{ prev_url }}">Newer posts</a>
    {% endif %}
    {% if next_url %}
    <a href="{{ next_url }}">Older posts</a>
    {% endif %}

根据实际情况，设置 page_size

config.py: posts per page configuration.

class Config(object):
    # ...
    POSTS_PER_PAGE = 25

Kungreye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
The Flask Mega-Tutorial 之 Chapter 9: Pagination

小引作为 social network 的特性之一， Chapter 8 已经完成 “followers - followed” 的 db 设置。前面几节，一直使用 fake posts 作为权宜之计；本节将去掉 fake posts，替换成真的posts，并使 app能够接受 user 填写的 post，然后将其在 home &amp; profile 页显示。Submissio...
复制链接

扫一扫