欢迎访问
这里是荆棘的私人博客
螓首蛾眉
Vue+Node.js写一个TodoList

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

效果图

添加

https://upyun.jsun.limecho.net/2021/02/添加.gif!/format/webp/lossless/true

完成

https://upyun.jsun.limecho.net/2021/02/完成.gif!/format/webp/lossless/true

编辑

https://upyun.jsun.limecho.net/2021/02/编辑.gif!/format/webp/lossless/true

删除

https://upyun.jsun.limecho.net/2021/02/删除.gif!/format/webp/lossless/true

UI框架CSS先找Class

特地请教了阿阳大大

https://upyun.jsun.limecho.net/2021/02/image-1.png!/format/webp/lossless/true

前端代码

.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找了半天)

https://upyun.jsun.limecho.net/2021/02/image.png!/format/webp/lossless/true

前端代码

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项目,前后端代码都写的很菜,欢迎大佬们帮我的代码挑挑毛病,感激不尽!

赞赏

发表评论

textsms
account_circle
email

螓首蛾眉

Vue+Node.js写一个TodoList
初学,这篇文章不想写太长,代码写的也很菜,纯属想记录一下这个寒假的成果 效果图 添加 完成 编辑 删除 坑 UI框架CSS先找Class 特地请教了…
扫描二维码继续阅读
2021-02-14