此示例提供了使用 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-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<form on:submit|preventDefault={handleLogin}> <div><h1>Supabase + Svelte</h1><p>Sign in via magic link with your email below</p><div> <input type="email" placeholder="Your email" bind:value={email} /></div><div> <input type="submit" value={loading ? "Loading" : "Send magic link"} disabled={loading} /></div> </div></form>用戶存儲
為了訪問其他地方的用戶信息，我們使用可寫存儲。創建一個名為的新文件sessionStore.js
JavaScript
src/sessionStore.jsimport { writable } from "svelte/store";export const user = writable(false);賬戶頁面
用戶登錄後，我們可以允許他們編輯他們的個人資料詳細信息並管理他們的帳戶。讓我們為它創建一個名為Profile.svelte.
HTML
src/Profile.svelte<form use:getProfile on:submit|preventDefault={updateProfile}> <div><label for="email">Email</label><input type="text" value={$user.email} disabled /> </div> <div><label for="username">Name</label><inputtype="text" bind:value={username}/> </div> <div><label for="website">Website</label><inputtype="website" bind:value={website}/> </div> <div><input type="submit" value={loading ? "Loading ..." : "Update"} disabled={loading}/> </div> <div><button on:click={signOut} disabled={loading}> Sign Out</button> </div></form>啟動！
現在我們已經準備好所有組件，讓我們更新App.svelte：
HTML
src/App.svelte<div>{#if $user} <Profile />{:else} <Auth />{/if}</div>
完成後，在終端窗口中運行它：
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<div> {#if path}<img use:downloadImage {src} alt="Avatar"/> {:else}<div /> {/if}<div><label for="single"> {uploading ? "Uploading ..." : "Upload"}</label><inputtype="file"accept="image/*" bind:files on:change={uploadAvatar} disabled={uploading}/> </div></div>添加新小部件
然後我們可以將小部件添加到 Account 頁面：
HTML