第六章：Vibe Coding 实战（用 Cursor 写 Demo）

​

​

一、前期准备​

安装好 Node.js​

安装好 Cursor 并成功登录​

新建一个空文件夹，用 Cursor 打开这个文件夹​

​

​

​

​

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

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

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

•

后端：Node.js + Express + 简单内存存储（不用数据库，直接跑）​

•

前端：HTML + CSS + JavaScript + 原生 fetch 调用接口​

•

功能：增删改查 Todo、页面实时刷新​

​

​

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

生成后端项目结构​

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

​

代码块​

Bash

帮我用 Node.js + Express 搭建一个待办事项 Todo List 的后端服务，要求：​

项目结构清晰，包含 package.json、入口文件 server.js、路由文件​

实现完整的 RESTful API：​

GET /api/todos：获取所有待办​

​

​

​

​

​

执行 AI 生成的代码​

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

​

​

打开终端cmd，执行：​

​

npm install​

node server.js​

一键获取完整项目代码​

bash​

1​

2​

看到 Server running on http://localhost:3001 说明后端启动成功​

​

​

​

​

​

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

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

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

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

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

​

​

​

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

生成前端页面​

在 Cursor 聊天框，输入：​

​

帮我写一个 Todo List 的前端页面，要求：​

纯 HTML + CSS + JavaScript，不用框架，直接打开就能用​

页面美观，响应式，适合电脑和手机​

功能：​

有加载状态、错误提示，体验流畅​

直接给我完整的 index.html 文件代码，包含所有样式和脚本​

告诉我怎么运行这个页面​

一键获取完整项目代码​

1​

2​

3​

4​

5​

6​

7​

8​

9​

10​

11​

运行前端页面​

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 项目整合成一个可一键启动的项目，要求：​

前端打包成静态文件，放到后端的 public 文件夹​

启动一个命令就能同时跑前后端，访问 http://localhost:3000 直接打开页面​

给我详细的启动步骤和部署到 Vercel/Render 的方法​

一键获取完整项目代码​

1​

2​

3​

4​

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

拆小任务，不要一次性要完整项目：先写后端，再写前端，最后优化，避免 AI 逻辑混乱​

Prompt 越具体，代码越能用：明确技术栈、功能、端口、格式，不要模糊描述​

先跑通基础功能，再迭代优化：先做最简单的增删改查，再加样式、加功能​

善用 Cursor 快捷键：​

Cmd/Ctrl + L：唤起 AI 聊天​

Cmd/Ctrl + K：选中代码，让 AI 解释/优化/修复​

Cmd/Ctrl + I：内联补全代码​

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

​