# 🏅Day19 - todolist 實作篇：新增資料功能

## 新增資料

在 Day17 有介紹到如何註冊登入，這邊會往下繼續做新增功能。

**提醒一下，必須要先[註冊](https://codepen.io/yen-kg/pen/abgzmKE)一個帳號，接著登入到後台才能使用新增資料！**

---

通常在新增資料的時候，我們會使用 `POST` 的方式，並且後面帶上 `data` 資料、以及 `token` 密鑰

而這一組 `token` 密鑰是我們在登入的時候取得的，如果沒有這一組 `token`，

我們會沒有權限新增資料唷！

const url = "example/api";

axios.post(url, data, {
    headers: {
      Authorization: token.value,
    },
  })
  .then(response => {
    console.log('資料新增成功:', response.data);
  })
  .catch(error => {
    console.error('新增資料時發生錯誤:', error);
  });

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/RwzPqKR)，執行以下要求（只能操作 script 的部分）：
* 完成新增資料功能，並且將資料存在 `todos` 的陣列中。
* 完成取得全部的資料，並在新增資料後，能夠更新畫面。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
const addTodo = async () => {
if (!newTodo.value) return;
const todo = {
content: newTodo.value,
};
await axios.post(`${api}/todos`, todo, {
headers: {
Authorization: token.value,
},
});
newTodo.value = '';
getTodos();
};

const getTodos = async () => {
const response = await axios.get(`${api}/todos`, {
headers: {
Authorization: token.value,
},
});
todos.value = response.data.data;
};
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/zxvLLpx) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/yyYqxjJ) |
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/zxvLmZL) |
| Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/VYvBVBb) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/GgpBwdO) |
| dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/zxvLmEJ) |
| DaRon | [CodePen](https://codepen.io/daron0811/pen/XJmBobK) |
| yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/OPyoPwY) |
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/gbadpxp) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/WbQKPOp) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/yyYxgax) |
| Lin | [CodePen](https://codepen.io/Lin4611/pen/LEpJxpY) |
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/vENzZYL) |
| wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/zxvJJaN) |
| dean | [CodePen](https://codepen.io/ch933114/pen/EaVdgQg)|
| 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/JoYeYRx) |
| Toung | [CodePen](https://codepen.io/Toung/pen/PwPLXmZ)
| Rexlin | [CodePen](https://codepen.io/Rexlin595/pen/KwdEOmq)
| haohaoliao | [CodePen](https://codepen.io/yuyuyuhaohao/pen/OPMpgJL) |
<!--

| user | [CodePen]() |

-->