PocketBase是一个开源后端，作为一个服务平台，作为一个可以自托管的单个可执行文件运输的服务平台。要使您在生产中使用PocketBase，您必须自己托管。这与Supabase和Firebase等平台形成鲜明对比。 PocketBase带有成熟身份验证模块，嵌入在可执行文件中的SQL Lite数据库以及文件存储API的船舶。
PocketBase以Go的方式写得非常快，它带有内置的管理仪表板，您可以在其中监视用户，数据库和文件。您还可以自定义用于发送电子邮件的STMP配置。 PocketBase还提供了用于与服务器进行交互的API，但是有一个软件包可以用某些流行语言（例如JavaScript）和DART进行交互。
。PocketBase非常易于设置和使用，在这篇文章中，我将向您展示如何在PC上设置Pocketbase，然后我们还将设置一个Svelte项目以与PocketBase Server进行交互。我们将在这篇文章中考虑以下内容。
- 下载，安装并在本地设置PocketBase。
- 设置一个Svelte项目。
- 安装PocketBase客户端并在我们的应用中设置身份验证
- 为什么要使用PocketBase？
下载Pocketbase
要开始使用Pocketbase head to to documentation page下载用于PC的可执行文件。 PocketBase捆绑在ZIP文件中，因此您需要先从存档中提取文件。完成后，打开终端导航到最新的PocketBase服务器，您刚提取并运行以下命令pocketbase server来启动PocketBase服务器。请访问http://127.0.0.1:8090/_/查看您的管理仪表板，因为这是您第一次使用PocketBase，您需要创建一个新的Admin帐户。如果您成功地这样做，则应将其重定向到仪表板，在那里您可以查看和管理PocketBase服务器。现在完成了，让我们设置一个Svelte项目。
设置一个苗条的项目
我们将使用Vite设置这个Svelte项目，以便运行以下命令。
$ npm create vite@latest test_app --template svelte
按照提示设置项目，如果一切成功，请运行以下命令。
$ cd test_app && npm install
上面的命令首先导航到新创建的Svelte项目中，然后我们从NPM安装该项目的依赖项。安装完成后，运行下一个命令，以在本地启动该项目，以验证所有内容是否成功设置。
$ npm run dev
如果您获得了带有Svelte and Vite项目附带的默认UI，那么您就可以了。接下来，让我们为我们的Svelte项目安装路由器。
$ npm install svelte-routing
这是我在Svelte项目中使用的默认软件包。现在，让我们为该项目设置UI。忍受我，因为我不会在UI中添加任何样式。它将尽可能最小，因此不会阻碍。在您的Svelte项目的src文件夹中创建一个名为pages的新文件夹。在pages文件夹中创建一个名为signup.svelte的新的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>
现在，我们添加了组件，让我们设置路由器，因此请继续并在src文件夹中编辑App.svelte文件并将其粘贴到以下内容中。
// 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客户端的安装，则在src文件夹中创建一个名为helper.js的新文件。该模块将包含用于与PocketBase服务器进行交互的代码。让我们添加用于创建新用户帐户的第一个功能。
// src/helper.js
import PocketBase from 'pocketbase';
const pb = new PocketBase('http://127.0.0.1:8090');
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'd
export 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函数。此功能是我们在第一个代码段中定义的功能。然后，我们从svelte-routing软件包导入navigate函数。此功能用于导航到应用程序中的不同页面。然后，我们定义一个称为Signin的函数。此功能需要三个参数：用户的电子邮件地址，密码和名称。该功能首先调用signUp功能，并传递用户的电子邮件地址，密码和名称。注册函数返回一个带有两个元素的数组：第一个元素是错误对象，第二个元素是新创建的用户记录，如果成功。
该功能然后检查错误对象。如果错误对象不是null，则该函数将错误记录到控制台。如果错误对象为null，则该函数将新创建的用户记录记录到控制台。然后，该功能会提醒用户他们的帐户已成功创建，并导航到登录页面。让我们设置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，甚至应该使用它？
PocketBase是Supabase和Firebase的一个很好的替代方法，尤其是如果您要自己托管它。 PocketBase也是开源的，因此您确定该代码不是由某些大型科技公司控制的。 PocketBase也非常快速和可靠。如果您的应用程序需要后端服务，它将为您节省开发时间，并且使您粘在关注重要的事情上。提供良好的用户体验。
因此，如果您正在考虑建造令人惊叹的东西，但是您没有时间从头开始建造后端，或者您没有建造所需的技能或聘请后端工程师的钱，那么您可以使用PocketBase，由于您必须自己托管它，因此您不必担心供应商锁定或试图迁移数据时的问题。在评论部分中留下您对Pocketbase的想法。我想知道您对使用PocketBase的经验和想法。希望您发现这超级有用，我会在下一个中见到您。