如何让React应用零后端代码连接数据库？Supabase分步实战，构建完整To-Do功能

很多人以为，把React前端连上数据库，必然得写一堆后端接口、处理认证、折腾服务器。但Supabase这个开源的后端即服务平台，让整件事简化到了只需复制几行凭证——甚至不用写半行后端代码。

如果你已经会用React的useState和useEffect，今天这篇手把手教程就能让你在一个小时内，从零搭出一个具备完整增删改查功能的To-Do应用。不涉及任何后端语言，不需要Postgres基础，全程在前端直接操作数据库。

我们先说清楚Supabase到底是什么。它底层是一套托管给你的Postgres数据库，在上面自动生成RESTful接口，还附带用户认证、实时订阅等功能。这次我们只用数据库和自动生成的API部分——这两块就足够把常见的笔记、待办、反馈收集应用搭起来。

注册Supabase项目很简单。到supabase.com用GitHub登录最快。点新建项目后，输入项目名比如todo-app，给个靠谱的数据库密码留好，再选一个离你最近的服务器位置。点击提交后等上大概一到两分钟，整个Postgres实例就就绪了。控制台左侧列表里会多出一个刚建好的项目。

接着建数据表。在项目控制台左侧找到表格编辑器，点新建表格，名称填todos。系统默认已经给了id和created_at两列，我们只需要额外加两列：一个task，类型选text，不勾选可为空；另一个is_complete，类型选boole，默认值设成false。保存之后，todo表就出来了。

如果你习惯写SQL，也可以直接在SQL编辑器里跑一条建表语句：create table todos (id bigint generated by default as identity primary key, task text not null, is_complete boolean default false, created_at timestamp with time zone default now()); 两种方式效果完全一样。

有一个重要的安全设置得先关掉。Supabase内置行级安全策略（RLS），默认会阻止匿名用户读写数据。纯粹为了学习演示，我们去认证菜单的策略栏目，或者在表格编辑器的RLS设置项里，把todos表的行级安全暂时禁用。这么做之后，所有人都能直接插入数据。

务必提醒自己：这仅仅是练习项目的快速通道。任何一个准备上线的应用，都要重新启用RLS并编写精细的访问策略，否则数据等于敞开大门。记住这条边界，今天的学习就不会埋下隐患。

接下来拿到连接凭证。Supabase项目里有个API设置页，里面放着两个必须的值：项目URL，长得像https://xxxxx.supabase.co ；以及一个anon公开密钥，是一长串字符串。这两个东西就是React前端访问数据库的通行证。

有了凭证，就可以在React项目里动手了。如果你手头有一个现成的项目——推荐用Vite搭建——只需安装Supabase官方客户端：npm install @supabase/supabase-js 。如果要从零创建，命令行执行npm create vite@latest todo-app -- --template react ，然后进入目录再跑npm install和npm install @supabase/supabase-js ，环境和依赖就全齐了。

然后新建一个src/supabaseClient.js文件，写入：import { createClient } from '@supabase/supabase-js'; const supabaseUrl = '你的项目URL'; const supabaseAnonKey = '你的anon密钥'; export const supabase = createClient(supabaseUrl， supabaseAnonKey); 。引入刚刚创建的这个客户端实例后，整个应用就拿到了操作数据库的能力。

有一点值得注意：真的产品中不应该把密钥硬编码在源文件里。正确做法是建一个.env文件，以VITE_SUPABASE_URL和VITE_SUPABASE_ANON_KEY的形式存放，然后代码里通过import.meta.env读取。对于初学者的直播演示，直接写在代码里问题不大——关键是你得知道有更好的实践方式。

现在可以构建核心的To-Do组件了。客户端已经初始化，我们只需要在React组件里，用supabase这个对象去调用对应的API：.from('todos') 指向表，.select() 读取数据，.insert() 新增一条，.update() 更新某行，.delete() 删除记录。每一条操作都返回promise，用useEffect和useState就能把数据挂载到组件状态上。

整个数据流的思路是这样的：组件挂载时向Supabase发一次查询，拿回所有待办事项存进state；用户添加新任务时，调用insert方法插入一行，同时把返回的记录追加到本地列表；勾选完成时调用update修改is_complete字段；删除按钮则触发delete操作并移出当前状态。

Supabase自动生成的API遵循Restful语义，而且返回值里直接包含新增或修改后的行数据，省得你再去查询一次。对于单表简单操作，这种体验非常贴近前端的直觉——你几乎就是在操作一堆JavaScript对象，但背后是实实在在的Postgres事务。

实际编码中，组件大概长这样：一个输入框加提交按钮负责新增；一组列表条目，每条后面有完成复选框和删除按钮。样式可以用基础CSS很快调出来，关键是逻辑链路要理清。事件处理函数里需要处理异步流程、更新本地状态，以及必要时捕获错误。

很多刚接触后端的React开发者会卡在概念上：我怎么可以直接从前端发insert？这样安全吗？答案是，今天我们把RLS关了，相当于给了前端完全访问权限，所以可以直接这样用。正式项目里，RLS会根据用户的认证状态和自定义规则，限制每行数据的可见范围和可写权限，仍保持零后端代码。

Supabase还提供了实时订阅功能：你可以在客户端监听数据库的变更事件，这样多个用户之间能即时同步状态。不过本次练习只聚焦基础CRUD，所以不展开这部分。完成基础功能后，你可以自己试着加一个实时同步，客户端代码改动很小。

回顾整个搭建过程，真正需要你写的不超过六十行代码：一份客户端配置文件，一个React组件。没有Express路由，没有ORM映射，更没有部署服务器的步骤。Supabase把这个管线的很大一部分抽象掉了，留下的只是你关心的应用逻辑。

对于打算做demo、参加黑客松、或者快速验证想法的前端工程师来说，这种效率意味着可以在半天之内把概念跑起来。即便你对Postgres完全不熟悉，控制台自带的表格编辑器和可视化的策略管理，也足够帮你度过初期学习阶段。

最后一步肯定是把项目跑起来看看效果。npm run dev启动Vite开发服务器，打开浏览器，输入几个代办任务，点完成，点删除，所有操作都会立刻反映到Supabase数据库里。你可以打开两张页签，一张React页面，一张Supabase表格编辑器，亲眼看数据在两者间同步流动。

如果过程中遇到请求失败，八成是项目URL或anon密钥复制有误，或者RLS没彻底关掉。排查顺序就是先核对凭证字符串是否有空格或遗漏，再看表格编辑器里RLS指示灯是否已禁用。

学会这套组合，你以后做个人小工具、团队内部面板、甚至早期产品原型，都能快速拥有持久化存储能力。Supabase的免费额度对个人项目和非关键阶段绰绰有余，先撑过产品与市场匹配验证期再说。

一个容易被忽视的优势是，你后期想迁徙到更复杂的架构时，底层的Postgres依然在那里。需要写自定义查询、创建视图、加触发器，都可以直接用SQL，不用扔掉原来那套自动API。这是它跟某些封闭BaaS最大的不同。

回到今天的任务：你现在已经知道了如何从零创建Supabase项目、建表、获取密钥、初始化React客户端、以及编写一个完整的待办组件。剩下的就是打开编辑器，亲自把每一步敲一遍，看着数据库从前端直接灌入数据的那种微妙感觉。

不要急着理解所有技术细节，先让程序跑通。等你在控制台里看到第一条react插入的记录时，再去翻文档深挖RLS策略规则、实时订阅和认证集成。今天的目标很纯粹：建立起“前端直连数据库”这个认知，其余的可以留给后面更复杂的项目慢慢补。