在使用 SQLAlchemy 的 Flask Web 应用程序中，如何在显示大型 PSQL 数据库中的数据时提高页面加载时间？

Question

我正在开发一个简单的 Flask Web 应用程序，该应用程序在 Bootstrap 表中显示来自 PSQL 数据库的数据（2000 多个项目）。问题是显示表格的页面需要很长时间才能加载。

我的models.py：

from app import db

class Movie(db.Model):
    __tablename__ = 'movies'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(60), index=True, unique=True)
    director = db.Column(db.String(60), index=True)
    release_date = db.Column(db.Date, index=True)
    duration = db.Column(db.Integer)

    def __repr__(self):
        return '<Movie: %s>' %(self.name)

我的views.py：

@home.route('/')
    movies = Movie.query.all()
    return render_template('home/index.html', movies=movies)

数据在index.html中加载如下：

{% for movie in movies %}
<tr>
    <td> {{ movie.id }} </td>
    <td> {{ movie.name }} </td
    <td> {{ movie.director }} </td>
    <td> {{ movie.release_date }} </td>
    <td> {{ movie.duration }} </td>
</tr>
{% endfor %}

我正在为我的表格使用分页，虽然只是在视觉上（数据仍然在开始时完全加载）。为了实现这一点，我使用了Bootstrap-Table，所以我的表格看起来像this。

在我看来，最好的选择是先加载 15 个项目并显示它们。加载完其他所有内容后，就可以加载剩余的项目了。但是，我不知道该怎么做。

如何提高表格页面的加载时间？

Answer 1

你应该paginate。您可以使用 AJAX 请求来获得更多结果，而无需重新加载页面。您可以对任何查询进行分页以避免一次加载所有项目。相反，它一次只会加载您要求的数量。

考虑以下演示使用分页对象的视图和模板。

@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@app.route('/index/<int:page>', methods=['GET', 'POST'])
@login_required
def index(page=1):
    form = PostForm()
    if form.validate_on_submit():
        post = Post(body=form.post.data, timestamp=datetime.utcnow(), author=g.user)
        db.session.add(post)
        db.session.commit()
        flash('Your post is now live!')
        return redirect(url_for('index'))
    posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False).items
    return render_template('index.html',
                           title='Home',
                           form=form,
                           posts=posts)

然后是模板

<!-- posts is a Paginate object -->
{% for post in posts.items %}
<p>
  {{ post.author.nickname }} says: <b>{{ post.body }}</b>
</p>
{% endfor %}
{% if posts.has_prev %}<a href="{{ url_for('index', page=posts.prev_num) }}">&lt;&lt; Newer posts</a>{% else %}&lt;&lt; Newer posts{% endif %} | 
{% if posts.has_next %}<a href="{{ url_for('index', page=posts.next_num) }}">Older posts &gt;&gt;</a>{% else %}Older posts &gt;&gt;{% endif %}

生成一个这样的页面，只等待 3 个结果，即使查询有一百万个可能的结果。

您可以在 The Flask Mega-Tutorial 中查看此代码的更多解释