第 7 章：实战项目 2 - 天气查询 Web 应用 (Vibe Weather)
🪢
🎯 本章目标：从"玩具"迈向"工具"
我们将构建一个实时连接外部世界（API）的应用
核心技能：API 集成、异步状态管理、复杂错误处理（Error Handling）、环境变量配置。
33%
33%
33%
7.1 项目规划与准备
这次我们不仅要好看，还要"真实"。
需求概览
搜索：输入城市名，查询天气。
展示：显示温度、湿度、风速和天气图标。
预测：显示未来 5 天的天气预报。
动态：根据天气状况（晴/雨/雪）自动切换背景动态效果。
准备工作：获取 API Key
本项目使用 OpenWeatherMap (免费且稳定)。
访问 openweather官网 注册账号。
在 API Keys 页面生成一个 Key。注意：新生成的 Key 可能需要 10-20 分钟才能生效。
记下这个 Key，等会要用。
初始化项目
打开 Cursor 终端，运行：
代码块
Plain Text
npm create vite@latest vibe-weather -- --template react-ts
cd vibe-weather
npm install
code . # 用 Cursor 打开新文件夹
7.2 API 集成：从"后端"开始
在 Vibe Coding 中，处理 API 的最佳策略是 "先定义数据，再写 UI"。
步骤 1：配置环境变量
首先，告诉 AI 我们要安全地存储 Key。
步骤 2：封装 API 服务
不要把 fetch 逻辑散落在组件里。让我们用 CRCO 框架封装一个服务层。
代码块
Markdown
[Context]
项目使用 TypeScript。我有了 OpenWeatherMap 的 API Key。
API 文档（简述）：
- 当前天气: /data/2.5/weather?q={city}&appid={key}
- 5天预报: /data/2.5/forecast?q={city}&appid={key}
[Requirement]
请创建 `src/services/weather.ts` 文件。
1. 导出一个 `getWeather(city: string)` 函数。
2. 导出一个 `getForecast(city: string)` 函数。
3. 使用 axios 或 fetch 获取数据。
[Constraints]
- 为 API 返回的数据定义清晰的 TypeScript Interface。
- **参数优化**：请求 URL 请带上 `&units=metric` 参数，直接获取摄氏度数据，无需手动转换。
- **语言设置**：请求 URL 带上 `&lang=zh_cn`，获取中文天气描述。
- 如果 API 报错（如 404 City Not Found），请抛出带有具体信息的 Error。
7.3 前后端分离的提示词策略
现在后端逻辑（Service 层）有了，我们来写前端。这次我们尝试 "数据驱动 UI " 的提示词策略。
步骤 3：构建 UI 骨架
把刚才生成的 weather.ts 里的 Interface 复制一下，丢给 AI。
代码块
Plain Text
[Context]
参考以下数据结构（从 weather.ts 复制而来）：
```typescript
interface WeatherData {
temp: number;
humidity: number;
condition: 'Clear' | 'Rain' | 'Clouds';
...
}
[Requirement] 请构建一个 WeatherCard 组件来展示上述数据。
顶部显示巨大的温度数字。
底部网格展示湿度、风速等详情。
根据 condition 字段，显示对应的 Lucide React 图标（比如 Sun, CloudRain）。
[Vibe] 设计风格参考 iOS 天气应用，半透明磨砂玻璃质感。
代码块
YAML
---
## 7.4 错误处理与边界情况 (Robustness)
一个好的应用不仅要能跑，还要经得起"造"。
### 步骤 4：处理 Loading 和 Error
不要让用户看白屏。
```markdown
[Context]
目前的 `App.tsx` 在请求数据时没有反馈。
[Requirement]
请优化用户体验：
7.5 UI 美化：根据天气切换背景
这是体现 Vibe 的高光时刻。
步骤 5：动态背景
代码块
Plain Text
[Requirement]
我希望背景能随天气变化。
请创建一个 `BackgroundWrapper` 组件。
1. 接收 `weatherCondition` 作为 props。
2. 如果是 'Clear'，背景显示阳光明媚的渐变色。
3. 如果是 'Rain'，背景变为深蓝色调。
4. 无论切换成什么，都要有 CSS transition 平滑过渡效果，不要生硬跳变。
📝 本章小结
通过本章，通过本项目，你掌握了现代前端开发的三个核心范式：
Service Layer 模式：将脏活累活（API 请求、数据转换）封装在独立文件。
TypeScript 契约：先定义 Interface，让 AI 严格按照数据结构生成 UI。
状态机思维：始终考虑 Idle / Loading / Success / Error 四种状态。
这不仅仅是 Vibe Coding，这是专业级的工程思维。