software

我的项目6：前十新闻应用（使用 Flask + Hacker News API）

发布: (2025年12月21日 GMT+8 22:00)
5 min read
原文: Dev.to

Source: Dev.to

请提供您希望翻译的具体文本内容，我将为您翻译成简体中文并保留原始的格式、Markdown 语法以及技术术语。谢谢！

📖 介绍

在学习德语时，我经常使用新闻文章进行阅读练习。
但有时要快速获取新闻并不容易，尤其是当我只想要一个简单的标题列表来浏览时。

于是我决定构建一个小项目，自动获取最新的头条新闻并在简洁、直观的界面中展示。
这样，我既能轻松查看新闻，又能通过使用 Flask 和外部 API 构建实用的东西来学习。

🧱 1. 项目概述

一个最小化的 Flask Web 应用，获取 Hacker News 的 前 10 条新闻 并显示它们的标题和 URL。

本项目演示的内容

  • 获取外部 API 数据
  • JSON 解析
  • Flask 路由与模板渲染
  • 将后端数据传递给 HTML
  • 使用 Tailwind CSS 进行 UI 样式设计

小巧却非常适合学习 API 集成。

📂 2. 项目结构

news_app/
│
├── app.py                       # Main Flask app
├── tempCodeRunnerFile.py        # Auto‑generated runner file (VS Code)
└── templates/
       └── index.html            # Front‑end template

📝 什么是 tempCodeRunnerFile.py？

VS Code 在你运行单个文件或选定代码时会自动生成此文件。
它包含与 app.py 相同的逻辑，但仅用于临时执行。
我在博客中把它放在这里，以便项目结构与我本地的真实文件夹完全一致。

🌐 3. 使用的 API — Hacker News API

Hacker News 提供一个托管在 Firebase 上的免费 JSON API。

顶部故事 ID 列表

https://hacker-news.firebaseio.com/v0/topstories.json

获取单个故事

https://hacker-news.firebaseio.com/v0/item/.json

我们只需获取顶部故事列表并取前 10 条。

🖥️ 4. 后端代码 — app.py

from flask import Flask, render_template
import requests

app = Flask(__name__)

TOP_STORIES_URL = "https://hacker-news.firebaseio.com/v0/topstories.json"
ITEM_URL = "https://hacker-news.firebaseio.com/v0/item/{}.json"

@app.route("/")
def index():
    # 1) Fetch top story IDs
    ids = requests.get(TOP_STORIES_URL).json()

    # 2) Retrieve the top 10 stories
    news_list = []
    for item_id in ids[:10]:
        item = requests.get(ITEM_URL.format(item_id)).json()
        news_list.append({
            "title": item.get("title"),
            "url": item.get("url")
        })

    # 3) Render the HTML template
    return render_template("index.html", news=news_list)

if __name__ == "__main__":
    app.run(debug=True)

📄 5. tempCodeRunnerFile.py (自动生成)

from flask import Flask, render_template
import requests

app = Flask(__name__)

TOP_STORIES_URL = "https://hacker-news.firebaseio.com/v0/topstories.json"
ITEM_URL = "https://hacker-news.firebaseio.com/v0/item/{}.json"

@app.route("/")
def index():
    ids = requests.get(TOP_STORIES_URL).json()

    news_list = []
    for item_id in ids[:10]:
        item = requests.get(ITEM_URL.format(item_id)).json()
        news_list.append({
            "title": item.get("title"),
            "url": item.get("url")
        })

    return render_template("index.html", news=news_list)

if __name__ == "__main__":
    app.run(debug=True)

🎨 6. 前端模板 — templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Top News</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body>
    <h2>Top News</h2>
    <h3>Hacker News Top 10</h3>

    {% for item in news %}
        <div>
            <span>{{ loop.index }}</span>
            <strong>{{ item.title }}</strong>
            {% if item.url %}
                <a href="{{ item.url }}">{{ item.url }}</a>
            {% else %}
                <span>No link available</span>
            {% endif %}
        </div>
    {% endfor %}
</body>
</html>

就这样！运行 app.py，在浏览器中打开 http://127.0.0.1:5000/，你将看到最新的十条 Hacker News 标题，以简洁的 Tailwind 风格 UI 展示。祝编码愉快！

7. 如何运行

安装依赖

pip install flask requests

运行应用

python app.py

在浏览器中打开

http://127.0.0.1:5000

📚 8. 我学到的

  • 如何使用公共 API
  • 如何正确解析 JSON
  • Flask 路由 + 渲染 的工作原理
  • 如何将 API 数据传入 HTML 模板
  • 使用 TailwindCSS 构建基础 UI

一个轻量但非常实用的项目。

📌 9. Future Improvements (Easy Tasks)

  • 显示 20、30 或 50 条热门故事
  • 显示作者姓名和得分
  • 添加“时间前”格式
  • 添加暗/亮模式切换
  • 添加搜索/过滤功能

Template snippet (for reference)

{{ item.url }}
{% endif %}

{% endfor %}

{% if not news %}
No news available.
{% else %}

    Data provided by Hacker News API

{% endif %}
Back to Blog

相关文章

阅读更多 »