作品五：天气查询应用

​

🔔

这个项目可以让你学习如何与后端服务交互，处理异步请求和错误。​

这个项目要实现天气查询功能 ，用户输入城市名称，查询当前天气 ，显示温度 、天气状况 、湿度 、风速等信息。还要显示未来几天的天气预报 。​

可以自动获取用户位置并显示天气 。常用的城市可以收藏起来，方便下次查询。​

​

​

​

​

​

33%

​

​

​

​

33%

​

​

​

​

33%

​

​

​

💚

技术选型上，前端用 React + TypeScript + Vite ，样式用 Tailwind CSS ，​

天气数据通过OpenWeatherMap，收藏的城市用 LocalStorage 保存。​

​

开发步骤​

开发的第一步是注册。去 OpenWeatherMap 官网注册账号。注册很简单，填写基本信息就可以了 。免费版有一定的调用次数限制，但对于学习和个人使用完全够用 。​

​

​

2）封装请求​

然后封装请求 。创建一个 API 工具文件，把所有调用都封装在这里 。告诉 AI：​

​

代码块​

Plain Text

创建 API 工具文件，封装天气 API 调用：​

- 定义 API 基础 URL 和 API Key（从环境变量读取）​

- 创建 getCurrentWeather 函数，获取当前天气​

- 创建 getForecast 函数，获取未来天气预报​

- 支持按城市名称或经纬度查询​

- 要有错误处理​

​

这个提示词说明了要封装哪些功能，AI 会创建完整的 API 工具文件。​

3） 实现搜索功能​

接下来实现搜索功能 。告诉 AI：​

​

代码块​

Plain Text

实现天气查询功能：​

- 用户输入城市名称，点击搜索​

- 调用 API 获取天气数据​

- 显示温度 、天气状况 、湿度 、风速等信息​

- 查询过程显示加载动画​

- 查询失败显示友好提示（ 比如"找不到该城市"）​

​

这个提示词包含了功能要求和用户体验要求 。AI 会实现完整的搜索功能，包括加载状态和错误处理。​

4） 实现位置定位​

还可以实现位置定位功能 。告诉 AI：​

​

代码块​

Plain Text

实现自动定位功能：​

- 使用浏览器的 Geolocation API 获取用户位置​

- 根据经纬度查询天气​

​

这样用户不用手动输入城市名称，更方便。​

5）添加收藏功能​

最后添加收藏功能 。告诉 AI：​

​

代码块​

Plain Text

实现城市收藏功能：​

- 查询过的城市可以收藏​

- 收藏列表保存在 LocalStorage​

- 点击收藏的城市可以快速查询​

- 支持删除收藏​

​

这样用户可以快速查询常用城市的天气。​

​

​

关键技术点​

这个项目的关键是处理好 API 调用 。API 请求可能失败，要做好错误处理 。比如找不到城市 、API Key 无效 、网络错误等，都要给出友好的提示 。在请求过程中要显示加载动画，让用户知道正在查询。​

还要注意 API Key 的安全 。不要直接写在代码里 ，要使用环境变量 。创建一个 .env.local 文件，把 API Key 放进去，然后在代码中通过环境变量读取 。记得把 .env.local 添加到 .gitignore ，不要提交到 Git ，避免泄露。​

扩展思路​

基础版完成后，可以继续扩展功能 。比如添加天气图标和动画，让界面更生动；显示空气质量指数，关注健康；支持多城市对比 ，一次查看多个城市的天气；添加天气预警，及时提醒恶劣天气；甚至可以查询历史天气 ，分析天气趋势。​

写在最后​

通过这 5 个项目 ，你已经学习了 Web 开发的核心技能：组件开发 、状态管理 、数据持久化 、API 调用 、用户交互等 。从简单的作品集网站，到复杂的待办事项应用 ，从文本编辑器到定时器，再到调用外部 API ，每个项目都让你掌握了新的技能。​

如果你在开发过程中遇到困难，或者想学习更多的开发技巧和最佳实践，可以参考本教程的经验技巧板块，那里有更详细的讲解。​

掌握了个人工具开发后，在下一篇文章中，我会带你做更酷的 AI 应用 ，让我们一起探索 AI 的无限可能。​

​

​

​

​

50%

​

​

​

​

50%

​

​