該貼文系列已在 NgateSystems.com 上建立索引。您還可以在那裡找到超級(jí)有用的關(guān)鍵字搜尋工具。

最後評(píng)論：24 年 11 月

一、簡(jiǎn)介

大多數(shù)網(wǎng)路應(yīng)用程式的存在純粹是為了創(chuàng)建和存取共享資訊?？紤]一下亞馬遜的 https://www.amazon.co.uk/ 網(wǎng)站。該系統(tǒng)的基本目的是讓您瀏覽產(chǎn)品詳細(xì)資訊的集中集合、下訂單並監(jiān)控交付進(jìn)度。為了實(shí)現(xiàn)這一目標(biāo)，亞馬遜必須：

• 將此資訊保存在可透過網(wǎng)路存取的地方
• 建置和管理它以確保近乎即時(shí)的存取和完全完整性。

這篇文章是關(guān)於用於實(shí)現(xiàn)這些目標(biāo)的「資料庫」技術(shù)。

警告 - 這是一篇長帖子，因?yàn)?Svelte 中的資料庫讀寫會(huì)無情地吸引您使用 SvelteKit 的客戶端-伺服器架構(gòu)。以前，您的程式碼僅在 Web 瀏覽器中「客戶端」運(yùn)行。現(xiàn)在，您還將在由 npm run dev 啟動(dòng)的本機(jī)伺服器上執(zhí)行程式碼。這會(huì)產(chǎn)生後果...

我已經(jīng)研究過分割貼文的方法，但它們不起作用。更糟的是，您將使用的 Javascript 包含許多新功能。所以，我很抱歉 - 你只能忍耐了。

但也要往好的方面看。一旦你經(jīng)歷了這一切，事情就會(huì)開始變得更容易。慢慢來。如果您覺得我沒有解釋清楚，請(qǐng)使用 chatGPT。當(dāng)您需要有關(guān) JavaScript 語法的建議時(shí)，您會(huì)發(fā)現(xiàn)該機(jī)器人特別有用。放鬆。這會(huì)很有趣！

2. 設(shè)定您的專案以使用 Google 的 Firestore

在網(wǎng)路上儲(chǔ)存共享資料的方法有無數(shù)種。本系列文章使用 Google 的 Firestore 系統(tǒng)，因?yàn)樗m合初學(xué)者。它需要最少的設(shè)置，並且非常適合 Svelte Web 應(yīng)用程式的結(jié)構(gòu)。

您需要執(zhí)行四個(gè)初步步驟：

1. 取得 Google 帳戶
2. 在此帳戶下建立 Firebase 專案
3. 註冊(cè)您的「網(wǎng)頁應(yīng)用程式」
4. 為您的 Firebase 專案初始化 Firestore 資料庫

Firebase 是 Google 的總稱，涵蓋了許多不同的服務(wù)，您可以使用這些服務(wù)在網(wǎng)路上安裝簡(jiǎn)單的項(xiàng)目。給定帳戶的服務(wù)透過 Google 的「Firebase 控制臺(tái)」（網(wǎng)址為 https://console.firebase.google.com/）進(jìn)行管理。它們包括允許您將檔案上傳到 Google Cloud 的「儲(chǔ)存」服務(wù)和「Firestore 資料庫」服務(wù)。資料庫與文件的不同之處在於它具有可配置的結(jié)構(gòu)。它使您能夠存取和更新已配置資料集的離散元素。

2.1 取得Google帳戶

如果您有 Gmail 位址，那麼您就已經(jīng)受到保護(hù)，因?yàn)檫@會(huì)自動(dòng)算是 Google 帳戶。如果沒有，請(qǐng)按照建立 Google 帳戶中的說明取得一個(gè)。

2.2 為您的程式碼建立 Firebase 項(xiàng)目

啟動(dòng) Google Firebase 控制臺(tái)並使用您的 Google 帳戶登入（請(qǐng)注意，如果您使用此帳戶登入 Gmail，則您也已經(jīng)登入 Firebase 控制臺(tái)）?，F(xiàn)在點(diǎn)擊“建立專案”框來啟動(dòng)該過程。

Google 會(huì)要求您為您的專案提供一個(gè)名稱（我建議您使用您在 VSCode 中使用的專案名稱），並會(huì)提出一個(gè)擴(kuò)展，使其成為 Firebase 世界中唯一的「專案識(shí)別碼」。例如，本系列文章中使用的我的版本的「Svelte-dev」項(xiàng)目在 Google 中稱為「Svelte-dev-afbaf」。

順便說一句，由於專案識(shí)別碼最終將構(gòu)成您的網(wǎng)路應(yīng)用程式的預(yù)設(shè)即時(shí)URL 的一部分，並且由於Google 允許您編輯其最初的「唯一性擴(kuò)展」提案，因此您可能會(huì)嘗試更改此設(shè)定去做一些有意義的事情。不過，我建議你忘記這個(gè)想法。首先，您會(huì)發(fā)現(xiàn)很難選擇適合雙方的識(shí)別碼。其次，根據(jù)我的經(jīng)驗(yàn)，這些「預(yù)設(shè)網(wǎng)址」從未被 Google 索引過。以最低成本購買並在上線時(shí)連結(jié)到預(yù)設(shè) URL 的「自訂 URL」是迄今為止獲得令人難忘的 URL 的最佳方式。

現(xiàn)在點(diǎn)選「繼續(xù)」即可顯示「Google Analytics」註冊(cè)頁面。您可以在此處安全地忽略它，因?yàn)樗鼉H與即時(shí)應(yīng)用程式的效能問題相關(guān)。使用滑桿拒絕它，然後點(diǎn)擊“建立專案”按鈕繼續(xù)。

當(dāng) Google 註冊(cè)您的專案時(shí)，燈光現(xiàn)在變暗了一點(diǎn)。最後，一旦您再點(diǎn)擊一個(gè)「繼續(xù)」按鈕，您就會(huì)發(fā)現(xiàn)自己位於專案的 Firebase 控制臺(tái)視窗中。以下是「svelte-dev」專案的 Firestore 標(biāo)籤的螢?zāi)唤貓D：

值得給自己一點(diǎn)時(shí)間來熟悉這個(gè)頁面，因?yàn)樗悬c(diǎn)複雜?；窘Y(jié)構(gòu)由左側(cè)的「工具選單」組成，它決定右側(cè)主面板中顯示的內(nèi)容。問題在於選單是「自適應(yīng)」的，並維護(hù)一個(gè)「專案快捷方式」部分來記住您去過的地方。因此，每次打開控制臺(tái)時(shí)，選單看起來都不同！然而，一旦掌握了這個(gè)功能，事情就會(huì)進(jìn)展順利。請(qǐng)注意，完整的工具集隱藏在其父「產(chǎn)品類別」選單項(xiàng)目的「建置」、「運(yùn)行」和「分析」子選單中。 「建造」套裝包含您目前所需的一切。

在繼續(xù)操作之前，請(qǐng)注意以下事項(xiàng)：

• 螢?zāi)豁敳康馁Y訊確認(rèn) svelte-test 專案目前已在「Spark」計(jì)劃中註冊(cè)。這意味著您目前所做的一切都是免費(fèi)的。最終，在本系列文章中，您將需要開始向 Google 付費(fèi)，並且需要將您的專案升級(jí)到「Blaze」費(fèi)率。但不用擔(dān)心 - 這還有很長的路要走，您不需要支付太多費(fèi)用，並且您可以建立每月預(yù)算來限制 Google 可能向您收取的費(fèi)用。
• 點(diǎn)擊工具列頂部的「項(xiàng)目概述」按鈕即可顯示項(xiàng)目詳細(xì)資訊。此處提供的詳細(xì)資訊包括項(xiàng)目標(biāo)識(shí)符的提醒和刪除項(xiàng)目的按鈕。如果一切都出了問題，你總是可以用它來消除混亂並重新開始。這不會(huì)花費(fèi)您任何費(fèi)用

2.3 註冊(cè)您的網(wǎng)路應(yīng)用程式

Firebase 需要知道您的網(wǎng)路應(yīng)用程式的名稱：

• 點(diǎn)擊> 「開始」訊息下方的圖標(biāo)，並根據(jù)要求提供暱稱。我建議您在這裡再次使用您的專案名稱（例如“svelte-dev”）。
• 忽略「為此應(yīng)用程式設(shè)定 Firebase 託管」的提示，因?yàn)楫?dāng)我們最終進(jìn)行部署時(shí)，您的所有託管需求都將由 App Engine 處理。
• 最後，點(diǎn)選「註冊(cè)」和「繼續(xù)控制臺(tái)」返回初始控制臺(tái)畫面。

2.4 - 初始化 Firestore 資料庫

從工具選單的「Build」堆疊中選擇「Firestore Database」以獲得如下所示的 Firebase 控制臺(tái)視圖：

點(diǎn)擊「建立資料庫」按鈕後，控制臺(tái)將要求您：

1. 設(shè)定您的資料庫「名稱和位置」。 「名稱」是資料庫的標(biāo)識(shí)符，僅當(dāng)您計(jì)劃在專案中建立多個(gè)不同的資料庫時(shí)才相關(guān)。現(xiàn)在將其留空，以便 Google 使用其「預(yù)設(shè)」設(shè)定。 “位置”指定資料庫的實(shí)體位置。此處提供的選項(xiàng)下拉清單可能是您對(duì) Google Cloud 服務(wù)規(guī)模的第一印象。其伺服器場(chǎng)遍布全球。您可能需要選擇靠近您所在位置的伺服器。例如，我通常使用“europe-west2 : Heathro”，因?yàn)槲易≡谟?Google Cloud 控制臺(tái)中其他頁面可讓您指定效能和可用性特徵，但您現(xiàn)在不需要查看這些。

2. 使用「規(guī)則」來保護(hù)您的資料庫。這裡的畫面為您提供了設(shè)定初始「生產(chǎn)」和「測(cè)試」「規(guī)則」之間的選擇。當(dāng)然，這只有在你首先知道「規(guī)則」是什麼的情況下才有意義——而現(xiàn)在不是我解釋它們的合適時(shí)機(jī)。除非您更了解，否則我希望您檢查此處的“測(cè)試模式”選項(xiàng)。請(qǐng)放心，稍後當(dāng)我談?wù)摗笆跈?quán)”時(shí)我會(huì)回到這個(gè)話題（天哪，還有很多東西要談！）。

完成這兩個(gè)階段後，Cloud Firestore 頁面將會(huì)在 Firebase 控制臺(tái)中開啟?，F(xiàn)在怎麼辦？

3. 使用 Firestore 資料庫

本節(jié)旨在回答以下問題：

1. 什麼是資料庫？
2. Firestore 資料庫是什麼樣的？
3. 如何在 Firestore 控制臺(tái)中初始化資料庫？
4. 如何使用 Javascript 存取 Firestore 資料庫？
5. 如何取得 Svelte page.svelte 檔案來從 Firestore 資料庫載入資料？
6. 如何取得 Svelte page.svelte 檔案以將資料新增至 Firestore 資料庫？

3.1 什麼是資料庫？

就我們的直接目的而言，資料庫是一組表，其中包含命名資料「欄位」的值行。因此，例如，「客戶訂單」資料庫可能包含

• 包含「客戶 ID」和「客戶地址詳細(xì)資料」欄位值的「客戶」表
• 包含「產(chǎn)品編號(hào)」和「產(chǎn)品詳細(xì)資料」欄位的「產(chǎn)品」表格
• 「客戶訂單」表，其中包含「客戶 ID」所下的「產(chǎn)品編號(hào)」訂單的詳細(xì)資訊

重要的是這樣的安排結(jié)構(gòu)化資料內(nèi)容的命名和格式具有一致的標(biāo)準(zhǔn)

3.2 Firestore 資料庫是什麼樣的？

在 Firestore 中，表格稱為“集合”，其中的行稱為“文件”。集合中儲(chǔ)存的文件並不都需要具有相同的字段，但字段名稱和內(nèi)容應(yīng)在整個(gè)集合中遵循一致的模式。

Firestore 文件的一個(gè)重要特徵是它應(yīng)該有一個(gè)唯一的識(shí)別碼或「密鑰」。有時(shí)，每個(gè)文件中都會(huì)有一個(gè)字段，例如“電子郵件地址”，您可以使用它來提供“自然”唯一密鑰。如果沒有，F(xiàn)irestore 可能會(huì)被要求自動(dòng)建立一個(gè)人工金鑰。

資料庫設(shè)計(jì)可能是系統(tǒng)開發(fā)中最具挑戰(zhàn)性的部分，我將再次迴避這一點(diǎn)，因?yàn)橹挥挟?dāng)您擁有一些實(shí)務(wù)經(jīng)驗(yàn)時(shí)，所涉及的問題才會(huì)變得清晰。不過，如果您有時(shí)間，您會(huì)發(fā)現(xiàn)查看 Cloud Firestore 資料模型頁面很有用。

3.3 如何在 Firestore 控制臺(tái)中初始化資料庫？

在這篇文章中，我打算向您展示如何在預(yù)設(shè) Firestore 資料庫中建立單一產(chǎn)品集合。這將包含簡(jiǎn)單的文檔，其中包含產(chǎn)品編號(hào)欄位以及 Firestore 自動(dòng)產(chǎn)生的金鑰。

在 Firebase 控制臺(tái)的 Firestore 頁面上，按一下「開始收集」按鈕，然後在現(xiàn)在出現(xiàn)的彈出視窗的「集合 ID」欄位中輸??入名稱「產(chǎn)品」。

現(xiàn)在使用資料輸入頁面建立一個(gè)測(cè)試產(chǎn)品文檔，其中包含數(shù)值為「1」的「productNumber」欄位和文字值為「Product 1」的「productDetails」欄位。

• 在“Field”輸入框中輸入“productNumber”設(shè)定欄位名稱，將“Type”方塊設(shè)為“number”，並在“Value”方塊中輸入“1”（不含引號(hào)字元）。
• 點(diǎn)擊“新增欄位”，在“欄位”輸入框中輸入“productDetails”設(shè)定欄位名稱，將“類型”方塊保留預(yù)設(shè)的“字串”設(shè)置，然後輸入“產(chǎn)品1”（不含引號(hào)字符） ）在「值」框中
。

現(xiàn)在，先點(diǎn)擊「自動(dòng) ID」按鈕，然後「儲(chǔ)存」來簽署文檔，控制臺(tái)現(xiàn)在應(yīng)如下所示：

如果您想添加更多文檔，此時(shí)您可以單擊“添加文檔”，但在本例中沒有必要 - 您只需要一個(gè)文檔來演示您的 Web 應(yīng)用程式讀取它的能力。

您現(xiàn)在已經(jīng)完成了，但請(qǐng)注意，控制臺(tái)的「面板視圖」可讓您編輯或刪除剛剛建立的文件。如果您的情況一團(tuán)糟，您甚至可以刪除整個(gè)集合並重新開始。

3.4 如何使用 Javascript 存取 Firestore 資料庫？

事情開始變得真的有趣了！

Google 提供了一個(gè) Javascript 函式庫，可讓您讀取和寫入 Firestore 文件。此類庫稱為“API”（應(yīng)用程式介面）?？纯聪旅娴某淌酱a，它顯示瞭如何使用 firebase/firestore 庫來讀取 svelte-dev 產(chǎn)品集合中的所有文件：

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 呼叫將產(chǎn)品集合中所有文件的排序副本載入到 State currentProducts 變數(shù)中。

首先，從 Firestore 用戶端 API 程式庫中提取的集合和查詢函數(shù)用於將 Firebase 指向產(chǎn)品集合並定義要在其上執(zhí)行的查詢。然後透過 getDocs API 呼叫啟動(dòng)查詢。

我不會(huì)嘗試描述這一系列 Firestore API 呼叫的機(jī)制。將它們視為一段「樣板程式碼」 - 程式碼 - 那種您寫一次，然後簡(jiǎn)單複製的東西。由於您會(huì)發(fā)現(xiàn)需要一個(gè)完整的範(fàn)本庫來涵蓋 Firestore「讀取」、「更新」和「刪除」操作的全部數(shù)組，因此您可能會(huì)發(fā)現(xiàn)查看 Post 10.1 - Firestore CRUD 命令範(fàn)本很有用。如果您想查看 Google 自己的 API 描述，您可以在第 10.1 篇文章的末尾找到這些內(nèi)容的連結(jié)。

這裡的「CRUD」是「建立」、「讀取」、「更新」和「刪除」的縮寫。

getDocs 結(jié)果作為文件數(shù)組傳回，通常稱為「快照」。但請(qǐng)注意，getDocs 函數(shù)呼叫前面有一個(gè)await 關(guān)鍵字。

這裡需要await關(guān)鍵字，因?yàn)轭A(yù)設(shè)情況下，在Javascript中，引用外部資料來源的指令可能需要不可預(yù)測(cè)的時(shí)間才能完成非同步處理。 「await」關(guān)鍵字本質(zhì)上（儘管這是一個(gè)粗略的簡(jiǎn)化）使您能夠覆蓋這種安排。當(dāng)您有更多時(shí)間時(shí)，您可能會(huì)發(fā)現(xiàn)查看 Javascript fetch() API 和「await」關(guān)鍵字的簡(jiǎn)單指南很有用

但現(xiàn)在，回到上面的程式碼片段，看看以 const firebaseConfig 語句開頭的部分。

firebaseConfig 聲明初始化一個(gè)對(duì)象，其中包含將 Web 應(yīng)用連接到特定 Firebase 專案所需的設(shè)定詳細(xì)資訊。它包括 Firebase 用於定位和驗(yàn)證您的應(yīng)用程式的各種密鑰和標(biāo)識(shí)符。您可以在 Firebase 控制臺(tái)的「專案概覽/專案設(shè)定」中找到您的特定 Web 應(yīng)用程式的設(shè)定。下面程式碼範(fàn)例中的 firebaseConfig 設(shè)定已被“混淆”，因?yàn)樗鼈兪?我的 專案所特有的，並且不能輕易傳遞（稍後將詳細(xì)介紹這一點(diǎn)）。嘗試下面的範(fàn)例程式碼時(shí)，您需要從您自己的專案複製 firebaseConfig 設(shè)定。

初始化 firebaseConfig 後，Web 應(yīng)用程式可以初始化查詢的 const productsCollRef = collection(db, "products"); 所需的 db 變數(shù)。聲明：

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 函數(shù)從何而來。答案是它們是透過程式碼區(qū)塊頂部的三個(gè)語句從專案中的位置導(dǎo)入的：

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

這裡正在訪問“模組化庫”來為您的程式碼提供函數(shù)。從父模組中提取命名函數(shù)（例如集合），以滿足程式碼中稍後所需的參考。

但這又引出了一個(gè)問題「模組化庫首先如何進(jìn)入我的專案？」答案當(dāng)然是你必須把它們放在那裡，而你用來執(zhí)行此操作的工具是忠實(shí)的舊 npm。

返回 VSCode svelte-test 終端會(huì)話（如有必要，透過幾個(gè) ctrl-C 按鍵終止開發(fā)伺服器）並執(zhí)行以下指令'

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

一兩分鐘後（安裝涉及大量下載），您將準(zhǔn)備好執(zhí)行下載 Firestore 資料庫集合的程式碼。但是，您仍然不知道如何將其嵌入到 Svelte Web 應(yīng)用程式中。那麼，進(jìn)入下一個(gè)問題...

3.5 如何取得 Svelte page.svelte 檔案以從 Firestore 資料庫載入資料？

這是一個(gè)漫長的過程，但是，堅(jiān)持下去，你就快完成了。

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

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

如您所知，這會(huì)將您的產(chǎn)品欄位聲明為狀態(tài)變數(shù)並將其初始化為空數(shù)組?，F(xiàn)在您要做的是將「空」替換為 Firestore 產(chǎn)品集合的內(nèi)容。

不幸的是，正如您所看到的，這涉及非同步操作。這讓事情變得有些複雜，因?yàn)?Svelte 不希望任何東西減慢頁面的初始加載速度 - 它很高興看到稍後添加的信息，但是，用戶的第一印象應(yīng)該是即時(shí)響應(yīng)。 Svelte 有一個(gè)將初始資料載入到 page.svelte 檔案中的標(biāo)準(zhǔn)安排。事情是這樣的：

首先，建立一個(gè)新的 src/routes/ page.server.js 文件，將所有非同步程式碼包裝在 load() 函數(shù)（強(qiáng)制名稱）內(nèi)，並將其結(jié)果作為物件傳回。

這是程式碼

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

上面的 load 函數(shù)傳回一個(gè)具有單一 products 屬性的對(duì)象，其值是由 Firestore API 呼叫建構(gòu)的 currentProducts 陣列。

這一切都很好，但是如何將其傳達(dá)給 page.svelte 中的產(chǎn)品狀態(tài)變數(shù)呢？

第一步是將新資料（強(qiáng)制名稱）狀態(tài)變數(shù)廣告為page.svelte 的prop（「property」的縮寫），您可以透過使用匯出關(guān)鍵字聲明它來實(shí)現(xiàn)此目的，因此：

npm install firebase

在您到達(dá)本系列的第 3.1 篇文章並了解「組件」之前，本系列不會(huì)介紹 Props?，F(xiàn)在，將您的 page.svelte 檔案視為一個(gè)以資料作為參數(shù)的函數(shù)。

當(dāng)您現(xiàn)在執(zhí)行 page.svelte 檔案時(shí)，SvelteKit 框架會(huì)看到帶有保留資料關(guān)鍵字的匯出 let 資料聲明，並認(rèn)為：「啊，我需要執(zhí)行與此頁面關(guān)聯(lián)的 load() 函數(shù)」。產(chǎn)品資料及時(shí)返回 page.svelte 的 data 屬性中，現(xiàn)在，由於這是一個(gè)反應(yīng)變量，因此頁面被刷新。

要讓現(xiàn)有的「範(fàn)本」程式碼適用於新的安排，您所需要做的就是用 data.products 取代產(chǎn)品參考

page.server.js 檔案是您在 Svelte 中第一次看到的「伺服器端」程式碼 - 即在伺服器中執(zhí)行的程式碼。到目前為止，您所看到的所有 page.svelte 程式碼都在瀏覽器中「客戶端」運(yùn)行。相較之下，page.server.js 檔案要麼在 npm run dev 啟動(dòng)的本機(jī)伺服器中運(yùn)行，要麼在部署後在 App Engine 伺服器的 Node.js 環(huán)境中運(yùn)行。伺服器端程式碼比客戶端程式碼運(yùn)行速度更快且安全。唯一可以查看或更改它的人是您 - 它的所有者。

以下是 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

此程式碼應(yīng)該位於哪裡？目前，「新增另一個(gè)產(chǎn)品」

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

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

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

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 firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

以上是NgSysV.使用 Google&#s Firestore 建立一個(gè)簡(jiǎn)單的 Svelte 資訊系統(tǒng)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！