docs: 修复《数据库与Supabase入门》章节标题中英文混用
fix https://github.com/datawhalechina/easy-vibe/issues/74 翻译文档中的部分内容，包括标题和小节标题，使其从英文转换为中文，以便更好地服务中文用户。
This commit is contained in:
GeoDaoyu
@@ -24,9 +24,9 @@
|
||||
- 一款支持用户注册 / 登录，并能将数据存入在线数据库的基础应用
|
||||
- 一套可复用的 Supabase 后端代码模板（数据库 + 用户管理等），供后续项目直接套用
|
||||
|
||||
# 1. What is Database
|
||||
# 1. 什么是数据库
|
||||
|
||||
## 1.1 What is Data
|
||||
## 1.1 什么是数据
|
||||
|
||||
在数字世界里，数据（Data）无处不在。简单来说，数据是信息的载体。你朋友的联系方式、一篇微信文章、一条短视频、游戏里的角色等级，这些都是数据。在我们的应用中，数据就是需要被记录和管理的一切信息，比如用户的个人资料、订单历史、程序设置等。
|
||||
|
||||
@@ -93,7 +93,7 @@ user_info = {
|
||||
|
||||
|
||||
|
||||
## 1.2 Why We Need Database
|
||||
## 1.2 为什么我们需要数据库
|
||||
|
||||
我们已经了解到真实世界中的数据往往结构复杂，**为了高效存储与使用这些数据，我们需要一个专门的程序或容器来管理它们** —— 这便是数据库（Database）的诞生初衷。数据库本质上是一款特殊程序，核心作用就是对数据进行规范化组织、安全存储、系统化管理，并支持高效查询调用。
|
||||
|
||||
@@ -109,7 +109,7 @@ user_info = {
|
||||
- **保证数据的完整性和一致性** ： 数据库通过一系列机制（如约束、触发器）来确保数据的准确性和一致性。 这意味着数据库中的数据必须符合预设的规则，例如，用户的年龄必须是数字，订单号必须是唯一的，从而有效防止了非法或无效数据的产生。
|
||||
- **确保数据的安全性** ： 数据库提供了强大的安全机制，包括用户身份验证、访问控制和数据加密等，以保护数据免受未经授权的访问、修改或破坏。为了应对硬件故障、人为失误或恶意攻击等意外情况，数据库还提供了数据备份和恢复功能。 通过定期备份，可以在数据丢失或损坏时及时恢复，保障了业务的连续性。
|
||||
|
||||
## 1.3 Relational Database VS Non-Relational Database (NOSQL)
|
||||
## 1.3 关系型数据库与非关系型数据库
|
||||
|
||||
前面我们已经了解了数据库的核心价值、部署方式与弹性优势，而在实际选择时，首先要面对的就是数据库的两大核心类别：关系型数据库与非关系型数据库（NOSQL），我们可以用简单的两段话简单理解他们的区别：
|
||||
|
||||
@@ -281,7 +281,7 @@ Examples of NoSQL databases：
|
||||
|
||||
在这个背景下，[Supabase](https://supabase.com/) 就可以看作是新一代的 BaaS 代表：它以 PostgreSQL 作为核心数据库，在其之上集成了 Auth、Storage、Realtime、Edge Functions、Vector 等一整套后端能力，为开发者提供一个“以 Postgres 为中心的一站式后端平台”。接下来，我们就从这个角度出发，从“只选数据库”升级到“选择完整的后端开发平台”，具体看看 Supabase 能帮我们省掉哪些工作，又是如何让一个项目从原型到可用产品的距离大幅缩短的。
|
||||
|
||||
## 2.1 Step by Step Guide
|
||||
## 2.1 分步指南
|
||||
|
||||
在清晰把握 Supabase 的整体定位后，接下来我们将沿着 Supabase 控制台的操作路径，逐项拆解它具体提供哪些核心能力，以及每项能力对应的核心职责。我们会详细介绍 supabase 涉及的每个选项，帮助你快速入门 supabase 的基本操作。
|
||||
|
||||
@@ -297,7 +297,7 @@ Examples of NoSQL databases：
|
||||
|
||||
|
||||
|
||||
### Table Editor
|
||||
### 表编辑器
|
||||
|
||||
Table Editor 可以当成是 Supabase 的可视化数据表编辑器，它能让你像操作 Excel 一样直接查看和修改数据库里的数据，无需编写 SQL 语句，只需要用鼠标交互即可修改数据内容。
|
||||
|
||||
@@ -312,7 +312,7 @@ Table Editor 可以当成是 Supabase 的可视化数据表编辑器，它能让
|
||||
|
||||
|
||||
|
||||
### SQL Editor
|
||||
### SQL 编辑器
|
||||
|
||||
SQL Editor 作为 Supabase 的 SQL 语句执行器，可让你用代码的方式直接操作数据库。你可以让大模型直接生成 SQL 语句，在右侧输入后点击 RUN 即可用语句创建或修改 table，也可以直接在 Results 中直接看到筛选出的 table 数据。
|
||||
|
||||
@@ -320,7 +320,7 @@ SQL Editor 作为 Supabase 的 SQL 语句执行器，可让你用代码的方式
|
||||
|
||||
你可以在运行 RUN 之后，在 Table Editor 的 public schema 里找到新建后的数据表；并且运行后的语句会保存在左侧的 PRIVATE 栏中，甚至可以点击下方的爱心标志对这一条查询或创建语句进行收藏。
|
||||
|
||||
### Database
|
||||
### 数据库管理中心
|
||||
|
||||
Database 是 Supabase 的数据库管理中心，支持可视化地查看和管理所有数据表，并通过表的相互连线理解不同表间的关联关系（即外键约束，表示数据间的引用关系）。
|
||||
|
||||
@@ -330,7 +330,7 @@ Database 是 Supabase 的数据库管理中心，支持可视化地查看和管
|
||||
|
||||
|
||||
|
||||
### Authentication
|
||||
### 身份认证
|
||||
|
||||
Authentication 负责管理用户的注册、登录和权限。默认的用户管理系统数据都在此处存储，它提供了开箱即用的用户注册、登录、密码重置、邮箱验证等功能，并支持第三方 OAuth 登录（如微信、GitHub、Google 等）。所有用户数据会自动同步到数据库的 `auth.users` 表中。
|
||||
|
||||
@@ -352,7 +352,7 @@ Authentication 负责管理用户的注册、登录和权限。默认的用户
|
||||
|
||||
|
||||
|
||||
### Storage
|
||||
### 存储
|
||||
|
||||
Storage 是 Supabase 的存储系统，兼容 amazon cloud 的 s3 概念，可用于存储任意类型的文件（如图片、视频、文档、音频等），并提供访问权限管理（公开或私有）和下载链接获取（永久链接或临时链接），你能够很方便在应用中对用户涉及到的文件内容进行上传与下载管理，并与 Supabase 的认证系统无缝集成，实现精细化的访问控制。
|
||||
|
||||
@@ -370,7 +370,7 @@ Storage 是 Supabase 的存储系统，兼容 amazon cloud 的 s3 概念，可
|
||||
>
|
||||
> **为什么要做成 S3 兼容 \*\***API\*\* ** ?** ：S3 已经存在近 20 年，市面上有大量现成的工具、SDK 和文档，兼容 S3 意味着你可以直接用这些资源，不用从头开始制作各类相关工具，能够快速满足业务上线的需求。
|
||||
|
||||
### Edge Functions
|
||||
### 边缘函数
|
||||
|
||||
如果你不想部署后端，但是想使用数据库和函数操作，你可以使用 Edge Functions 构建无需自建服务器的后端核心能力，它是 Supabase 提供的全球分布式服务端函数。简单来说，它让你无需购买和管理自己的后端服务器，就能直接编写并部署在云端的后端代码。这些函数部署在全球网络的边缘节点上，会自动在离你的用户最近的位置运行，从而大幅降低网络延迟，提供极致的响应速度。你可以在 Supabase 的仪表盘中直接创建、编辑和部署，整个开发流程非常便捷。
|
||||
|
||||
@@ -423,7 +423,7 @@ Edge Functions 的应用场景非常广泛，能够处理各种后端任务。
|
||||
|
||||
具体到一个常见的例子：身份认证工具 Clerk 。Clerk 仅用于处理用户登录、注册、信息更新等认证相关操作，并不直接管理你的业务数据库。如果你想要将这些认证动态同步到业务数据库中，则需要通过触发 Webhook 事件请求 Edge Functions 实现。Edge Functions 能够监听 Clerk 发出的 Webhook 信号，自动执行数据同步逻辑，让 Supabase 数据库中的用户信息与 Clerk 登录状态实时对齐，全程无需你部署独立后端。
|
||||
|
||||
### Realtime
|
||||
### 实时数据同步引擎
|
||||
|
||||
Realtime 是 Supabase 的实时数据同步引擎，它允许你的应用即时接收数据库的变化通知，而无需反复轮询 API。当数据库中的数据发生 `INSERT`、`UPDATE` 或 `DELETE` 操作时，Realtime 会通过 WebSocket 将这些变化实时推送给所有已连接的客户端。这对于构建需要实时交互的应用至关重要。
|
||||
|
||||
@@ -435,7 +435,7 @@ Realtime 主要包含三大核心功能，覆盖了绝大多数实时场景：
|
||||
|
||||
我们会在后续的项目制学习中详细介绍该部分的内容。
|
||||
|
||||
### Project Settings
|
||||
### 项目设置
|
||||
|
||||
Project Settings 是 Supabase 项目的高级配置部分，你可在此实现计算资源的深度调度，以及各类功能底层参数的精细化配置。
|
||||
|
||||
@@ -451,7 +451,7 @@ Project Settings 是 Supabase 项目的高级配置部分，你可在此实现
|
||||
|
||||
其余配置项在当前阶段无需深究，待后续有进阶使用需求时再逐一探索即可。
|
||||
|
||||
## 2.1 Create Your First SQL Table
|
||||
## 2.1 创建你的第一个 SQL 数据表
|
||||
|
||||
以上是 Supabase 的界面介绍，接下来我们将深入 Supabase 的核心数据库的操作环节。
|
||||
|
||||
@@ -691,7 +691,7 @@ DELETE FROM orders WHERE placed_at < now() - interval '2 days';
|
||||
|
||||
执行前，你可先执行 `SELECT id, status, placed_at FROM orders WHERE placed_at < now() - interval '2 days';` 进行数据表筛选结果的查看。当运行 `DELETE` 命令后，再次执行相同的 `SELECT` 查询 `SELECT id, status, placed_at FROM orders WHERE placed_at < now() - interval '2 days';`，将返回一个空的结果，表明这些行已被成功删除。
|
||||
|
||||
## 2.4 RLS (Row level security)
|
||||
## 2.4 行级安全
|
||||
|
||||
在学习了数据库的基本操作后，我们需要进一步深入一个保障数据安全的核心概念 ——RLS（行级安全，Row Level Security）。
|
||||
|
||||
@@ -716,11 +716,11 @@ RLS 正是为解决这类数据安全与隔离需求而生。它允许开发者
|
||||
|
||||
|
||||
|
||||
# 3. The First SQL Application
|
||||
# 3. 第一个 SQL 应用
|
||||
|
||||
掌握了数据库基础操作与RLS核心逻辑，我们终于进入本次教程的实践环节。漫长的学习铺垫是为了让后续“从0到1搭建应用”的过程更清晰。接下来，我们将以“汉堡店订单管理”为场景，手把手演示Supabase的常见操作：从应用与Supabase的关联配置，到数据库与登录功能的集成，逐步学习不同操作逻辑。
|
||||
|
||||
## 3.1 Clone and Run Supabase Demos
|
||||
## 3.1 克隆并运行 Supabase 示例项目
|
||||
|
||||
要开展实操，首先需要获取配套的演示代码仓库。你可以让 Trae 或 Claude Code 协助 git clone 以下仓库：https://github.com/THU-SIGS-AIID/Project5-Supabase-Demos
|
||||
|
||||
@@ -730,11 +730,11 @@ RLS 正是为解决这类数据安全与隔离需求而生。它允许开发者
|
||||
|
||||
Clone 后，你同样可以让 Trae 或者是 Claude Code 帮你启动项目，例如直接在 Agent 界面中说明： `帮我直接启动这个项目里面的 project 1 `，或者复制对应想启动 project 的绝对路径，粘贴给大模型让大模型直接启动。
|
||||
|
||||
## 3.2 Project1 - burger-shop-menu-crud
|
||||
## 3.2 项目1 - 汉堡店菜单增删改查
|
||||
|
||||
接下来进入实操环节 —— 以 `project-burger-shop-menu-crud-1` 为例，我们将学习如何通过 SQL 脚本一键初始化 Supabase 数据库，并完成本地项目与 Supabase 数据库的关联配置，让前端能正常读写菜单数据。
|
||||
|
||||
### Create a Database Using Scripts
|
||||
### 使用脚本创建数据库
|
||||
|
||||
首先，我们需要在 Supabase 中创建需要的数据表的相关内容。进入 Project1 项目目录看到名为 `scripts`的文件夹，其中包含 1 个 `init.sql`数据库脚本文件，它能帮我们自动完成所有数据库相关资源的创建（包括表结构、初始数据等），之后我们会经常用到该文件进行数据库中表的初始化。
|
||||
|
||||
@@ -783,7 +783,7 @@ comment on column public.menu_items.updated_at is 'Timestamp when the item was l
|
||||
7. 插入种子数据 (Seed Data) :
|
||||
8. 为了让前端项目启动后就能看到真实的菜单与促销数据（无需手动录入测试数据），`init.sql`脚本还会向 `menu_items`和 `promo_codes`表中插入 “种子数据”（即示例数据）。例如，你可以看到各种汉堡、小食、饮料以及多种多样的折扣码。
|
||||
|
||||
### Set up the connection with database
|
||||
### 设置与数据库的连接
|
||||
|
||||
数据库准备完成，我们需要将这个前端项目与 Supabase 进行连接，从而正常读取数据库内的数据。我们需要将 Supabase 项目的 URL 和 anon key 写到指定配置中，本项目提供了两种灵活的配置方式：
|
||||
|
||||
@@ -820,11 +820,11 @@ export function maybeCreateBrowserClient(): SupabaseClient | null {
|
||||
|
||||
|
||||
|
||||
### 📚 Assignment
|
||||
### 📚 作业
|
||||
|
||||
1. 尝试增加和删除已有项目，在 Table Editor 中查看修改操作对数据表内容变动的影响。
|
||||
|
||||
## 3.4 Project2 - burger-shop-auth-users
|
||||
## 3.4 项目2 - 汉堡店认证用户
|
||||
|
||||
Project1 实现了 “菜单 CRUD + 数据库连接” ，Project2 将引入更贴近真实业务的核心能力，用户认证（Auth）与行级安全（RLS）权限管理。
|
||||
|
||||
@@ -862,13 +862,13 @@ const { error: err } = await supabaseClient.auth.signUp({
|
||||
|
||||
|
||||
|
||||
### 📚 Assignment
|
||||
### 📚 作业
|
||||
|
||||
1. 请先领取新手礼包，完成商品购买操作。
|
||||
2. 尝试找到用户权限的设定数据表位置，将权限修改为 `admin`，并成功在订单管理界面修改商品数量
|
||||
3. 尝试在数据表内定位到钱包金额相关表，通过修改使剩余钱包金额增加。
|
||||
|
||||
# 4. Build Your First Supabase App
|
||||
# 4. 构建你的第一个 Supabase 应用
|
||||
|
||||
经过前面的系统学习，你已掌握 Supabase 的核心能力（数据库操作、用户认证、RLS 安全策略），现在是时候亲自动手，搭建属于你的第一个包含数据库、支持用户登录系统的应用了！
|
||||
|
||||
@@ -890,7 +890,7 @@ const { error: err } = await supabaseClient.auth.signUp({
|
||||
|
||||
当然，你还可以直接让 AI 参考某个 project 的实现直接迁移对应的 Supabase 功能，比如某个 Project 用到了数据库以及 Edge fuction 的高级功能，你可以按照如下方式直接让 AI 迁移对应的相似功能：“请你参考该项目 {此处复制粘贴参考项目的绝对地址} 当中的 Supabase 相关功能实现逻辑，给当前项目加上类似的实现逻辑（如用户登录、数据库管理、函数请求等等）”。
|
||||
|
||||
## 4.2 Case Study : Build an Online Snake Game
|
||||
## 4.2 案例研究：构建一个在线贪吃蛇游戏
|
||||
|
||||
根据上面所提到的 SOP ，让我们通过一个具体的实际案例 `Project5-Supabase-Demos/apps_snakegame`来实践：为一个已有的“贪吃蛇”游戏项目增加分数排行榜单，包含用户登录与数据库基础功能。
|
||||
|
||||
@@ -935,11 +935,11 @@ const { error: err } = await supabaseClient.auth.signUp({
|
||||
1. 将用户管理系统集成到贪吃蛇游戏演示版中
|
||||
2. 将用户管理系统集成到你的应用程序中（如果之前已开发过一个应用程序）
|
||||
|
||||
# 5. Become Supabase Master
|
||||
# 5. 成为 Supabase 大师
|
||||
|
||||
以上是 Supabase 的基本操作，接下来的旅程中我们将会接触 Supbase 的进阶原理和功能，你将理解为什么我们会选择 Supabase 作为教学案例，以及如何使用 Supbase 实现更高级的操作，协助你实现更复杂的交互功能，并且在学习这些功能后，即便面对 Supabase 之外的其他同类工具，你也能触类旁通，从更本质的层面理解后端服务的核心原理。当然，你并不需要在短时间内学会全部，也许只需要学会第三方登录支持已经足够，你可以先浏览下列内容，直到项目遇到对应的需求时再倒回来深入学习。
|
||||
|
||||
## 5.1 Why We choose Supabase
|
||||
## 5.1 为什么我们选择 Supabase
|
||||
|
||||
在开始进阶之前，我们再次思考这个问题：众多后端技术方案中，为何我们最终选择 Supabase 作为技术底座？
|
||||
|
||||
@@ -951,7 +951,7 @@ Supabase 将这些后端能力打包为开箱即用的服务（PostgreSQL数据
|
||||
|
||||
总而言之，技术选型需匹配业务规模与目标。 对于个人项目或极小范围测试，PocketBase 等超轻量方案已足够；若企业需对接复杂身份系统，或要满足上市公司合规审计要求，WorkOS 这类企业级全身份治理方案更为适用。但对于验证 MVP、承载早期用户的核心业务场景，Supabase 的完整功能完全够用，它不仅能独立支撑至少万级用户规模，更可灵活集成 Stripe（支付）、Resend（邮件）、Cloudflare（CDN）等第三方服务；即便未来业务扩展至企业级需求，Supabase 的开源架构也能与企业系统并行部署，不同功能选择最适配的平台进行使用。这种渐进式灵活性，使初创团队无需过早投入重型基础设施，又能保留 future-proof 的演进空间。
|
||||
|
||||
## 5.2 Google & Github Login Support
|
||||
## 5.2 Google 和 GitHub 登录支持
|
||||
|
||||
在前面的教程中，我们讲解了如何直接使用邮箱进行注册和登录，但在实际操作中我们通常想要简化注册流程，例如使用第三方登录 Google 和 GitHub 进行系统的快速注册与登录，我们将会在这节教程中展开每个细节；同时，一个完整的认证系统也必须提供安全可靠的密码重置功能，我们也会将密码重置功能集成在本节教程的项目中。
|
||||
|
||||
@@ -1051,7 +1051,7 @@ Supabase 将这些后端能力打包为开箱即用的服务（PostgreSQL数据
|
||||
|
||||
|
||||
|
||||
## 5.3 Realtime Function
|
||||
## 5.3 实时功能
|
||||
|
||||
Supabase 的实时功能是其最强大的特性之一，为构建协作文档、实时仪表盘、游戏大厅或客服系统提供了极大的便利。
|
||||
|
||||
@@ -1234,7 +1234,7 @@ ch.on('broadcast', { event: 'cursor' }, ({ payload }) => {
|
||||
|
||||
通过这种方式， Presence 和 Broadcast 协同工作；Presence 维护在线用户列表，而 Broadcast 则负责在这些用户之间传递像光标位置这样的临时状态，最终以较低的成本实现了丰富的实时互动功能。
|
||||
|
||||
## 5.4 Storage
|
||||
## 5.4 存储
|
||||
|
||||
除了用户信息、订单这类可规整定义的结构化数据，一个完整的应用通常还需要处理大量非结构化文件 —— 例如用户头像、商品展示图、用户上传的订单文档等。这类文件的特点是体积差异大、数量可能极多（比如电商平台的商品图可能达数万甚至数十万张），若直接存储在应用自身的业务服务器中，会显著增加服务器的存储负载，还可能拖慢数据读写速度，影响应用整体性能。
|
||||
|
||||
@@ -1246,7 +1246,7 @@ ch.on('broadcast', { event: 'cursor' }, ({ payload }) => {
|
||||
|
||||
|
||||
|
||||
### 5.4.1. Bucket
|
||||
### 5.4.1. 存储桶
|
||||
|
||||
Supabase Storage 的组成单元是存储桶 Bucket。你可以把它想象成电脑操作系统中的文件夹。每个 Bucket 都可以有自己独立的安全策略和配置。
|
||||
|
||||
@@ -1309,7 +1309,7 @@ const signedUrl = data?.signedUrl;
|
||||
|
||||
从安全保障和成本控制的角度，建议养成优先使用临时签名 URL 的习惯。只有当某个资源明确需要永久公开、无限制访问（比如应用的公开 Logo、公共活动宣传图等）时，才考虑使用 Public URL。这样既能满足特定业务需求，又能最大程度规避不必要的风险和成本消耗。
|
||||
|
||||
## 5.5 Edge Function
|
||||
## 5.5 边缘函数
|
||||
|
||||
Edge Function 是 Serverless（无服务器架构）生态中极具核心价值的形态之一，它为 “无自建后端” 场景提供了轻量、高效的函数运行支持。
|
||||
|
||||
@@ -1395,7 +1395,7 @@ Supabase 提供了非常友好的界面，让你无需接触命令行即可完
|
||||
- 图片生成 ( txt2img.ts ) : 这个函数展示了如何利用 Edge Function 调用第三方的文生图（Text-to-Image）API（如 Stability AI, Midjourney 等）来动态生成图片。这是一种典型的计算密集型或需要安全调用外部服务的场景。与 llm-chat 案例一样，API 密钥被安全地存储在 Supabase 后端，前端只负责发送文本描述，然后接收并展示生成的图片，整个过程安全、高效。
|
||||
- 发送邮件 ( send-email.ts ) : 在应用中发送欢迎邮件、交易通知或密码重置邮件是常见需求。 send-email.ts 示例演示了如何通过 Edge Function 集成邮件服务（如 Resend, SendGrid）。你无需在客户端代码中暴露敏感的邮件服务 API Key，只需创建一个函数，让前端通过调用这个函数来触发邮件发送。
|
||||
|
||||
## 5.6 Clerk Login
|
||||
## 5.6 Clerk 登录
|
||||
|
||||
Clerk 是一款专注于身份认证与用户管理的专业开发工具，核心能力覆盖用户注册、登录、账号安全MFA、权限控制、会话管理等全链路身份认证相关需求，能帮助开发者快速搭建安全、灵活且符合现代应用标准的用户体系，无需从零开发复杂的身份逻辑。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user