NgSysV.使用 Google&#s Firestore 创建一个简单的 Svelte 信息系统

该帖子系列已在 NgateSystems.com 上建立索引。您还可以在那里找到超级有用的关键字搜索工具。

最后评论：24 年 11 月

一、简介

大多数网络应用程序的存在纯粹是为了创建和访问共享信息。考虑一下亚马逊的 https://www.amazon.co.uk/ 网站。该系统的基本目的是让您浏览产品详细信息的集中集合、下订单并监控交付进度。为了实现这一目标，亚马逊必须：

• 将此信息保存在可通过网络访问的地方
• 构建和管理它以确保近乎即时的访问和完全完整性。

这篇文章是关于用于实现这些目标的“数据库”技术。

警告 - 这是一篇长帖子，因为 Svelte 中的数据库读写会无情地吸引您使用 SvelteKit 的客户端-服务器架构。以前，您的代码仅在 Web 浏览器中“客户端”运行。现在，您还将在由 npm run dev 启动的本地服务器上运行代码。这会产生后果...

我已经研究过分割帖子的方法，但它们不起作用。更糟糕的是，您将使用的 Javascript 包含许多新功能。所以，我很抱歉 - 你只能忍耐了。

但也要往好的方面看。一旦你经历了这一切，事情就会开始变得更容易。慢慢来。如果您觉得我没有解释清楚，请使用 chatGPT。当您需要有关 JavaScript 语法的建议时，您会发现该机器人特别有用。放松。这会很有趣！

2. 配置您的项目以使用 Google 的 Firestore

在网络上存储共享数据的方法有无数种。本系列文章使用 Google 的 Firestore 系统，因为它适合初学者。它需要最少的设置，并且非常适合 Svelte Web 应用程序的结构。

您需要执行四个初始步骤：

1. 获取 Google 帐户
2. 在此帐户下创建 Firebase 项目
3. 注册您的“网络应用程序”
4. 为您的 Firebase 项目初始化 Firestore 数据库

Firebase 是 Google 的总称，涵盖了许多不同的服务，您可以使用这些服务在网络上安装简单的项目。给定帐户的服务通过 Google 的“Firebase 控制台”（网址为 https://console.firebase.google.com/）进行管理。它们包括允许您将文件上传到 Google Cloud 的“存储”服务和“Firestore 数据库”服务。数据库与文件的不同之处在于它具有可配置的结构。它使您能够访问和更新已配置数据集的离散元素。

2.1 获取Google账户

如果您有 Gmail 地址，那么您就已经受到保护，因为这会自动算作 Google 帐户。如果没有，请按照创建 Google 帐户中的说明获取一个。

2.2 为您的代码创建 Firebase 项目

启动 Google Firebase 控制台并使用您的 Google 帐户登录（请注意，如果您使用此帐户登录 Gmail，则您也已经登录 Firebase 控制台）。现在单击“创建项目”框来启动该过程。

Google 会要求您为您的项目提供一个名称（我建议您使用您在 VSCode 中使用的项目名称），并会提出一个扩展，使其成为 Firebase 世界中唯一的“项目标识符”。例如，本系列文章中使用的我的版本的“Svelte-dev”项目在 Google 中被称为“Svelte-dev-afbaf”。

顺便说一句，由于项目标识符最终将构成您的网络应用程序的默认实时 URL 的一部分，并且由于 Google 允许您编辑其最初的“唯一性扩展”提案，因此您可能会尝试更改此设置去做一些有意义的事情。不过，我建议你忘记这个想法。首先，您会发现很难选择适合双方的标识符。其次，根据我的经验，这些“默认网址”从未被 Google 索引过。以最低成本购买并在上线时链接到默认 URL 的“自定义 URL”是迄今为止获得令人难忘的 URL 的最佳方式。

现在点击“继续”即可显示“Google Analytics”注册页面。您可以在此处安全地忽略它，因为它仅与实时应用程序的性能问题相关。使用滑块拒绝它，然后单击“创建项目”按钮继续。

当 Google 注册您的项目时，灯光现在变暗了一点。最后，一旦您再点击一个“继续”按钮，您就会发现自己位于项目的 Firebase 控制台窗口中。以下是“svelte-dev”项目的 Firestore 选项卡的屏幕截图：

值得给自己一点时间来熟悉这个页面，因为它有点复杂。基本结构由左侧的“工具菜单”组成，它确定右侧主面板中显示的内容。问题在于菜单是“自适应”的，并维护一个“项目快捷方式”部分来记住您去过的地方。因此，每次打开控制台时，菜单看起来都不同！然而，一旦掌握了这个功能，事情就会进展顺利。请注意，完整的工具集隐藏在其父“产品类别”菜单项的“构建”、“运行”和“分析”子菜单中。 “构建”套装包含您目前需要的一切。

在继续操作之前，请注意以下事项：

• 屏幕顶部的信息确认 svelte-test 项目当前已在“Spark”计划中注册。这意味着您目前所做的一切都是免费的。最终，在本系列文章中，您将需要开始向 Google 付费，并且需要将您的项目升级到“Blaze”费率。但不用担心 - 这还有很长的路要走，您不需要支付太多费用，并且您可以创建每月预算来限制 Google 可能向您收取的费用。
• 单击工具栏顶部的“项目概述”按钮即可显示项目详细信息。此处提供的详细信息包括项目标识符的提醒和删除项目的按钮。如果一切都出了问题，你总是可以用它来消除混乱并重新开始。这不会花费您任何费用

2.3 注册您的网络应用程序

Firebase 需要知道您的网络应用程序的名称：

• 点击 “开始”消息下方的图标，并根据要求提供昵称。我建议您在这里再次使用您的项目名称（例如“svelte-dev”）。
• 忽略“为此应用设置 Firebase 托管”的提示，因为当我们最终进行部署时，您的所有托管需求都将由 App Engine 处理。
• 最后，点击“注册”和“继续控制台”返回初始控制台屏幕。

2.4 - 初始化 Firestore 数据库

从工具菜单的“Build”堆栈中选择“Firestore Database”以获得如下所示的 Firebase 控制台视图：

单击“创建数据库”按钮后，控制台将要求您：

1. 设置您的数据库“名称和位置”。 “名称”是数据库的标识符，仅当您计划在项目中创建多个不同的数据库时才相关。现在将其留空，以便 Google 使用其“默认”设置。 “位置”指定数据库的物理位置。此处提供的选项下拉列表可能是您对 Google Cloud 服务规模的第一印象。其服务器场遍布全球。您可能需要选择靠近您所在位置的服务器。例如，我通常使用“europe-west2 : Heathro”，因为我住在英国。 Google Cloud 控制台中其他页面允许您指定性能和可用性特征，但您现在不需要查看这些。

2. 使用“规则”保护您的数据库。这里的屏幕为您提供了设置初始“生产”和“测试”“规则”之间的选择。当然，这只有在你首先知道“规则”是什么的情况下才有意义——而现在不是我解释它们的合适时机。除非您更了解，否则我希望您检查此处的“测试模式”选项。请放心，稍后当我谈论“授权”时我会回到这个话题（天哪，还有很多东西要谈！）。

完成这两个阶段后，Cloud Firestore 页面将在 Firebase 控制台中打开。现在怎么办？

3. 使用 Firestore 数据库

本节旨在回答以下问题：

1. 什么是数据库？
2. Firestore 数据库是什么样的？
3. 如何在 Firestore 控制台中初始化数据库？
4. 如何使用 Javascript 访问 Firestore 数据库？
5. 如何获取 Svelte page.svelte 文件来从 Firestore 数据库加载数据？
6. 如何获取 Svelte page.svelte 文件以将数据添加到 Firestore 数据库？

3.1 什么是数据库？

就我们的直接目的而言，数据库是一组表，其中包含命名数据“字段”的值行。因此，例如，“客户订单”数据库可能包含

• 包含“客户 ID”和“客户地址详细信息”字段值的“客户”表
• 包含“产品编号”和“产品详细信息”字段的“产品”表
• “客户订单”表，其中包含“客户 ID”所下的“产品编号”订单的详细信息

重要的是这样的安排结构化数据内容的命名和格式具有一致的标准

3.2 Firestore 数据库是什么样的？

在 Firestore 中，表称为“集合”，其中的行称为“文档”。集合中存储的文档并不都需要具有相同的字段，但字段名称和内容应在整个集合中遵循一致的模式。

Firestore 文档的一个重要特征是它应该有一个唯一的标识符或“密钥”。有时，每个文档中都会有一个字段，例如“电子邮件地址”，您可以使用它来提供“自然”唯一密钥。如果没有，Firestore 可能会被要求自动创建一个人工密钥。

数据库设计可能是系统开发中最具挑战性的部分，我将再次回避这一点，因为只有当您拥有一些实践经验时，所涉及的问题才会变得清晰。不过，如果您有时间，您会发现查看 Cloud Firestore 数据模型页面很有用。

3.3 如何在 Firestore 控制台中初始化数据库？

在这篇文章中，我计划向您展示如何在默认 Firestore 数据库中创建单个产品集合。这将包含简单的文档，其中包含产品编号字段以及 Firestore 自动生成的密钥。

在 Firebase 控制台的 Firestore 页面上，单击“开始收集”按钮，然后在现在出现的弹出窗口的“集合 ID”字段中输入名称“产品”。

现在使用数据输入页面创建一个测试产品文档，其中包含数值为“1”的“productNumber”字段和文本值为“Product 1”的“productDetails”字段。

• 在“Field”输入框中输入“productNumber”设置字段名称，将“Type”框设置为“number”，并在“Value”框中输入“1”（不带引号字符）。
• 点击“添加字段”，在“字段”输入框中输入“productDetails”来设置字段名称，将“类型”框保留默认的“字符串”设置，然后输入“产品 1”（不带引号字符） ）在“值”框中
。

现在，首先单击“自动 ID”按钮，然后“保存”来签署文档，控制台现在应如下所示：

如果您想添加更多文档，此时您可以单击“添加文档”，但在本例中没有必要 - 您只需要一个文档来演示您的 Web 应用程序读取它的能力。

您现在已经完成了，但请注意，控制台的“面板视图”允许您编辑或删除刚刚创建的文档。如果您的情况一团糟，您甚至可以删除整个集合并重新开始。

3.4 如何使用 Javascript 访问 Firestore 数据库？

事情开始变得真的有趣了！

Google 提供了一个 Javascript 函数库，可让您读取和写入 Firestore 文档。此类库称为“API”（应用程序接口）。看一下下面的代码，它显示了如何使用 firebase/firestore 库来读取 svelte-dev 产品集合中的所有文档：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

重点关注以 const productsCollRef = collection(db, "products"); 开头的部分。这使用 Firestore API 调用将产品集合中所有文档的排序副本加载到 State currentProducts 变量中。

首先，从 Firestore 客户端 API 库中提取的集合和查询函数用于将 Firebase 指向产品集合并定义要在其上运行的查询。然后通过 getDocs API 调用启动查询。

我不会尝试描述这一系列 Firestore API 调用的机制。将它们视为一段“样板代码” - 代码 - 那种您编写一次，然后简单复制的东西。由于您会发现需要一个完整的模板库来涵盖 Firestore“读取”、“更新”和“删除”操作的全部数组，因此您可能会发现查看 Post 10.1 - Firestore CRUD 命令模板很有用。如果您想查看 Google 自己的 API 描述，您可以在第 10.1 篇文章的末尾找到这些内容的链接。

这里的“CRUD”是“创建”、“读取”、“更新”和“删除”的缩写。

getDocs 结果作为文档数组返回，通常称为“快照”。但请注意，getDocs 函数调用前面有一个await 关键字。

这里需要await关键字，因为默认情况下，在Javascript中，引用外部数据源的指令可能需要不可预测的时间才能完成异步处理。 “await”关键字本质上（尽管这是一个粗略的简化）使您能够覆盖这种安排。当您有更多时间时，您可能会发现查看 Javascript fetch() API 和“await”关键字的简单指南很有用

但是现在，回到上面的代码片段，看看以 const firebaseConfig 语句开头的部分。

firebaseConfig 声明初始化一个对象，其中包含将 Web 应用连接到特定 Firebase 项目所需的配置详细信息。它包括 Firebase 用于定位和验证您的应用程序的各种密钥和标识符。您可以在 Firebase 控制台的“项目概览/项目设置”中找到您的特定 Web 应用的设置。下面代码示例中的 firebaseConfig 设置已被“混淆”，因为它们是 我的 项目所特有的，并且不能轻易传递（稍后将详细介绍这一点）。尝试下面的示例代码时，您需要从您自己的项目中复制 firebaseConfig 设置。

初始化 firebaseConfig 后，Web 应用程序可以初始化查询的 const productsCollRef = collection(db, "products"); 所需的 db 变量。声明：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

最后，您可能想知道这些 API 函数从何而来。答案是它们是通过代码块顶部的三个语句从项目中的位置导入的：

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

这里正在访问“模块化库”来为您的代码提供函数。从父模块中提取命名函数（例如集合），以满足代码中稍后所需的引用。

但这又引出了一个问题“模块化库首先如何进入我的项目？”答案当然是你必须把它们放在那里，而你用来执行此操作的工具是忠实的旧 npm。

返回 VSCode svelte-test 终端会话（如有必要，通过几次 ctrl-C 按键终止开发服务器）并运行以下指令'

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

一两分钟后（安装涉及大量下载），您将准备好运行下载 Firestore 数据库集合的代码。但是，您仍然不知道如何将其嵌入到 Svelte Web 应用程序中。那么，进入下一个问题...

3.5 如何获取 Svelte page.svelte 文件以从 Firestore 数据库加载数据？

这是一个漫长的过程，但是，坚持下去，你就快完成了。

目前，在<script>中在 src/routes/ page.svelte 文件的部分，您有以下语句：<br> </script>

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

如您所知，这将您的产品字段声明为状态变量并将其初始化为空数组。您现在要做的是将“空”替换为 Firestore 产品集合的内容。

不幸的是，正如您所看到的，这涉及异步操作。这让事情变得有些复杂，因为 Svelte 不希望任何东西减慢页面的初始加载速度 - 它很高兴看到稍后添加的信息，但是，用户的第一印象应该是即时响应。 Svelte 有一个将初始数据加载到 page.svelte 文件中的标准安排。事情是这样的：

首先，创建一个新的 src/routes/ page.server.js 文件，将所有异步代码包装在 load() 函数（强制名称）内，并将其结果作为对象返回。

这是代码

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

上面的 load 函数返回一个具有单个 products 属性的对象，其值是由 Firestore API 调用构造的 currentProducts 数组。

这一切都很好，但是如何将其传达给 page.svelte 中的产品状态变量呢？

第一步是将新数据（强制名称）状态变量广告为 page.svelte 的 prop（“property”的缩写），您可以通过使用导出关键字声明它来实现此目的，因此：

npm install firebase

在您到达本系列的第 3.1 篇文章并了解“组件”之前，本系列不会介绍 Props。现在，将您的 page.svelte 文件视为一个以数据作为参数的函数。

当您现在运行 page.svelte 文件时，SvelteKit 框架会看到带有保留数据关键字的导出 let 数据声明，并认为：“啊，我需要运行与此页面关联的 load() 函数”。产品数据及时返回到 page.svelte 的 data 属性中，现在，由于这是一个反应变量，因此页面被刷新。

要使现有的“模板”代码适用于新的安排，您所需要做的就是用 data.products 替换产品引用

page.server.js 文件是您在 Svelte 中第一次看到的“服务器端”代码 - 即在服务器中运行的代码。到目前为止，您所看到的所有 page.svelte 代码都在浏览器中“客户端”运行。相比之下，page.server.js 文件要么在 npm run dev 启动的本地服务器中运行，要么在部署后在 App Engine 服务器的 Node.js 环境中运行。服务器端代码比客户端代码运行速度更快并且安全。唯一可以查看或更改它的人是您 - 它的所有者。

以下是 Post 2.2 中 page.svelte 文件修改版本的完整代码：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

此代码应该位于哪里？目前，“添加另一个产品”

的 on:click 按钮触发的代码位于您的 page.svelte 文件中。但 Svelte 建议，出于安全和效率原因，数据库更新应在 page.server.js 中的 actions() 函数中“服务器端”执行，该函数与您已在此处创建的 load() 函数并行。该功能通过从

“发布”数据来触发。

这是新的

的内容page.svelte 中的排列应如下所示：

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

“actions”函数返回的对象通过其 <script> 中声明的 form 属性可用于 page.svelte 文件。部分。在这里，出口许可证表格；语句与早期使用 data prop 返回 load() 函数的结果类似。</script>

以下是 page.svelte 和 page.server.js 的完整版本：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

如果您复制此代码，请记住再次重置 firestoreConfig 数据。如果您在使其工作时遇到问题，还请记住上一篇文章中有关调试客户端代码的建议，并查看下面的“后记部分”以获取有关修复服务器端问题的建议。祝你好运！

请注意，page.server.js 中的 FireStore API 导入和数据库配置语句已被赋予“文件范围”，方法是将它们移出它们所服务的函数并将它们重新定位到文件 <script> 的顶部。部分。在更复杂的项目中，常见的做法是在单独的 lib 文件夹中配置 db，以使其能够作为导入更广泛地共享。</script>

您还会注意到，新代码删除了先前出现在旧 page.svelte 文件的 on:click 函数中的 popupVisible 字段的重置。 Svelte 对表单提交的默认操作是重新加载页面。因此，处理表单后，popupVisible 会重新初始化为 false，“当前注册的产品：”数组会从更新的 Firestore 产品集合中刷新，并且弹出窗口会消失。作为奖励，新的产品编号将按照正确的排序顺序插入，这得益于产品 getDocs 中的 orderBy("productNumber", "asc") 限定符。

警告：这样的代码仅在您的 Firestore 数据库公开时才有效。当您添加规则来限制授权用户（即已“登录”的用户）访问集合时，您在此处使用的 Firestore 模板将会失败。本系列下一部分中的帖子将解释原因，特别是 Post 3.4 将解释如何回退到纯粹基于客户端 page.svelte 文件的代码。然而，由于这将以牺牲安全性和性能为代价，因此我希望您能够克服这些“小问题”并继续开发客户端-服务器代码。目前，请确保您的数据库规则类似于：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

4. 总结

我想这篇文章会让你的耐心达到极限。如果您已经达到了这一点，并且您的网络应用程序正常运行，并且您的理智仍然完好无损，请给自己一颗金星 - 您已经涵盖了大多数核心 Svelte 主题并掌握了基本技能！

话虽如此，还有很多东西需要学习。例如，这篇文章没有描述基本的错误处理和表单验证安排。除此之外，我还想向您介绍 Svelte 路由（即页面）、布局（页眉和页尾）、组件以及围绕安全性的棘手问题（登录设计和数据库规则）。最后，还有一个有趣的问题，即如何部署 Web 应用程序以在网络上进行实时操作。希望您能继续阅读！

后记：当事情出错时

在您的网络应用程序中引入“服务器端”处理可以让您快速进入高级开发人员联盟。这是因为我希望您喜欢在 page.svelte 文件上使用的“Chrome Inspector”技术不适用于 page.server.js 文件。但一切并没有失去。以下是高级开发人员会使用的技术介绍：

后记（一）：在终端会话中调试服务器端代码

虽然 VSCode 编辑器会尽力帮助您生成正确的代码，但一些基本错误只有在 SvelteKit 服务器尝试运行您的 Web 应用程序时才会变得明显。此时，您的屏幕可能会显示“500 - 内部错误”消息（如果它显示任何内容！）。浏览器在这里无法为您提供太多帮助，因为 page.server.js 文件在这里基本上是不可见的。虽然“源”选项卡的 Page/localhost 存储层次结构继续显示您的 page.svelte 文件，但它对 page.server.js 没有任何说明。

但是检查员知道发生了错误，并且有时可以为您提供有关其原因的有用线索。菜单栏的右端将显示一个中间有十字的红色图标。单击此按钮，检查器控制台将打开并显示摘要错误详细信息。但如果您需要完整详细信息，您可以在使用 npm run dev 启动服务器的终端会话中找到这些信息。

这里的问题是，您可能会觉得细节水平可能太完整。每个错误都会报告一个“调用堆栈”，详细说明故障点之前的服务器函数调用的完整序列这是由不正确的字段名称声明引发的简短错误（我故意将 const db= 错误地输入为 const dba =

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

终端窗口不是查看此类信息的好地方。有时您必须向上或向下滚动才能找到您想要的内容，并且信息可能会被其他活动的输出所掩盖。尽管如此，这就是你所拥有的一切，所以你需要充分利用它。

但请注意，在上面所示的示例中，错误原因已被非常清楚地表明 - 服务器在 page.server.js 第 18 行第 38 列处遇到了对 db 变量的引用，并且 db 尚未被引用宣布。我认为这可以满足您所需的一切。

终端窗口也可以帮助您解决逻辑问题。过去，“调试”通常是通过将 console.log messages 消息放置在代码中的战略点来进行的，在这里使用这种方法很容易。典型的日志消息是：

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

像这样放置在 page.server.js 文件中的日志消息将显示在 VSCode 终端窗口中（相比之下，客户端 page.svelte 代码中的日志语句将继续显示在 浏览器的控制台窗口）。

后记（b）：在 VSCode 调试器中调试服务器端代码

Console.log 消息可以很好地解决小问题，但现在您希望能够使用浏览器“断点”调试工具的复杂性。不要害怕。您现在可以在 VSCode 中找到它。编辑。这就是你要做的：

1. 打开要调试的 page.server.js 文件，并在要检查的点设置断点。您可以通过将鼠标悬停在要用作断点的源代码行上并单击出现在其左侧的淡红点来完成此操作。淡红点现在变成鲜红色。
2. 在 VSCode 命令面板（快捷键“ctrl shift p”）中选择“调试：附加到节点进程”并获取工作区中的项目列表。选择您要调试的。
3. 请注意，您刚刚启动的终端会话被标记为“Javascript 调试终端”。在该终端中输入“npm run dev”，并注意通常出现的 Vite 输出如何包含附加的“调试器附加”行。另请注意 VSCode 的活动栏如何变成橙色
4. 现在将鼠标悬停在 Vite 显示的 http://localhost 地址上，然后通过“ctrl-click”启动 Web 应用程序。您的网络应用程序现在会在弹出窗口中打开。
5. 您现在会发现 page.server.js 文件的编辑器页面已成为活动的调试会话，并在第一个断点处停止执行。编辑器窗口顶部的面板显示熟悉的“前进到下一个断点”等按钮，将鼠标悬停在字段名称上将显示显示其值的工具提示。和以前一样，如果调试会话在变量赋值语句上停止，则只有在前进到下一条语句时才会看到结果。
6. 通过将鼠标悬停在调试控制面板远端的图标上来终止调试会话。当您按“alt”键时，这会在“断开连接”和“停止”操作之间切换。当显示“断开连接”时单击此按钮，橙色的 VSCode 活动栏将再次变为蓝色。如果您想恢复调试，请再次在调试终端窗口中“按住 Ctrl 单击”Web 应用程序 URL（该窗口将保持活动状态，直到您明确“bin”它）

下面的屏幕截图显示了这篇文章的 page.server.js 文件在 load() 函数返回时停止。此时将“鼠标悬停”在产品属性上进行返回会显示读取 Firestore 产品集合的结果。

有关 VSCode 调试器中可用功能的完整详细信息，请参阅 VSCode 调试中的文档

以上是NgSysV.使用 Google&#s Firestore 创建一个简单的 Svelte 信息系统的详细内容。更多信息请关注PHP中文网其他相关文章！