Edit: 如何学cloudflare d1与r2

编辑文章

标题 *

URL 别名 *

内容 * (支持 Markdown 格式)

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

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

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

学习路线总览

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

---

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

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

第一步：理解概念和配置

1. 核心概念：D1 就是一个通过 API 访问的 SQLite 数据库，它与你的 Worker 函数绑定在一起，具备自动扩缩容和边缘分布的特点。
   2. 项目关联：
       * 打开 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/ 目录是学习的宝库。迁移是管理数据库结构变更的标准方式。

1. 分析迁移文件：
       * 0001_initial_schema.sql: 定义了最初的表结构（例如 posts 表）。
       * 0002_add_image_url.sql: 增加了一个字段，用于存储图片 URL。
       * 0007_remove_image_url_column.sql: 又删除了这个字段。
       * 学习点：通过阅读这些 SQL 文件，你可以了解项目数据结构的历史演变。
   2. 实践 `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
   3
   4         # 2. 应用所有未应用的迁移
   5         wrangler d1 migrations apply DB --local

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

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

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

1         // 查询所有文章
   2         const { results } = await env.DB.prepare("SELECT * FROM posts ORDER BY created_at DESC").all();
   3
   4         // 插入一篇文章
   5         await env.DB.prepare("INSERT INTO posts (id, title, content) VALUES (?, ?, ?)")
   6                     .bind(id, title, content)
   7                     .run();

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

---

2. 学习 Cloudflare R2 (对象存储)

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

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

第一步：理解概念和配置

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

1         [[r2_buckets]]
   2         binding = "ASSETS" # 这是在代码中访问 R2 的变量名
   3         bucket_name = "mini-blog-assets"

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

第二步：学习文件上传

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

1. 前端：创建一个 HTML 表单，使用 method="POST" 和 enctype="multipart/form-data"。
   2. 后端 (`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         }

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

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

1. 公开访问 (可选)：你可以为 R2 存储桶绑定一个公共域名，这样浏览器就可以直接像访问普通网站一样访问图片。这是最简单的方式。
   2. 通过 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);
   13
   14         return new Response(object.body, {
   15           headers,
   16         });

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

总结与建议

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

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

配图 (可多选)

选择新图片文件或拖拽到此处

标签