上篇M2交卷，数据库里的文章都有了AI摘要——但还躺在SQLite里，只有你能通过终端看到。今天M3——把它变成一个真正的网站。不只有首页和详情页，还要有搜索、统计、分页、错误页。🎯本篇成品：一个多页面博客式站点——首页分页 + 详情页 + 搜索 + 统计 + 自定义错误页。含注释约220行。📌 太长不看版（给想快速上手的你）项目信息一句话说明里程碑M3·Web展示、搜索与统计代码行数~220行（含注释）依赖flask核心功能分页列表 + 详情 + 搜索 + 统计 + 404/500跑起来的命令flask --app web.app run --debug核心知识点Flask路由、Jinja2模板继承、分页、SQL聚合做完你能得到一个能发给朋友看的早报站一、从开始到这里：差的是“完整产品”之前的博客有首页和详情页，但离“能给别人用”还差：功能博客AI摘要那篇本篇首页列表✅ 有✅ 有 +分页详情页✅ 有✅ 有 +相关推荐搜索❌ 没有✅ 按标题和摘要搜统计❌ 没有✅ 总量、日增、来源分布错误页❌ 默认✅ 自定义404、500导航栏❌ 简单✅ 全站导航 + 激活状态空状态❌ 没处理✅ 友好提示📌这一篇的差别不在“会不会Flask”，在“有没有把它当产品做”。二、目录结构与本篇范围python_daily/ ├── web/ │ ├── __init__.py │ ├── app.py # 🚪 Flask入口（本篇） │ ├── templates/ │ │ ├── base.html # 全站骨架（本篇） │ │ ├── index.html # 首页分页（本篇） │ │ ├── detail.html # 详情页（本篇） │ │ ├── search.html # 搜索页（本篇） │ │ ├── stats.html # 统计页（本篇） │ │ └── errors/ │ │ ├── 404.html │ │ └── 500.html │ └── static/ │ └── style.css # 样式（本篇） ├── core/storage.py # 存储层（需扩展分页/搜索/统计函数） └── ...🎯本篇只做Web展示。自动化部署在第32篇。三、第1步：扩展存储层——给Web层准备数据接口之前的storage.py只有基础查询，Web层需要更多："""core/storage.py —— 追加Web层需要的数据接口"""defquery_page(conn,page:int=1,per_page:int=10)-list[tuple]:"""分页查询：第page页，每页per_page条"""offset=(page-1)*per_pagereturnconn.execute("SELECT id, title, url, source, date, summary FROM articles ""ORDER BY id DESC LIMIT ? OFFSET ?",(per_page,offset)).fetchall()defcount_all(conn)-int:"""文章总数（已存在）"""returnconn.execute("SELECT COUNT(*) FROM articles").fetchone()[0]defsearch_articles(conn,keyword:str)-list[tuple]:"""按关键词搜标题和摘要"""like=f"%{keyword}%"returnconn.execute("SELECT id, title, url, source, date, summary FROM articles ""WHERE title LIKE ? OR summary LIKE ? ORDER BY id DESC",(like,like)).fetchall()defstats_by_source(conn)-list[tuple]:"""各来源的文章数（GROUP BY）"""returnconn.execute("SELECT source, COUNT(*) FROM articles ""GROUP BY source ORDER BY COUNT(*) DESC").fetchall()defstats_by_day(conn)-list[tuple]:"""按日期统计文章数（取最近7天）"""returnconn.execute("SELECT DATE(created_at) as d, COUNT(*) FROM articles ""GROUP BY d ORDER BY d DESC LIMIT 7").fetchall()defquery_related(conn,article_id:int,source:str,limit:int=3)-list[tuple]:"""相关推荐：同来源的其他文章"""returnconn.execute("SELECT id, title FROM articles WHERE source = ? AND id != ? ""ORDER BY id DESC LIMIT ?",(source,article_id,limit)).fetchall()📌 四个新接口各司其职接口给谁用query_page首页分页列表search_articles搜索页stats_by_source+stats_by_day统计页query_related详情页的相关推荐💡DAO模式的好处在这里体现：Web层只调函数，不写SQL。将来换数据库只改storage.py。四、第2步：base.html——全站骨架与导航!DOCTYPEhtmlhtmllang="zh-CN"headmetacharset="UTF-8"metaname="viewport"content="width=device-width, initial-scale=1.0"title{% block title %}Python早报{% endblock %}/titlelinkrel="stylesheet"href="{ { url_for('static', filename='style.css') }}"/headbodyheadernavaclass="brand"href="{ { url_for('index') }}"🐍 Python早报/adivclass="links"ahref="{ { url_for('index') }}"class="{ { 'active' if request.endpoint == 'index' }}"首页/aahref="{ { url_for('stats') }}"class="{ { 'active' if request.endpoint == 'stats' }}"统计/aformclass="search-form"action="{ { url_for('search') }}"method="get"inputtype="text"name="q"placeholder="搜索文章…"/