SharePoint开发 -- Web Part Debug

1,509 阅读2分钟

目前有个需求完成SharePoint List 的CURD , 根据以往的经验推测使用web part 去做.

熟练地完成环境搭建,项目生成可以参考

遇到问题 请求在network不显示 列表某些项目拿不到值

我遇到了一个问题,我可以发送请求到SharePoint 站点,但是在Chrome 的控制台上虽然能看到我发送的请求,但是只有400的请求,也就是我发送的是错误的请求才可以在控制台显示出来.其他的请求在network上不显示. 我强烈怀疑,请求是通过SharePoint client发送的所以在Chrome network看不到(存疑这点,有可能是我的方式不对).

尝试解决方案

找到SharePoint 文档去找正确的API docs.microsoft.com/en-us/share…

 private _getListItems(): Promise<ICountryListItem[]> {
    return this.context.spHttpClient.get(
      //this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getByTitle('Canvas-test')/items`,
      this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('Canvas-test')/items`,
      SPHttpClient.configurations.v1)
      .then(response => {
        return response.json();
      })
      .then(jsonResponse => {
        return jsonResponse.value;
      }) as Promise<ICountryListItem[]>;
  }

确认使用官方的API 开始Debug

Debug

在VSCode中打开项目,找到终端 使用命令

gulp serve --nobrowser

命令很明显 不打开浏览器去启动服务, 找到你想打断点的地方, F5 启动调试

注意事项

如果你的项目,比如我这个用到了SharePoint站点里面的数据,那就需要使用托管工作台,可以参考这篇文章SharePoint托管工作台实现Rest接口 实现异步增删改查

image.png

Debug可以看到我们的API是返回全部数据的JSON 响应的

找到原因

image.png 原列表如上图所示,没有()的直接就能拿到,而类似于Name(issuer)带括号的拿不到,因为名称没有对应上,返回的JSON显示 叫这个名字 Name_x0028_issuer_x0029_
此时想到ASCll码表 查询 刚好是() 更改一下名字开始测试

image.png

完美拿到

经验教训

Debug真好用,请求看到数据,比去猜找问题要快得多. 没有特殊字符的能拿到,就不要怀疑这个方式,有特殊字符,优先想到ASCII的问题.还是没有经验,绕了远路,解决问题,不当笨蛋.