探索前后端联手实现轻巧高效的分页功能

2024-02-18 10:44:58

前言

在当今信息爆炸的时代，构建用户友好且高效的应用程序至关重要。分页功能作为一种常用的设计模式，能够将海量数据划分成易于管理的页面，极大提升了用户浏览体验。

后端：数据分页的艺术

在后端，我们将使用flask作为我们信赖的框架，并将peewee作为我们的数据库助手。

from flask import Flask, render_template, request
from peewee import *

app = Flask(__name__)
db = SqliteDatabase('qa.db')

class Question(Model):
    title = CharField()
    content = TextField()

    class Meta:
        database = db

@app.route('/')
def index():
    page = request.args.get('page', 1, type=int)
    questions = Question.select().paginate(page, 10)
    return render_template('index.html', questions=questions)

if __name__ == '__main__':
    db.create_tables([Question])
    app.run(debug=True)

在这个示例中，我们定义了一个名为Question的模型，代表我们的QA平台中的问题。我们使用flask的request对象获取当前页码，然后使用peewee的paginate()方法将数据分页。

前端：用户友好的分页导航

在前端，我们使用HTML和JavaScript来构建分页导航和数据渲染。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="?page=1">1</a></li>
    <li class="page-item"><a class="page-link" href="?page=2">2</a></li>
    <li class="page-item"><a class="page-link" href="?page=3">3</a></li>
  </ul>
</nav>

function loadQuestions(page) {
  $.ajax({
    url: '/?page=' + page,
    success: function(data) {
      $('#questions').html(data);
    }
  });
}

$(document).ready(function() {
  $('.page-link').click(function(e) {
    e.preventDefault();
    var page = $(this).attr('href').split('=')[1];
    loadQuestions(page);
  });
});