初学，这篇文章不想写太长，代码写的也很菜，纯属想记录一下这个寒假的成果

效果图

添加

完成

编辑

删除

坑

UI框架CSS先找Class

特地请教了阿阳大大

前端代码

.card {
  margin-bottom: 10px;
  .el-card__body {
    height: 80.5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .ckecked_item {
      text-decoration: line-through;
    }
    ...
    }
  }
}

Delete请求

Delete请求不能像Post一样传Body，应和Get请求类似（感谢阿阳大大和群内大佬门，这个Bug找了半天）

前端代码

axios
  .delete(`${URL}/todo`, { params: { id: item.id } })
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });

后端代码

app.delete("/todo", async (req, res) => {
  try {
    const deleteID = { id: Number(req.query.id) };
    const result = await collection.deleteOne(deleteID);
    if (result.deletedCount === 1) {
      res.sendStatus(204);
    } else {
      res.sendStatus(404);
    }
  } catch {
    res.sendStatus(400);
  }
});

使用v-for记得给子组件传id

如题，这个没代码，感谢小C给的思路

结语

第一次接触Web项目，前后端代码都写的很菜，欢迎大佬们帮我的代码挑挑毛病，感激不尽！