此示例提供了使用 Supbase 和 Svelte 构建简单用户管理应用程序（从头开始！）的步骤。
此示例提供了使用 Supbase 和 Svelte 构建简单用户管理应用程序（从头开始！）的步骤。这包括：
- Supabase 数据库：用于存储您的使用数据的 Postgres 数据库。
- Supabase Auth：用户可以使用魔术链接登录（没有密码，只有电子邮件）。
- Supabase 存储：用户可以上传照片。
- 行级安全性：数据受到保护，个人只能访问自己的数据。
- 即时 API：创建数据库表时会自动生成 API。
在本指南结束时，您将拥有一个允许用户登录并更新一些基本个人资料详细信息的应用程序：
GitHub
每当您遇到困难时，请查看此 repo。
项目设置
在我们开始构建之前，我们将设置我们的数据库和 API。这就像在 Supabase 中启动一个新项目然后在数据库中创建一个“模式”一样简单。
创建项目
转到app.supabase.com。
- 点击“新建项目”。
- 输入您的项目详细信息。
- 等待新数据库启动。
设置数据库模式
现在我们要设置数据库模式。我们可以使用 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' );
用户界面
- 转到“SQL”部分。
- 单击“用户管理启动器”。
- 单击“运行”。
获取 API 密钥
现在您已经创建了一些数据库表，您可以使用自动生成的 API 插入数据。我们只需anon要从 API 设置中获取 URL 和密钥。
- 转到“SQL”部分。
- 单击“用户管理启动器”。
- 单击“运行”。
构建应用程序
让我们从头开始构建 Svelte 应用程序。
初始化一个 Svelte 应用程序
我们可以使用Quickstart Svelte 模板来初始化一个名为supabase-svelte：
npx degit sveltejs/template supabase-svelte
cd supabase-svelte然后让我们安装唯一的附加依赖项：supbase-js
npm
npm install @supabase/supabase-jsyarn add @supabase/supabase-js最后，我们要将环境变量保存在.env. 我们需要的只是 API URL 和您之前anon复制的密钥。
env
SVELTE_APP_SUPABASE_URL=YOUR_SUPABASE_URL
SVELTE_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-jsonyarn add --save-dev dotenv @rollup/plugin-replace并将这些插件添加到rollup.config.js文件中。
JavaScript
rollup.config.js
import { 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.js
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = __api.env.SVELTE_APP_SUPABASE_URL
const supabaseAnonKey = __api.env.SVELTE_APP_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)一个可选步骤是更新 CSS 文件public/global.css以使应用程序看起来不错。您可以在此处找到该文件的完整内容。
设置登录组件
让我们设置一个 Svelte 组件来管理登录和注册。我们将使用 Magic Links，因此用户无需使用密码即可使用电子邮件登录。
HTML
/src/Auth.svelte
<form class="row flex flex-center" on:submit|preventDefault={handleLogin}>
<div class="col-6 form-widget">
<h1 class="header">Supabase + Svelte</h1>
<p class="description">Sign in via magic link with your email below</p>
<div>
<input
class="inputField"
type="email"
placeholder="Your email"
bind:value={email}
/>
</div>
<div>
<input type="submit" class='button block' value={loading ? "Loading" : "Send magic link"} disabled={loading} />
</div>
</div>
</form>用户存储
为了访问其他地方的用户信息，我们使用可写存储。创建一个名为的新文件sessionStore.js
JavaScript
src/sessionStore.js
import { writable } from 'svelte/store';
export const user = writable(false);账户页面
用户登录后，我们可以允许他们编辑他们的个人资料详细信息并管理他们的帐户。让我们为它创建一个名为Profile.svelte.
HTML
src/Profile.svelte
<form use:getProfile class="form-widget" on:submit|preventDefault={updateProfile}>
<div>
<label for="email">Email</label>
<input id="email" type="text" value={$user.email} disabled />
</div>
<div>
<label for="username">Name</label>
<input
id="username"
type="text"
bind:value={username}
/>
</div>
<div>
<label for="website">Website</label>
<input
id="website"
type="website"
bind:value={website}
/>
</div>
<div>
<input type="submit" class="button block primary" value={loading ? 'Loading ...' : 'Update'} disabled={loading}/>
</div>
<div>
<button class="button block" on:click={signOut} disabled={loading}>
Sign Out
</button>
</div>
</form>启动！
现在我们已经准备好所有组件，让我们更新App.svelte：
HTML
src/App.svelte
<div class="container" style="padding: 50px 0 100px 0;">
{#if $user}
<Profile />
{:else}
<Auth />
{/if}
</div>完成后，在终端窗口中运行它：
npm
npm run devyarn dev然后打开浏览器到localhost:5000，你应该会看到完整的应用程序。
?? 警告：Svelte 默认使用port 5000，Supabase 使用port 3000. 要更改 supabase 的重定向端口，请转到：Authentication > Settings并更改Site Url为localhost:5000
奖励：个人资料照片
每个 Supabase 项目都配置了存储，用于管理照片和视频等大文件。
创建上传小部件
让我们为用户创建一个头像，以便他们可以上传个人资料照片。我们可以从创建一个新组件开始：
HTML
src/Avatar.svelte
<div>
{#if path}
<img use:downloadImage
{src}
alt="Avatar"
class="avatar image"
style="height: {size}; width: {size};"
/>
{:else}
<div class="avatar no-image" style="height: {size}; width: {size};" />
{/if}
<div style="width: {size};">
<label class="button primary block" for="single">
{uploading ? 'Uploading ...' : 'Upload'}
</label>
<input
style="visibility: hidden; position:absolute;"
type="file"
id="single"
accept="image/*"
bind:files
on:change={uploadAvatar}
disabled={uploading}
/>
</div>
</div>添加新小部件
然后我们可以将小部件添加到 Account 页面：
HTML
src/Profile.svelte
<form use:getProfile class="form-widget" on:submit|preventDefault={updateProfile}>
<!-- Add to body -->
<Avatar bind:path={avatar_url} on:upload={updateProfile} />
<!-- Other form elements -->
</form>