第五天讓網站有了畫面，但清單是寫死在HTML裡的，今天開始做api，讓資料由後端提供，前端再去拿。

今天做的事
先用一個陣列暫存待辦清單，並寫了兩支GET API：

const todos = [
  { id: 1, title: '完成Web原理作業', done:false},
  { id: 2, title: '寫鐵人賽文章', done:false},
  { id: 3, title: '複習 Express 路由', done:true},
];

app.get('/api/todos', (req, res) => {
  res.json(todos);
});

app.get('/api/todos/:id', (req, res) => {
  const todo = todos.find(t => t.id === Number(req.params.id));
  if (!todo) {
   return res.status(404).json({ message: '找不到這筆代辦事項' });
  }
  res.json(todo);
});

瀏覽器打開/api/todos會看到JSON資料，打開/api/todos/99則會收到404加上錯誤訊息。
接著在index.html用fetch呼叫這支Api，把回傳的資料動態產生清單，畫面外觀沒變，但資料來源已經從HTML變成後端了。

觀察

• res.json()跟第三天的res.send()不一樣，它會自動把Content-Type設成application/json，前端才知道要用JSON解析
• :id是路由參數，網址上的2會出現在req.params.id，但它拿到的是字串，所以要用Number()轉成數字，才能跟陣列裡的數字id比對
• 第五天學到的404這次派上用場：找不到資料時回傳404狀態碼，跟第三天手動寫的/notfound是同一個概念，只是現在有了真實的情境

卡關
我在用開發者工具檢查的時候，沒注意到fetch的網址是/api/todos，我用了/api/todos/2在做檢查，結果清單完全跑不出來，Console報錯說forEach is not a function，回頭查看index.html的程式碼發現我根本檢查錯網址，換到正確的請求（/api/todos）後，json陣列就順利出現了。這也讓我更清楚分辨拿全部清單跟拿單一筆清單這兩支API在用途上的差異，不是隨便哪個網址都能為給同一段前端程式碼。

心得
今天第一次體會到前後端分離的感覺：後端只負責提供資料，前端負責決定怎麼呈現，之前寫死在HTML的清單，現在如果要改資料只要動後端的陣列就好，網頁本身完全不用改。
不過陣列只存在記憶體哩，伺服器一重啟資料就會回到原始狀態，之後要靠資料庫才能真正保存。