PythonAI大前端
基于 Cursor 的 Web 版背单词应用开发实战
演示了如何使用 Cursor AI 编程助手开发一个 Web 版背单词应用。项目涵盖需求分析、UI 设计、后端 Python Flask 开发及前端对接。通过 AI 辅助生成需求文档、界面代码及数据库模型，实现了单词学习、错题本等功能。过程中展示了如何处理环境配置、依赖安装及常见 Bug 修复，体现了 AI 在提升开发效率方面的价值。
演示了如何使用 Cursor AI 编程助手开发一个 Web 版背单词应用。项目涵盖需求分析、UI 设计、后端 Python Flask 开发及前端对接。通过 AI 辅助生成需求文档、界面代码及数据库模型，实现了单词学习、错题本等功能。过程中展示了如何处理环境配置、依赖安装及常见 Bug 修复，体现了 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