前端视角初识 Supabase

Supabase 是一个开源的 BaaS 平台，它集成了多种后端服务，方便开发者快速搭建应用。核心功能通常包括数据库支持（如 PostgreSQL）、实时 API、身份验证、文件存储、边缘函数以及一个用于管理项目的仪表板。

你可以选择官方托管平台或本地进行部署，本文将以官方托管平台为例，介绍如何在 Vue.js 项目中集成 Supabase。

如何开始使用 Supabase

以下是一些基本步骤：

1. 创建 Supabase 项目：

• 在 Supabase 官方托管平台 注册账户并创建新项目。系统会自动为你生成 PostgreSQL 数据库和 API 密钥。

2. 访问 Supabase 控制台：

• 登录后，你可以通过控制台管理数据库、设置身份验证、配置存储等。

3. 创建数据库表：

• 在控制台中，你可以轻松创建和管理数据库表，配置字段类型及其属性。

4. 配置身份验证：

• 在控制台中启用身份验证功能，选择所需的登录方式（如电子邮件或社交媒体）。

5. 上传文件：

• 使用控制台中的存储功能上传和管理文件。

如何集成到前端项目

1. 初始化 Supabase 客户端

使用 createClient() 方法初始化 Supabase 客户端，这是与 Supabase 交互的入口点。示例代码如下：

import { createClient } from '@supabase/supabase-js'

// 替换为你项目的 supabaseUrl 和 API 密钥
const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-public-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

2. 数据库操作

• 查询数据:

  const { data, error } = await supabase.from('table_name').select('*');
  

• 插入数据:

  const { data, error } = await supabase.from('table_name').insert([{ column_name: 'value' }]);
  

3. 用户身份验证

• 注册用户:

  const { user, session, error } = await supabase.auth.signUp({
    email: 'example@example.com',
    password: 'password123',
  });
  

• 登录用户:

  const { user, session, error } = await supabase.auth.signIn({
    email: 'example@example.com',
    password: 'password123',
  });
  

4. 文件存储

使用Supabase的存储服务上传文件，例如：

const { data, error } = await supabase.storage.from('bucket_name').upload('path/to/file', file);

快速起步

在 Supabase 仪表盘添加数据

你也可以使用 SQL Editor - Quickstarts - 选择 Countries 模板快速创建该示例表，也可以手动创建：

1. 进入仪表盘的 SQL Editor，粘贴以下 SQL 语句并运行：

   -- 创建表
   create table countries (
     id bigint primary key generated always as identity,
     name text not null
   );
   
   -- 插入示例数据
   insert into countries (name) values
   ('Canada'),
   ('United States'),
   ('Mexico');
   
   -- 启用行级安全
   alter table countries enable row level security;
   

2. 添加 RLS 策略，允许匿名用户读取数据：

   create policy "public can read countries"
   on public.countries
   for select to anon
   using (true);
   

在 Vue.js 中使用 Supabase

1. 创建 Vue 项目

使用 Vite 创建一个新的 Vue 项目：

npm create vite@latest

2. 安装 Supabase 客户端库

在 Vue 项目根目录安装 Supabase 客户端库：

npm install @supabase/supabase-js

3. 配置 Supabase 客户端

在 /src/lib 目录中创建 supabaseClient.js 文件，初始化 Supabase 客户端：

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient('<your-api-url>', '<your-anon-key>')

你可以在仪表盘首页找到 API URL 和 anon key。

4. 获取数据并显示在 Vue 应用中

修改 App.vue 文件，从 Supabase 数据库获取数据并显示：

<script setup>
import { ref, onMounted } from 'vue'
import { supabase } from './lib/supabaseClient'

const countries = ref([])

async function getCountries() {
  const { data } = await supabase.from('countries').select()
  countries.value = data
}

onMounted(() => {
  getCountries()
})
</script>

<template>
<ul>
  <li v-for="country in countries" :key="country.id">{{ country.name }}</li>
</ul>
</template>

通过本教程，你已经对 Supabase 及其在 Vue 应用中的集成有了基本的了解，希望能帮助到你快速入门 Supabase。