SharePoint托管工作台实现Rest接口
SharePoint本地工作台跟托管工作台
先说结论:SharePoint本地工作台是测试基本的功能能不能用,而托管工作台适用于复杂的功能,尤其是需要用到SharePoint站点里面的数据的情况的.
本地工作台与 SharePoint 托管工作台
本地工作台是测试 SharePoint 框架组件的绝佳选择，但与 SharePoint 托管工作台相比，它有很大的局限性。SharePoint 托管工作台在真实的 SharePoint 环境中运行，这意味着组件可以使用 SharePoint API，包括 SharePoint REST API。
本地工作台没有真正的 SharePoint 上下文，这意味着它没有安全上下文并且无法通过身份验证来调用 SharePoint API，包括 SharePoint REST API。如果您的组件调用 SharePoint REST API，则在本地工作台中运行它时会失败。
1.如何启动本地工作台
启动本地的工作台很简单,首先按照前文创建SharePoint的文件,然后使用命令行运行添加信任证书
gulp trust-dev-cert 复制代码
启动服务
gulp serve 复制代码
这样就启动了本地工作台 如果我说如果没有启动但会打开浏览器的话(几率很低,是因为你的端口占用 我的数据库的端口5432恰好与SharePoint启动端口一致遇到过这个问题 只需要改config文件就可以解决)
本地工作台效果
2.如何启动托管工作台
启动托管工作台的方式有两种,但还是要跟之前的步骤一样只不过确保输入您有权访问的 SharePoint Online 网站集的正确 URL
gulp serve 启动服务 此时就会打开默认的工作台了
第一种修改配置文件
//修改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 创建接口
export interface ICountryListItem { Id: string; Title: string; } 复制代码创建按钮点击实践的类型 models->新建文件 ButtonClickedCallback.ts
export type ButtonClickedCallback = () => void; 复制代码
models->新建index.ts
export * from './ButtonClickedCallback'; export * from './ICountryListItem'; 复制代码
修改文件ISpFxHttpClientDemoProps.ts
把前面创建的导入进来
import { ButtonClickedCallback, ICountryListItem } from '../../../models'; 复制代码更新原来的react接口
export interface ISpFxHttpClientDemoProps { spListItems: ICountryListItem[]; onGetListItems?: ButtonClickedCallback; } 复制代码在SpFxHttpClientDemo.module.scss.文件添加样式
.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方法添加以下代码
<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> 复制代码在与你项目名一样的类中添加方法
private onGetListItemsClicked = (event: React.MouseEvent<HTMLAnchorElement>): void => { event.preventDefault(); this.props.onGetListItems(); } 复制代码从SharePoint REST API检索数据
SpFxHttpClientDemoWebPart.ts
导入类
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.测试功能
找到文件所在目录
gulp trust-dev-cert 复制代码
gulp serve 复制代码
最终结果
最终成品会跟我的图有差异,因为咱们只实现了一个功能 拿到数据,所以你是只有一个getButton的.
作者：只想要周末双休
链接：https://juejin.cn/post/7028033014714236936