# 🏅Day18 - 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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/wvLXbGv) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/vYqRXqB) |
| Aden | [CodePen](https://codepen.io/Osases/pen/RwzMoga) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/jOjzVaz) |
| dodo | [CodePen](https://codepen.io/MissDouble/pen/MWMVbNR) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/JjQLERR) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/vYqRJvq) |
| KK | [CodePen](https://reurl.cc/5d8GrV) |
|好了啦|[CodePen](https://codepen.io/j-z-the-flexboxer/pen/jOjzeOw) |
|SKey|[CodePen](https://codepen.io/Dale-Chien/pen/JjQvmqg) |
| 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/OJeZGWd) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/ExBRWxK) |
| World |[Codepen](https://codepen.io/HexschoolVuePujols/pen/GRbGaqa) |
| mu mu |[Codepen](https://codepen.io/ishuki916/pen/KKjBNpV) |
| Mars |[Codepen](https://codepen.io/MarsKuo/pen/BagPxyr) |
| Kevin Wei |[Codepen](https://codepen.io/kevin21305991/pen/yLdqEVa) |
| anthy7154 |[Codepen](https://codepen.io/hnhmgzbw-the-sans/pen/BagOPmL) |
| Zhen |[Codepen](https://codepen.io/yunnnz/pen/OJewdpe) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/zYVmmqr) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/zYVyKXQ) |
| Ching | [CodePen](https://codepen.io/huangching/pen/MWMLmOL) |
| Eden | [Codepen](https://codepen.io/iseden/pen/mdNRzLL)|
| Triple | [CodePen](https://codepen.io/riku30/pen/NWQRyOG) |
<!--

| user | [CodePen]() |

-->