8小时AI Coding落地：用Vue3+Flask+Docker把「热点资讯+历史上的今天」做成知今也知古的小产品，TaoToken统一Key接入hermes-agent

1. 从「刷热点」到「知今也知古」这个产品到底解决什么问题每天刷热点资讯的时候我总有一种割裂感资讯 App 只推今天的热点历史事件类产品又得专门去翻两者之间没有任何连接。于是我想做一个打开即用的小站——左边是今日热点按日期聚合、分类清晰右边或侧边栏能随手翻到「历史上的今天」想找的时候一眼看到不想看的时候完全不打扰。这个产品适合谁适合想练手 AI Coding 全流程的开发者、想快速落地一个前后端分离小产品的独立开发者以及需要一套可复用「Vue3 Flask Docker」骨架的人。它不复杂但五脏俱全用户前端、管理后台、后端 API、数据库、定时采集任务一条链路全打通。我给自己定的目标是 8 小时内从零到可用。实测下来真正花在「想清楚要什么」上的时间比「写代码」多得多。重复的 CRUD、路由骨架、Docker 配置全部交给 AI 生成我只负责判断效果对不对、交互顺不顺。整个架构分三块用户前端跑在 5011管理前端跑在 5012后端 Flask 服务跑在 5013。数据来源靠一个 hermes-agent 定时任务去拉取热点资讯和历史上的今天写入 MySQL再由 Flask 暴露 RESTful 接口给前端。TaoToken 在这里承担统一 Key/API 通道的角色把模型调用和采集链路的鉴权收敛到一处省得每个模块各配一套。下面我把可复制的 Dockerfile、docker-compose.yml、Flask 路由骨架和 hermes-agent 配置片段都摊开讲最后给出本地启动后验证「资讯 历史」双通道返回的检查动作。2. TaoToken 前置统一 Key 与 API 通道怎么准备在动手写代码之前先把模型调用这条链路理顺。hermes-agent 在采集和整理资讯时需要调用大模型做摘要、分类、去重如果每个模块各自管理 Key后期维护会很乱。TaoToken 的思路是提供一个统一的 API 通道你只需要在一个地方拿到 Key所有模块共用。第一步打开官网了解接入方式https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content第二步进入控制台创建 API Key。控制台地址https://taotoken.net/console在控制台里新建一个 Key复制出来保存好。这个 Key 后面会写进 hermes-agent 的配置和 Flask 的环境变量里。注意不要把它硬编码进代码提交到仓库用.env文件管理。第三步如果你要验证模型是否可用可以直接在模型对话页面测试https://taotoken.net/model-chat输入一段 prompt看是否正常返回。这一步能帮你排除「Key 无效」或「通道不通」的问题避免后面调试 Flask 时把网络问题误判成代码问题。第四步如果你打算长期做编码类任务或跑 Agent可以了解 Coding Planhttps://taotoken.net/coding-plan它更适合持续性的开发场景。接入文档在这里遇到参数问题可以对照查https://taotoken.net/docAPI 的基础地址是https://taotoken.net/api注意这个地址不带 UTM 参数直接用于代码里的 base_url。Key 的创建入口https://taotoken.net/api-keys把这几步做完你手里应该有一个可用的 Key 和一个确认能通的 base_url。接下来所有模块都复用这一套。3. 可复制配置Dockerfile、docker-compose 与 Flask 骨架3.1 项目目录结构先约定目录后面所有文件都按这个放hot-history/ ├── docker-compose.yml ├── backend/ │ ├── Dockerfile │ ├── requirements.txt │ ├── app.py │ ├── models.py │ └── .env ├── user-web/ │ ├── Dockerfile │ └── (Vue3 Vite 项目) ├── admin-web/ │ ├── Dockerfile │ └── (Vue3 Vite 项目) └── hermes-agent/ ├── config.yaml └── tasks/3.2 后端 Flask 的 DockerfileFROM python:3.11-slim WORKDIR /app COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt COPY . . EXPOSE 5013 CMD [gunicorn, -b, 0.0.0.0:5013, -w, 2, app:app]requirements.txt 里至少要有这些Flask3.0.0 Flask-Cors4.0.0 SQLAlchemy2.0.25 PyMySQL1.1.0 gunicorn21.2.0 requests2.31.0 python-dotenv1.0.03.3 docker-compose.yml 一键起服务version: 3.8 services: mysql: image: mysql:8.0 container_name: hot-history-mysql environment: MYSQL_ROOT_PASSWORD: rootpass MYSQL_DATABASE: hot_history MYSQL_USER: appuser MYSQL_PASSWORD: apppass ports: - 3306:3306 volumes: - mysql_data:/var/lib/mysql healthcheck: test: [CMD, mysqladmin, ping, -h, localhost] interval: 10s timeout: 5s retries: 5 backend: build: ./backend container_name: hot-history-backend ports: - 5013:5013 environment: - DB_HOSTmysql - DB_USERappuser - DB_PASSWORDapppass - DB_NAMEhot_history - TAOTOKEN_API_KEY${TAOTOKEN_API_KEY} - TAOTOKEN_BASE_URLhttps://taotoken.net/api depends_on: mysql: condition: service_healthy user-web: build: ./user-web container_name: hot-history-user-web ports: - 5011:5011 depends_on: - backend admin-web: build: ./admin-web container_name: hot-history-admin-web ports: - 5012:5012 depends_on: - backend volumes: mysql_data:这里有个关键点TAOTOKEN_API_KEY从宿主机环境变量注入不写死在 compose 文件里。启动前先export TAOTOKEN_API_KEY你的Key或者写进同目录的.env文件让 compose 自动读取。3.4 Flask 路由骨架app.py 里把双通道接口先搭出来import os from flask import Flask, jsonify, request from flask_cors import CORS from models import db, HotTopic, HistoryEvent from datetime import datetime app Flask(__name__) CORS(app) app.config[SQLALCHEMY_DATABASE_URI] ( fmysqlpymysql://{os.getenv(DB_USER)}:{os.getenv(DB_PASSWORD)} f{os.getenv(DB_HOST)}/{os.getenv(DB_NAME)}?charsetutf8mb4 ) app.config[SQLALCHEMY_TRACK_MODIFICATIONS] False db.init_app(app) app.route(/api/health, methods[GET]) def health(): return jsonify({status: ok, time: datetime.now().isoformat()}) app.route(/api/topics, methods[GET]) def get_topics(): date request.args.get(date) query HotTopic.query if date: query query.filter(HotTopic.date date) topics query.order_by(HotTopic.created_at.desc()).limit(50).all() return jsonify([t.to_dict() for t in topics]) app.route(/api/history, methods[GET]) def get_history(): month request.args.get(month) day request.args.get(day) query HistoryEvent.query if month and day: query query.filter( HistoryEvent.month int(month), HistoryEvent.day int(day) ) events query.order_by(HistoryEvent.year.asc()).all() return jsonify([e.to_dict() for e in events]) app.route(/api/history/preview, methods[GET]) def preview_history(): month request.args.get(month) day request.args.get(day) events HistoryEvent.query.filter( HistoryEvent.month int(month), HistoryEvent.day int(day) ).limit(3).all() return jsonify([e.to_dict() for e in events]) if __name__ __main__: with app.app_context(): db.create_all() app.run(host0.0.0.0, port5013)models.py 定义两张核心表from flask_sqlalchemy import SQLAlchemy from datetime import datetime db SQLAlchemy() class HotTopic(db.Model): __tablename__ hot_topics id db.Column(db.Integer, primary_keyTrue) title db.Column(db.String(255), nullableFalse) category db.Column(db.String(64)) source db.Column(db.String(128)) date db.Column(db.String(16), indexTrue) created_at db.Column(db.DateTime, defaultdatetime.utcnow) def to_dict(self): return { id: self.id, title: self.title, category: self.category, source: self.source, date: self.date, } class HistoryEvent(db.Model): __tablename__ history_events id db.Column(db.Integer, primary_keyTrue) year db.Column(db.Integer) month db.Column(db.Integer, indexTrue) day db.Column(db.Integer, indexTrue) title db.Column(db.String(255), nullableFalse) description db.Column(db.Text) def to_dict(self): return { id: self.id, year: self.year, month: self.month, day: self.day, title: self.title, description: self.description, }3.5 hermes-agent 配置片段hermes-agent 负责定时拉取数据。config.yaml 里把 TaoToken 的通道配好agent: name: hot-history-collector schedule: 0 */2 * * * llm: provider: taotoken base_url: https://taotoken.net/api api_key: ${TAOTOKEN_API_KEY} model: hermes-agent tasks: - name: fetch_hot_topics type: http_fetch source: https://example-news-api.com/trending post_process: - llm_summarize - llm_categorize output_table: hot_topics - name: fetch_history_events type: http_fetch source: https://example-history-api.com/onthisday post_process: - llm_clean output_table: history_events这里的model: hermes-agent是你要调用的模型标识具体名称以接入文档为准。base_url统一指向 TaoToken 的 API 地址Key 从环境变量注入。4. 验证请求双通道返回的检查动作服务起来之后别急着开浏览器先用命令行确认后端两条通道都通。启动整套服务export TAOTOKEN_API_KEY你的Key docker compose up -d --build等 MySQL 健康检查通过、backend 起来后先打健康检查curl http://localhost:5013/api/health预期返回{status: ok, time: 2026-07-16T10:00:00}接着验证热点通道curl http://localhost:5013/api/topics?date2026-07-16如果数据库里已经有 hermes-agent 写入的数据你会看到一个 JSON 数组每条包含 title、category、source。如果返回空数组说明采集任务还没跑或没写进去先手动触发一次 hermes-agent。再验证历史通道curl http://localhost:5013/api/history?month7day16以及侧边栏 hover 用的预览接口curl http://localhost:5013/api/history/preview?month7day16预览接口最多返回 3 条正好对应前端日历图标 hover 时展示的标题数量。两个接口都返回数据说明「资讯 历史」双通道打通。最后打开前端确认http://localhost:5011 # 用户端 http://localhost:5012 # 管理端用户端应该能看到当日热点列表左侧日期索引可切换鼠标悬停日期旁的日历图标浮层弹出 3 条历史事件标题。管理端能录入热点、管理历史事件。5. 本篇常见错排查报错一backend 容器启动后立刻退出日志显示Access denied for user这是 MySQL 还没初始化完backend 就抢先连接了。compose 里已经加了depends_on的service_healthy条件但如果你的 MySQL 首次启动较慢健康检查可能还没通过。解决办法是确认 healthcheck 配置生效或者手动docker compose restart backend。报错二curl /api/topics返回 500日志提示表不存在db.create_all()只在__main__里执行而 gunicorn 启动时不会走那段。改成在应用启动时初始化或者进容器手动执行一次建表docker exec -it hot-history-backend python -c from app import app, db; app.app_context().push(); db.create_all()报错三hermes-agent 调用模型返回 401检查TAOTOKEN_API_KEY是否真的注入到了容器环境里。用docker exec hot-history-backend env | grep TAOTOKEN确认。如果为空说明宿主机没 export或者.env文件没被 compose 读到。Key 的创建入口在https://taotoken.net/api-keys重新生成一个再试。报错四前端跨域被拦Flask 里已经加了CORS(app)如果还报跨域检查是不是请求打到了错误的端口或者 Nginx 层又加了一层限制。本地开发阶段直接用CORS(app)全放开即可。报错五历史预览浮层挡住正文这是前端定位问题不是后端。浮层位置要根据日历图标的坐标动态计算别写死 top/left。用getBoundingClientRect()拿到图标位置再结合视口宽度判断浮层往左还是往右展开。6. 后续怎么继续用这套骨架这套东西跑通之后你会发现它不只是一个「热点 历史」的小站而是一套可复用的前后端分离模板。想加新功能比如个性化推荐、移动端适配、采集源扩展都可以在这套骨架上继续叠。如果你在接入或排障过程中卡住优先看 API Keys 和接入文档https://taotoken.net/api-keys https://taotoken.net/doc想先验证模型通道是否正常去模型对话页面发一条测试https://taotoken.net/model-chat如果你打算长期用这套链路做编码或跑 Agent 任务Coding Plan 会更合适https://taotoken.net/coding-planClaude Code 相关的接入说明在这里https://taotoken.net/ClaudeCodeAnthropic我自己的经验是先把双通道接口用 curl 验证通再去调前端交互能省掉大量「以为是前端问题其实是后端没数据」的来回折腾。hermes-agent 的定时任务建议先手动触发一次确认数据真的写进 MySQL 了再交给 cron 去跑。这样每一步都有明确的验证点8 小时落地不是靠运气是靠把不确定性一个个消掉。