使用Reactjs向Azure DevOps Rest API发布请求

使用Reactjs向Azure DevOps Rest API发布请求,reactjs,azure-devops-rest-api,Reactjs,Azure Devops Rest Api,到目前为止,我已经能够在C#中配置一个方法,该方法能够在Azure DevOps中硬编码一个新的存储库,但我真正的目标是创建一个用户界面,允许用户指定由以下内容组成的请求主体: 名称:'nameOfRepository', 项目:{ id:'投影' } 用户将用所需的新存储库名称填写第一个输入字段。第二个输入字段应使用GET请求,该请求在下拉列表中显示组织中的所有可用项目。 我也在使用.NETCore3.0,我相信这可能也需要一个API控制器,但我不确定 我对React几乎没有经验,也不知道如何

到目前为止,我已经能够在C#中配置一个方法,该方法能够在Azure DevOps中硬编码一个新的存储库,但我真正的目标是创建一个用户界面,允许用户指定由以下内容组成的请求主体:

名称:'nameOfRepository', 项目:{ id:'投影' }

用户将用所需的新存储库名称填写第一个输入字段。第二个输入字段应使用GET请求,该请求在下拉列表中显示组织中的所有可用项目。 我也在使用.NETCore3.0,我相信这可能也需要一个API控制器,但我不确定


我对React几乎没有经验,也不知道如何以及在何处指定请求主体和个人访问令牌来创建存储库。我希望您能解释一下这是如何工作的,也希望您能提供一个解决方案来指导我正确的方向。

Azure DevOps Rest API文档将为您提供平台访问权限。如果你决定完全在React js中开发。我想建议你带一个初学者工具包,主要包括你所有的基本反应设置

按照以下步骤了解如何使用react js实现

  • 需要在azure deops中设置OAuth。下面的链接将给出一个想法。在回调页面中,您需要存储访问令牌存储
    . 如果您有个人身份验证令牌,则不需要此令牌

  • 使用fetch或Axios API获取所有存储库列表 Axios的示例:

    const headers = {
           'Content-Type': 'application/json',
            'Authorization': 'bearer token' or 'basic personalaccesstoken'
         }
    
    axios.get('https://dev.azure.com/{organization}/{project}/_apis/git/repositories', {
            headers: headers,
            params: {
            'api-version':'5.1'
          }
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    
  • 使用react表单捕获输入值,并在表单提交时根据存储库进行验证,如果是新的,则调用Axios或fetch post方法来创建新的存储库
  • Axios示例

      const headers = {
          'Content-Type': 'application/json',
          'Authorization': 'bearer token'
        }
        const data = {
        name: '' 
        parentRepository: {id: '', ....}
        project: {id: '', ...}
        }
         axios.post('https://dev.azure.com/{organization}/{project}/_apis/git/repositories', JSON.stringify(data), 
         {
                headers: headers,
                params: {
                'api-version':'5.1'
              }
              })
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });
    

    同样,您可以访问所有API提到的微软RESTAPI文档

    我不明白上面的代码应该如何使用,我觉得有很多缺少的元素让代码开始工作。。。即使安装了react和axios,将此代码粘贴到新的js文件中也会出现许多错误。您在第二个代码示例中展示的Axios示例;我如何使这个代码工作?对parentRepository的需求是什么?请再读一遍我的问题。这是一个概述或入门指南。我没有提供确切的代码,因为我不知道您在内部使用的是什么模块,也不知道您的项目的完整的端到端概述。我提供了一个使用最常用的React JS REST API框架的解决方案。以及需要传递哪些参数,以及如何从azure获取参数。您需要理解并替换占位符等。。并根据您的要求进行修改。我理解这是一项具有挑战性的任务。我可能会引导你实现这一目标。我明白了。我正在尝试创建一个方法,通过React js和Azure DevOps REST API在Azure DevOps中创建一个新的存储库。用户将有2个输入字段需要填写;第一个是一个文本字段,它们在其中指定新存储库的名称。第二个输入字段是下拉菜单或动态输入字段,其中包含给定组织中的所有可用项目。(基本上是一个GET请求,它收集组织中的所有项目,并允许用户选择在哪个项目中创建存储库。输入将通过POST方法提交到API。这是否比我原来的问题更好地解释了这一点?