Cursor Agent 实战：用 AI 写一个完整的全栈小应用

需求拆解（用 Cursor Chat 写产品文档）

在开始写代码之前，先用 Cursor Chat（Ctrl+L）帮你整理需求。以「个人短链生成器」为例，输入：

我想做一个「个人短链生成器」：
- 输入长 URL，生成短码（如 abc123），访问 /s/abc123 时跳转
- 管理页显示所有短链、点击次数、删除按钮
- 不需要用户登录，个人用
- 技术栈：React 前端 + Express 后端 + SQLite

请帮我写需求文档（Markdown），包括：功能列表、API 设计、数据库表结构。

生成后保存为 docs/requirements.md。这一步让 AI 先把项目想清楚，后续调整都可以回到这个文档。

Agent 一次性生成项目骨架

按 Ctrl+I 打开 Composer，切换到 Agent 模式，粘贴：

根据 docs/requirements.md，生成全栈项目结构：
short-link/
├── frontend/   # React 18 + Vite
│   ├── src/App.jsx、main.jsx
│   ├── index.html、package.json
├── backend/    # Express + better-sqlite3，端口 3001
│   ├── server.js、db.js、package.json
└── README.md

约束：
- 不用 TypeScript，不用 CSS 框架
- 数据库文件 backend/data.db
- 前端用 Vite proxy 把 /api 转发到 3001
- 不生成测试文件

验收：
- backend/ → npm install && node server.js 跑起来
- frontend/ → npm install && npm run dev 能看到页面
- 输入 URL 点「生成」能看到短码

迭代前端（完善 React 页面）

第一轮 — 完善表单与复制功能

完善 frontend/src/App.jsx 的短链生成表单：
1. 输入框铺满，placeholder「粘贴你的长链接」
2. 生成后显示短链 + 复制按钮（点击后变「已复制 ✓」）
3. 非 http/https 开头时显示红色提示
4. 白色卡片，中心对齐

第二轮 — 完善管理列表

在首页下方加「我的短链」列表：
1. 从 /api/links 获取数据
2. 每行：短码、URL（超 50 字符省略）、点击次数、删除按钮
3. 删除后自动刷新
4. 空列表显示「还没有短链，快来生成第一个吧」

迭代后端（完善 API + 数据库）

检查 backend/server.js，确保以下 API 实现并正常工作：
- POST /api/links：接收 { url } → 生成 6 位随机短码 → 存 SQLite → 返回 { code, shortUrl }
- GET /api/links：返回所有短链（按创建时间降序）
- DELETE /api/links/:code：删除指定短码
- GET /s/:code：重定向到原始 URL + 点击次数 +1
- 所有路由需 try/catch，返回 { error: "..." }
如有缺失或 Bug，直接修复。

本地联调

# 终端 1
cd backend && npm start
# 终端 2
cd frontend && npm run dev

访问 http://localhost:5173，测试：输入 URL → 生成短码 → 访问短链跳转 → 查看点击次数 → 删除条目。

如果有 Bug，复制报错信息告诉 Cursor：

点「生成短链」后控制台报：TypeError: Cannot read properties of undefined (reading 'code')，帮我找原因并修复。

前端部署到 Cloudflare Pages

1. 处理生产环境 API 地址

在 frontend/ 创建 .env.production，设置 VITE_API_BASE=https://api.your-domain.com；
修改 App.jsx 里所有 fetch 把 /api 改为 ${import.meta.env.VITE_API_BASE}/api。

2. 构建并推送

cd frontend && npm run build

用 Cursor 界面把 frontend/ 推送到独立 GitHub 仓库（如 short-link-frontend）。

3. Cloudflare Pages 接入

1. Cloudflare → Pages → Create a project → Connect to Git
2. 选择 short-link-frontend 仓库
3. Framework preset：Vite；Build command：npm run build；Output：dist
4. Save and Deploy，1–2 分钟后得到 xxx.pages.dev

详细步骤参考 建站实战教程。

后端部署到阿里云 ECS

SSH 连接 ECS 后（参考阿里云实战），在 ECS 上：

git clone https://github.com/你的账号/short-link-backend.git ~/short-link
cd ~/short-link && npm install

处理跨域

在 backend/server.js 加 CORS 配置，允许来自 https://xxx.pages.dev 
和 https://your-domain.com 的跨域请求，使用 cors 包实现。

Nginx + PM2 配置

帮我写：
1. Nginx 配置：把 api.your-domain.com 反代到本机 3001，配置 CORS 响应头
2. PM2 启动：pm2 start server.js --name short-link，并设开机自启

GitHub Actions 自动部署参考实战 3 第八步。

运行效果与复盘

这次学到了什么

扩展方向（直接告诉 Cursor）

• 加 API Key 认证：「帮我加简单的 API Key 认证，请求头带 X-API-Key，不匹配返回 401」
• 加统计图表：「加折线图显示每天点击趋势（用 Chart.js）」
• 换数据库：「把 SQLite 换成 PostgreSQL」

相关教程

• Cursor 完整指南（注册 / 模型 / Agent）
• Cursor + GitHub Pages 建站实战
• Cursor SSH 远程开发
• Cursor + 阿里云 ECS 部署