在 Vue 中使用 Supabase

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

创建一个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);

创建Vue应用

使用npm init命令创建一个Vue应用。

Terminal

1
npm init vue@latest my-app

安装Supabase客户端库

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

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

Terminal

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

声明Supabase环境变量

创建.env.local文件并填入您的Supabase连接变量：

Project URL

Anon key

1
2
VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>VITE_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

创建Supabase客户端

在Vue应用中创建/src/lib目录，新建supabaseClient.js文件并添加以下代码来初始化Supabase客户端：

src/lib/supabaseClient.js

1
2
3
4
5
6
import { createClient } from '@supabase/supabase-js'const supabaseUrl = import.meta.env.VITE_SUPABASE_URLconst supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEYexport const supabase = createClient(supabaseUrl, supabaseAnonKey)

从应用查询数据

将App.vue文件中的现有内容替换为以下代码。

src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script setup>import { ref, onMounted } from 'vue'import { supabase } from './lib/supabaseClient'const instruments = ref([])async function getInstruments() {  const { data } = await supabase.from('instruments').select()  instruments.value = data}onMounted(() => {   getInstruments()})</script><template>  <ul>    <li v-for="instrument in instruments" :key="instrument.id">{{ instrument.name }}</li>  </ul></template>

启动应用

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

Terminal

1
npm run dev