SharePoint托管工作台实现Rest接口

2021-11-08 14:06:48 浏览数 (2)

SharePoint本地工作台跟托管工作台

先说结论:SharePoint本地工作台是测试基本的功能能不能用,而托管工作台适用于复杂的功能,尤其是需要用到SharePoint站点里面的数据的情况的.

本地工作台与 SharePoint 托管工作台

本地工作台是测试 SharePoint 框架组件的绝佳选择，但与 SharePoint 托管工作台相比，它有很大的局限性。SharePoint 托管工作台在真实的 SharePoint 环境中运行，这意味着组件可以使用 SharePoint API，包括 SharePoint REST API。

本地工作台没有真正的 SharePoint 上下文，这意味着它没有安全上下文并且无法通过身份验证来调用 SharePoint API，包括 SharePoint REST API。如果您的组件调用 SharePoint REST API，则在本地工作台中运行它时会失败。

1.如何启动本地工作台

启动本地的工作台很简单,首先按照前文创建SharePoint的文件,然后使用命令行运行添加信任证书

代码语言：javascript复制
gulp trust-dev-cert
复制代码

启动服务

代码语言：javascript复制
gulp serve
复制代码

这样就启动了本地工作台 如果我说如果没有启动但会打开浏览器的话(几率很低,是因为你的端口占用 我的数据库的端口5432恰好与SharePoint启动端口一致遇到过这个问题 只需要改config文件就可以解决)

本地工作台效果

2.如何启动托管工作台

启动托管工作台的方式有两种,但还是要跟之前的步骤一样只不过确保输入您有权访问的 SharePoint Online 网站集的正确 URL

gulp serve 启动服务 此时就会打开默认的工作台了

第一种修改配置文件

代码语言：javascript复制
//修改config里面的server.config文件
"initialPage": "https://localhost:5432/workbench",
//修改为 你所拥有的SharePoint站点  后缀/_layouts/workbench.aspx
"initialPage": "https://{你自己的的SharePoint站点}/_layouts/15/workbench.aspx",
复制代码

第二种

直接打开你所拥有的的SharePoint的站点加上后缀_layouts/15/workbench.aspx,需要开始gulp serve服务

托管工作台

看起来是几乎一样,但是一个只是演示,另一个却可以调用 SharePoint的上下文内容.

3.实践

利用托管工作台实现SharePoint Rest接口

现在自己的SharePoint的页面上添加一个名为Countries的list页面

就像这样

生成SharePoint项目 但是最后选的时候要使用React框架

就像前面说的 修改配置使它能够默认的打开托管工作台.

在src->新建 models文件夹 其中新建文件ICountryListItem.ts

这步的目的是为SharePoint list 创建接口

代码语言：javascript复制
export interface ICountryListItem {
  Id: string;
  Title: string;
}
复制代码

创建按钮点击实践的类型 models->新建文件 ButtonClickedCallback.ts

代码语言：javascript复制
export type ButtonClickedCallback = () => void;
复制代码

models->新建index.ts

代码语言：javascript复制
export * from './ButtonClickedCallback';
export * from './ICountryListItem';
复制代码

修改文件ISpFxHttpClientDemoProps.ts

把前面创建的导入进来

代码语言：javascript复制
import {
  ButtonClickedCallback,
  ICountryListItem
} from '../../../models';
复制代码

更新原来的react接口

代码语言：javascript复制
export interface ISpFxHttpClientDemoProps {
  spListItems: ICountryListItem[];
  onGetListItems?: ButtonClickedCallback;
}
复制代码

在SpFxHttpClientDemo.module.scss.文件添加样式

代码语言：javascript复制
.list {
  color: $ms-color-themeDark;
  background-color: $ms-color-themeLight;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 0 0;
  padding: 10px 0 100px 0;
  line-height: 50px;
  list-style-type: none;
}

.item {
  color: $ms-color-themeDark;
  background-color: $ms-color-themeLighterAlt;
  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: 0 15px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
复制代码

在SpFxHttpClientDemo.tsx.下的render方法添加以下代码

代码语言：javascript复制
<div className={ styles.container }>
    <div className={ styles.row }>
      <div className={ styles.column }>
        <p className={ styles.title }>SharePoint Content!</p>
        <a href="#" className={ styles.button } onClick={ this.onGetListItemsClicked }>
          <span className={ styles.label }>Get Counties</span>
        </a>
      </div>
    </div>

    <div className={ styles.row }>
      <ul className={ styles.list }>
        { this.props.spListItems &&
          this.props.spListItems.map((list) =>
            <li key={list.Id} className={styles.item}>
              <strong>Id:</strong> {list.Id}, <strong>Title:</strong> {list.Title}
            </li>
          )
        }
      </ul>
    </div>

  </div>
复制代码

在与你项目名一样的类中添加方法

代码语言：javascript复制
private onGetListItemsClicked = (event: React.MouseEvent<HTMLAnchorElement>): void => {
  event.preventDefault();

  this.props.onGetListItems();
}
复制代码

从SharePoint REST API检索数据

SpFxHttpClientDemoWebPart.ts

导入类

代码语言：javascript复制
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { ICountryListItem } from '../../models';


//添加私有成员
private _countries: ICountryListItem[] = [];
description ->替换成
spListItems: this._countries,
onGetListItems: this._onGetListItems


//添加方法
private _onGetListItems = (): void => {
  this._getListItems()
    .then(response => {
      this._countries = response;
      this.render();
    });
}
//该方法使用SharePoint REST API从Countries列表中检索列表项。它将使用spHttpClient对象来查询SharePoint REST API。当它接收到响应时，它调用response.json()
private _getListItems(): Promise<ICountryListItem[]> {
  return this.context.spHttpClient.get(
    this.context.pageContext.web.absoluteUrl   `/_api/web/lists/getbytitle('Countries')/items?$select=Id,Title`,
    SPHttpClient.configurations.v1)
    .then(response => {
      return response.json();
    })
    .then(jsonResponse => {
      return jsonResponse.value;
    }) as Promise<ICountryListItem[]>;
}
复制代码

4.测试功能

找到文件所在目录

代码语言：javascript复制
gulp trust-dev-cert
复制代码
代码语言：javascript复制
gulp serve
复制代码

最终结果

最终成品会跟我的图有差异,因为咱们只实现了一个功能 拿到数据,所以你是只有一个getButton的.

.net api typescript apache gulp

0 人点赞