Cursor 辅助开发 Web 版背单词应用实战
需求分析
在开始开发之前,明确的需求文档是项目成功的关键。一个好的需求文档不仅能指导开发方向,还能作为与 Cursor 进行高效对话的重要基础。我们有两种方式来准备需求文档:自行编写需求文档和借助 Cursor 生成需求文档。
使用 Cursor AI 编程助手完成 Web 版背单词应用的全流程开发。涵盖需求分析、前后端 UI 设计、Python Flask 后端搭建、MySQL 数据库设计及功能测试。通过实际案例展示 AI 辅助编码的交互策略与效率提升方法,包括利用 AI 生成需求文档、自动修复版本兼容问题及优化错题本逻辑。

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

摘抄部分功能内容,填充到自己的开发需求文档如下:
# 开发一个学单词的 web 程序
## 核心功能需求
### 学习模式
- 从未学单词中挑选 10 个单词进行学习
- 单词卡片展示(拼写、音标、释义、例句)
- 发音功能
- 可以将当前词加入到错题本,进行复习
### 复习模式
- 从错词本中随机抽取单词进行复习
### 用户管理
- 用户免登录,可以设置用户名
## 技术需求
### 前端
- 响应式设计,支持多端适配
- 流畅的交互体验,界面简洁美观
### 后端
- 如果需要用到后端程序,请使用 python 语言
- 如果需要用到数据库,请使用 MySQL
## 数据结构
### 单词库
- 单词基本信息(拼写、音标、发音音频、释义、例句)
### 用户学习记录
- 记录用户学习记录和错题信息
使用 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
创建数据库:
CREATE DATABASE word_memorize CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
表可以先不创建,后面让 Cursor 生成程序进行表的创建和测试数据生成。
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 帮忙生成测试单词数据:

添加单词报错:

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

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

加入错题本正常:

单词学完:

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


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

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


错题本终于也正常了:

该示例展示了 AI 辅助开发的基本流程和方法。通过这次实践,我们可以总结以下几点经验:
1、交互策略
2、效率提升

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具,curl 转代码在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online