企业官网建设流程全解析

1. 从零搭一个背单词 Web 应用，为什么我选 Cursor + Flask + MySQL

做 Web 背单词应用这件事，说难不难，说简单也不简单。核心逻辑无非是「展示单词 → 用户标记会/不会 → 错词进错题本 → 复习时优先抽错词」，但真要从零手写，光是 Flask 项目结构、SQLAlchemy 模型、前后端接口对齐这几件事就够折腾半天。我这次的做法是：用 Cursor 当主力开发工具，后端用 Flask + MySQL，前端用原生 HTML/JS，重点演示怎么把 Cursor 的模型请求通道切到 TaoToken 统一 Key，让整个开发过程里 AI 补全、代码生成、报错修复都走同一条 API 通道。

这篇文章适合三类人：一是刚接触 Cursor、想找个完整项目练手的 Python 开发者；二是已经在用 Flask 写小工具、但每次配环境都要重新查文档的人；三是想把 AI 编程助手的请求统一管理、不想在多个 Key 之间来回切换的团队开发者。你会看到从需求文档、项目结构、数据库建表、依赖安装、接口验证到错题本 Bug 修复的完整闭环，所有配置片段都可以直接复制。

我实测下来，整个项目从空目录到本地跑通增删改查，大概两三个小时，其中一半时间花在依赖版本冲突和错题本逻辑修复上——这两块恰恰是 Cursor 最能帮上忙的地方。下面按实际开发顺序拆开讲，每一步都给出可复制的命令和配置。

2. TaoToken 统一 Key 接入：把 Cursor 的 Base URL 改到一条通道

Cursor 默认走的是官方通道，但在实际项目里，我经常需要把模型请求统一到一个入口，方便管理 Key、切换模型、看调用量。TaoToken 提供的就是这样一个统一 Key/API 通道，官网在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 入口是 https://taotoken.net/api 。

先说清楚它是什么：TaoToken 是一个模型 API 聚合通道，你拿到一个统一 Key 之后，可以在 Cursor、Cline、Claude Code 这类工具里把 Base URL 指过来，模型 ID 按需选择。对背单词项目来说，它的价值在于：Cursor 里生成 Flask 路由、修 SQLAlchemy 报错、补前端 JS 这些请求，全部走同一个 Key，不用在多个平台之间复制粘贴。

适合谁：手上有多个 AI 编程工具、想统一管理调用额度的开发者；或者团队里需要给成员分配同一个通道、但各自用不同编辑器的场景。

接入前你需要准备三样东西，我把它叫做「三件套」：

在 Cursor 里改 Base URL 的路径是：打开设置 → Models → 找到 OpenAI API Key 区域 → 展开 Override OpenAI Base URL → 填入 https://taotoken.net/api ，然后在 API Key 里填入你的统一 Key。如果你用的是 Cursor 的 Claude 模型通道，同理在 Anthropic 相关配置里覆盖 Base URL。

这里有个坑要注意：Base URL 末尾不要多加/v1或/chat/completions，Cursor 会自己拼接路径。我第一次填成https://taotoken.net/api/v1，结果请求一直 404，改回https://taotoken.net/api就正常了。

Key 的生成入口在控制台的 API Keys 页面，地址是 https://taotoken.net/console/api-keys ，登录后新建一个 Key，复制出来填到 Cursor 里即可。如果你还没决定用哪个模型，可以先去模型对话页面 https://taotoken.net/models 试一下对话效果，确认模型 ID 再填到 Cursor。

配置完成后，Cursor 里所有的代码补全、Chat、Composer 请求都会走这条通道。你可以在 Cursor 的输出面板里看到请求日志，确认 Base URL 已经生效。这一步做完，后面所有 AI 辅助开发就都在统一通道里跑了。

3. 可复制配置：Cursor settings + Flask 项目结构 + MySQL 建库

这一节是全文最核心的部分，我把 Cursor 的配置片段、Flask 项目结构、依赖文件、环境变量、建库 SQL 全部列出来，你照着复制就能跑。

3.1 Cursor settings 配置片段

Cursor 的模型配置存在本地 settings 里，你可以直接在设置界面操作，也可以手动改配置文件。手动改的路径在 macOS 下是~/Library/Application Support/Cursor/User/settings.json，Windows 下是%APPDATA%\Cursor\User\settings.json。加入以下片段：

{ "cursor.openai.baseUrl": "https://taotoken.net/api", "cursor.openai.apiKey": "sk-你的统一Key", "cursor.models.default": "按控制台文档选择的ModelID", "cursor.composer.model": "按控制台文档选择的ModelID" }

注意cursor.openai.apiKey这一项，如果你不想把 Key 明文写在 settings 里，可以在 Cursor 设置界面的 Models 面板里填，效果一样。Model ID 一定要按控制台文档里的实际标识填，不要自己猜，填错了会报 model not found。

3.2 Flask 项目结构

Cursor 生成的后端结构我调整了一版，最终用的是这个：

word_memorize/ ├── app/ │ ├── models/ │ │ └── models.py │ ├── routes/ │ │ └── word_routes.py │ ├── utils/ │ │ └── db.py │ └── app.py ├── static/ │ ├── css/ │ └── js/ ├── templates/ │ └── index.html ├── requirements.txt └── .env

这个结构的好处是 models、routes、utils 分离，后面加复习模式、用户管理都不会乱。Cursor 在 Composer 模式下能直接按这个结构生成文件，你只要在对话里说清楚「按 app/models、app/routes、app/utils 分层」。

3.3 requirements.txt

依赖版本是踩坑重灾区，我最终跑通的版本组合如下：

Flask==2.3.3 Flask-SQLAlchemy==3.0.5 Flask-CORS==4.0.0 PyMySQL==1.1.0 python-dotenv==1.0.0 requests==2.31.0

安装命令：

pip install -r requirements.txt

如果你用虚拟环境，先激活再装：

python -m venv venv source venv/bin/activate pip install -r requirements.txt

3.4 .env 环境变量

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

DATABASE_URL里的用户名密码按你本地 MySQL 实际配置改。mysql+pymysql这个前缀不能省，它告诉 SQLAlchemy 用 PyMySQL 驱动。

3.5 MySQL 建库 SQL

CREATE DATABASE word_memorize CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

表结构不用手动建，让 Flask-SQLAlchemy 在应用启动时自动创建。在app.py里加一行：

with app.app_context(): db.create_all()

这样第一次运行flask run时，Word 表和 UserProgress 表会自动建好。Word 表存单词拼写、音标、释义、例句；UserProgress 表存用户学习记录和错题标记。

3.6 单词查询接口

在app/routes/word_routes.py里定义一个查询接口：

from flask import Blueprint, jsonify, request from app.models.models import Word word_bp = Blueprint('word', __name__) @word_bp.route('/api/words/random', methods=['GET']) def get_random_words(): count = request.args.get('count', 10, type=int) words = Word.query.order_by(db.func.rand()).limit(count).all() return jsonify([{ 'id': w.id, 'spelling': w.spelling, 'phonetic': w.phonetic, 'meaning': w.meaning, 'example': w.example } for w in words])

这个接口就是背单词应用的核心：每次请求随机返回 N 个单词。前端拿到 JSON 后渲染成卡片。

4. 验证请求：跑通一次单词查询接口的完整动作

配置写完，接下来要验证整条链路是通的。我按「启动应用 → 建表 → 插数据 → 调接口」四步走。

4.1 启动 Flask 应用

flask run

如果看到类似下面的输出，说明启动成功：

* Running on http://127.0.0.1:5000 * Debug mode: on

第一次启动时，db.create_all()会自动建表。你可以去 MySQL 里确认：

USE word_memorize; SHOW TABLES;

应该能看到word和user_progress两张表。

4.2 插入测试单词

用 Cursor 生成一段测试数据脚本，或者直接手动插几条：

from app import app, db from app.models.models import Word with app.app_context(): words = [ Word(spelling='apple', phonetic='/ˈæpl/', meaning='苹果', example='I eat an apple every day.'), Word(spelling='banana', phonetic='/bəˈnɑːnə/', meaning='香蕉', example='She likes bananas.'), Word(spelling='cherry', phonetic='/ˈtʃeri/', meaning='樱桃', example='Cherries are red.'), ] db.session.add_all(words) db.session.commit() print('插入成功')

4.3 调用查询接口

用 curl 验证：

curl "http://127.0.0.1:5000/api/words/random?count=2"

预期返回：

[ { "id": 1, "spelling": "apple", "phonetic": "/ˈæpl/", "meaning": "苹果", "example": "I eat an apple every day." }, { "id": 3, "spelling": "cherry", "phonetic": "/ˈtʃeri/", "meaning": "樱桃", "example": "Cherries are red." } ]

看到这个 JSON，说明 Flask + MySQL + SQLAlchemy 整条链路通了。这一步是整个项目的验证锚点，后面所有功能都建立在这个接口能正常返回的基础上。

4.4 前端对接验证

前端static/js/main.js里用 fetch 调这个接口：

fetch('/api/words/random?count=10') .then(res => res.json()) .then(words => { renderCards(words); }) .catch(err => console.error('请求失败', err));

打开浏览器访问http://127.0.0.1:5000，如果能看到单词卡片渲染出来，前后端就打通了。如果卡片是空的，打开浏览器控制台看 Network 面板，确认请求是否 200、返回体是否正常。

4.5 错题本接口验证

错题本的核心是把用户标记「不会」的单词写进 UserProgress 表。接口定义：

@word_bp.route('/api/progress/wrong', methods=['POST']) def add_wrong_word(): data = request.get_json() word_id = data.get('word_id') user_id = data.get('user_id', 'default') progress = UserProgress.query.filter_by( user_id=user_id, word_id=word_id ).first() if progress: progress.is_wrong = True else: progress = UserProgress( user_id=user_id, word_id=word_id, is_wrong=True ) db.session.add(progress) db.session.commit() return jsonify({'status': 'ok'})

验证：

curl -X POST "http://127.0.0.1:5000/api/progress/wrong" \ -H "Content-Type: application/json" \ -d '{"word_id": 1, "user_id": "test"}'

返回{"status": "ok"}后，去数据库查：

SELECT * FROM user_progress WHERE user_id = 'test';

应该能看到一条is_wrong = 1的记录。这一步验证通过，错题本闭环就成立了。

5. 本篇常见错排查：401、local proxy failed、reading choices、OAuth

开发过程中我遇到的报错基本集中在四类，逐个说清楚原因和修法。

5.1 401 Unauthorized

这个报错通常出现在 Cursor 请求模型时。原因有三种：Key 填错、Key 过期、Base URL 和 Key 不匹配。排查顺序是：先去控制台确认 Key 是否有效，再检查 Cursor settings 里的 Base URL 是不是https://taotoken.net/api，最后确认 Model ID 是否在控制台文档里存在。如果三样都对还报 401，把 Key 重新生成一次再填。

5.2 local proxy failed

这个报错说明 Cursor 的本地请求转发失败了。常见原因是 Base URL 填了多余路径，比如https://taotoken.net/api/v1，Cursor 拼接后变成/api/v1/chat/completions，路径不对。改成https://taotoken.net/api即可。另一个原因是本地网络环境有额外配置，检查一下系统代理设置。

5.3 reading choices 报错

这个报错一般出现在模型返回体解析阶段，说明返回的 JSON 结构不符合预期。原因可能是 Model ID 填错了，请求打到了不支持的模型上。解决办法是回控制台文档核对 Model ID，确保和 Cursor 里填的一致。如果用的是 Claude 系列模型，注意 Cursor 里要选对应的 Anthropic 通道。

5.4 OAuth 相关报错

如果你在 Cursor 里登录账号时遇到 OAuth 报错，先确认是不是同时开了多个账号。Cursor 的账号体系和模型 API Key 是两套东西，OAuth 报错不影响你手动填 Base URL + Key 的方式。直接在 Models 面板里手动配置三件套即可绕过。

5.5 Flask 侧常见报错

后端这边我遇到最多的是ModuleNotFoundError: No module named 'flask_sqlalchemy'，原因是虚拟环境没激活或者依赖没装全。解决：

pip install -r requirements.txt

另一个是RuntimeError: Working outside of application context，原因是db.create_all()没放在app.app_context()里。改成：

with app.app_context(): db.create_all()

还有一个是 MySQL 连接报Access denied for user 'root'@'localhost'，检查.env里的密码和本地 MySQL 实际密码是否一致。

5.6 错题本写入不生效

这个 Bug 我踩得最久。现象是前端提示「已加入错题本」，但数据库里查不到记录。原因是答题记录更新时把is_wrong字段覆盖掉了。修法是在更新答题记录时，不要动is_wrong字段，或者用单独的字段区分「答题状态」和「错题标记」。让 Cursor 帮你 review 一下UserProgress的更新逻辑，把两个状态拆开。

6. 继续用这条通道：从背单词项目到长期编码

背单词项目跑通之后，你会发现 Cursor + TaoToken 这套组合的价值不只是省了几次配置。整个开发过程中，代码生成、报错修复、依赖版本调整、前端 JS 补全，全部走同一条 API 通道，Key 管理成本降到最低。

如果你后面要继续做复习模式、用户管理、发音功能，可以直接在 Cursor 里接着对话，上下文不用重建。模型对话入口在 https://taotoken.net/models ，你可以先在那里试不同模型对 Flask 代码的理解效果，再决定 Cursor 里用哪个 Model ID。

对于长期写代码、跑 Agent 任务的场景，Coding Plan 会更合适，入口在 https://taotoken.net/coding-plan ，它针对连续编码请求做了优化，适合像背单词项目这种需要反复迭代的小工程。如果你只是偶尔验证一下接口，用模型对话页面就够了。

接入文档在 https://taotoken.net/doc ，里面有各编辑器和工具的 Base URL 配置示例，Cursor、Cline、Claude Code 都有覆盖。API Keys 管理在 https://taotoken.net/console/api-keys ，建议给不同项目建不同的 Key，方便追踪调用量。

最后说一个实用技巧：在 Cursor 里把项目根目录的.cursorrules文件写好，把「后端用 Flask + SQLAlchemy、数据库用 MySQL、前端用原生 JS」这些约束写进去，后面每次生成代码都会自动遵守，省去反复纠正的功夫。这个文件配合统一 Key 通道，基本就是一套可复用的 AI 辅助开发工作流了。