第9课：做一个天气查询软件
进度 0/12
🌤️
做一个天气查询软件
做一个天气查询软件——让软件联网拿外部数据
📖知识引入
🌐API是什么
API是「软件给软件用的窗口」。天气网站把数据做成API，你的软件按规则发请求，就能拿到天气数据。就像餐厅的取餐口：你说要什么菜，后厨就给你什么菜。
📡请求天气
JavaScript用fetch函数发请求：fetch(url)就能拿到天气网站返回的数据。需要先注册一个免费天气API（如和风天气、OpenWeather）拿到API Key，相当于你的门禁卡。
📦解析JSON
API返回的数据是JSON格式——一种用大括号和键值对组织数据的文字格式。fetch得到后用 .json() 解析，就能像访问对象一样取数据：data.city、data.temp。
🖥️显示数据
拿到天气数据后渲染到页面：城市名、当前温度、天气状况、湿度、风力。可以加天气图标（晴天☀️、雨🌧️），让界面直观又好看，像专业天气App。
🛡️错误处理
网络可能失败、城市名可能错、API Key可能过期。好软件要处理这些情况：网络失败显示「请检查网络」、城市错显示「未找到该城市」——别让软件崩溃白屏。
💡
API=软件给软件用的窗口，fetch发请求，JSON是数据格式！
🔍天气查询软件的诞生
// 天气查询核心逻辑
const API_KEY = "你的key";
const url = `https://dev.qweather.com/v7/weather/now?`;
const MY_KEY = "XXX";
async function query(city) {
try {
const res = await fetch(url + new URLSearchParams({
location: city, key: MY_KEY
}));
if (!res.ok) throw new Error("网络错误");
const data = await res.json();
showWeather(data);
} catch (err) {
document.querySelector("#result").innerText =
"查询失败：" + err.message + " 请重试";
}
}
function showWeather(data) {
document.querySelector("#result").innerHTML = `
<h2>${data.city}</h2>
<p>温度：${data.temp}°C</p>
<p>天气：${data.text} ${icon(data.text)}</p>
`;
}跟着做，让你的软件联网：
第1步 注册免费天气API 去和风天气(dev.qweather.com)注册 创建应用拿到API Key（一串字符） 免费版每天1000次请求够用了
第2步 提需求给Trae 「用HTML+CSS+JS做一个天气查询： - 输入框输入城市名 - 点查询显示温度、天气、湿度、风力 - 用和风天气API - 我的Key是XXXX，请帮我接入 - 加天气图标，错误时友好提示」
第3步 AI生成代码并测试
输入「北京」→显示 25°C 晴 ☀️
输入「上海」→显示 28°C 多云 ⛅
第4步 错误处理测试
输入「不存在的城市」→应提示
断网→应提示「请检查网络」
报Bug给AI让它修
第5步 美化与扩展 「加未来3天预报」 「背景色随天气变化（晴蓝阴灰）」
第6步 给家人用 家人想知道出门带不带伞？ 你的软件告诉他！
数据流：
用户输入城市→软件构造请求URL
→fetch发请求→API返回JSON
→解析JSON→渲染到页面
从此你的软件 不再是孤岛， 它能拿到全世界的数据！
🎯小测验
第1题：API最像生活中的什么？
第2题：JavaScript发网络请求的常用函数是？
第3题：天气查询软件必须处理错误是因为？
📝本课知识点
- ✓API=软件给软件用的窗口
- ✓fetch发请求，JSON是返回数据格式
- ✓需要API Key作为身份凭证
- ✓解析JSON后渲染到页面
- ✓错误处理让软件不崩溃
第9课完成！继续探索下一课吧 🚀