此示例提供了使用 Supbase 和 Svelte 构建简单用户管理应用程序（从头开始！）的步骤。

此示例提供了使用 Supbase 和 Svelte 构建简单用户管理应用程序（从头开始！）的步骤。这包括：

• Supabase 数据库：用于存储您的使用数据的 Postgres 数据库。
• Supabase Auth：用户可以使用魔术链接登录（没有密码，只有电子邮件）。
• Supabase 存储：用户可以上传照片。
• 行级安全性：数据受到保护，个人只能访问自己的数据。
• 即时 API：创建数据库表时会自动生成 API。

在本指南结束时，您将拥有一个允许用户登录并更新一些基本个人资料详细信息的应用程序：

GitHub

每当您遇到困难时，请查看此 repo。

项目设置

在我们开始构建之前，我们将设置我们的数据库和 API。这就像在 Supabase 中启动一个新项目然后在数据库中创建一个“模式”一样简单。

创建项目

转到app.supabase.com。

1. 点击“新建项目”。
2. 输入您的项目详细信息。
3. 等待新数据库启动。

设置数据库模式

现在我们要设置数据库模式。我们可以使用 SQL 编辑器中的“用户管理入门”快速入门，或者您可以从下面复制/粘贴 SQL 并自己运行它。

SQL

-- Create a table for public "profiles"create table profiles (  id uuid references auth.users not null,  updated_at timestamp with time zone,  username text unique,  avatar_url text,  website text,  primary key (id),  unique(username),  constraint username_length check (char_length(username) >= 3));alter table profiles enable row level security;create policy "Public profiles are viewable by everyone."  on profiles for select  using ( true );create policy "Users can insert their own profile."  on profiles for insert  with check ( auth.uid() = id );create policy "Users can update own profile."  on profiles for update  using ( auth.uid() = id );-- Set up Realtime!begin;  drop publication if exists supabase_realtime;  create publication supabase_realtime;commit;alter publication supabase_realtime add table profiles;-- Set up Storage!insert into storage.buckets (id, name)values ('avatars', 'avatars');create policy "Avatar images are publicly accessible."  on storage.objects for select  using ( bucket_id = 'avatars' );create policy "Anyone can upload an avatar."  on storage.objects for insert  with check ( bucket_id = 'avatars' );

用户界面

1. 转到“SQL”部分。
2. 单击“用户管理启动器”。
3. 单击“运行”。

获取 API 密钥

现在您已经创建了一些数据库表，您可以使用自动生成的 API 插入数据。我们只需anon要从 API 设置中获取 URL 和密钥。

1. 转到“SQL”部分。
2. 单击“用户管理启动器”。
3. 单击“运行”。

构建应用程序

让我们从头开始构建 Svelte 应用程序。

初始化一个 Svelte 应用程序

我们可以使用Quickstart Svelte 模板来初始化一个名为supabase-svelte：

npx degit sveltejs/template supabase-sveltecd supabase-svelte

然后让我们安装唯一的附加依赖项：supbase-js

npm

npm install @supabase/supabase-js

yarn add @supabase/supabase-js

最后，我们要将环境变量保存在.env. 我们需要的只是 API URL 和您之前anon复制的密钥。

envSVELTE_APP_SUPABASE_URL=YOUR_SUPABASE_URLSVELTE_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

我们的应用程序几乎可以正常运行，要使 svelte 能够处理 supbase 和 .env 文件，我们首先需要rollup.config.js稍微更改文件。Supbase 导入json文件，将 .json 文件转换为 ES6 模块，我们需要@rollup/plugin-json通过运行安装它：

npm

npm install --save-dev @rollup/plugin-json

yarn add --save-dev dotenv @rollup/plugin-replace

并将这些插件添加到rollup.config.js文件中。

JavaScript

 rollup.config.jsimport { config } from 'dotenv';  import replace from '@rollup/plugin-replace';  import json from '@rollup/plugin-json'  export default {    plugins: [    replace({            __api: JSON.stringify({                env: {                    isProd: production,                    ...config().parsed // attached the .env config                }            }),            delimiters: ['', '']        }),        json(),    // ...    ],    // ...  }

现在我们已经有了 API 凭据，让我们创建一个帮助文件来初始化 Supbase 客户端。这些变量将在浏览器上公开，这完全没问题，因为我们在数据库上启用了行级安全性。

JavaScript

src/supabaseClient.jsimport { createClient } from '@supabase/supabase-js'const supabaseUrl = __api.env.SVELTE_APP_SUPABASE_URLconst supabaseAnonKey = __api.env.SVELTE_APP_SUPABASE_ANON_KEYexport const supabase = createClient(supabaseUrl, supabaseAnonKey)

一个可选步骤是更新 CSS 文件public/global.css以使应用程序看起来不错。您可以在此处找到该文件的完整内容。

设置登录组件

让我们设置一个 Svelte 组件来管理登录和注册。我们将使用 Magic Links，因此用户无需使用密码即可使用电子邮件登录。

HTML

/src/Auth.svelte
      
Supabase + Svelte
    
Sign in via magic link with your email below
                              

用户存储

为了访问其他地方的用户信息，我们使用可写存储。创建一个名为的新文件sessionStore.js

JavaScript

src/sessionStore.jsimport { writable } from 'svelte/store';export const user = writable(false);

账户页面

用户登录后，我们可以允许他们编辑他们的个人资料详细信息并管理他们的帐户。让我们为它创建一个名为Profile.svelte.

HTML

src/Profile.svelte
      Email            Name            Website                          Sign Out      

启动！

现在我们已经准备好所有组件，让我们更新App.svelte：

HTML

src/App.svelte    {#if $user}            {:else}            {/if}

完成后，在终端窗口中运行它：

npm

npm run dev

yarn dev

然后打开浏览器到localhost:5000，你应该会看到完整的应用程序。

⚠️ 警告：Svelte 默认使用port 5000，Supabase 使用port 3000. 要更改 supabase 的重定向端口，请转到：Authentication > Settings并更改Site Url为localhost:5000

奖励：个人资料照片

每个 Supabase 项目都配置了存储，用于管理照片和视频等大文件。

创建上传小部件

让我们为用户创建一个头像，以便他们可以上传个人资料照片。我们可以从创建一个新组件开始：

HTML

src/Avatar.svelte  {#if path}      {:else}      {/if}              {uploading ? 'Uploading ...' : 'Upload'}          

添加新小部件

然后我们可以将小部件添加到 Account 页面：

HTML

src/Profile.svelte