npm 包 @pnp/sp 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

当我们开发 SharePoint Online 的前端应用时，经常需要与 SharePoint Online 中的数据进行交互。微软提供了 REST API 和 Graph API 并支持使用 SharePoint Add-in 做身份验证。但由于 SharePoint Online 的数据结构较为复杂，使用 REST API 和 Graph API 时常常需要编写大量的代码。此时，使用 @pnp/sp 这个 npm 包可以极大地简化我们的开发过程。

@pnp/sp 是一个基于 Promise 的库，提供了一些易于使用的回调函数和链式调用，用于操作 SharePoint 中的数据（列表、文件、文件夹等）。

本文将介绍 @pnp/sp 的基本用法，同时会探讨在实际开发中可以如何应用该组件，以更高效地进行开发。

安装

在使用 @pnp/sp 之前，我们需要先安装它。我们可以通过以下命令将 @pnp/sp 安装到我们的项目中：

npm install @pnp/sp --save

基本用法

初始化

在使用 @pnp/sp 之前，我们需要先初始化它：

import { sp } from "@pnp/sp";

sp.setup({
  sp: {
    baseUrl: "https://yourtenant.sharepoint.com/sites/yoursite",
  },
});

其中，我们需要提供 SharePoint Online 站点的 url（baseUrl）和身份验证信息（如使用 SharePoint Add-in 做身份验证时我们需要提供 add-in 的客户 ID 和客户密钥）。由于我们一般使用现成的 SharePoint Add-in 做身份验证，所以这篇文章不再涉及身份验证的内容。

查询 SharePoint 列表

在 @pnp/sp 中，我们使用 sp.web.lists.getByTitle 方法查询 SharePoint 中的列表：

import { sp } from "@pnp/sp";

sp.web.lists.getByTitle("Announcements")
  .get()
  .then((list) => {
    console.log(list);
  });

在这个例子中，我们通过列表标题 "Announcements" 查询了列表信息，并通过 .get() 方法获取到了该列表中的所有项。获取到的项是一个 JSON 对象，在控制台中打印出来会类似这样：

-- -------------------- ---- -------
-
  -------------------- -----
  --------------- ----
  ----------- --
  ---------------------- ------
  ---------- -----------------------
  -------------- ---
  ---------------------- -----
  -------------------- -----
  ----------------------- -----
  ---------------------- ------
  ------------------- ------
  ------------------- ------
  ----------------- --------------------------------------------
  ---------------- ------
  --------------------------- -----
  --------- ------
  ----- ---------------------------------------
  ----------- ---------------------------------------
  ------------ --
  ---------------------- -----------------------
  ----------------------- -----------------------
  ----------------------------- --------------------------------
  -------------------- --
  ------------------------------ --
  ------------------- ------
  ---------- ------
  ---------------- -
    ------------- ------------------
    -------------------- -----------------
  --
  ------------- -
    --------- -----
    -------------------- -------------------------------------
  --
  ------------ ----------
  --------------------------------- -----
  -------- ----------------
  ------- ---------
-

查询 SharePoint 列表项

查询列表项也是 @pnp/sp 中经常使用的功能。我们可以使用 sp.web.lists.getByTitle("Announcements").items 方法查询该列表中的所有项：

import { sp } from "@pnp/sp";

sp.web.lists.getByTitle("Announcements")
  .items.select("Title", "Body")
  .get()
  .then((items) => {
    console.log(items);
  });

在这个例子中，我们通过 .select() 方法指定了要查询的属性，这样就可以只获取到这些属性的值。通过 .get() 方法获取到的项是一个数组，每一个对象代表一个列表项。我们可以在控制台中打印出来看一下。

添加 SharePoint 列表项

如果我们需要在 SharePoint 列表中添加一条新的数据，可以使用 sp.web.lists.getByTitle("Announcements").items.add 方法：

-- -------------------- ---- -------
------ - -- - ---- ----------

----------------------------------------
  ------------
    ------ ---- --------------
    ----- ----- -- - --- --------------
  --
  -------------- -- -
    ----------------- ------ -----------------
  ---

在这个例子中，我们调用了 .add() 方法来添加一条新的数据。.add() 方法需要传入一个对象，这个对象代表了我们要添加的数据。当添加成功后，我们可以在 .then() 回调函数中获取到新添加数据的相关信息。

更新 SharePoint 列表项

如果我们需要更新 SharePoint 列表中的一条数据，可以使用 sp.web.lists.getByTitle("Announcements").items.getById 方法获取要更新的项，然后再使用 .update() 方法进行修改：

-- -------------------- ---- -------
------ - -- - ---- ----------

----------------------------------------
  -----------------
  ---------
    ------ ------------- ---------
    ----- ----- -- - ------- --------------
  --
  -------- -- -
    ----------------- -----------
  ---

在这个例子中，我们使用了 .getById() 方法来获取 ID 为 1 的项，然后使用 .update() 方法来修改这个项的标题和正文。当修改成功后，我们可以在 .then() 回调函数中获取到成功的信息。

删除 SharePoint 列表项

如果我们需要删除 SharePoint 列表中的一项，可以使用 sp.web.lists.getByTitle("Announcements").items.getById 方法获取到要删除的项，然后使用 .delete() 方法进行删除：

import { sp } from "@pnp/sp";

sp.web.lists.getByTitle("Announcements")
  .items.getById(1)
  .delete()
  .then(() => {
    console.log("Item deleted.");
  });

在这个例子中，我们使用了 .getById() 方法来获取 ID 为 1 的项，然后使用 .delete() 方法进行删除。当删除成功后，我们可以在 .then() 回调函数中获取到成功的信息。

应用实例

动态创建列表

在实际开发中，我们可能需要在 SharePoint 中动态创建一些新的列表。我们可以使用 sp.web.lists.add 方法来实现这个功能：

import { sp } from "@pnp/sp";

sp.web.lists.add("New List", "A new list created using @pnp/sp", 100, true)
  .then((result) => {
    console.log(`New list created: ${result.data.Title}`);
  });

在这个例子中，我们使用 sp.web.lists.add 方法来创建一个新的列表。sp.web.lists.add 方法需要传入四个参数：

列表的标题
列表的描述
列表的模板类型（100 表示自定义列表）
列表是否启用版本历史

按照日期筛选列表项

在实际的开发中，我们可能需要按照一定的条件进行筛选。例如，我们需要从 SharePoint 列表中获取所有在某个日期之前创建的数据。我们可以使用 @pnp/sp 中的日期筛选功能来实现这个功能：

-- -------------------- ---- -------
------ - --- ------- - ---- ----------

----- ----- - --- -------
----- -------- - -------------- --- -------

----------------------------------------------
  ---------------- -- ------------------------ --- ------- -- -----------------------------
  ---------------- -------
  ------
  ------------- -- -
    -------------------
  ---

在这个例子中，我们使用 sp.dateAdd 方法获得了一周前的时间（lastWeek），然后使用 .filter() 方法筛选 SharePoint 列表中创建日期在这一周内的所有数据。筛选条件中，第一个 Created 表示当前日期，使用 le 表示小于等于；第二个 Created 表示一周前的日期，使用 ge 表示大于等于。最后我们再通过 .select() 方法指定要查询的属性。

结语

@pnp/sp 是一个非常实用的 npm 包，它可以帮助我们更加方便地操作 SharePoint Online 中的数据。在这篇文章中，我们通过一些示例代码介绍了其基本用法，并展示了 @pnp/sp 在实际开发中的应用实例。当然，@pnp/sp 不仅限于这些功能，更多的功能可以参考其官方文档。希望本文对大家有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5efb3ad7403f2923b035bab3