PocketBase 是一个开源后端即服务平台，作为可自托管的单个可执行文件提供。为了在生产中使用 PocketBase，您必须自己托管它。这与 Supabase 和 Firebase 等平台形成鲜明对比。PocketBase 附带了一个成熟的身份验证模块、一个嵌入在可执行文件中的 SQL lite 数据库以及一个文件存储 API，使其能够简洁地满足您的所有需求。

PocketBase 是用 Go 编写的，速度非常快，它配备了内置的管理仪表板，您可以在其中监视您的用户、数据库和文件。您还可以自定义用于发送电子邮件的 STMP 配置。PocketBase 还提供了一个用于与服务器交互的 API，但是有一个包可以用一些流行的语言（如 Javascript 和 Dart）与服务器交互。

PocketBase 非常容易设置和使用，在这篇文章中，我将向您展示如何在 PC 上设置 PocketBase，然后我们还将设置一个 Svelte 项目来与 PocketBase 服务器交互。我们将在这篇文章中考虑以下内容。

在本地下载、安装并设置 PocketBase。设置 Svelte 项目。安装 PocketBase 客户端并在我们的应用程序中设置身份验证为什么选择 PocketBase？您应该使用它吗？下载 PocketBase

要开始使用 PocketBase，请前往文档页面下载适用于您的 PC 的可执行文件。PocketBase 捆绑在一个 zip 文件中，因此您需要首先从存档中提取文件。完成后，打开终端，导航到刚刚解压的最新 PocketBase 服务器，并运行以下命令pocketbase server来启动 PocketBase 服务器。访问查看您的管理仪表板，因为这是您第一次使用 PocketBase，您需要创建一个新的管理帐户。如果您成功完成此操作，您应该会被重定向到您的仪表板，您可以在其中查看和管理您的 PocketBase 服务器。现在已经完成了，让我们建立一个 Svelte 项目。

设置 Svelte 项目

我们将使用 Vite 设置这个 Svelte 项目，以便运行以下命令。

$ npm create vite@latest test_app --template svelte

按照提示设置项目，如果一切成功，请运行以下命令。

$ cd test_app && npm install

上面的命令首先导航到新创建的 Svelte 项目，然后我们从 npm 安装该项目的依赖项。安装完成后，运行下一个命令在本地启动该项目，以验证一切是否设置成功。

$ npm run dev

如果您获得 Svelte 和 Vite 项目附带的默认 UI，那么您就可以开始了。接下来，让我们为 Svelte 项目安装一个路由器。

$ npm install svelte-routing

这是我在 Svelte 项目中用于路由的默认包。现在让我们为此项目设置 UI。请耐心等待，因为我不会向 UI 添加任何样式。它会尽可能小，这样就不会妨碍。创建一个在Svelte 项目文件夹pages内命名的新文件夹。src在pages文件夹内创建一个名为的新 Svelte 组件signup.svelte

// src/pages/signup.svelte<script>  let name = '';  let email = '';  let password = '';  $:loading = false</script><main>  <h3>Logout</h3>  <form>    <label for="name">Name</label>    <input type="text" bind:value={name} id="name" placeholder="John Doe" /><br />    <label for="email">Email</label>    <input type="email" bind:value={email} id="email" placeholder="email@domain.com" /><br />    <label for="password">Password</label>    <input type="password" bind:value={password} id="password" placeholder="***" /><br />    {#if loading}    <button disabled={loading}>      loading...    </button>    {:else}      <button type="submit">        register      </button>    {/if}  </form></main><style>  form {    padding: 3rem  }</style>

除了一个包含三个输入的表单之外什么也没有，一个用于用户名，另一个用于用户的电子邮件，一个用于密码。让我们添加一个登录组件。

// src/pages/login.svelte<script>  let email = '';  let password = '';  $:loading = false</script><main>  <h3>Login</h3>  <form on:submit|preventDefault={() => Signin(email, password)}>    <label for="email">Email</label>    <input type="email" bind:value={email} id="email" placeholder="email@domain.com" /><br />    <label for="password">Password</label>    <input type="password" bind:value={password} id="password" placeholder="***" /><br />    {#if loading}    <button disabled={loading}>      loading...    </button>    {:else}      <button type="submit">        register      </button>    {/if}  </form></main>

最后，让我们添加最后一个组件，该组件将用作用户登录时将看到的仪表板页面。

// src/pages/index.svelte<script>  $:currentUser = {};</script><h1>Current user {currentUser?.email}</h1><button>Logout</button>

现在我们已经添加了组件，让我们设置路由器，因此继续编辑文件夹App.svelte内的文件src并将其粘贴到以下内容中。

// src/app.svelte<script>  import {Router, Route} from 'svelte-routing'  import Login from "./pages/login.svelte";  import Signup from "./pages/signup.svelte";  import Index from './pages/index.svelte';  export let url = "/";</script><Router {url}>  <Route path="/">    <Signup />  </Route>  <Route path="/login">    <Login />  </Route>  <Route path="/dashboard">    <Index />  </Route></Router>

您可以npm run dev再次运行以确认一切正常，现在让我们继续安装 PocketBase Javascript 客户端。

安装 PocketBase 客户端。

要安装 PocketBase Javascript 客户端，请运行以下命令；

$ npm i pocketbase

如果您完成了 PocketBase 客户端的安装，请在文件夹helper.js内创建一个名为的新文件src。该模块将包含与 PocketBase 服务器交互的代码。让我们添加第一个函数来创建新用户帐户。

// src/helper.jsimport PocketBase from 'pocketbase';const pb = new PocketBase(';);export const signUp = async ({name, email, password}) => {  try {    const user = await pb.collection('users').create({      email,       name,       password,       passwordConfirm: password    });    return [null, user];  } catch (error) {    return [error, null]  }}

上面的代码片段首先PocketBase从pocketbase包中导入模块。该模块提供了用于与 PocketBase 交互的 JavaScript API。然后我们创建一个新的PocketBase客户端实例并指定 PocketBase 服务器的 URL。然后我们定义一个名为 的函数signUp。该函数接受三个参数：用户名、电子邮件地址和密码。

该函数首先尝试在集合中创建新的用户记录users。该create()方法采用一个对象作为参数，该对象指定新用户记录的属性。在本例中，该对象指定用户的电子邮件地址、姓名、密码和密码确认。如果该create()方法成功，该函数将返回一个包含两个元素的数组：第一个元素是null，第二个元素是新创建的用户记录。如果该create()方法失败，该函数将返回一个包含两个元素的数组：第一个元素是错误对象，第二个元素是null。

让我们添加用户登录的功能。

// helper cont'dexport const login = async (email, password) => {  try {    const authData = await pb.collection('users').authWithPassword(      email,      password  );  return [null, authData];  } catch (error) {    return [error, null]  }}

现在让我们使用我们从注册页面开始在组件中定义的辅助函数。

// src/pages/signup.svelte<script>  import {signUp} from '../helper';  import {navigate} from 'svelte-routing'  const Signin = async (email, password, name) => {    loading = true    const [error, authData] = await signUp({email, password, name});    loading = false    if (error) {      console.error(error)    } else if (authData) {      console.log(authData);      alert('account created successfully!')      navigate('/login', { replace: true })    }  }  let email = '';  let password = '';  let name = '';  $:loading = false</script><main>  <h3>Logout</h3>  <form on:submit|preventDefault={() => Signin(email, password, name)}>   {/* ...other parts of the form */}  </form</main>

signUp我们从帮助程序文件中导入该函数。该函数是我们在第一个代码片段中定义的函数。navigate然后我们从包中导入该函数svelte-routing。该函数用于导航到应用程序中的不同页面。然后我们定义一个名为 的函数Signin。该函数接受三个参数：用户的电子邮件地址、密码和姓名。该函数首先调用该signUp函数，传入用户的电子邮件地址、密码和姓名。SignUp 函数返回一个包含两个元素的数组：第一个元素是错误对象，第二个元素是新创建的用户记录（如果成功）。

然后该函数检查错误对象。如果错误对象不为空，则该函数将错误记录到控制台。如果错误对象为空，则该函数会将新创建的用户记录记录到控制台。然后，该功能会提醒用户其帐户已成功创建，并导航到登录页面。让我们设置login页面的集成。

// src/pages/login.svelte<script>  import { navigate } from 'svelte-routing';  import {login} from '../helper';  const Signin = async (email, password) => {    loading = true    const [error, authData] = await login(email, password);    loading = false    if (error) {      console.error(error)    } else if (authData) {      console.log(authData);      navigate('/dashboard', {replace: true})    }  }  let email = '';  let password = '';  $:loading = false</script><main>  <h3>Login</h3>  <form on:submit|preventDefault={() => Signin(email, password)}>    {/* continued... */}  </form></main>

最后，让我们添加仪表板页面的集成。

// src/pages/index.svelte<script>  import { navigate } from 'svelte-routing';  import pb from "../helper";  console.log(pb.authStore.model);  $:currentUser = pb.authStore.model;  pb.authStore.onChange((auth) => {    console.log('authStore changed', auth);    currentUser = pb.authStore.model;  });  function signOut() {    pb.authStore.clear();    navigate('/login', {replace: true})  }</script><h1>Current user {currentUser?.email}</h1><button on:click={() => signOut()}>Logout</button>

PocketBase 是 Supabase 和 Firebase 的一个非常好的替代品，特别是如果您想自己托管它。PocketBase 也是开源的，因此您可以确信代码不受某些大型科技公司的控制。PocketBase 也非常快速和可靠。如果您的应用程序需要后端服务，它将为您节省数小时的开发时间，并且让您专注于重要的事情。提供良好的用户体验。

因此，如果您正在考虑构建一些令人惊叹的东西，但您没有时间投资从头开始构建后端，或者您没有构建所需的技能或没有钱聘请后端工程师，那么您可以使用 PocketBase 和由于您必须自己托管它，因此您不必担心供应商锁定或尝试迁移数据时出现的问题。请在评论部分留下您对 PocketBase 的看法。我想了解您使用 PocketBase 的经验和想法。我希望您发现本文非常有用，我们将在下一篇中见到您。