Supabase

1- Supabase

很抱歉，之前提供的图片链接是占位符，并不是真实的图片资源。为了确保你能看到相关的图片，我建议你访问 Supabase 的官方文档和教程页面，这些页面通常会包含详细的图示和截图，帮助你更好地理解和使用 Supabase。

以下是一些具体的步骤和链接，供你参考：

1.1- Supabase 详细教程

1.1.1- 1. 创建 Supabase 项目

注册和登录：
- 访问 Supabase 官网，点击右上角的 “Sign In” 按钮，然后选择 “Sign Up Now” 注册一个新账号。
创建新项目：
- 登录后，进入 Supabase Dashboard，点击 “New Project” 按钮创建一个新项目。
- 输入项目名称、选择数据库密码和区域，然后点击 “Create New Project”。

1.1.2- 2. 配置数据库

创建表：
- 在 Supabase Dashboard 中，导航到 “Table Editor”。
- 点击 “New Table”，输入表名和列信息，然后点击 “Save” 创建表。例如，创建一个名为 books 的表，包含 id、name 和 price 列。
插入数据：
- 你可以使用 SQL 编辑器直接插入数据，或者通过 Supabase 提供的 API 进行数据操作。例如，插入一本书的数据：
```
INSERT INTO books (name, price) VALUES ('Harry Potter', 29.99);
```

1.1.3- 3. 集成 Supabase 到前端项目

安装 Supabase 客户端库：
- 在你的前端项目中，使用 npm 安装 Supabase 客户端库：
```
npm install @supabase/supabase-js
```

初始化 Supabase 客户端：

在项目中创建一个 supabaseClient.js 文件，并初始化 Supabase 客户端：

// 导入 Supabase 客户端库
import { createClient } from '@supabase/supabase-js';

// 定义 Supabase 项目的 URL 和 匿名密钥
const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-anon-key';

// 创建 Supabase 客户端实例
export const supabase = createClient(supabaseUrl, supabaseKey);

1.1.4- 4. 查询数据库数据

基本查询：

在你的 Vue 组件中，查询 books 表中的数据并展示到页面中：

<script setup>
// 导入 Vue 的 ref 和 onMounted 函数
import { ref, onMounted } from 'vue';
// 导入 Supabase 客户端实例
import { supabase } from './lib/supabaseClient';

// 定义一个响应式变量来存储书籍数据
const books = ref([]);

// 定义一个异步函数来获取书籍数据
async function getBooks() {
  // 从 books 表中选择所有数据
  const { data } = await supabase.from('books').select();
  // 将获取到的数据赋值给 books 变量
  books.value = data;
}

// 在组件挂载时调用 getBooks 函数
onMounted(() => {
  getBooks();
});
</script>

<template>
  <!-- 使用 v-for 指令遍历 books 数据并展示 -->
  <ul>
    <li v-for="book in books" :key="book.id">
      {{ book.name }} （编号:{{ book.id }}，价格:{{ book.price }}）
    </li>
  </ul>
</template>

1.1.5- 5. 用户认证

设置认证：
- 在 Supabase Dashboard 中，导航到 “Authentication”。
- 配置允许的登录方式（如邮箱、手机号、第三方服务等）。

用户注册和登录：

使用 Supabase 提供的 API 实现用户注册和登录功能。例如，用户注册：

// 使用 Supabase 的 signUp 方法进行用户注册
const { user, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'example-password',
});

1.1.6- 6. 实时订阅

配置实时订阅：

Supabase 允许你通过 WebSocket 实现实时数据同步。你可以在客户端代码中订阅数据库表的变化：

// 订阅 books 表的插入事件
const subscription = supabase
  .from('books')
  .on('INSERT', payload => {
    // 当有新书籍插入时，输出新书籍的信息
    console.log('New book added:', payload.new);
  })
  .subscribe();

1.1.7- 7. 对象存储

配置存储桶：
- 在 Supabase Dashboard 中，导航到 “Storage”。
- 创建一个新的存储桶，用于存储文件。

上传和管理文件：

使用 Supabase 提供的 API 上传、下载和管理文件。例如，上传文件：

// 使用 Supabase 的 storage API 上传文件到指定存储桶
const { data, error } = await supabase.storage
  .from('bucket-name')
  .upload('public/avatar1.png', file);

1.1.8- 8. 边缘函数

创建边缘函数：
- Supabase 支持在边缘节点上运行 JavaScript 函数。你可以在 Supabase Dashboard 中创建和管理这些函数。

集成边缘函数：

在你的应用中调用这些边缘函数，处理请求或触发事件。例如，调用边缘函数：

// 使用 Supabase 的 functions API 调用边缘函数
const { data, error } = await supabase.functions.invoke('function-name', {
  body: JSON.stringify({ key: 'value' }),
});

1.1.9- 9. 安全和权限管理

行级安全（RLS）：
- 配置行级安全策略，确保用户只能访问自己的数据。在 Supabase Dashboard 中，导航到 “Policies”，为你的表添加安全策略。
权限管理：
- 使用 Supabase 提供的权限管理系统，精确控制谁可以访问你的数据和功能。

1.1.10- 10. 示例项目

用户管理应用：
- 你可以参考官方文档中的示例项目，如使用 Next.js 和 Supabase 构建一个用户管理应用，包括用户注册、登录、资料更新和文件上传等功能。访问 Supabase 官方文档获取更多信息。
其他示例：
- 官方文档和社区资源中还有许多其他示例项目和教程，可以帮助你更好地理解和使用 Supabase。访问 Supabase 官方文档获取更多信息。