用 Cursor 写完整前后端 Demo（Vibe Coding 实战）

一、前期准备

安装好 Node.js
安装好 Cursor 并成功登录
新建一个空文件夹，用 Cursor 打开这个文件夹

二、核心思路：分模块 Prompt 驱动开发

Vibe Coding 的核心是把大需求拆成小任务，用精准的 Prompt 让 AI 生成代码，我们只负责验收和迭代 。

我们做一个**「待办事项 Todo List」前后端 Demo**，包含：

后端：Node.js + Express + 简单内存存储（不用数据库，直接跑）
前端：HTML + CSS + JavaScript + 原生 fetch 调用接口
功能：增删改查 Todo、页面实时刷新

三、Step 1：用 Cursor 写后端代码

1. 生成后端项目结构

在 Cursor 底部的 AI 聊天框（Cmd/Ctrl + L 唤起），输入：

复制代码

帮我用 Node.js + Express 搭建一个待办事项 Todo List 的后端服务，要求：
1.  项目结构清晰，包含 package.json、入口文件 server.js、路由文件
2.  实现完整的 RESTful API：
    - GET /api/todos：获取所有待办
    - POST /api/todos：新增待办
    - PUT /api/todos/:id：更新待办状态
    - DELETE /api/todos/:id：删除待办
3.  用内存数组存储数据，不用数据库，重启服务数据会重置（方便演示）
4.  开启 CORS 跨域支持，允许前端访问
5.  端口设为 3001，启动后打印 "Server running on http://localhost:3001"
6.  直接给我完整的所有文件代码，包括 package.json 的依赖配置
7.  给我详细的启动步骤

2. 执行 AI 生成的代码

Cursor 会自动生成 server.js、routes/todo.js、package.json 等文件

打开终端cmd，执行：
bash 复制代码
```
npm install
node server.js
```
看到 Server running on http://localhost:3001 说明后端启动成功

可以用 Postman 或浏览器访问 http://localhost:3001/api/todos 测试接口

浏览器返回的 [ ] 是一个空的 JSON 数组，这是完全正常的：

说明 GET /api/todos 接口成功响应了

后端服务在 localhost:3001 端口正常监听

因为还没有添加任何待办事项，所以返回空数组

四、Step 2：用 Cursor 写前端代码

1. 生成前端页面

在 Cursor 聊天框，输入：

复制代码

帮我写一个 Todo List 的前端页面，要求：
1.  纯 HTML + CSS + JavaScript，不用框架，直接打开就能用
2.  页面美观，响应式，适合电脑和手机
3.  功能：
    - 输入框新增待办
    - 展示所有待办列表，支持标记完成/未完成
    - 支持删除待办
    - 实时和后端 http://localhost:3001/api/todos 交互，用 fetch 调用接口
4.  有加载状态、错误提示，体验流畅
5.  直接给我完整的 index.html 文件代码，包含所有样式和脚本
6.  告诉我怎么运行这个页面

2. 运行前端页面

Cursor 会生成 index.html 文件
直接右键 Open in Default Browser 用浏览器打开，就能看到完整的 Todo 页面
测试增删改查功能，确认和后端数据同步

但是现在出现了问题，下面的已添加项目无法加载：

让cursor自主解决其修改并回复如下:

我发现你现在的症状很像：初次 GET /api/todos 的加载动画没有正确结束，但 POST/新增还能工作。为了彻底避开"加载卡住导致体验变差"，我会改成本地状态（前端数组）管理 + 从 POST/PUT/DELETE 的返回结果直接更新 UI，这样页面不会依赖"每次操作都重新 GET 列表"，也能保证增删改实时生效。

我看你截图里转圈遮罩还在，但列表区域已经有内容------这通常是前端的"加载状态"没正确结束、并且你之前的实现还会在每次新增/勾选/删除后再触发一次 GET 刷新，一旦 GET 在浏览器端卡住，就会出现你说的"只能用添加功能、但一直转圈/模糊"。

我已经把 index.html 做了两类修复（都已落到代码里）：

不再依赖"每次操作都重新 GET 列表"
• POST /api/todos 成功后：直接用后端返回的创建结果更新前端 todosState 并渲染
• PUT /api/todos/:id 成功后：直接用返回的更新结果替换对应项并渲染
• DELETE /api/todos/:id 成功后：直接从 todosState 移除并渲染
这样即使 GET 刷新卡住，你的增删改也不会再被拖住。
强化"加载遮罩一定会结束"
• fetch 增加 8 秒超时（超时会抛错并关闭遮罩）
• setLoading() 现在同时控制：
• loadingOverlay.hidden
• loadingOverlay.style.display 用来避免不同打开方式下 hidden 表现不一致导致遮罩不消失

结果成功加载：

后端数据已同步：

后面内容可根据自己需要让cursor优化代码。

五、Step 3：一键优化与迭代（Vibe Coding 核心）

如果页面/接口有问题，或者想加功能，直接用自然语言给 Cursor 提需求，比如：

「把前端页面的主题色改成蓝色，按钮改成圆角」
「给 Todo 加一个优先级标签，高/中/低，用不同颜色显示」
「后端改成用 JSON 文件存储数据，重启不丢失」
「给前端加一个批量删除已完成待办的按钮」

AI 会自动修改对应文件的代码，你只需要刷新页面/重启服务看效果，不满意再继续提需求。

六、Step 4：项目打包与部署（可选）

在 Cursor 聊天框输入：

复制代码

帮我把这个前后端 Todo 项目整合成一个可一键启动的项目，要求：
1.  前端打包成静态文件，放到后端的 public 文件夹
2.  启动一个命令就能同时跑前后端，访问 http://localhost:3000 直接打开页面
3.  给我详细的启动步骤和部署到 Vercel/Render 的方法

七、关键技巧（让 AI 写的代码更靠谱）

拆小任务，不要一次性要完整项目：先写后端，再写前端，最后优化，避免 AI 逻辑混乱
Prompt 越具体，代码越能用：明确技术栈、功能、端口、格式，不要模糊描述
先跑通基础功能，再迭代优化：先做最简单的增删改查，再加样式、加功能
善用 Cursor 快捷键 ：
- Cmd/Ctrl + L：唤起 AI 聊天
- Cmd/Ctrl + K：选中代码，让 AI 解释/优化/修复
- Cmd/Ctrl + I：内联补全代码

完整项目包含所有代码及配置文件，见：github.com/brillisme/cursor-vibe-coding