2025 AI编程实战：用ChatGPT+Cursor从零构建Web应用，效率提升300%

智能摘要

从零到一：AI编程实战指南——用ChatGPT和Cursor构建一个完整Web应用

在AI辅助编程工具井喷的2025年，一个常被忽视的真相是：工具本身不产生价值，只有被正确引导的AI才能成为真正的生产力杠杆。极栈网络（jizhan.net）的《AI–教学》分类中，大量读者关注如何将抽象的理论转化为可落地的代码。本文并非泛泛介绍AI工具，而是以“构建一个具备用户注册、数据看板功能的Web应用”为具体目标，拆解从需求分析到部署上线的完整流程，核心探讨如何通过精准的提示词设计、分阶段的任务拆解以及人工决策介入，让AI从“玩具”变成“生产工具”。

一、为什么多数AI编程尝试以失败告终？

许多开发者尝试用ChatGPT或Cursor编写商业级代码，但最终得到一堆无法整合、充满Bug的碎片。根本原因在于：AI擅长微观执行，却缺乏宏观架构能力。一份笼统的“帮我写个电商系统”提示词，会触发AI生成大量冗余代码，且难以处理复杂的状态流转。

解决路径：将项目拆解为可验证的原子任务，每个任务对应一个独立的提示词单元。例如，将“用户注册功能”拆解为“表单验证逻辑”、“后端API接口”、“数据库表设计”三个独立步骤，每个步骤生成后立即人工审查并测试。

二、项目实战：构建一个用户数据看板

我们选择构建一个轻量级Web应用：用户通过邮箱注册登录，登录后可查看并管理个人数据看板（展示注册时间、活跃天数、自定义标签）。技术栈选用Node.js + Express + SQLite + Vanilla JS（前端），在Cursor中完成全部编码，ChatGPT辅助架构决策。

2.1 第一阶段：需求分析与数据模型设计（人工主导，AI校验）

在打开编辑器之前，先用文本写下核心数据模型：用户（id, email, password_hash, created_at, last_active, tags）。这一步不能交给AI，因为数据模型决定了后续所有代码的结构。完成初稿后，将模型描述输入ChatGPT：

请评估以下SQLite数据表设计，指出潜在问题：
用户表（users）：
- id INTEGER PRIMARY KEY AUTOINCREMENT
- email TEXT UNIQUE NOT NULL
- password_hash TEXT NOT NULL
- created_at DATETIME DEFAULT CURRENT_TIMESTAMP
- last_active DATETIME
- tags TEXT（存储JSON数组）
关注：索引设计、数据类型、安全风险。

ChatGPT会指出：email字段应添加索引以加速登录查询；tags字段使用TEXT需在应用层处理JSON序列化，建议考虑SQLite的JSON1扩展。这些建议可直接采纳，形成最终数据模型。

2.2 第二阶段：后端API与数据库交互（Cursor主导生成）

打开Cursor，创建项目结构：server.js, routes/, db.js。针对每个文件编写精确的提示词。例如：

在server.js中，使用Express框架创建RESTful API。要求：
1. 引入express、cors、body-parser、better-sqlite3模块
2. 创建数据库连接，自动创建users表（如果不存在）
3. POST /api/register：接收email和password，使用bcrypt加密密码，写入数据库。验证email格式和唯一性
4. POST /api/login：验证密码，返回JWT token，有效期24小时
5. GET /api/profile：需要JWT中间件验证token，返回当前用户信息（不含密码）
6. 所有错误处理返回JSON格式：{error: '描述'}
7. 端口：3000

Cursor生成的代码通常可直接运行。关键点：一次只生成一个功能模块。生成后立即运行node server.js测试API（用Postman或curl）。发现Bug时，直接选中代码片段，按Ctrl+K输入：

修复这个登录路由：当用户输入错误密码时，应该返回401状态码和'{error: "Invalid credentials"}'，当前返回的是500。

这种即时反馈循环（生成→测试→修复→再测试）是AI编程的核心效率来源。

2.3 第三阶段：前端页面与交互（AI生成骨架，人工精调样式）

前端使用纯HTML/CSS/JS，不引入框架以降低复杂度。在根目录创建public/文件夹，用Cursor生成登录页和看板页：

生成一个登录页面 index.html：
1. 居中卡片设计，背景使用渐变色
2. 表单包含email输入框、密码输入框、登录按钮、注册链接
3. 使用fetch调用后端API，登录成功后保存token到localStorage，跳转到dashboard.html
4. 显示加载状态和错误提示

AI生成的前端代码在样式上往往平庸。需要在生成后手动调整：增加CSS变量统一配色、添加微交互动效（按钮hover、输入框focus）、优化移动端响应式布局。这部分人工介入不可省略，也是体现开发者审美和产品思维的关键环节。

看板页dashboard.html需要展示用户信息和一个可编辑的“标签”列表。提示词示例：

生成dashboard.html：
1. 从localStorage读取token，调用GET /api/profile获取用户数据
2. 显示：欢迎语、注册时间（格式化为YYYY-MM-DD）、最后活跃时间、活跃天数（从注册到现在的天数）
3. 实现标签管理：显示现有标签（每个标签以chip形式展示），添加输入框和按钮，点击添加后调用POST /api/tags更新
4. 后台API：POST /api/tags接收{tags: ['tag1','tag2']}，更新数据库
5. 步骤3和4的API需要先由后端实现

注意：这里引入了新的后端API（POST /api/tags），需回到第二阶段补充。这种前后端交替迭代是常见模式，AI可以快速响应这种增量需求。

2.4 第四阶段：测试与部署（AI辅助编写测试用例）

使用jest和supertest编写API测试。将server.js中的Express app导出，在Cursor中生成测试文件：

为以下API路由生成Jest测试用例：
- POST /api/register（正常注册、重复邮箱、无效邮箱格式）
- POST /api/login（正确密码、错误密码、未注册用户）
- GET /api/profile（有效token、无效token、无token）
使用supertest发送请求，使用beforeEach清空测试数据库。

AI生成的测试用例通常覆盖了80%的边界情况，但需手动补充一些业务逻辑特定的场景（如标签字符数限制）。部署时，使用pm2进行进程管理，AI可生成ecosystem.config.js配置文件：

生成一个pm2配置文件，用于Node.js应用：
- 应用名：user-dashboard
- 脚本：server.js
- 监听文件变化自动重启
- 日志文件路径：./logs/
- 环境变量：NODE_ENV=production

三、高级技巧：让AI理解你的项目上下文

Cursor和Copilot都有项目索引功能。在项目根目录添加.cursorrules文件（如果是Cursor），写入项目级约定：

你是一个有10年经验的Node.js全栈开发者。项目使用CommonJS模块规范，数据库采用better-sqlite3，前端不使用任何框架。所有API返回JSON格式。代码风格：使用const/let，避免var；使用async/await处理异步；错误处理优先返回错误对象而非抛出异常。保持函数简短（不超过30行）。

设置后，AI生成的代码将自动遵循这些规则，大幅减少人工修正工作。同样，对于ChatGPT，每次提问时在提示词开头粘贴当前项目结构（可用tree命令生成），能让AI给出更贴合上下文的建议。