Cursor AI实战：Web版背单词应用开发

Cursor AI实战：Web版背单词应用开发

本文将通过一个实际项目来展示Cursor AI编程工具的开发流程。我们将使用Cursor开发一个Web版单词学习程序，通过这个案例，您将看到AI辅助开发的完整过程，体验从需求分析到代码实现的全过程。

需求分析

在开始开发之前，明确的需求文档是项目成功的关键。一个好的需求文档不仅能指导开发方向，还能作为与Cursor进行高效对话的重要基础。我们有两种方式来准备需求文档：自行编写需求文档和借助Cursor生成需求文档。

自行编写需求文档

• 明确列出功能模块和具体需求
• 按优先级排序各项功能
• 将文档保存为独立文件，方便随时参考
• 确保描述清晰，避免歧义

借助Cursor生成需求文档

• 提供项目的核心目标和主要功能点
• 让AI协助完善功能描述和技术细节
• 根据实际需求进行调整和补充

摘抄部分功能内容，填充到自己的开发需求文档如下：

# 开发一个学单词的web程序
## 核心功能需求
### 学习模式
- 从未学单词中挑选10个单词进行学习
- 单词卡片展示（拼写、音标、释义、例句）
- 发音功能
- 可以将当前词加入到错题本，进行复习
### 复习模式
- 从错词本中随机抽取单词进行复习
### 用户管理
- 用户免登录，可以设置用户名
## 技术需求
### 前端
- 响应式设计，支持多端适配
- 流畅的交互体验，界面简洁美观
### 后端
- 如果需要用到后端程序，请使用python语言
- 如果需要用到数据库，请使用MySQL
## 数据结构
### 单词库
- 单词基本信息（拼写、音标、发音音频、释义、例句）
### 用户学习记录
- 记录用户学习记录和错题信息

前端UI设计

使用Cursor的COMPOSER模式+AGENT，以需求文档作为上下文，和Cursor对话，让其帮忙生成UI界面。

请根据我的需求文档，设计一个学单词的web界面，要求简洁美观

觉得设计的还不错，就直接选择Accept，如需修改可继续提问进行修改。
下面进行web界面的预览，选中html文件，右键
Open In Default Browser。

后端开发

前端部分先这样，可以继续进行后端设计，包括API接口、功能实现和数据库设计。

项目结构

Cursor给出的后端项目结构：

app/
├── models/
│   └── models.py
├── routes/
│   └── word_routes.py
├── utils/
└── app.py
requirements.txt
.env

环境参数

Cursor创建一个保存环境变量文件，我们需要修改其中的内容，如连接数据库的URI。

DATABASE_URL=mysql+pymysql://root:root@localhost/word_memorize
FLASK_ENV=development
FLASK_APP=app/app.py

数据库设计

• Word表：存储单词基本信息
• UserProgress表：存储用户学习进度和错题本

创建数据库：

CREATE DATABASE word_memorize CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

表可以先不创建，后面让Cursor生成程序进行表的创建和测试数据生成。

安装Python依赖

Cursor已为我们创建一个requirements.txt文件来管理项目依赖（如果没有，可让其帮忙生成）。

Flask==2.0.1
Flask-SQLAlchemy==2.5.1
Flask-CORS==3.0.10
PyMySQL==1.0.2
python-dotenv==0.19.0
requests==2.26.0

有了依赖我们可以直接执行以下安装命令，可以让Cursor帮忙执行，(注意：如果使用的是python虚拟环境，可能需要手动执行命令，cursor默认使用默认的python环境）：

pip install -r requirements.txt

运行应用

flask run

首次运行，出错了，没关系，交给Cursor去解决（这是一个持续过程，需要有点耐心）：

根据提示，升级Flask版本：

继续运行，又报错了，继续丢给Cursor帮忙解决：

修改了依赖的版本和代码中依赖的导入方式：

又回到了第一个问题，版本不兼容，Cursor建议让我们用第二种方式解决：

这次启动成功：

前端代码修改

接下来，我们需要修改前端JavaScript代码，对接后端API。

测试前端界面

修改之后，打开页面，报错了页面中的CSS和JS文件找不到，可能是路径问题，需要修复下：

接收所有建议，需要运行一个服务用于加载前端文件：

测试数据生成

我们让Cursor帮忙生成测试单词数据：

添加单词报错：

一通修复之后，终于添加了单词

功能测试

单词展示和下一个功能正常：

加入错题本正常：

单词学完：

Bug修复

页面虽然展示添加到错题本成功，其实并没有真正添加到数据库：

需要Cursor帮忙修复这个问题：

修复之后，重启程序，仍然有问题，不过我观察到错题记录是被答题记录更新掉了，需要让Cursor注意到这个问题：

错题本终于也正常了：

总结

虽然这是一个相对简单的示例项目，但它展示了AI辅助开发的基本流程和方法。通过这次实践，我们可以总结以下几点经验：

1、交互策略

• 与Cursor进行清晰、具体的对话
• 将复杂需求拆分成小步骤
• 及时反馈和纠正AI的输出

2、效率提升

• 善用上下文管理，保持对话连贯性
• 复用已验证的代码片段
• 建立个人的提示词模板