快速开始

在 SvelteKit 中使用 Supabase

学习如何创建 Supabase 项目、向数据库添加示例数据，以及从 SvelteKit 应用中查询数据。

1

创建一个Supabase项目

前往 database.new 并创建一个新的Supabase项目。

当您的项目启动并运行后，前往 表编辑器，创建一个新表并插入一些数据。

或者，您可以在项目的 SQL编辑器 中运行以下代码片段。这将创建一个包含一些示例数据的 instruments 表。

1
2
3
4
5
6
7
8
9
10
11
12
13
-- 创建表create table instruments (  id bigint primary key generated always as identity,  name text not null);-- 向表中插入一些示例数据insert into instruments (name)values  ('violin'),  ('viola'),  ('cello');alter table instruments enable row level security;

通过添加RLS策略，使表中的数据可公开读取：

1
2
3
4
create policy "public can read instruments"on public.instrumentsfor select to anonusing (true);
2

创建 SvelteKit 应用

使用 npm create 命令创建一个 SvelteKit 应用。

Terminal
1
npx sv create my-app
3

安装 Supabase 客户端库

最快捷的方式是使用 supabase-js 客户端库，它提供了从 SvelteKit 应用操作 Supabase 的便捷接口。

进入 SvelteKit 应用目录并安装 supabase-js。

Terminal
1
cd my-app && npm install @supabase/supabase-js
4

创建 Supabase 客户端

在您的 SvelteKit 应用中创建 src/lib 目录，新建一个名为 supabaseClient.js 的文件，并添加以下代码来初始化 Supabase 客户端（使用您的项目 URL 和公共 API 匿名密钥）：

Project URL
Anon key
src/lib/supabaseClient.js
1
2
3
import {  } from '@supabase/supabase-js'  export const  = ('https://<project>.supabase.co', '<your-anon-key>')
5

从应用查询数据

使用 load 方法在服务端获取数据，并将查询结果以简单列表形式展示。

在 src/routes 目录下创建 +page.server.js 文件，添加以下代码。

src/routes/+page.server.js
1
2
3
4
5
6
7
8
import { supabase } from "$lib/supabaseClient";  export async function load() {    const { data } = await supabase.from("instruments").select();    return {      instruments: data ?? [],    };  }

将 src/routes 目录下现有的 +page.svelte 文件内容替换为以下代码。

src/routes/+page.svelte
1
2
3
4
5
6
7
8
9
<script>    let { data } = $props();  </script>  <ul>    {#each data.instruments as instrument}      <li>{instrument.name}</li>    {/each}  </ul>
6

启动应用

启动应用并在浏览器中访问 http://localhost:5173，您应该能看到乐器列表。

Terminal
1
npm run dev

后续步骤