如何学cloudflare d1与r2

结合当前项目，分析如何学cloudflare d1与r2如何学习

✦ 好的，结合你当前 mini_blog 项目的结构，这是一个非常棒的学习 Cloudflare D1 和 R2 的实例。你的项目已经在使用 Cloudflare Workers 和 D1 数据库了，这为我们提供了绝佳的实践环境。

下面我将为你分析如何分步学习 D1 和 R2，并充分利用你现有的项目。

学习路线总览

先精通 D1：你的项目核心是基于 D1 数据库的。深入理解 D1 的工作方式是第一步。
再集成 R2：在掌握 D1 后，将 R2 作为新功能（例如，文章配图）集成进来，学习文件上传和服务的流程。

学习 Cloudflare D1 (分布式数据库)

D1 是 Cloudflare 的无服务器 SQL 数据库，基于 SQLite。你的项目已经通过 migrations 文件夹深度使用了它。

第一步：理解概念和配置

核心概念：D1 就是一个通过 API 访问的 SQLite 数据库，它与你的 Worker 函数绑定在一起，具备自动扩缩容和边缘分布的特点。
项目关联：
- 打开 wrangler.jsonc 文件。你会在里面找到 D1 数据库的配置，它看起来类似这样：

1 [[d1_databases]]

2 binding = "DB" # 这是在代码中访问数据库的变量名

3 database_name = "mini_blog-db"

4 database_id = "xxxx-xxxx-xxxx-xxxx"

5 migrations_dir = "migrations" # 指定迁移文件目录

   * 这个 binding = "DB" 是关键，它意味着在你的 Worker 代码中，可以通过 env.DB 来访问数据库实例。

第二步：学习数据库迁移 (Migrations)

你的 migrations/ 目录是学习的宝库。迁移是管理数据库结构变更的标准方式。

分析迁移文件：
- 0001_initial_schema.sql: 定义了最初的表结构（例如 posts 表）。
- 0002_add_image_url.sql: 增加了一个字段，用于存储图片 URL。
- 0007_remove_image_url_column.sql: 又删除了这个字段。
- 学习点：通过阅读这些 SQL 文件，你可以了解项目数据结构的历史演变。
实践 wrangler 命令：
- 本地测试：Cloudflare 允许你在本地模拟 D1 环境。运行 wrangler dev 时，它会在 .wrangler/state/d1/ 目录下创建一个本地的 SQLite 文件。
- 应用迁移：你可以尝试创建一个新的迁移文件，例如 0008_add_author.sql，然后在本地应用它：

1 # 1. （可选）先重置本地数据库

2 wrangler d1 execute DB --local --file=./migrations/0001_initial_schema.sql

4 # 2. 应用所有未应用的迁移

5 wrangler d1 migrations apply DB --local

第三步：学习数据操作 (CRUD)

你的 src/ 目录下的 handlers.js 和 adminHandlers.js 应该是实现数据库增删改查的地方。

阅读代码：
- 找到使用 env.DB 的地方。你会看到类似这样的代码：

1 // 查询所有文章

2 const { results } = await env.DB.prepare("SELECT * FROM posts ORDER BY created_at DESC").all();

4 // 插入一篇文章

5 await env.DB.prepare("INSERT INTO posts (id, title, content) VALUES (?, ?, ?)")

6 .bind(id, title, content)

7 .run();

编码实践：
- 新功能：尝试添加一个“按标签筛选文章”的功能。
- 步骤：你需要在 handlers.js 中创建一个新的路由处理器，编写一条带 WHERE 子句的 SQL 查询语句，并通过 env.DB 执行它。

学习 Cloudflare R2 (对象存储)

R2 是 Cloudflare 的 S3 兼容对象存储服务，非常适合存储图片、视频等静态文件，其主要优势是零出口费用。

你的迁移历史表明项目曾经尝试处理图片 (add_image_url)，这正是 R2 的用武之地。我们可以重新实现这个功能，但这次使用 R2。

第一步：理解概念和配置

核心概念：把 R2 当成一个网盘。你通过 API 上传文件，会得到一个唯一的 Key（文件名），然后可以通过这个 Key 访问或删除文件。
项目关联：
- 首先，你需要在 Cloudflare 控制台创建一个 R2 存储桶 (Bucket)。
- 然后，在 wrangler.jsonc 中添加 R2 绑定：

1 [[r2_buckets]]

2 binding = "ASSETS" # 这是在代码中访问 R2 的变量名

3 bucket_name = "mini-blog-assets"

   * binding = "ASSETS" 意味着你可以通过 env.ASSETS 在代码中操作 R2 存储桶。

第二步：学习文件上传

这通常需要一个管理员页面，包含一个文件上传表单。

前端：创建一个 HTML 表单，使用 method="POST" 和 enctype="multipart/form-data"。
后端 (adminHandlers.js)：
- Worker 会收到一个 FormData 格式的请求。
- 你需要解析请求体，获取文件数据。
- 使用 env.ASSETS.put() 方法将文件上传到 R2。

1         // 伪代码示例

2         const formData = await request.formData();
3         const file = formData.get("image"); // 'image' 是表单字段名
4
5         if (file) {
6           const fileKey = `${Date.now()}-${file.name}`;
7           await env.ASSETS.put(fileKey, file.stream()); // 上传文件
8
9           // 然后将 fileKey 保存到 D1 数据库的 posts 表中

10 // await env.DB.prepare("UPDATE posts SET image_key = ? WHERE id = ?")...

11 }

第三步：学习文件访问/服务

上传后，你需要让用户能看到图片。

公开访问 (可选)：你可以为 R2 存储桶绑定一个公共域名，这样浏览器就可以直接像访问普通网站一样访问图片。这是最简单的方式。
通过 Worker 访问 (更灵活)：
- 创建一个新的路由，例如 /images/:key。
- 在这个路由的处理器中，从 R2 获取对象，并将其作为响应返回。

1         // 在 index.js 或 handlers.js 中

2         // GET /images/:key
3         const key = request.params.key;
4         const object = await env.ASSETS.get(key);
5
6         if (object === null) {
7           return new Response("Object Not Found", { status: 404 });
8         }
9

10 const headers = new Headers();

11 object.writeHttpMetadata(headers);

12 headers.set("etag", object.httpEtag);

14 return new Response(object.body, {

15 headers,

16 });

   * 优势：这种方式允许你在提供文件前增加权限校验、图片处理（需要 Workers for Platforms）等逻辑。

总结与建议

从 D1 开始：
- 仔细阅读 wrangler.jsonc 和 migrations/ 目录。
- 运行 wrangler dev，在本地环境中练习 wrangler d1 相关命令。
- 在 src/ 中添加一个新的、只读的 API 端点（例如获取文章总数），以练习 D1 查询。
进阶到 R2：
- 在 D1 熟练后，开始集成 R2。
- 创建 R2 存储桶并在 wrangler.jsonc 中配置它。
- 实现一个完整的图片处理流程：上传图片 -> 将图片 Key 存入 D1 -> 通过 Worker 读取并展示图片。

你的项目是一个完美的沙盒。通过这种“项目驱动”的方式学习，你会比单纯看文档学得更快、更深入。