天气查询

在本章中，我们将构建天气查询工具。

设置

创建 src/pages/weather.astro：

---

---

<MainLayout>
  <h1>天气查询</h1>
  <form>
    <input type="text" placeholder="输入城市" />
    <button type="submit">查询</button>
  </form>
</MainLayout>

API 集成

使用天气 API 获取数据：

const response = await fetch(
  `https://api.weather.com/query?city=${city}`
);
const data = await response.json();

显示结果

显示天气信息：

<div class="weather-info">
  <h2>{data.city}</h2>
  <p>温度：{data.temperature}°C</p>
  <p>天气：{data.condition}</p>
</div>

下一步

在下一章中，我们将添加更多工具。