前面幾天做了C（新增）R（讀取），今天補上U（更新）跟D（刪除），CRUD四個操作終於到齊了。

今天做的事
新增了兩支路由：

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

app.delete('/api/todos/:id', (req, res) => {
  const index = todos.findIndex(t => t.id === Number(req.params.id));
  if (index === -1) return res.status(404).json({ message: '找不到這筆待辦事項' });
  todos.splice(index, 1);
  res.status(204).send();
});

用Thunder Client分別測試PUT跟DELETE都正常後，把前端的清單項目改成可以點擊切換轉換完成狀態（顯示刪除線），並加上刪除按鈕。

觀察

• DELETE成功後回傳204 No Content，跟前幾天用過的200、201、404都不一樣，204代表
  "成功了，但沒有內容要回傳給你"，很符合刪除這個動作的語意：東西都刪掉了，還回傳什麼資料回去也沒意義
• 刪除按鈕用了 e.stopPropagation()，因為刪除按鈕包在可點擊切換完成的裡面，如果沒有阻止事件往外傳遞，點刪除會同時觸發切換完成跟刪除兩個動作，這是我第一次實際遇到需要處理事件冒泡的情境
• PUT這裡設計成切換而不是設定成某個值，是簡化過的版本；真正嚴謹的RESTful設計，PUT通常需要在body帶入完整要更新的內容，這點之後可以再優化

卡關
改了index.html的程式碼後，但待辦清單的網站卻沒有出現刪除的按鈕跟原本就有的待辦事項，重新檢查了程式碼，發現有一些地方打錯或是少打，所以造成輸出的東西是錯的，修該好之後，就有出現原本的待辦事項，點擊之後會出現刪除線，也可以按刪除的按鈕將其刪除。

心得
CRUD四個操作寫完一輪後，回頭看整個API的架構清楚很多：同一個網址 /api/todos/:id，靠HTTP方法（GET/PUT/DELETE）決定要做什麼事，這正是第六天提到的RESTful精神，用網址代表資源，用方法代表動作，到今天終於實際體會到這句話的意思。目前的功能都正常，但資料還是活在記憶體陣列裡，這個問題已經拖了好幾天，明天要正式處理：讓資料庫接手保存資料。