热点新闻助手开发复盘

做了什么

从零搭建了一个热点新闻聚合工具。技术选型 Vue 3 + Vite，纯前端架构，通过天行数据 API 获取新闻。整个开发过程分为五个阶段：项目初始化、核心搜索功能、辅助功能（搜索历史、边界状态）、响应式样式适配、Docker 容器化部署。

核心功能包括：关键词搜索、三个新闻分类切换（国际/互联网/AI）、搜索历史标签、Loading/错误/空状态处理、桌面四列到手机单列的响应式网格布局。整个项目从初始化到部署上服务器，大约一天完成。

踩了什么坑

API 对接是最痛的坑。 天行数据的返回结构是 { code, msg, result: { newslist } }，但文档和示例代码写的是 response.data.newslist，少了一层 result。调了半天没数据，最后对比原始 JSON 才发现路径不对。另外 .env 里把完整 URL 写进了 BASE_URL，代码又拼了 /news/index，导致请求地址变成 apis.tianapi.com/world/index/news/index，直接 404。

Docker 构建也踩了几个坑。 服务器上没有 package-lock.json，npm ci 直接报错；Dockerfile 被 vim 的 swap 文件（~字符）污染，构建时提示 unknown instruction: ~；端口映射写成 8080:81，但 nginx 监听的是 80，容器跑起来但访问不了。

AI 哪里帮了忙 / 坑了你

帮了忙的地方： 组件代码生成很快，SearchBar、NewsList、NewsCard 几个组件基本一次成型；样式适配时 CSS Grid 响应式布局直接给出三断点方案，省了查文档的时间；Docker 配置文件秒生成，不用手写 Dockerfile + nginx.conf。

坑了你的地方： AI 生成的代码里 API 响应路径写错了（response.data.newslist 而不是 response.data.result.newslist），因为训练数据里的天行数据文档就是错的。这个问题花了挺长时间排查，因为报错信息不明显——请求成功了，只是返回空数组。另外 AI 不知道你的服务器环境（有没有 package-lock、80 端口被占），给的方案需要反复调整。

下次怎么做更快

1. 先拿真实 API 响应确认数据结构。 不要假设文档是对的，用 curl 或 Postman 拿一次真实返回，再写解析代码。能省掉 80% 的对接调试时间。
2. .env 配置要和代码对齐。 BASE_URL 到底包不包含路径，在第一个文件里就定死，别让 AI 猜。
3. Docker 直接用 dist 部署。 前端项目不需要在服务器上再跑一次 npm build，本地构建好把 dist/ 传上去就行，Dockerfile 从 10 行缩到 5 行。
4. 先跑通最小闭环。 第一天先把"搜索→展示"跑通，再加历史、样式、分类。别一口气全写完再测，容易积压问题。
5. 给 AI 更多上下文。 直接把 API 原始返回贴给它，比让它猜结构靠谱得多。