sealos+devbox快速开发Todoapp应用
核心出装： AI
项目分析
一个 Todo app 应用，网页版，帅气的UI界面，能够对待办事项进行增删改查，连接数据库。
前端：vue , express框架
后端：node.js
数据库：mongodb
基本思路，vue 和 js 写好前端页面和基本功能，通过增删改查四个接口请求数据库信息，最后部署应用上线。
项目实战
后端
sealos 云开发平台使用 DevBox，创建项目 todoapp-server，语言选择 node.js
sealos 云开发平台创建数据库，记录好数据库连接信息
使用 cursor 打开项目 todoapp-server，提示AI进行数据库连接和增删改查四个接口设置
后端提示词示例
后端提示词
请为我开发一个基于 Node.js 和Express 框架的 Todo List 后端项目。项目需要实现以下四个 RESTful API 接口：
- 查询所有待办事项
- 接口名: GET /api/get-todo
- 功能: 从数据库的’list’集合中查询并返回所有待办事项
- 参数: 无
- 返回: 包含所有待办事项的数组
- 添加新的待办事项
- 接口名: POST /api/add-todo
- 功能: 向’list’集合中添加新的待办事项
- 参数:
{
“value”: string, // 待办事项的具体内容
“isCompleted”: boolean // 是否完成，默认为 false
} - 返回: 新添加的待办事项对象，包含自动生成的唯一 id
- 更新待办事项状态
- 接口名: POST /api/update-todo/
- 功能: 根据 id 更新指定待办事项的完成状态（将 isCompleted 值取反）
- 参数: id
- 返回: 更新后的待办事项对象
- 删除待办事项
- 接口名: POST /api/del-todo/
- 功能: 根据 id 删除指定的待办事项
- 参数: id
- 返回: 删除操作的结果状态
技术要求：
- 使用 Express 框架构建 API
- 使用 MongoDB 作为数据库，通过 Mongoose 进行数据操作
- 实现适当的错误处理和输入验证
- 使用异步/等待（async/await）语法处理异步操作
- 遵循 RESTful API 设计原则
- 添加基本的日志记录功能
以下是数据库连接方式：mongodb://root:v4tqwfb7@dbconn.sealoshzh.site:32900/?directConnection=true
解决好环境依赖，生成接口后，运行后端服务，curl 测试接口的连通性成功
前端
Devbox 创建 todoapp-vue 项目，应用选择 Vue，cursor 打开。
直接让 AI 写前端
前端提示词
请为我开发一个基于 Vue 3 的Todo List 应用。要求如下：
- 功能需求：
- 添加新的待办事项
- 标记待办事项为完成/未完成
- 删除待办事项
- 统计待办事项完成度
- 过滤显示（全部/已完成/未完成）
- UI/UX 设计要求：
- 全屏响应式设计，适配不同设备
- 拥有亮色模式和夜间模式
- 现代化、简洁的界面风格
- 丰富的色彩运用，但保持整体和谐
- 流畅的交互动画，提升用户体验
- 在按钮和需要的地方添加上图标
- 参考灵感：结合苹果官网的设计美学
要求：
- 直接以当前目录作为项目根目。注意 此目录已经初始化完了vue3项目结构 直接修改即可
- 如果需要执行命令，请暂停创建文件，让我先执行命令
- 请你根据我的需要，一步一步思考，给我开发这个项目。特别是UI部分 一定要足够美观和现代化
写好前端后，进行前后端对接。
将后端的接口信息发给此项目，自动对接完成后，运行项目，在浏览器内访问，网络中观察到接口成功应用。
前后端测试成功后，发布版本，上线应用。
注意：端口暴露需一致，启动文件 .sh 命令要修改正确
效果展示：
后记
体验了一把 Ai 一站式开发的感觉，很爽。但思考片刻后发现自己会的实在太少，需要继续沉淀。后续需要继熟悉开发的整个流程，熟练使用相关语言和框架工具，结合Ai快速学习和应用。
最后推荐两个学习项目：
