Supabase 集成

通过 Supabase 将一个功能齐全的后端集成到您的 Lovable 应用程序中。

Lovable 的原生 Supabase 集成 让您能够通过一个简单易用的聊天界面管理前端 UI 和后端数据库。换句话说，您可以在 Lovable 中设计应用程序的界面并设置一个云 PostgreSQL 数据库，而无需离开平台。这种统一的方法让强大的应用程序开发变得触手可及——非技术用户可以依赖 Lovable 的指导，而经验丰富的开发人员则可以根据需要调用 Supabase 的高级功能。

概述

Supabase 是 Firebase 的开源替代方案，提供托管的 PostgreSQL 数据库、实时功能、用户认证、文件存储以及无服务器函数。通过将 Supabase 连接到您的 Lovable 应用程序，您无需编写任何样板代码或手动配置服务器，即可立即获得一个生产就绪的后端。Supabase 的直观 Web 仪表板让您轻松管理数据和用户，其强大的 SQL 基础确保您保留了 PostgreSQL 数据库的全部功能和可扩展性。

Supabase 集成解锁的关键功能：

• 数据库 (PostgreSQL) – 使用完整的 SQL 支持存储和查询您的应用程序数据。Lovable 可以根据您的提示自动生成必要的表和架构。
• 用户认证 – 安全管理用户注册、登录和访问控制。Lovable 可以轻松添加预构建的认证流程（如电子邮件/密码）到您的应用程序中，只需一个简单的提示。
• 文件存储 – 通过 Supabase Storage 上传和服务图像或其他文件。非常适合用户头像、上传文件或应用程序需要处理的任何静态媒体。
• 实时更新 – Supabase 可以将实时数据变化流式传输到您的应用程序。这使得功能如实时聊天、活动提要或协作仪表板能够即时更新所有用户。
• Edge Functions (无服务器) – 在 Supabase 的基础设施上运行自定义后端逻辑（使用 JavaScript/TypeScript）。Lovable 会为您创建并部署这些函数，用于任务如发送电子邮件、处理支付或与外部 API 集成。

为什么使用 Lovable 的 Supabase 集成？

在 Lovable 中，您无需在前端设计和后端设置之间来回切换。只需与 Lovable 的 AI 对话，您就可以构建 UI并让底层数据库和服务器函数自动为您创建。这意味着更快的开发速度和更少的集成问题。例如，如果您提示 Lovable：“添加一个用户反馈表单并将响应保存到数据库中”，Lovable 会生成表单 UI并设置一个 Supabase 表来存储反馈——这一切一气呵成。这种无缝的端到端生成是 Lovable 的独特优势，让初学者能够构建复杂应用程序，并让高级用户更快地推进工作。

入门：将 Supabase 连接到 Lovable

将 Supabase 后端连接到您的 Lovable 项目非常简单。您需要一个 Supabase 账户（免费层即可），以及一个准备好的 Lovable 项目。如果您还没有 Supabase 账户，可以在 Supabase 网站上注册——免费层不需要信用卡。

1. 创建 Supabase 账户

   注册一个新的 Supabase 账户 这里 或 登录 如果您已经拥有一个。

2. 创建新项目

   点击 + 新项目，完成必要的字段，并等待几分钟完成设置。

3. 连接到 Lovable

   1. 在 Lovable 中启动 Supabase 连接。

      在 Lovable 编辑器中，打开集成菜单（通常位于右上角工具栏）。点击连接 Supabase。Lovable 会提示您登录 Supabase，如果您尚未登录。

   2. 授权并选择或创建项目。

      会出现 Supabase 登录屏幕。登录您的 Supabase 账户并授权 Lovable。接下来，您将被要求选择一个 Supabase 组织和项目以链接到您的 Lovable 应用程序。您可以选择现有项目或直接创建一个新项目（Lovable 的聊天会指导您完成创建新 Supabase 项目的过程）。

   3. 等待配置完成。

      选择项目后，Lovable 会自动配置连接。几秒钟内，您应该在聊天中看到确认消息（例如，“✅ Supabase 已连接”）。此时，您的 Lovable 应用程序已链接到 Supabase 数据库——可以立即使用认证、数据存储和其他后端功能。

   note

   Lovable 和 Supabase 都提供慷慨的免费层用于开发。如果您的应用程序增长或需要高级功能，您可能最终需要为每个服务单独购买付费计划。目前，您可以免费实验而不产生任何费用。

添加用户认证

您可能首先想要添加用户认证（让人们能够注册和登录您的应用程序）。Lovable 的 Supabase 集成让这变得非常简单，只需通过聊天即可设置。

电子邮件和密码（基本设置）

一旦您的项目连接到 Supabase，Lovable 可以为您生成认证页面。例如，您只需提示：“添加登录”。这通常会在您的应用程序中创建一个基本的登录页面（以及相关的注册流程），并连接到 Supabase 的认证系统。

Lovable 添加登录 UI 后，您有几种方式创建用户进行测试：

示例提示：

添加登录

• 通过应用程序的注册表单： 使用新添加的界面在您的应用程序中注册一个用户（这会与 Supabase 通信来创建账户）。
• 通过 Supabase 仪表板： 转到您的 Supabase 项目仪表板，导航到认证 > 用户，并手动添加一个新用户（电子邮件和密码）。这很方便快速设置测试账户。

note

为了开发方便，我们建议在测试时在 Supabase 中禁用电子邮件确认。这样，用户可以立即登录，而无需验证电子邮件。要做到这一点，请打开 Supabase 仪表板，前往认证 > 设置 > 电子邮件，然后禁用“确认电子邮件”要求。您可以在生产环境中重新启用确认以确保安全。

Lovable 已经配置您的 Lovable 应用程序来识别已认证的用户（例如，只允许登录用户访问某些页面，如果适用）。您可以使用 Lovable 的编辑器或提示进一步自定义登录/注册页面的外观和感觉。Supabase 集成 2.0 甚至允许您向注册表单添加额外字段或根据您的品牌风格化表单。

社交认证 (OAuth)

Supabase 支持像 Google、GitHub、Twitter 等 OAuth 登录。您也可以将这些集成到您的 Lovable 应用程序中：

1. 在 Supabase 中启用提供商： 在 Supabase 仪表板中，导航到认证 > 提供商。您会看到外部登录提供商的列表。切换启用Google（例如），并按照指示提供从 Google 获得的必需 OAuth 客户端 ID 和密钥。保存设置——您的 Supabase 项目现在可以处理 Google 登录。

2. 更新 Lovable 应用程序的 UI： 接下来，您可以提示 Lovable 添加社交登录选项。例如：“在登录页面上添加一个‘使用 Google 登录’按钮。”Lovable 会修改认证页面，添加 Google 登录按钮以及必要的代码来启动 OAuth 流程通过 Supabase。

完成这些后，您的应用程序用户可以点击“使用 Google 登录”，被重定向到 Google 进行认证，然后返回您的应用程序作为已登录用户。您可以类似方式启用其他提供商（GitHub、Facebook 等）——只需在 Supabase 中配置每个提供商，然后相应调整您的 Lovable UI。

使用 Supabase 管理数据

除了认证之外，大多数应用程序的核心是读取和写入数据。通过 Lovable 和 Supabase，您可以在不离开聊天提示的情况下创建数据库表并将它们连接到 UI。

通过 Lovable 创建数据库表

连接 Supabase 后，每当您需要持久存储数据时，都可以指示 Lovable，它会协调数据库设置。过程通常如下：

1. 描述您的数据需求

   在 Lovable 的聊天中，请求一个涉及数据存储的功能。例如，您可能说：“添加一个反馈表单并将响应保存到一个数据库表中。”尽可能清楚地说明您想要存储什么数据（例如，用户反馈，包括消息和评分，或库存项目，包括名称和价格等）。Lovable 会使用这些信息来确定所需的数据库结构。

2. 查看建议的架构

   Lovable 的 AI 会提出应用程序更新。由于您的请求涉及存储数据，Lovable 还会生成一个 SQL 架构片段——本质上是创建必要表或列的命令。例如，它可能会说：“我将创建一个名为 feedback 的表，包含列 id、message 和 rating，并提供相应的 SQL 代码。”这个片段会出现在聊天或侧边栏中，供您复制。

3. 批准并实施

   打开 Supabase 仪表板，前往SQL 编辑器。粘贴 Lovable 中的 SQL 片段并执行它，这会在您的数据库中创建新表（或修改现有表）。您可以在 Supabase 的表编辑器中验证表是否已存在并包含指定的列。

4. 测试集成

   返回 Lovable，确认您已运行 SQL（聊天可能要求确认，或您可以简单告诉 Lovable “完成”或点击提供的确认按钮）。Lovable 会完成集成：它更新您的应用程序 UI，将表单输入、列表或其他组件绑定到新的 Supabase 表。继续我们的示例，反馈表单现在已连接——当用户提交反馈时，它会保存到 feedback 表中，您也可以检索并显示这些条目。

就这样！您无需手动设计数据库架构或编写任何后端代码——Lovable 和 Supabase 会从您的描述中处理一切。您可以为任何新数据功能重复这个过程（博客文章、评论、产品等）。

例如，如果您希望用户能够在您的应用程序中发布文章，您可以提示：“允许用户创建带有标题和内容的帖子，并将这些存储到数据库中。”Lovable 会生成一个 posts 表（包含标题、内容、作者、时间戳等字段），为您提供添加它到 Supabase 的 SQL 代码，然后将前端表单和页面连接到该表。

note

Supabase 的仪表板提供了一个丰富的界面来管理您的数据。您可以在类似电子表格的 UI 中查看和编辑表行、定义表之间的关系，甚至从 CSV 或 Excel 中导入数据。在底层，它是 PostgreSQL——这意味着您可以执行复杂查询或使用 SQL 功能。如果您不熟悉 SQL，Supabase 甚至在 SQL 编辑器中提供了AI SQL 助手来帮助您编写查询。这对于高级分析或故障排除非常有用。

文件存储（图像和媒体）

当您的 Lovable 应用程序需要处理文件上传（例如，用户头像、附件或任何媒体）时，Supabase 集成会为您提供支持。Supabase 包含一个存储服务，用于在您的数据库旁边方便地托管文件（图像、视频、PDF 等）。

如果您在 Lovable 应用程序中添加一个上传组件或图像上传功能，Lovable 会在后台使用 Supabase 存储。上传的文件会存储在您的 Supabase 项目中的存储桶中，您会获得一个 URL 或引用，用于后续显示或下载文件。

默认情况下，Supabase 的免费层允许每个文件上传大小达50MB。这足以处理大多数图像或短视频。如果您的应用程序需要处理更大的文件，Supabase 的付费计划支持更大的上传（包括可恢复上传用于非常大的文件）。您可以根据需要将文件组织到文件夹（存储桶）中，并在 Supabase 仪表板中管理访问权限。

note

假设您的应用程序有用户配置文件，并且您希望用户添加头像。您可能会提示 Lovable：“在账户设置页面上添加头像上传。”Lovable 会创建上传图像的 UI。由于 Supabase 集成，当用户上传文件时，它会保存到您的 Supabase 存储（例如，在一个名为 public/avatar-images 的存储桶中），Lovable 会处理检索该图像 URL 以在您的应用程序中显示头像。这一切都无需您编写任何存储处理代码。

存储机密（API 密钥和配置）

许多应用程序需要机密密钥或 API 凭证来连接第三方服务——例如，Stripe 用于支付或 OpenAI 用于 AI 功能。当 Supabase 连接时，Lovable 提供了一种安全的方式来管理和使用这些机密。

Lovable 会自动检测功能何时需要机密，并通过 UI 提示您输入必要的值。

这些机密会安全存储在 Supabase 的 Edge Function 机密管理器中，用于您的项目。它们会被加密并保存在后端。当您部署 Edge Functions 时，它们可以访问这些机密来连接外部服务。

note

例如，如果您集成 Stripe 用于支付，您会将 Stripe 机密密钥存储为机密。当 Lovable 将支付处理函数部署到 Supabase 时，它会自动从机密存储中包含该密钥，以便函数可以与 Stripe 认证。这样，您无需在应用程序中硬编码机密，并避免公开暴露它们。

使用 Edge Functions 实现后端逻辑

有时您的应用程序需要超出基本数据 CRUD（创建、读取、更新、删除）的自定义后端逻辑。Supabase Edge Functions 是无服务器函数（类似于 AWS Lambda），让您能够在事件或请求触发时在后端运行代码。Lovable 的集成意味着您可以用自然语言定义所需的后端行为，Lovable 会为您编写并部署必要的 Edge Function 代码到 Supabase。

Lovable 中 Edge Functions 的典型用例包括：

• 使用 AI 服务： 例如，使用 OpenAI 或 Anthropic API 处理输入（使用上述方式存储的 API 密钥）。
• 发送电子邮件或通知： 例如，当用户注册时通过像 Resend 这样的电子邮件 API 发送欢迎电子邮件。
• 处理支付： 例如，使用 Stripe 的 API 创建结账会话或完成订单。
• 定时任务： 例如，每小时/每天执行清理或摘要作业（Supabase Edge Functions 可以按计划触发）。
• 复杂计算或第三方集成： 任何您不想在客户端运行的代码都可以放在 Edge Function 中。

要添加后端函数，只需在 Lovable 聊天中描述您需要的内容。例如：“当用户提交反馈表单时，使用 OpenAI 分析文本并存储一个情感分数。”Lovable 会生成这个逻辑的代码作为 Supabase Edge Function（在本例中，调用 OpenAI API），并将其部署到您的 Supabase 项目。它还会更新您的 Lovable 应用程序，以便在适当时候调用此函数（例如，在表单提交时）并处理响应。

您可以在 Supabase 仪表板下的函数部分找到并监控您的 Edge Functions。每个函数都会有日志显示最近的执行情况、输出或错误。Lovable 的 Supabase 集成 2.0 改进了这一体验，如果函数出错，Lovable 会自动读取这些日志，并在聊天中显示错误消息以帮助您排查问题。当然，您也可以随时查看 Supabase 日志以获取更多细节或安心。

note

在上线前：Supabase 的默认安全规则在开发环境中是宽松的，但您应该在生产环境中设置行级安全（RLS）策略。RLS 允许您定义谁可以读取或写入每个数据库表中的行（例如，确保用户只能访问自己的数据）。如果您提示，Lovable 可以帮助生成基本的 RLS 策略（例如，“应用安全策略，让用户只能编辑自己的反馈”）。但是，请始终在 Supabase 仪表板下的 Auth > 策略中审查并测试这些策略。在邀请真实用户之前，正确的安全设置至关重要。

FAQ

Supabase 集成到底为我做了什么？

它为您的 Lovable 应用程序提供了一个完全托管的后端。没有它，Lovable 仍然可以构建您的 UI，但您没有现成的位置来持久存储数据或管理用户。一旦连接 Supabase，Lovable 就可以创建用户账户（认证）、在数据库中存储和检索数据、上传文件、运行服务器端代码等——这一切都是自动的。本质上，Supabase 提供应用程序背后的数据库和服务器，而 Lovable 通过提示来驱动它。

我需要为 Lovable 和 Supabase 分别创建账户吗？

是的。Lovable 和 Supabase 是两个独立的平台。除了 Lovable 账户外，您还需要一个 Supabase 账户来托管您的数据库。好消息是两者都有免费层，因此您可以免费开始。只需记住，如果您以后升级以获得更多使用量或功能，您需要为每个服务单独处理计费。

如何将 Lovable 与 Supabase 连接？

1. 在 Lovable 编辑器中，前往集成部分。
2. 点击连接到 Supabase 并按照认证步骤操作。
3. 如果需要，在 Lovable 中创建一个新的 Supabase 项目。
4. Lovable 会自动生成必要的数据库架构并将其连接到您的项目。

我可以将连接 Supabase 的 Lovable 应用程序与外部自动化工具集成吗？

当然可以。当您使用 Lovable + Supabase 时，您的数据位于 Supabase 的数据库中，Supabase 还会为您的表提供自动生成的 RESTful API（以及客户端库）。这意味着您可以使用像 Zapier、Make.com 或任何其他服务通过 HTTP 请求与您的应用程序后端数据交互。例如，Zapier 可以从 Supabase 表中获取或添加记录。此外，您可以使用 Supabase Edge Functions 创建自定义 API 端点（Lovable 可以帮助创建），以触发更复杂的流程。总之，与第三方自动化服务的集成是可行的——只需进行一些 Supabase API 密钥或 Webhook 的配置。

Supabase 在我的应用程序增长时有多可扩展？

Supabase 建立在PostgreSQL之上，它可以处理大量数据和高流量。默认情况下，您的免费数据库可以处理相当大的工作负载（数百万行、多个连接）。随着需求增长，您可以升级 Supabase 计划以获得更多存储、吞吐量和功能。许多生产应用程序完全运行在 Supabase 上，因此您可以放心。只是要注意免费层的使用限制（Supabase 在其网站上记录了这些），并在接近这些限制时计划升级。

如何在我的应用程序中添加实时功能，如聊天或实时提要？

Supabase 在数据库上内置了实时订阅。这意味着您的应用程序可以监听特定表的更改（插入、更新、删除）并立即做出反应。要利用这一点，您可以像往常一样设计 Lovable 应用程序功能（例如，一个将 messages 写入消息表的聊天室）。Lovable 了解 Supabase 的实时功能，因此它可以设置前端来订阅该表的更改。在实践中，在创建了一个如聊天消息的表后，您可以提示 Lovable “为聊天启用实时更新”，它会在后台使用 Supabase 的实时 API。然后，用户会看到新消息实时出现，而无需刷新。这适用于任何需要实时更新的场景（评论、通知、仪表板等）。

Supabase 存储的文件上传有上限吗？

在免费层中，Supabase 将单个文件上传大小限制为50MB。这覆盖了大多数用例，如图像、音频或短视频。如果您需要处理更大的文件（例如，长视频或大型数据集），升级到付费计划会启用更大的上传，甚至支持可恢复上传。另外，请注意每个项目都有一个总体存储配额（例如，总存储量多少 GB），这会随着更高计划而增加。

如何在 Supabase 中配置认证？

Lovable 会自动设置认证，但您可能需要：

• 前往Supabase 仪表板 > 认证。
• 启用电子邮件登录/注册。
• 为本地测试禁用电子邮件确认。

我可以将一个 Supabase 数据库用于多个 Lovable 项目吗？

是的，您可以。您可能会在 Lovable 中构建多个前端应用程序，这些应用程序都连接到同一个 Supabase 项目（从而共享相同的数据库和认证）。这是一个高级用法，但可行——例如，一个主应用程序和一个管理仪表板作为单独的 Lovable 项目，使用一个公共数据库。在每个项目中连接 Supabase 时，只需选择相同的 Supabase 项目。请记住，所有这些应用程序都会读写相同的数据，因此请相应设计。

如果我想测试数据库更改而不影响线上应用程序，该怎么做？

目前，每个 Lovable 项目连接到一个 Supabase 项目，Lovable 没有内置的暂存模式。如果您想要一个安全的实验环境，Supabase 提供了一个称为分支的功能，让您创建一个数据库的临时副本（类似于 Git 分支）来测试更改。您可以将一个单独的 Lovable 项目连接到一个分支或数据库副本用于测试。一般来说，对于严肃的项目，您在线上应用程序上进行架构更改时要谨慎——或许创建备份或使用分支，然后在准备好时合并更改。Lovable 的集成正在演进，因此未来的更新可能引入更无缝的暂存工作流。

Supabase 或 Lovable 会帮助我编写自定义 SQL 或数据库逻辑吗？

是的。Supabase 的 Web 接口包括一个AI SQL 助手，它可以从自然语言生成 SQL 查询。因此，如果您需要一个复杂查询或不熟悉 SQL，您可以在 Supabase SQL 编辑器中使用该工具。在 Lovable 方面，您通常不需要手动编写 SQL——AI 会为您处理大多数架构创建和查询。但是，如果您是高级用户并想要自定义操作，您可以使用 Lovable 的 GitHub 集成来检查或编辑代码，或在数据库上运行原始 SQL。

如何在我的 Lovable 应用程序中处理支付？

支付通过像 Stripe 这样的集成来处理，您可以使用 Supabase Edge Functions 结合它。例如，您可能会提示 Lovable：“添加一个结账按钮并使用 Stripe 处理支付。”Lovable 会创建一个 Edge Function，该函数与 Stripe 的 API 通信（使用存储的 Stripe 机密密钥），并可能将交易细节存储到您的 Supabase 数据库中。UI 会更新以包含结账/支付按钮。本质上，Supabase 提供环境（Edge Functions、数据库）来实现支付，而 Lovable 可以为您搭建代码。如需更多细节，您可以参考 Lovable 文档中的 Stripe 和支付集成指南，其中涵盖了特定设置 Stripe 的内容。