Cursor + Supabase：通过AI编程完整一个全栈待办事项

UP主: 熠辉IndieDev · 时长: 32:47 · 🔗 B站原视频

发布: 2025-03-03 · 收录: 2025-03-24

标签: Cursor · Supabase · AI编程 · 全栈开发 · 零基础

新手做应用，后端是绕不开的

对新手而言，用 AI 开发前端相对简单。但如果你要做一个真正的应用，就还需要后端部分。

后端会涉及服务器、数据库、用户认证相关的 API、文件存储相关的 API。这些没有前端那么直观，而且是在服务器上，大家会觉得维护起来更担惊受怕。

对新手来说，我最推荐的后端方案，就是用 Supabase 来开发应用后端。

Supabase 是什么，能提供哪些能力

Supabase 的 Hero 部分写着：Build in a weekend，Scale to millions，意思是开发和扩展都非常快。

它提供的功能包括：

• 数据库
• 用户登录验证
• 文件存储（非常实用）
• Real-time 实时功能
• 甚至能直接帮你生成一系列 API

我们点进具体项目里看 Supabase 提供的功能：

• 数据表的预览
• 可视化的 SQL Editor
• 用户登录这一块，不仅支持邮箱、手机号，还支持市面上常见的第三方登录，集成很方便

所以对新手而言，不要自己买服务器去开发项目，用 Supabase 是更好的解决方案。

国内替代方案：MemFireDB 与费用建议

如果你的服务面向国内用户，推荐你使用 MemFireDB，它是 Supabase 的国内替代方案，使用方式几乎一模一样，但不是免费的。

Supabase 提供一个账号两个免费额度的使用权限；MemFireDB 是 19 块钱一个月。

我经常把 Supabase 当作测试服务器；如果要上线，你可以购买 19.9 元/月的入门版，作为国内项目服务，对新手来说基本够用。

本教程要做的全栈 To Do 应用（包含哪些功能）

这个教程会带大家做一个 To Do 应用，基本能熟悉 Supabase 的完整功能，包括：

• 登录注册
• To Do 数据库操作（增删改查）
• 图片上传（文件上传）
• Real-time：右侧增加一个 To Do，其他设备端也会同步增加

通过这个应用，你基本能掌握 Supabase 90% 左右的基础知识，而且全程不要求你写一行代码。我会展示如何用 Cursor 高效开发这个应用。

前端：使用 Next.js + Supabase 官方模板起项目

先完成项目前端部分开发。

去 Next.js 官网找模板，Next.js 上有 Supabase 官方提供的模板，叫 Supabase Starters。

下载方式很简单：复制对应命令到命令行就能下载到本地。NPM 用户用 NPM 命令，我平时用 PNPM 就用 PNPM 的命令。

下载后进入目录，用 Cursor 打开，把项目跑起来，访问 3000 端口就能看到基础模板。

这个模板提供一个完整页面，并且有登录注册功能。但这两个按钮现在不能点，因为 Supabase 的环境变量还没填，后面再讲。

用 Cursor 生成一个酷炫 To Do List 页面并替换进模板

接下来改造模板。

我让 Cursor 帮我生成一个“超级好看的 To Do List 页面”，要求酷炫一点，用 Tailwind CSS 加 Lucide React Icons。

之所以要求 Tailwind + Lucide，是因为 package.json 里已经有这些库，直接用更方便，不用再装额外依赖。

生成后，把对应的页面代码复制到框架项目的页面里替换。替换后可能会出现样式问题，多数是布局导致的。

解决方式：进入布局组件，把其他多余的布局内容删掉，只保留 children，也就是首页页面。回到页面再看，样式就正常了。

修复登录/注册页布局，并补齐首页登录注册入口

模板还有登录页和注册页：

• Sign in 页面不对
• Sign up 页面也不对

这些页面有各自的 layout。

我让 Cursor 帮我改：

1. 登录/注册页面顶部增加返回首页按钮
2. 登录/注册页面整体样式和首页一致（配色一致）
3. 首页增加“登录/注册”按钮，跳转到对应页面

修改完成后预览，效果不错。

全站中文化与应用命名

我继续让 Cursor 把首页和登录/注册页面都改为中文，并把应用命名为「一辉 To Do」。

测试：

• 首页是中文
• 登录页、注册页是中文
• 可以返回首页

前端部分就完成了：Next.js 官方模板 + Cursor 生成页面样式 + Cursor 完整修改。

接入 Supabase：创建项目并配置环境变量

接下来把应用接入 Supabase。

如果还没注册 Supabase，进入注册页面注册，支持 GitHub 一键登录或邮箱登录。注册后会进入创建项目页面。

创建项目示例：

• 项目名：to do list
• 自动生成强密码
• 区域：尽量选用户所在区域。服务中国用户可选亚洲的新加坡或东京。我这里选新加坡。
• Create new project 创建项目

项目创建成功后，往下翻到 Project API，有两个重要 key：

1. Supabase URL
2. 项目 API Key（公钥）

回到项目里找到 .env 文件。需要把 .env.example 重命名为 .env.local，这一点在 README 里写得很清楚：重命名并填入环境变量。

把 Supabase URL 和公钥复制粘贴进去，然后重启应用。重启成功后，就算接入 Supabase 了，可以使用登录注册、数据库、文件上传等功能。

Supabase 认证：邮箱注册、邮件模板与 SMTP 注意事项

登录注册功能在 Supabase 左侧栏 Authentication。

OS Provider 是 Supabase 支持的登录方式。接入其他第三方也很简单，比如 GitHub，只需要去 GitHub 获取对应参数。

邮箱注册默认打开，可以直接用。关于邮箱注册补充两点：

1. Email Template：可以在 Email Store 里修改邮件模板，比如把确认邮件改成「一辉 To Do 注册确认，请点击对应链接确认邮箱地址」，保存后注册时就会用这个模板。
2. SMTP Setting：上线前一定要配置。默认 Supabase 官方邮件服务有限制（例如每小时只能发几封），适合测试。上线要填你自己的邮件服务信息，比如 Resend 或 163 邮箱。文档里有 163 SMTP 设置说明。

模板自带登录注册，但登录后会重定向到 Protected 页面

模板自动集成了登录注册功能。

测试注册：输入邮箱和密码注册，在 Gmail 能收到确认邮件，邮件内容就是刚才改的模板。点击确认后会自动登录。

登录后会跳到一个页面，满屏代码别慌。很多网站登录后会重定向到仪表盘或个人工作区，而不是首页。

比如 Figma：未登录访问 figma.com 是首页，登录后再访问会进入个人工作区。

这个模板的逻辑也是这样，但我们不需要这个 Protected 页面，因为我们的首页就是工作区。

去掉 Protected 重定向，让登录后回到首页

做法：

• 全局搜索包含 protected 的重定向位置
• 把登录后的重定向改到首页
• 其他 protected 的重定向也删掉或改成首页
• 重置密码相关的先不改

改完后，访问 localhost:3000 就不会再跳 protected 页面了。

登录态显示“退出登录”，未登录显示“登录/注册”

这时还有个问题：页面处于登录态，但还显示登录注册按钮，不对。

登录状态应该显示“退出登录”。点击退出后要调用 sign out 方法。退出登录方法在对应文件里，能看到 sign out action。

我让 Cursor：

• 判断登录态显示退出按钮
• 绑定现有的 sign out action

修改后刷新页面就有退出登录了。测试退出：会跳回登录页；退出后首页显示登录/注册按钮。

未登录禁止添加 To Do：添加时重定向登录页并给文案提示

需求：用户未登录时添加 To Do，直接跳转登录页，必须登录才能使用代办事项。

提醒：在改之前先保存提交，确保之后能回退。

我让 Cursor 给页面加逻辑：

• 未登录点击添加 To Do 时重定向到登录页
• 页面下方加提示文案：未登录时提示“登录制定 To Do”之类的内容

测试：未登录添加会跳登录页；登录后正常使用。

创建数据库表：用 Cursor 生成 SQL + RLS Policy

现在 To Do 还是本地数据，我们要接入真实数据库。

Supabase 可以可视化创建表，但新手不一定知道字段怎么设计。我直接让 Cursor 根据现有产品功能生成：

• 创建表 SQL
• RLS Policy（行级安全策略）
• 用户必须登录才能添加 To Do
• 只能操作自己的数据

Cursor 给出 SQL 后，复制到 init.sql 文件保存一份，再到 Supabase 的 SQL Editor 粘贴运行。显示 success 就说明表创建成功。

回到 Table Editor，就能看到 to dos 表了。

连接真实数据库：实现增删改查且只能操作自己的数据

表有了之后，需要让应用实现真实的 CRUD。

我让 Cursor 结合刚创建的表完成 Supabase 数据连接，要求：

• 用户登录后才能新增 To Do
• 支持新增、删除、修改
• 点击完成要修改并保存
• 查询/修改/删除都只能作用于当前用户数据，不能改到别人

修改完成后 accept，回到项目测试：

• 新增：比如“录制视频”，表里会出现
• 完成：刷新后状态保持
• 修改：表里同步更新
• 删除：表里数据消失

整个过程基本两句提示词：一句让它给建表语句，一句让它接入数据库并完成 CRUD。

文件上传：创建 Storage Bucket + Policy，并在 To Do 里加图片附件

现在只支持文字，不支持图片。我希望增加“上传图片附件”功能，展示 Supabase 文件上传的简单。

在 Supabase 上传文件需要在 Storage 创建 Bucket：

• bucket 名：my_todo
• 设置为公开 bucket
• 限制文件类型：只允许图片（image/*）

创建 bucket 后还要创建 policy（安全策略），定义哪些人能访问/修改。

在 policy 模板里选“用户只能操作自己 UID 目录下的文件”那种模板，然后把 select / insert / update / delete 全部勾上并确认，就会增加四条 policy。

应用侧接入图片上传，并把 image_url 存数据库

我让 Cursor 实现：

1. To Do 增加图片上传功能，只允许上传一个附件
2. 上传到 my_todo bucket，路径在用户 UID 目录下，并返回附件地址
3. 附件预览地址保存到数据库里，需要有 image_url 字段

补充说明：如果你一开始的建表 SQL 没有 image_url 字段，需要自己加。

可以用可视化方式添加字段：

• 新建字段：image_url
• 类型：text（存 URL）
• 保存

accept 后测试：

• 页面出现“添加图片附件”
• 选择图片后上传成功
• bucket 里能看到文件
• 表里刷新能看到对应 image_url

Supabase Storage 常用 API 很简单

代码里全局搜 storage，可以看到常用 API：

• upload：上传文件
• getPublicUrl：获取公共 URL
• remove：删除文件

上传文件基本就是这几个 API 的事。

Real-time 实时同步：开启表的实时功能并订阅更新

最后讲 Supabase 很强的功能：Real-time。

先看现有问题：我左右各开一个代办页面，左边新增任务，左边会出现，右边不会出现。右边刷新才会出现。

一般要做实时有几种办法：

• 前端定时请求刷新
• 前端加刷新按钮让用户手动刷新
• WebSocket 后端推送（后端代码会更复杂）

用 Supabase 做实时很简单。

第一步：回到 Supabase 的表设置，打开 Real-time（默认是 off），启用它。

第二步：回到 Cursor 写提示词：

• 增加 Supabase Real-time 功能
• 用户更新自己的 To do 表数据后，其他设备浏览器同步更新
• 新增/删除/修改都触发视图更新

修改完成 accept 后测试：

• 左右页面新增任务会同步出现
• 完成、修改、删除也同步

核心订阅逻辑就是监听这张表的事件，并过滤只监听当前用户的数据，有事件就触发更新。这就是 Real-time 的实现方式。

不用 Supabase 自己写后端的话，这块逻辑处理会复杂很多。