本文介绍如何在 flask 应用中通过 url 参数驱动分页逻辑，结合 jinja2 模板动态渲染指定范围的图片，并添加“上一页/下一页”导航按钮，避免全局变量与表单提交的复杂性。
本文介绍如何在 flask 应用中通过 url 参数驱动分页逻辑，结合 jinja2 模板动态渲染指定范围的图片，并添加“上一页/下一页”导航按钮，避免全局变量与表单提交的复杂性。
在 Flask 中实现图片集合的分页浏览，关键在于将分页状态交由客户端控制（即通过 URL 查询参数），而非依赖服务端全局变量或 POST 表单。这种方式更符合 Web 的无状态特性，也更安全、可缓存、易调试。
✅ 正确做法：基于查询参数的无状态分页
首先，在 Flask 路由中接收并解析分页参数：
from flask import Flask, render_template, request
import sqlite3 # 或你使用的数据库模块
app = Flask(__name__)
@app.route('/gallery')
def gallery():
# 默认每页显示 6 张图，起始索引为 0
page_size = int(request.args.get('page_size', 6))
start_idx = max(0, int(request.args.get('start', 0))) # 防负数
# 查询全部图片（按时间倒序）
conn = sqlite3.connect('images.db')
cursor = conn.cursor()
cursor.execute("SELECT * FROM images ORDER BY date DESC")
all_rows = cursor.fetchall()
conn.close()
# 切片获取当前页数据
current_page_rows = all_rows[start_idx:start_idx + page_size]
# 计算是否可翻页
has_prev = start_idx > 0
has_next = (start_idx + page_size) < len(all_rows)
return render_template(
'gallery.html',
rows=current_page_rows,
start=start_idx,
page_size=page_size,
has_prev=has_prev,
has_next=has_next
)? 注意：实际生产中建议使用 LIMIT 和 OFFSET 直接在 SQL 层分页（如 SELECT ... LIMIT ? OFFSET ?），避免内存中加载全部记录，尤其当图片数量较大时。
? Jinja2 模板：动态生成导航链接
在 templates/gallery.html 中，使用参数化 URL 构建前后页按钮（无需表单或 JavaScript）：
<div class="container mt-4">
<div class="row">
{% for row in rows %}
<div class="col-md-4 p-3">
<div class="card text-center h-100">
<img src="{{ url_for('static', filename='uploads_Andrea/' + row.filename) }}"
class="card-img-top" alt="{{ row.title }}" style="height: 200px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title">{{ row.title }}</h5>
<small class="text-muted"><i>{{ row.date }}</i></small>
<p class="card-text mt-2 flex-grow-1">{{ row.description }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- 分页导航栏 -->
<nav class="mt-5 d-flex justify-content-center">
<ul class="pagination">
{% if has_prev %}
<li class="page-item">
<a class="page-link" href="{{ url_for('gallery', start=start-page_size, page_size=page_size) }}">« 上一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">« 上一页</span>
</li>
{% endif %}
<li class="page-item disabled">
<span class="page-link">第 {{ (start // page_size) + 1 }} 页</span>
</li>
{% if has_next %}
<li class="page-item">
<a class="page-link" href="{{ url_for('gallery', start=start+page_size, page_size=page_size) }}">下一页 »</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">下一页 »</span>
</li>
{% endif %}
</ul>
</nav>
</div>? url_for() 是 Flask 提供的安全 URL 构建函数，自动处理 URL 编码和路径拼接，强烈推荐替代硬编码 。
⚠️ 重要注意事项
- 不要使用全局变量（如 STEP）管理分页状态：Flask 多进程/多线程下全局变量不可靠，且无法区分不同用户的浏览位置。
- 避免 POST + 表单 实现简单翻页：对只读浏览操作，应优先使用 GET 请求——它语义正确、可收藏、可后退、利于 SEO。
- 务必校验和限制参数值：例如 page_size 应限定合理范围（如 1–24），防止恶意大值导致性能问题。
- 考虑添加总页数和跳转功能：可在模板中计算 total_pages = (len(all_rows) + page_size - 1) // page_size，进一步增强用户体验。
✅ 总结
通过将分页逻辑从“服务端状态”转向“客户端参数”，你不仅解决了初学者常见的“按钮怎么触发后端更新”困惑，还构建了更健壮、可扩展的 Web 分页方案。整个流程清晰解耦：
? 后端只负责根据 start 和 page_size 返回对应数据；
? 前端（Jinja2）负责渲染内容与生成带参数的导航链接；
? 浏览器通过标准 GET 请求完成页面切换——简洁、高效、符合 Web 最佳实践。
