iT邦幫忙

2025 iThome 鐵人賽

DAY 18
0

「畫面有了,但沒有資料就像蓋房子沒水電。今天我們用 Node.js + Express 建立一個簡單的後端 API,先回傳假資料,讓前端可以抓到資料並顯示。這也是學習前後端分工的第一步!」

內容重點

  • 設計 /weather API,先回傳假資料
  • 前端 fetch /weather,確認能拿到資料

程式說明

app.get("/weather", (req, res) => {
  res.json({
    name: req.query.city || "Taipei",
    temp: 25,
    description: "晴天",
    icon: "01d"
  });
});

  • 前端 fetch:
const res = await fetch(`/weather?city=${city}`);
const data = await res.json();

解析:先建立前後端溝通流程,確保前端 fetch 後能拿到資料。


上一篇
Day17.天氣圖示登場
下一篇
Day19.串接 OpenWeather API
系列文
AI × Web:生活魔法方程式19
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言