在前端开发的过程中，我们经常需要使用到数据库。而谷歌提供的云端数据库 Firestore，可以方便地在前端应用中管理数据。这篇文章将向你介绍 npm 包 @google-cloud/firestore，并提供使用教程和示例代码。
@google-cloud/firestore 简介
@google-cloud/firestore 是一个官方提供的用于操作 Firestore 的 npm 包。它提供了多种方法用于读取、写入、监听数据变化以及执行查询等操作，使得我们可以在前端应用中方便地使用 Firestore。首先，我们需要在项目目录下安装该 npm 包：
npm install --save @google-cloud/firestore
安装完成后，我们可以在 JavaScript 中引入它：
const { Firestore } = require('@google-cloud/firestore');下面，我们来学习一些常用的用法。
连接数据库
在使用 @google-cloud/firestore 之前，我们需要首先连接到 Firestore 数据库。要连接数据库，我们需要提供一个 JSON 文件，其中包含 Firestore 数据库的访问凭证。该文件通常被称为“服务帐号密钥”，你可以从 Google Cloud 控制台中获取该文件。
将服务帐号密钥文件下载到项目目录中，并将其引入到代码中：
-- -------------------- ---- -------
----- - --------- - - -----------------------------------
-- ----------
----- -------------- - --------------------------------------------
-- --- --------- ---
----- --------- - --- -----------
---------- --------------------------
------------ -
------------- ----------------------------
------------ ---------------------------
--
---在这个例子中，我们使用引入的服务帐号密钥文件进行客户端初始化，并创建一个名为 firestore 的对象，该对象包含所有与数据库交互的方法。
读取数据
读取数据是我们经常需要做的操作之一。使用 @google-cloud/firestore，你可以查询整个集合或特定文档的数据。
读取整个集合
下面是一个查询整个集合的例子：
-- -------------------- ---- -------
----- - --------- - - -----------------------------------
----- -------------- - --------------------------------------------
----- --------- - --- -----------
---------- --------------------------
------------ -
------------- ----------------------------
------------ ---------------------------
--
---
-- ------
------------------------------------
---------------- -- -
---------------------- -- -
------------------- ----- ------------
---
--
------------ -- -
-------------------- ------- ----------- -----
---在这个例子中，我们使用 collection() 方法获取名为 cities 的集合，然后使用 get() 方法读取整个集合。get() 方法返回一个 Promise，该 Promise 包含查询结果的快照。我们可以使用 forEach() 方法遍历快照中的所有文档，并打印出它们的 ID 和数据。
读取特定文档
要查询特定文档，我们可以使用 doc() 方法。这个方法接收一个文档 ID 作为参数，并返回一个具有与该文档对应数据的 DocumentReference 对象。
-- -------------------- ---- -------
-- ------
----------------------------------------------
----------- -- -
-- ------------ -
--------------------- ------- ------------
- ---- -
--------------- ---- ------------
-
--
------------ -- -
-------------------- ------- ---------- -----
---在这个例子中，我们使用 doc() 方法获取 ID 为 LA 的文档，然后使用 get() 方法获取该文档的数据。get() 方法也返回一个 Promise，该 Promise 包含查询结果的快照。给定文档存在时，该实例的 exists 属性为 true。
写入数据
使用 @google-cloud/firestore，我们可以向集合添加文档或者更新文档的数据。
添加文档
要添加文档，我们可以使用集合的 add() 方法。该方法接收一个对象作为参数，表示要添加到集合中的文档。该方法返回一个 Promise，该 Promise 包含对新添加的文档的描述。
-- -------------------- ---- -------
-- ----
------------------------------------
----- --------
-------- --------
----------- ---------
--
-------------- -- -
--------------------- ------- ---- ----- -----------
--
------------ -- -
-------------------- ------ ---------- -----
---在这个例子中，我们使用 add() 方法向名为 cities 的集合添加一个文档，该文档包含字段 name、country 和 population。add() 方法返回一个 Promise，该 Promise 包含对新添加的文档的描述。
更新文档
要更新文档，我们需要首先获取要更新的文档的引用，然后使用引用的 update() 方法编辑它。
-- -------------------- ---- -------
-- ----
----- ----- - -----------------------------------------
--------------
----- ---- ---------
------ -------------
-------- ------
----------- --------
--
-------- -- -
--------------------- ------- ---------------
--
------------ -- -
-------------------- -------- ---------- -----
---在这个例子中，我们使用 collection() 方法获取名为 cities 的集合，然后使用 doc() 方法获取 ID 为 LA 的文档的引用。接着，我们使用 update() 方法更新文档的 name、state、country 和 population 字段。
监听数据变化
本文中最后一个用例是监听集合中特定文档的数据变化。我们可以使用 @google-cloud/firestore 的 onSnapshot() 方法来实现。
// 监听文档变化
firestore.collection('cities').doc('LA')
.onSnapshot((doc) => {
console.log('Current data:', doc.data());
});在这个例子中，我们使用 collection() 和 doc() 方法找到我们要监听的文档。然后，我们使用 onSnapshot() 方法监听文档的变化。onSnapshot() 方法接收一个回调函数，并在该文档发生变化时调用该函数。
用途和学习意义
@google-cloud/firestore 帮助我们在前端应用中快速地读取、写入、监听数据变化和执行查询等 Firestore 操作，从而让我们集中精力处理应用的业务逻辑。它不仅在社区中广受欢迎，而且得到了谷歌官方的认可。
在学习 @google-cloud/firestore 的同时，我们也学会了解一种在现代应用中使用 Firebase 的方式。这不仅仅是 Firestore 同时还包括实时数据库、云存储等功能。这些都是为了使得我们快速的开发和部署 Web 以及移动应用。
示例代码
-- -------------------- ---- -------
----- - --------- - - -----------------------------------
----- -------------- - --------------------------------------------
----- --------- - --- -----------
---------- --------------------------
------------ -
------------- ----------------------------
------------ ---------------------------
--
---
-- ------
------------------------------------
---------------- -- -
---------------------- -- -
------------------- ----- ------------
---
--
------------ -- -
-------------------- ------- ----------- -----
---
-- ------
----------------------------------------------
----------- -- -
-- ------------ -
--------------------- ------- ------------
- ---- -
--------------- ---- ------------
-
--
------------ -- -
-------------------- ------- ---------- -----
---
-- ----
------------------------------------
----- --------
-------- --------
----------- ---------
--
-------------- -- -
--------------------- ------- ---- ----- -----------
--
------------ -- -
-------------------- ------ ---------- -----
---
-- ----
----- ----- - -----------------------------------------
--------------
----- ---- ---------
------ -------------
-------- ------
----------- --------
--
-------- -- -
--------------------- ------- ---------------
--
------------ -- -
-------------------- -------- ---------- -----
---
-- ------
----------------------------------------
----------------- -- -
-------------------- ------- ------------
---以上就是 @google-cloud/firestore 的使用教程和示例代码。希望文章内容可以对你学习前端开发、Firestore 应用开发，以及使用 @google-cloud/firestore npm 包有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/129660