Supabase快速入门与实战指南
Supabase 简介
Supabase 是一个开源的后端即服务(BaaS)平台,基于 PostgreSQL,提供数据库、认证、存储和实时服务。它类似于 Firebase,但使用 PostgreSQL 作为数据库,支持通过 RESTful API 和 SDK 实现前后端交互。
Supabase 提供了丰富的功能,包括数据库操作、认证、实时数据和文件存储。通过简单的 SDK 调用,即可实现后端功能。对于前端开发者,Supabase 是一个强大的后端解决方案,可以快速构建应用。
Supabase 入门
创建项目
注册并创建项目
- 访问 database.new 创建一个新的 Supabase 项目。
- 在项目仪表板中找到
Project URL
和anon key
。
安装 CLI(可选) - 如果需要本地开发,可以安装 Supabase CLI:
npm install -g supabase
- 初始化项目:
supabase init
- 启动本地服务:
supabase start
安装依赖
以 JavaScript 项目为例,安装 Supabase 客户端库:
npm install @supabase/supabase-js
初始化客户端
在项目中初始化 Supabase 客户端:
import { createClient } from '@supabase/supabase-js';const supabaseUrl = 'YOUR_PROJECT_URL';
const supabaseAnonKey = 'YOUR_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseAnonKey);
数据库操作
基本操作
查询数据
const { data, error } = await supabase.from('todos').select('*');
from
方法指定表名。select
方法指定要查询的字段,*
表示查询所有字段。
插入数据
const { error } = await supabase.from('todos').insert([{ task: 'Learn Supabase', is_completed: false }]);
insert
方法接受一个对象或对象数组,表示要插入的数据。
更新数据
const { error } = await supabase.from('todos').update({ is_completed: true }).eq('id', 1);
update
方法指定要更新的字段和值。eq
方法用于筛选符合条件的记录。
删除数据
const { error } = await supabase.from('todos').delete().eq('id', 1);
delete
方法删除符合条件的记录。
高级查询
条件筛选
- 等于
.eq('name', 'Leia')
- 不等于
.neq('name', 'Leia')
- 大于
.gt('id', 2)
- 大于等于
.gte('id', 2)
- 小于
.lt('id', 2)
- 小于等于
.lte('id', 2)
- 模糊匹配
.like('name', '%Lu%')
- 忽略大小写的模糊匹配
.ilike('name', '%lu%')
- 为空
.is('name', null)
- 在某个范围内
.in('name', ['Leia', 'Han'])
- 包含某个数组
.contains('tags', ['is:open', 'priority:low'])
- 被某个数组包含
.containedBy('days', ['monday', 'tuesday', 'wednesday', 'friday'])
- 范围大于
.rangeGt('during', '[2000-01-02 08:00, 2000-01-02 09:00)')
- 范围大于等于
.rangeGte('during', '[2000-01-02 08:30, 2000-01-02 09:30)')
- 范围小于
.rangeLt('during', '[2000-01-01 15:00, 2000-01-01 16:00)')
- 范围小于等于
.rangeLte('during', '[2000-01-01 14:00, 2000-01-01 16:00)')
- 范围相邻
.rangeAdjacent('during', '[2000-01-01 12:00, 2000-01-01 13:00)')
- 数组重叠
.overlaps('tags', ['is:closed', 'severity:high'])
- 文本搜索
.textSearch('content', `'eggs' & 'ham'`, { config: 'english' })
- 匹配
.match({ id: 2, name: 'Leia' })
- 排除
.not('name', 'is', null)
- 或条件
.or('id.eq.2,name.eq.Han')
- 自定义筛选
.filter('name', 'in', '("Han","Yoda")')
排序
const { data, error } = await supabase.from('todos').select('id, task').order('id', { ascending: false });
order
方法指定排序字段和排序方向。
分页
const { data, error } = await supabase.from('todos').select('id, task').range(0, 10);
range
方法指定分页的起始和结束记录。
限制返回数量
const { data, error } = await supabase.from('todos').select('id, task').limit(1);
limit
方法限制返回的记录数量。
返回单条记录
const { data, error } = await supabase.from('todos').select('id, task').eq('id', 1).single();
single
方法确保返回单条记录。
返回 CSV 格式
const { data, error } = await supabase.from('todos').select('id, task').csv();
csv
方法返回 CSV 格式的数据。
事务操作
Supabase 支持 PostgreSQL 的事务操作,可以通过 SQL 脚本在 Supabase Studio 中执行。
存储过程
可以创建存储过程并通过 Supabase 调用:
const { data, error } = await supabase.rpc('hello_world');
认证服务
用户注册
const { data, error } = await supabase.auth.signUp({email: 'example@email.com',password: 'example-password',
});
signUp
方法用于用户注册。
用户登录
const { data, error } = await supabase.auth.signInWithPassword({email: 'example@email.com',password: 'example-password',
});
signInWithPassword
方法用于用户登录。
退出登录
const { error } = await supabase.auth.signOut();
signOut
方法用于退出登录。
重置密码
const { data, error } = await supabase.auth.resetPasswordForEmail('example@email.com');
resetPasswordForEmail
方法用于重置密码。
实时数据
监听数据变化
const channel = supabase.channel('schema-db-changes').on('postgres_changes',{ event: '*', schema: 'public', table: 'todos' },(payload) => console.log('Change received!', payload)).subscribe();
- 监听
todos
表的所有数据变化。
取消订阅
supabase.removeChannel(channel);
- 取消订阅实时数据。
文件存储
上传文件
const { data, error } = await supabase.storage.from('avatars').upload('public/avatarpng', file);
upload
方法用于上传文件。
下载文件
const { data, error } = await supabase.storage.from('avatars').download('public/avatarpng');
download
方法用于下载文件。
删除文件
const { data, error } = await supabase.storage.from('avatars').remove(['public/avatarpng']);
remove
方法用于删除文件。