将客户端 Web 部件连接到 SharePoint（Hello World 第 2 部分）

项目
03/21/2023

将 Web 部件连接到 SharePoint 可以访问 SharePoint 中的功能和数据，并为最终用户提供更集成化的体验。

还可以通过观看 Microsoft 365 平台社区 (PnP) YouTube 频道上的此视频来按照以下步骤操作：

注意

本文将继续介绍如何生成上一篇文章生成首个 Web 部件中生成的 Hello World Web 部件。

运行 gulp serve

确保运行 gulp serve 命令。如果尚未运行，请转到 helloworld-webpart 项目目录，并使用下面的命令运行它。

cd helloworld-webpart
gulp serve

获取对页面上下文的访问权限

SharePoint 中的托管工作台允许访问页面上下文，从而公开以下关键属性，例如：

Web 标题
Web 绝对 URL
Web 服务器相对 URL
用户登录名

获取对页面上下文的访问权限的具体步骤

若要访问 Web 部件中的上下文信息，请在代码中使用以下对象：

this.context.pageContext

在Visual Studio Code中，找到&打开的 .\src\webparts\helloWorld\HelloWorldWebPart.ts。

render()在方法中，将innerHTML代码块替换为以下内容：

this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
</section>`;

请注意如何在 HTML 块中使用 ${ } 输出变量的值。使用额外的 HTML div 来显示 this.context.pageContext.web.title。
保存文件。在控制台中运行的 gulp serve 检测此保存操作，并执行以下操作：
- 自动生成和捆绑更新的代码
注意

请并排显示控制台窗口和 Visual Studio Code，以便在 Visual Studio Code 中保存更改时能够实时查看 gulp 自动编译内容。
导航到 SharePoint 网站托管的托管工作台。完整 URL 为 https://your-sharepoint-site-url/_layouts/workbench.aspx。刷新托管的工作台以从重新生成的代码捆绑包中获取更改。

现在，该页面上下文对 Web 部件可用，你应该在 Web 部件中看到 SharePoint 网站标题。

定义列表模型

你需要列表模型才可开始使用 SharePoint 列表数据。要检索列表，你需要两个模型。

在 Visual Studio Code 中，找到并打开.\src\webparts\helloWorld\HelloWorldWebPart.ts。
请在 HelloWorldWebPart 类声明之前立即定义以下接口：
```
export interface ISPLists {
  value: ISPList[];
}

export interface ISPList {
  Title: string;
  Id: string;
}
```
ISPList 接口包含要连接到的 SharePoint 列表信息。

从 SharePoint 网站检索列表

接下来，需要从当前网站检索列表。你将使用 SharePoint REST API 从网站检索列表，位于https://yourtenantprefix.sharepoint.com/_api/web/lists。

SharePoint 框架包含帮助程序类spHttpClient，可用于对 SharePoint 执行 REST API 请求。此类负责添加默认标题、管理写入操作所需的摘要，并收集遥测来帮助服务监视应用程序的性能。

若要使用此帮助程序类，请从 @microsoft/sp-http 模块导入它们

滚动到“HelloWorldWebPart.ts”文件顶部。
找到行 import * as strings from 'HelloWorldWebPartStrings'; 并紧接着添加以下代码：
```
import {
  SPHttpClient,
  SPHttpClientResponse
} from '@microsoft/sp-http';
```

添加以下方法以从HelloWorldWebPart类中的 SharePoint 检索列表。

private _getListData(): Promise<ISPLists> {
  return this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse) => {
      return response.json();
    })
    .catch(() => {});
}

此方法使用spHttpClient帮助程序类，并发出 HTTP GET 请求。它使用 ISPLists 接口，并应用筛选器来不检索隐藏列表。

保存文件。
切换到运行 gulp serve 的控制台窗口，并检查是否有任何错误。若有错误，gulp 会在控制台中报告它们。必须先修复它们，然后再继续操作。

添加新样式

SharePoint 框架使用 Sass 作为 CSS 预处理器，并专门使用 SCSS 语法（与普通 CSS 语法完全兼容）。 Sass 扩展 CSS 语言，并支持使用许多功能（如变量、嵌套规则和内联导入），整理和创建 Web 部件的高效样式表。 SharePoint 框架已附带 SCSS 编译器，该编译器可将 Sass 文件转换为普通 CSS 文件，并提供在开发期间使用的类型化版本。

添加新样式的具体步骤

打开 HelloWorldWebPart.module.scss。这是用于定义样式的 SCSS 文件。

默认情况下，样式的使用范围限定到 Web 部件。可以看到，样式在.helloWorld下进行定义。

在 .links 样式后添加以下样式：

.list {
  color: #333333;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 10;
  padding: 10;
  line-height: 50px;
  list-style-type: none;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.listItem {
  color: #333333;
  vertical-align: center;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none;
  *zoom: 1;
  padding: 9px 28px 3px;
  position: relative;
}

保存该文件。

只要保存此文件，gulp 就会在控制台中重新生成代码。这会在“HelloWorldWebPart.module.scss.ts”文件中生成相应的 Typings。编译到 TypeScript 后，可以在 Web 部件代码中导入并引用这些样式。

提示

生成项目时会动态生成此文件。它使用 .vscode/settings.json 文件从VS Code 的资源管理器视图中隐藏。

可以在 Web 部件的render()方法中看到：
```
<div class="${styles.welcome}">
```

呈现列表信息

打开HelloWorldWebPart类。

注意

SharePoint Framework 提供使用 isServedFromLocalhost 属性或 EnvironmentType 详细信息以检测环境详细信息和主机位置的选项。在这种情况下，我们将重点介绍如何连接到托管联机工作台站点中的数据。

在HelloWorldWebPart类中添加以下专有方法：

private _renderList(items: ISPList[]): void {
  let html: string = '';
  items.forEach((item: ISPList) => {
    html += `
  <ul class="${styles.list}">
    <li class="${styles.listItem}">
      <span class="ms-font-l">${item.Title}</span>
    </li>
  </ul>`;
  });

  if(this.domElement.querySelector('#spListContainer') != null) {
    this.domElement.querySelector('#spListContainer')!.innerHTML = html;
  }
}

此方法使用styles变量引用先前添加的新 CSS 样式，用于呈现从 REST API 接收的列表信息。

保存文件。

在HelloWorldWebPart类中添加以下私有方法，以调用该方法来检索列表数据：

private _renderListAsync(): void {
  this._getListData()
    .then((response) => {
      this._renderList(response.value);
    })
    .catch(() => {});
}

保存文件。

检索列表数据

转到render()方法，并将此方法内的代码替换为以下代码：

this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
  <div id="spListContainer" />
</section>`;

this._renderListAsync();

保存文件。

请注意，在 gulp serve 控制台窗口中它会重新构建代码。请确保你看不到任何错误。
如果你使用的是 SharePoint 框架 v1.12.1 或更早版本，例如，如果你在本地使用 SharePoint Server，请切换到本地工作台并添加 HelloWorld Web 部件。

应该会看到返回的列表数据。
现在，你可以使服务器停止运行。切换到控制台，再停止运行 gulp serve 。选择 CTRL+C，终止 gulp 任务。

后续步骤

祝贺你成功将 Web 部件连接到 SharePoint 列表数据！

下一篇文章将 Web 部件部署到 SharePoint 页面时，可以继续构建Hello World Web 部件。学习如何在 SharePoint 页面中部署和预览 HelloWorld Web 部件。