国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁 web前端 js教程 NgSysV.使用 Google&#s Firestore 創(chuàng)建一個簡單的 Svelte 信息系統(tǒng)

NgSysV.使用 Google&#s Firestore 創(chuàng)建一個簡單的 Svelte 信息系統(tǒng)

Nov 28, 2024 am 06:23 AM

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

最后評論:24 年 11 月

一、簡介

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

  • 將此信息保存在可通過網(wǎng)絡(luò)訪問的地方
  • 構(gòu)建和管理它以確保近乎即時的訪問和完全完整性。

這篇文章是關(guān)于用于實現(xiàn)這些目標(biāo)的“數(shù)據(jù)庫”技術(shù)。

警告 - 這是一篇帖子,因為 Svelte 中的數(shù)據(jù)庫讀寫會無情地吸引您使用 SvelteKit 的客戶端-服務(wù)器架構(gòu)。以前,您的代碼僅在 Web 瀏覽器中“客戶端”運行?,F(xiàn)在,您還將在由 npm run dev 啟動的本地服務(wù)器上運行代碼。這會產(chǎn)生后果...

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

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

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

在網(wǎng)絡(luò)上存儲共享數(shù)據(jù)的方法有無數(shù)種。本系列文章使用 Google 的 Firestore 系統(tǒng),因為它適合初學(xué)者。它需要最少的設(shè)置,并且非常適合 Svelte Web 應(yīng)用程序的結(jié)構(gòu)。

您需要執(zhí)行四個初始步驟:

  1. 獲取 Google 帳戶
  2. 在此帳戶下創(chuàng)建 Firebase 項目
  3. 注冊您的“網(wǎng)絡(luò)應(yīng)用程序”
  4. 為您的 Firebase 項目初始化 Firestore 數(shù)據(jù)庫

Firebase 是 Google 的總稱,涵蓋了許多不同的服務(wù),您可以使用這些服務(wù)在網(wǎng)絡(luò)上安裝簡單的項目。給定帳戶的服務(wù)通過 Google 的“Firebase 控制臺”(網(wǎng)址為 https://console.firebase.google.com/)進(jìn)行管理。它們包括允許您將文件上傳到 Google Cloud 的“存儲”服務(wù)和“Firestore 數(shù)據(jù)庫”服務(wù)。數(shù)據(jù)庫與文件的不同之處在于它具有可配置的結(jié)構(gòu)。它使您能夠訪問和更新已配置數(shù)據(jù)集的離散元素。

2.1 獲取Google賬戶

如果您有 Gmail 地址,那么您就已經(jīng)受到保護(hù),因為這會自動算作 Google 帳戶。如果沒有,請按照創(chuàng)建 Google 帳戶中的說明獲取一個。

2.2 為您的代碼創(chuàng)建 Firebase 項目

啟動 Google Firebase 控制臺并使用您的 Google 帳戶登錄(請注意,如果您使用此帳戶登錄 Gmail,則您也已經(jīng)登錄 Firebase 控制臺)?,F(xiàn)在單擊“創(chuàng)建項目”框來啟動該過程。

Google 會要求您為您的項目提供一個名稱(我建議您使用您在 VSCode 中使用的項目名稱),并會提出一個擴(kuò)展,使其成為 Firebase 世界中唯一的“項目標(biāo)識符”。例如,本系列文章中使用的我的版本的“Svelte-dev”項目在 Google 中被稱為“Svelte-dev-afbaf”。

順便說一句,由于項目標(biāo)識符最終將構(gòu)成您的網(wǎng)絡(luò)應(yīng)用程序的默認(rèn)實時 URL 的一部分,并且由于 Google 允許您編輯其最初的“唯一性擴(kuò)展”提案,因此您可能會嘗試更改此設(shè)置去做一些有意義的事情。不過,我建議你忘記這個想法。首先,您會發(fā)現(xiàn)很難選擇適合雙方的標(biāo)識符。其次,根據(jù)我的經(jīng)驗,這些“默認(rèn)網(wǎng)址”從未被 Google 索引過。以最低成本購買并在上線時鏈接到默認(rèn) URL 的“自定義 URL”是迄今為止獲得令人難忘的 URL 的最佳方式。

現(xiàn)在點擊“繼續(xù)”即可顯示“Google Analytics”注冊頁面。您可以在此處安全地忽略它,因為它僅與實時應(yīng)用程序的性能問題相關(guān)。使用滑塊拒絕它,然后單擊“創(chuàng)建項目”按鈕繼續(xù)。

當(dāng) Google 注冊您的項目時,燈光現(xiàn)在變暗了一點。最后,一旦您再點擊一個“繼續(xù)”按鈕,您就會發(fā)現(xiàn)自己位于項目的 Firebase 控制臺窗口中。以下是“svelte-dev”項目的 Firestore 選項卡的屏幕截圖:

NgSysV.Creating a simple Svelte Information System with Google

值得給自己一點時間來熟悉這個頁面,因為它有點復(fù)雜?;窘Y(jié)構(gòu)由左側(cè)的“工具菜單”組成,它確定右側(cè)主面板中顯示的內(nèi)容。問題在于菜單是“自適應(yīng)”的,并維護(hù)一個“項目快捷方式”部分來記住您去過的地方。因此,每次打開控制臺時,菜單看起來都不同!然而,一旦掌握了這個功能,事情就會進(jìn)展順利。請注意,完整的工具集隱藏在其父“產(chǎn)品類別”菜單項的“構(gòu)建”、“運行”和“分析”子菜單中。 “構(gòu)建”套裝包含您目前需要的一切。

在繼續(xù)操作之前,請注意以下事項:

  • 屏幕頂部的信息確認(rèn) svelte-test 項目當(dāng)前已在“Spark”計劃中注冊。這意味著您目前所做的一切都是免費的。最終,在本系列文章中,您需要開始向 Google 付費,并且需要將您的項目升級到“Blaze”費率。但不用擔(dān)心 - 這還有很長的路要走,您不需要支付太多費用,并且您可以創(chuàng)建每月預(yù)算來限制 Google 可能向您收取的費用。
  • 單擊工具欄頂部的“項目概述”按鈕即可顯示項目詳細(xì)信息。此處提供的詳細(xì)信息包括項目標(biāo)識符的提醒和刪除項目的按鈕。如果一切都出了問題,你總是可以用它來消除混亂并重新開始。這不會花費您任何費用

2.3 注冊您的網(wǎng)絡(luò)應(yīng)用程序

Firebase 需要知道您的網(wǎng)絡(luò)應(yīng)用程序的名稱:

  • 點擊 “開始”消息下方的圖標(biāo),并根據(jù)要求提供昵稱。我建議您在這里再次使用您的項目名稱(例如“svelte-dev”)。
  • 忽略“為此應(yīng)用設(shè)置 Firebase 托管”的提示,因為當(dāng)我們最終進(jìn)行部署時,您的所有托管需求都將由 App Engine 處理。
  • 最后,點擊“注冊”和“繼續(xù)控制臺”返回初始控制臺屏幕。

2.4 - 初始化 Firestore 數(shù)據(jù)庫

從工具菜單的“Build”堆棧中選擇“Firestore Database”以獲得如下所示的 Firebase 控制臺視圖:

NgSysV.Creating a simple Svelte Information System with Google

單擊“創(chuàng)建數(shù)據(jù)庫”按鈕后,控制臺將要求您:

  1. 設(shè)置您的數(shù)據(jù)庫“名稱和位置”。 “名稱”是數(shù)據(jù)庫的標(biāo)識符,僅當(dāng)您計劃在項目中創(chuàng)建多個不同的數(shù)據(jù)庫時才相關(guān)?,F(xiàn)在將其留空,以便 Google 使用其“默認(rèn)”設(shè)置。 “位置”指定數(shù)據(jù)庫的物理位置。此處提供的選項下拉列表可能是您對 Google Cloud 服務(wù)規(guī)模的第一印象。其服務(wù)器場遍布全球。您可能需要選擇靠近您所在位置的服務(wù)器。例如,我通常使用“europe-west2 : Heathro”,因為我住在英國。 Google Cloud 控制臺中其他頁面允許您指定性能和可用性特征,但您現(xiàn)在不需要查看這些。

  2. 使用“規(guī)則”保護(hù)您的數(shù)據(jù)庫。這里的屏幕為您提供了設(shè)置初始“生產(chǎn)”和“測試”“規(guī)則”之間的選擇。當(dāng)然,這只有在你首先知道“規(guī)則”是什么的情況下才有意義——而現(xiàn)在不是我解釋它們的合適時機(jī)。除非您更了解,否則我希望您檢查此處的“測試模式”選項。請放心,稍后當(dāng)我談?wù)摗笆跈?quán)”時我會回到這個話題(天哪,還有很多東西要談!)。

完成這兩個階段后,Cloud Firestore 頁面將在 Firebase 控制臺中打開?,F(xiàn)在怎么辦?

3. 使用 Firestore 數(shù)據(jù)庫

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

  1. 什么是數(shù)據(jù)庫?
  2. Firestore 數(shù)據(jù)庫是什么樣的?
  3. 如何在 Firestore 控制臺中初始化數(shù)據(jù)庫?
  4. 如何使用 Javascript 訪問 Firestore 數(shù)據(jù)庫?
  5. 如何獲取 Svelte page.svelte 文件來從 Firestore 數(shù)據(jù)庫加載數(shù)據(jù)?
  6. 如何獲取 Svelte page.svelte 文件以將數(shù)據(jù)添加到 Firestore 數(shù)據(jù)庫?

3.1 什么是數(shù)據(jù)庫?

就我們的直接目的而言,數(shù)據(jù)庫是一組表,其中包含命名數(shù)據(jù)“字段”的值行。因此,例如,“客戶訂單”數(shù)據(jù)庫可能包含

  • 包含“客戶 ID”和“客戶地址詳細(xì)信息”字段值的“客戶”表
  • 包含“產(chǎn)品編號”和“產(chǎn)品詳細(xì)信息”字段的“產(chǎn)品”表
  • “客戶訂單”表,其中包含“客戶 ID”所下的“產(chǎn)品編號”訂單的詳細(xì)信息

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

3.2 Firestore 數(shù)據(jù)庫是什么樣的?

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

Firestore 文檔的一個重要特征是它應(yīng)該有一個唯一的標(biāo)識符或“密鑰”。有時,每個文檔中都會有一個字段,例如“電子郵件地址”,您可以使用它來提供“自然”唯一密鑰。如果沒有,F(xiàn)irestore 可能會被要求自動創(chuàng)建一個人工密鑰。

數(shù)據(jù)庫設(shè)計可能是系統(tǒng)開發(fā)中最具挑戰(zhàn)性的部分,我將再次回避這一點,因為只有當(dāng)您擁有一些實踐經(jīng)驗時,所涉及的問題才會變得清晰。不過,如果您有時間,您會發(fā)現(xiàn)查看 Cloud Firestore 數(shù)據(jù)模型頁面很有用。

3.3 如何在 Firestore 控制臺中初始化數(shù)據(jù)庫?

在這篇文章中,我計劃向您展示如何在默認(rèn) Firestore 數(shù)據(jù)庫中創(chuàng)建單個產(chǎn)品集合。這將包含簡單的文檔,其中包含產(chǎn)品編號字段以及 Firestore 自動生成的密鑰。

在 Firebase 控制臺的 Firestore 頁面上,單擊“開始收集”按鈕,然后在現(xiàn)在出現(xiàn)的彈出窗口的“集合 ID”字段中輸入名稱“產(chǎn)品”。

NgSysV.Creating a simple Svelte Information System with Google

現(xiàn)在使用數(shù)據(jù)輸入頁面創(chuàng)建一個測試產(chǎn)品文檔,其中包含數(shù)值為“1”的“productNumber”字段和文本值為“Product 1”的“productDetails”字段。

  • 在“Field”輸入框中輸入“productNumber”設(shè)置字段名稱,將“Type”框設(shè)置為“number”,并在“Value”框中輸入“1”(不帶引號字符)。
  • 點擊“添加字段”,在“字段”輸入框中輸入“productDetails”來設(shè)置字段名稱,將“類型”框保留默認(rèn)的“字符串”設(shè)置,然后輸入“產(chǎn)品 1”(不帶引號字符) )在“值”框中
  • 。

現(xiàn)在,首先單擊“自動 ID”按鈕,然后“保存”來簽署文檔,控制臺現(xiàn)在應(yīng)如下所示:

NgSysV.Creating a simple Svelte Information System with Google

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

您現(xiàn)在已經(jīng)完成了,但請注意,控制臺的“面板視圖”允許您編輯或刪除剛剛創(chuàng)建的文檔。如果您的情況一團(tuán)糟,您甚至可以刪除整個集合并重新開始。

3.4 如何使用 Javascript 訪問 Firestore 數(shù)據(jù)庫?

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

Google 提供了一個 Javascript 函數(shù)庫,可讓您讀取和寫入 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

重點關(guān)注以 const productsCollRef = collection(db, "products"); 開頭的部分。這使用 Firestore API 調(diào)用將產(chǎn)品集合中所有文檔的排序副本加載到 State currentProducts 變量中。

首先,從 Firestore 客戶端 API 庫中提取的集合和查詢函數(shù)用于將 Firebase 指向產(chǎn)品集合并定義要在其上運行的查詢。然后通過 getDocs API 調(diào)用啟動查詢。

我不會嘗試描述這一系列 Firestore API 調(diào)用的機(jī)制。將它們視為一段“樣板代碼” - 代碼 - 那種您編寫一次,然后簡單復(fù)制的東西。由于您會發(fā)現(xiàn)需要一個完整的模板庫來涵蓋 Firestore“讀取”、“更新”和“刪除”操作的全部數(shù)組,因此您可能會發(fā)現(xiàn)查看 Post 10.1 - Firestore CRUD 命令模板很有用。如果您想查看 Google 自己的 API 描述,您可以在第 10.1 篇文章的末尾找到這些內(nèi)容的鏈接。

這里的“CRUD”是“創(chuàng)建”、“讀取”、“更新”和“刪除”的縮寫。

getDocs 結(jié)果作為文檔數(shù)組返回,通常稱為“快照”。但請注意,getDocs 函數(shù)調(diào)用前面有一個await 關(guān)鍵字。

這里需要await關(guān)鍵字,因為默認(rèn)情況下,在Javascript中,引用外部數(shù)據(jù)源的指令可能需要不可預(yù)測的時間才能完成異步處理。 “await”關(guān)鍵字本質(zhì)上(盡管這是一個粗略的簡化)使您能夠覆蓋這種安排。當(dāng)您有更多時間時,您可能會發(fā)現(xiàn)查看 Javascript fetch() API 和“await”關(guān)鍵字的簡單指南很有用

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

firebaseConfig 聲明初始化一個對象,其中包含將 Web 應(yīng)用連接到特定 Firebase 項目所需的配置詳細(xì)信息。它包括 Firebase 用于定位和驗證您的應(yīng)用程序的各種密鑰和標(biāo)識符。您可以在 Firebase 控制臺的“項目概覽/項目設(shè)置”中找到您的特定 Web 應(yīng)用的設(shè)置。下面代碼示例中的 firebaseConfig 設(shè)置已被“混淆”,因為它們是 我的 項目所特有的,并且不能輕易傳遞(稍后將詳細(xì)介紹這一點)。嘗試下面的示例代碼時,您需要從您自己的項目中復(fù)制 firebaseConfig 設(shè)置。

初始化 firebaseConfig 后,Web 應(yīng)用程序可以初始化查詢的 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 函數(shù)從何而來。答案是它們是通過代碼塊頂部的三個語句從項目中的位置導(dǎo)入的:

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

這里正在訪問“模塊化庫”來為您的代碼提供函數(shù)。從父模塊中提取命名函數(shù)(例如集合),以滿足代碼中稍后所需的引用。

但這又引出了一個問題“模塊化庫首先如何進(jìn)入我的項目?”答案當(dāng)然是你必須把它們放在那里,而你用來執(zhí)行此操作的工具是忠實的舊 npm。

返回 VSCode svelte-test 終端會話(如有必要,通過幾次 ctrl-C 按鍵終止開發(fā)服務(wù)器)并運行以下指令'

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)備好運行下載 Firestore 數(shù)據(jù)庫集合的代碼。但是,您仍然不知道如何將其嵌入到 Svelte Web 應(yīng)用程序中。那么,進(jìn)入下一個問題...

3.5 如何獲取 Svelte page.svelte 文件以從 Firestore 數(shù)據(jù)庫加載數(shù)據(jù)?

這是一個漫長的過程,但是,堅持下去,你就快完成了。

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

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

如您所知,這將您的產(chǎn)品字段聲明為狀態(tài)變量并將其初始化為空數(shù)組。您現(xiàn)在要做的是將“空”替換為 Firestore 產(chǎn)品集合的內(nèi)容。

不幸的是,正如您所看到的,這涉及異步操作。這讓事情變得有些復(fù)雜,因為 Svelte 不希望任何東西減慢頁面的初始加載速度 - 它很高興看到稍后添加的信息,但是,用戶的第一印象應(yīng)該是即時響應(yīng)。 Svelte 有一個將初始數(shù)據(jù)加載到 page.svelte 文件中的標(biāo)準(zhǔn)安排。事情是這樣的:

首先,創(chuàng)建一個新的 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ù)返回一個具有單個 products 屬性的對象,其值是由 Firestore API 調(diào)用構(gòu)造的 currentProducts 數(shù)組。

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

第一步是將新數(shù)據(jù)(強(qiáng)制名稱)狀態(tài)變量廣告為 page.svelte 的 prop(“property”的縮寫),您可以通過使用導(dǎo)出關(guān)鍵字聲明它來實現(xiàn)此目的,因此:

npm install firebase

在您到達(dá)本系列的第 3.1 篇文章并了解“組件”之前,本系列不會介紹 Props?,F(xiàn)在,將您的 page.svelte 文件視為一個以數(shù)據(jù)作為參數(shù)的函數(shù)。

當(dāng)您現(xiàn)在運行 page.svelte 文件時,SvelteKit 框架會看到帶有保留數(shù)據(jù)關(guān)鍵字的導(dǎo)出 let 數(shù)據(jù)聲明,并認(rèn)為:“啊,我需要運行與此頁面關(guān)聯(lián)的 load() 函數(shù)”。產(chǎn)品數(shù)據(jù)及時返回到 page.svelte 的 data 屬性中,現(xiàn)在,由于這是一個反應(yīng)變量,因此頁面被刷新。

要使現(xiàn)有的“模板”代碼適用于新的安排,您所需要做的就是用 data.products 替換產(chǎn)品引用

page.server.js 文件是您在 Svelte 中第一次看到的“服務(wù)器端”代碼 - 即在服務(wù)器中運行的代碼。到目前為止,您所看到的所有 page.svelte 代碼都在瀏覽器中“客戶端”運行。相比之下,page.server.js 文件要么在 npm run dev 啟動的本地服務(wù)器中運行,要么在部署后在 App Engine 服務(wù)器的 Node.js 環(huán)境中運行。服務(wù)器端代碼比客戶端代碼運行速度更快并且安全。唯一可以查看或更改它的人是您 - 它的所有者。

以下是 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)該位于哪里?目前,“添加另一個產(chǎn)品”

的 on:click 按鈕觸發(fā)的代碼位于您的 page.svelte 文件中。但 Svelte 建議,出于安全和效率原因,數(shù)據(jù)庫更新應(yīng)在 page.server.js 中的 actions() 函數(shù)中“服務(wù)器端”執(zhí)行,該函數(shù)與您已在此處創(chuàng)建的 load() 函數(shù)并行。該功能通過從
“發(fā)布”數(shù)據(jù)來觸發(fā)。

這是新的

的內(nèi)容page.svelte 中的排列應(yīng)如下所示:
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

“actions”函數(shù)返回的對象通過其 <script> 中聲明的 form 屬性可用于 page.svelte 文件。部分。在這里,出口許可證表格;語句與早期使用 data prop 返回 load() 函數(shù)的結(jié)果類似。</script>

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

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

如果您復(fù)制此代碼,請記住再次重置 firestoreConfig 數(shù)據(jù)。如果您在使其工作時遇到問題,還請記住上一篇文章中有關(guān)調(diào)試客戶端代碼的建議,并查看下面的“后記部分”以獲取有關(guān)修復(fù)服務(wù)器端問題的建議。祝你好運!

請注意,page.server.js 中的 FireStore API 導(dǎo)入和數(shù)據(jù)庫配置語句已被賦予“文件范圍”,方法是將它們移出它們所服務(wù)的函數(shù)并將它們重新定位到文件 <script> 的頂部。部分。在更復(fù)雜的項目中,常見的做法是在單獨的 lib 文件夾中配置 db,以使其能夠作為導(dǎo)入更廣泛地共享。</script>

您還會注意到,新代碼刪除了先前出現(xiàn)在舊 page.svelte 文件的 on:click 函數(shù)中的 popupVisible 字段的重置。 Svelte 對表單提交的默認(rèn)操作是重新加載頁面。因此,處理表單后,popupVisible 會重新初始化為 false,“當(dāng)前注冊的產(chǎn)品:”數(shù)組會從更新的 Firestore 產(chǎn)品集合中刷新,并且彈出窗口會消失。作為獎勵,新的產(chǎn)品編號將按照正確的排序順序插入,這得益于產(chǎn)品 getDocs 中的 orderBy("productNumber", "asc") 限定符。

警告:這樣的代碼僅在您的 Firestore 數(shù)據(jù)庫公開時才有效。當(dāng)您添加規(guī)則來限制授權(quán)用戶(即已“登錄”的用戶)訪問集合時,您在此處使用的 Firestore 模板將會失敗。本系列下一部分中的帖子將解釋原因,特別是 Post 3.4 將解釋如何回退到純粹基于客戶端 page.svelte 文件的代碼。然而,由于這將以犧牲安全性和性能為代價,因此我希望您能夠克服這些“小問題”并繼續(xù)開發(fā)客戶端-服務(wù)器代碼。目前,請確保您的數(shù)據(jù)庫規(guī)則類似于:

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. 總結(jié)

我想這篇文章會讓你的耐心達(dá)到極限。如果您已經(jīng)達(dá)到了這一點,并且您的網(wǎng)絡(luò)應(yīng)用程序正常運行,并且您的理智仍然完好無損,請給自己一顆金星 - 您已經(jīng)涵蓋了大多數(shù)核心 Svelte 主題并掌握了基本技能!

話雖如此,還有很多東西需要學(xué)習(xí)。例如,這篇文章沒有描述基本的錯誤處理和表單驗證安排。除此之外,我還想向您介紹 Svelte 路由(即頁面)、布局(頁眉和頁尾)、組件以及圍繞安全性的棘手問題(登錄設(shè)計和數(shù)據(jù)庫規(guī)則)。最后,還有一個有趣的問題,即如何部署 Web 應(yīng)用程序以在網(wǎng)絡(luò)上進(jìn)行實時操作。希望您能繼續(xù)閱讀!

后記:當(dāng)事情出錯時

在您的網(wǎng)絡(luò)應(yīng)用程序中引入“服務(wù)器端”處理可以讓您快速進(jìn)入高級開發(fā)人員聯(lián)盟。這是因為我希望您喜歡在 page.svelte 文件上使用的“Chrome Inspector”技術(shù)不適用于 page.server.js 文件。但一切并沒有失去。以下是高級開發(fā)人員會使用的技術(shù)介紹:

后記(一):在終端會話中調(diào)試服務(wù)器端代碼

雖然 VSCode 編輯器會盡力幫助您生成正確的代碼,但一些基本錯誤只有在 SvelteKit 服務(wù)器嘗試運行您的 Web 應(yīng)用程序時才會變得明顯。此時,您的屏幕可能會顯示“500 - 內(nèi)部錯誤”消息(如果它顯示任何內(nèi)容?。?。瀏覽器在這里無法為您提供太多幫助,因為 page.server.js 文件在這里基本上是不可見的。雖然“源”選項卡的 Page/localhost 存儲層次結(jié)構(gòu)繼續(xù)顯示您的 page.svelte 文件,但它對 page.server.js 沒有任何說明。

但是檢查員知道發(fā)生了錯誤,并且有時可以為您提供有關(guān)其原因的有用線索。菜單欄的右端將顯示一個中間有十字的紅色圖標(biāo)。單擊此按鈕,檢查器控制臺將打開并顯示摘要錯誤詳細(xì)信息。但如果您需要完整詳細(xì)信息,您可以在使用 npm run dev 啟動服務(wù)器的終端會話中找到這些信息。

這里的問題是,您可能會覺得細(xì)節(jié)水平可能完整。每個錯誤都會報告一個“調(diào)用堆棧”,詳細(xì)說明故障點之前的服務(wù)器函數(shù)調(diào)用的完整序列這是由不正確的字段名稱聲明引發(fā)的簡短錯誤(我故意將 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

終端窗口不是查看此類信息的好地方。有時您必須向上或向下滾動才能找到您想要的內(nèi)容,并且信息可能會被其他活動的輸出所掩蓋。盡管如此,這就是你所擁有的一切,所以你需要充分利用它。

但請注意,在上面所示的示例中,錯誤原因已被非常清楚地表明 - 服務(wù)器在 page.server.js 第 18 行第 38 列處遇到了對 db 變量的引用,并且 db 尚未被引用宣布。我認(rèn)為這可以滿足您所需的一切。

終端窗口也可以幫助您解決邏輯問題。過去,“調(diào)試”通常是通過將 console.log messages 消息放置在代碼中的戰(zhàn)略點來進(jìn)行的,在這里使用這種方法很容易。典型的日志消息是:

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

像這樣放置在 page.server.js 文件中的日志消息將顯示在 VSCode 終端窗口中(相比之下,客戶端 page.svelte 代碼中的日志語句將繼續(xù)顯示在 瀏覽器的控制臺窗口)。

后記(b):在 VSCode 調(diào)試器中調(diào)試服務(wù)器端代碼

Console.log 消息可以很好地解決小問題,但現(xiàn)在您希望能夠使用瀏覽器“斷點”調(diào)試工具的復(fù)雜性。不要害怕。您現(xiàn)在可以在 VSCode 中找到它。編輯。這就是你要做的:

  1. 打開要調(diào)試的 page.server.js 文件,并在要檢查的點設(shè)置斷點。您可以通過將鼠標(biāo)懸停在要用作斷點的源代碼行上并單擊出現(xiàn)在其左側(cè)的淡紅點來完成此操作。淡紅點現(xiàn)在變成鮮紅色。
  2. 在 VSCode 命令面板(快捷鍵“ctrl shift p”)中選擇“調(diào)試:附加到節(jié)點進(jìn)程”并獲取工作區(qū)中的項目列表。選擇您要調(diào)試的。
  3. 請注意,您剛剛啟動的終端會話被標(biāo)記為“Javascript 調(diào)試終端”。在該終端中輸入“npm run dev”,并注意通常出現(xiàn)的 Vite 輸出如何包含附加的“調(diào)試器附加”行。另請注意 VSCode 的活動欄如何變成橙色
  4. 現(xiàn)在將鼠標(biāo)懸停在 Vite 顯示的 http://localhost 地址上,然后通過“ctrl-click”啟動 Web 應(yīng)用程序。您的網(wǎng)絡(luò)應(yīng)用程序現(xiàn)在會在彈出窗口中打開。
  5. 您現(xiàn)在會發(fā)現(xiàn) page.server.js 文件的編輯器頁面已成為活動的調(diào)試會話,并在第一個斷點處停止執(zhí)行。編輯器窗口頂部的面板顯示熟悉的“前進(jìn)到下一個斷點”等按鈕,將鼠標(biāo)懸停在字段名稱上將顯示顯示其值的工具提示。和以前一樣,如果調(diào)試會話在變量賦值語句上停止,則只有在前進(jìn)到下一條語句時才會看到結(jié)果。
  6. 通過將鼠標(biāo)懸停在調(diào)試控制面板遠(yuǎn)端的圖標(biāo)上來終止調(diào)試會話。當(dāng)您按“alt”鍵時,這會在“斷開連接”和“停止”操作之間切換。當(dāng)顯示“斷開連接”時單擊此按鈕,橙色的 VSCode 活動欄將再次變?yōu)樗{(lán)色。如果您想恢復(fù)調(diào)試,請再次在調(diào)試終端窗口中“按住 Ctrl 單擊”Web 應(yīng)用程序 URL(該窗口將保持活動狀態(tài),直到您明確“bin”它)

下面的屏幕截圖顯示了這篇文章的 page.server.js 文件在 load() 函數(shù)返回時停止。此時將“鼠標(biāo)懸?!痹诋a(chǎn)品屬性上進(jìn)行返回會顯示讀取 Firestore 產(chǎn)品集合的結(jié)果。

NgSysV.Creating a simple Svelte Information System with Google

有關(guān) VSCode 調(diào)試器中可用功能的完整詳細(xì)信息,請參閱 VSCode 調(diào)試中的文檔

以上是NgSysV.使用 Google&#s Firestore 創(chuàng)建一個簡單的 Svelte 信息系統(tǒng)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

本站聲明
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(lián)系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣服圖片

Undresser.AI Undress

Undresser.AI Undress

人工智能驅(qū)動的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

Clothoff.io

AI脫衣機(jī)

Video Face Swap

Video Face Swap

使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

功能強(qiáng)大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級代碼編輯軟件(SublimeText3)

熱門話題

Laravel 教程
1597
29
PHP教程
1488
72
垃圾收集如何在JavaScript中起作用? 垃圾收集如何在JavaScript中起作用? Jul 04, 2025 am 12:42 AM

JavaScript的垃圾回收機(jī)制通過標(biāo)記-清除算法自動管理內(nèi)存,以減少內(nèi)存泄漏風(fēng)險。引擎從根對象出發(fā)遍歷并標(biāo)記活躍對象,未被標(biāo)記的則被視為垃圾并被清除。例如,當(dāng)對象不再被引用(如將變量設(shè)為null),它將在下一輪回收中被釋放。常見的內(nèi)存泄漏原因包括:①未清除的定時器或事件監(jiān)聽器;②閉包中對外部變量的引用;③全局變量持續(xù)持有大量數(shù)據(jù)。V8引擎通過分代回收、增量標(biāo)記、并行/并發(fā)回收等策略優(yōu)化回收效率,降低主線程阻塞時間。開發(fā)時應(yīng)避免不必要的全局引用、及時解除對象關(guān)聯(lián),以提升性能與穩(wěn)定性。

如何在node.js中提出HTTP請求? 如何在node.js中提出HTTP請求? Jul 13, 2025 am 02:18 AM

在Node.js中發(fā)起HTTP請求有三種常用方式:使用內(nèi)置模塊、axios和node-fetch。1.使用內(nèi)置的http/https模塊無需依賴,適合基礎(chǔ)場景,但需手動處理數(shù)據(jù)拼接和錯誤監(jiān)聽,例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請求;2.axios是基于Promise的第三方庫,語法簡潔且功能強(qiáng)大,支持async/await、自動JSON轉(zhuǎn)換、攔截器等,推薦用于簡化異步請求操作;3.node-fetch提供類似瀏覽器fetch的風(fēng)格,基于Promise且語法簡單

JavaScript數(shù)據(jù)類型:原始與參考 JavaScript數(shù)據(jù)類型:原始與參考 Jul 13, 2025 am 02:43 AM

JavaScript的數(shù)據(jù)類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol,其值不可變且賦值時復(fù)制副本,因此互不影響;引用類型如對象、數(shù)組和函數(shù)存儲的是內(nèi)存地址,指向同一對象的變量會相互影響。判斷類型可用typeof和instanceof,但需注意typeofnull的歷史問題。理解這兩類差異有助于編寫更穩(wěn)定可靠的代碼。

React與Angular vs Vue:哪個JS框架最好? React與Angular vs Vue:哪個JS框架最好? Jul 05, 2025 am 02:24 AM

選哪個JavaScript框架最好?答案是根據(jù)需求選擇最適合的。1.React靈活自由,適合需要高度定制、團(tuán)隊有架構(gòu)能力的中大型項目;2.Angular提供完整解決方案,適合企業(yè)級應(yīng)用和長期維護(hù)的大項目;3.Vue上手簡單,適合中小型項目或快速開發(fā)。此外,是否已有技術(shù)棧、團(tuán)隊規(guī)模、項目生命周期及是否需要SSR也都是選擇框架的重要因素??傊瑳]有絕對最好的框架,適合自己需求的就是最佳選擇。

JavaScript時間對象,某人構(gòu)建了一個eactexe,在Google Chrome上更快的網(wǎng)站等等 JavaScript時間對象,某人構(gòu)建了一個eactexe,在Google Chrome上更快的網(wǎng)站等等 Jul 08, 2025 pm 02:27 PM

JavaScript開發(fā)者們,大家好!歡迎閱讀本周的JavaScript新聞!本周我們將重點關(guān)注:Oracle與Deno的商標(biāo)糾紛、新的JavaScript時間對象獲得瀏覽器支持、GoogleChrome的更新以及一些強(qiáng)大的開發(fā)者工具。讓我們開始吧!Oracle與Deno的商標(biāo)之爭Oracle試圖注冊“JavaScript”商標(biāo)的舉動引發(fā)爭議。Node.js和Deno的創(chuàng)建者RyanDahl已提交請愿書,要求取消該商標(biāo),他認(rèn)為JavaScript是一個開放標(biāo)準(zhǔn),不應(yīng)由Oracle

立即在JavaScript中立即調(diào)用功能表達(dá)式(IIFE) 立即在JavaScript中立即調(diào)用功能表達(dá)式(IIFE) Jul 04, 2025 am 02:42 AM

IIFE(ImmediatelyInvokedFunctionExpression)是一種在定義后立即執(zhí)行的函數(shù)表達(dá)式,用于變量隔離和避免污染全局作用域。它通過將函數(shù)包裹在括號中使其成為表達(dá)式,并緊隨其后的一對括號來調(diào)用,如(function(){/code/})();。其核心用途包括:1.避免變量沖突,防止多個腳本間的命名重復(fù);2.創(chuàng)建私有作用域,使函數(shù)內(nèi)部變量不可見;3.模塊化代碼,便于初始化工作而不暴露過多變量。常見寫法包括帶參數(shù)傳遞的版本和ES6箭頭函數(shù)版本,但需注意:必須使用表達(dá)式、結(jié)

處理諾言:鏈接,錯誤處理和承諾在JavaScript中 處理諾言:鏈接,錯誤處理和承諾在JavaScript中 Jul 08, 2025 am 02:40 AM

Promise是JavaScript中處理異步操作的核心機(jī)制,理解鏈?zhǔn)秸{(diào)用、錯誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。1.鏈?zhǔn)秸{(diào)用通過.then()返回新Promise實現(xiàn)異步流程串聯(lián),每個.then()接收上一步結(jié)果并可返回值或Promise;2.錯誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常,避免靜默失敗,并可在catch中返回默認(rèn)值繼續(xù)流程;3.組合器如Promise.all()(全成功才成功)、Promise.race()(首個完成即返回)和Promise.allSettled()(等待所有完成)

什么是緩存API?如何與服務(wù)人員使用? 什么是緩存API?如何與服務(wù)人員使用? Jul 08, 2025 am 02:43 AM

CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請求的工具,常與ServiceWorker配合使用,以提升網(wǎng)站性能和離線體驗。1.它允許開發(fā)者手動存儲如腳本、樣式表、圖片等資源;2.可根據(jù)請求匹配緩存響應(yīng);3.支持刪除特定緩存或清空整個緩存;4.通過ServiceWorker監(jiān)聽fetch事件實現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略;5.常用于離線支持、加快重復(fù)訪問速度、預(yù)加載關(guān)鍵資源及后臺更新內(nèi)容;6.使用時需注意緩存版本控制、存儲限制及與HTTP緩存機(jī)制的區(qū)別。

See all articles