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

完成

编辑

删除

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