Cursor 实战：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、效率提升

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