在 SharePoint 中使用 REST API 实现传统页面与现代页面的通信

## 章节一：介绍SharePoint中的传统页面与现代页面

### 1.1 传统页面与现代页面概述
传统页面是指基于ASPX页面的经典SharePoint页面，而现代页面是指基于SharePoint Framework (SPFx) 构建的全新页面。传统页面与现代页面在技术架构、功能特性和用户体验等方面存在显著差异。

### 1.2 SharePoint中页面的演变
SharePoint从传统的ASPX页面演进到了基于SPFx的现代页面，演变过程中伴随着技术栈的更新、开发模式的变化以及用户体验的提升。

### 1.3 传统页面与现代页面的特点比较
传统页面采用ASP.NET Web Forms开发，功能强大但开发复杂，而现代页面使用SPFx技术，具有轻量级、响应式和易于定制的特点。在用户体验、移动端适配、扩展性等方面有明显优势。

### 章节二：理解SharePoint中的REST API

在本章中，我们将深入探讨SharePoint中的REST API，包括其概念、用途以及与传统页面与现代页面的关系。让我们一起来详细了解吧。
### 章节三：使用REST API在传统页面中获取现代页面数据

在本章节中，我们将详细介绍如何使用REST API在传统页面中获取现代页面的数据。通过这种方式，我们可以实现传统页面与现代页面之间的数据交互，为用户提供更加丰富和灵活的页面展示和交互体验。

#### 3.1 在传统页面中集成REST API

首先，我们需要在传统页面中集成REST API。在传统页面中，可以通过JavaScript等前端技术来调用SharePoint提供的REST API。我们可以在传统页面的代码中引入相关的JavaScript库，并编写相应的代码来发起REST API请求。

// 引入jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

// 使用jQuery发起REST API请求
$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('ModernPageList')/items",
    method: "GET",
    headers: {
        "Accept": "application/json; odata=verbose"
    },
    success: function (data) {
        // 成功获取数据后的处理逻辑
        console.log(data);
    },
    error: function (error) {
        // 获取数据失败后的处理逻辑
        console.log(JSON.stringify(error));
    }
});

#### 3.2 通过REST API获取现代页面的数据

通过上述的REST API请求，我们可以获取现代页面中指定列表的数据。在这个例子中，我们使用了REST API的GET请求来获取名为"ModernPageList"的列表中的数据。

#### 3.3 处理获取到的数据在传统页面中的展示

在成功获取到现代页面的数据之后，我们可以通过JavaScript等前端技术对数据进行处理和展示。例如，可以将获取到的数据渲染到传统页面的指定位置，或者根据数据动态生成页面内容，从而实现传统页面对现代页面数据的展示和利用。

## 章节四：使用REST API在现代页面中获取传统页面数据

在这一章节中，我们将探讨如何使用REST API在现代页面中获取传统页面的数据。首先，我们将介绍在现代页面中集成REST API的步骤，然后演示如何通过REST API获取传统页面的数据，并最后展示如何处理获取到的数据在现代页面中进行展示。

### 4.1 在现代页面中集成REST API

由于现代页面是基于JavaScript开发的，我们可以使用JavaScript中的`fetch`或`axios`等工具进行REST API的调用。

首先，在我们的现代页面中需要引入`@pnp/sp`库，这是一个流行的用于操作SharePoint的JavaScript库。在页面中，我们可以通过以下代码引入该库：

import { sp } from "@pnp/