article-pagination.md 1.76 KB

文章列表分页 Plan

目标: 文章列表支持分页加载,默认每页 20 篇,不一次性加载全部

涉及文件:

  • /data/data/com.termux/files/home/wechat-viewer/app.py — 改 /api/articles 发回端
  • /data/data/com.termux/files/home/wechat-viewer/templates/articles.html — 改前端分页 UI
  • /data/data/com.termux/files/home/wechat-viewer/test_smoke.py — 更新 T4 测试

数据流:

  • 改前: 前端 fetch(/api/articles) → 后端查 500 条 → 全量返回
  • 改后: 前端 fetch(/api/articles?page=1&per_page=20) → 后端查 500 条(DB 层不变)→ 只返回当前页 + total → 前端渲染分页控件

步骤:

  1. 后端改 /api/articles:

    • 接受 page(默认 1)和 per_page(默认 20)参数
    • 返回 {ok, total, page, per_page, data: [当前页文章], talker_names: {talker→name}}
    • 文章列表缓存下来?不,现在每次请求都重新处理 500 条有点浪费,但先不做缓存(避免引入新问题),先做分页
  2. 前端改 articles.html:

    • load() → loadPage(page),只发一页请求
    • 底部加分页控件:上一页 / 页码 / 下一页
    • checkCache 只检查当前页的文章(节省批量查询)
    • 搜索/筛选仍然在前端已有页面内过滤
  3. 更新 test_smoke.py T4:

    • 验证分页响应格式:ok + total > 0 + per_page + page + data 长度 <= per_page

验证:

  • python3 test_smoke.py 通过
  • curl -s 'http://127.0.0.1:5000/api/articles?page=1&per_page=5' 返回 5 篇
  • 页面打开速度快,分页控件可操作

风险:

  • T4 测试的 check 签名可能变 → 需同步
  • 搜索/筛选是先加载全量再过滤,还是服务端搜索?先保持前端筛选,因为数据量不大