使用Reactjs向Azure DevOps Rest API发出POST请求 [英] POST Request to Azure DevOps Rest API with Reactjs

问题描述

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

So far I've been able to configure a method in C# that is able to hardcode a new repository in Azure DevOps, but my real goal is to create a user interface that allows the user to specify the request body which consists of the following:

name:"nameOfRepository"， 项目: { id:'projectId' }

name: 'nameOfRepository', project: { id: 'projectId' }

用户将使用新存储库的所需名称填写第一个输入字段.第二个输入字段应使用GET请求，该请求会在下拉列表中显示组织中所有可用的项目. 我也在使用.NET Core 3.0，并且相信这可能也必须使用API​​控制器来完成，但是我不确定.

The user will fill out the first input field with the desired name of the new repository. The second input field should use a GET Request that displays all available projects in your organization in a dropdown list. I'm also using .NET Core 3.0 and believe this probably has to be done with an API controller as well, but I am not certain.

我几乎没有React经验，也不知道我将如何以及在何处指定请求主体和个人访问令牌来创建存储库.我希望能对它的工作方式进行解释，也希望能找到一种可以指导我朝正确方向发展的解决方案.

I have little to no experience with React and have no idea how and where I'm going to specify the request body and personal access token to create the repository. I would appreciate an explanation of how this works and would also appreciate a solution that could guide me in the right direction.

推荐答案

Azure DevOps Rest API文档将使您可以访问该平台.如果您决定完全在React js中进行开发.我想建议您使用入门套件，其中大部分内容将涵盖您对React的所有基本设置.

Azure DevOps Rest API Documentation will give you access to the platform. If you are decided to develop totally in React js. I would like to suggest to take a starter kit, mostly will cover all your basic setup to React.

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

Follow the below steps to get an idea of how you can achieve with react js

1. 需要在天蓝色的Deops中设置OAuth.下面的链接将给出一个想法.在回调页面中，您需要存储访问令牌存储
   https://docs.microsoft.com/zh-CN/azure/devops/integrate/get-started/authentication/oauth?view=azure-devops .如果您有个人身份验证令牌，则不需要

1. Need to set up OAuth in azure deops. The below link will give an idea. In the callback page, you need to store access token store
   https://docs.microsoft.com/en-us/azure/devops/integrate/get-started/authentication/oauth?view=azure-devops. If you have personal auth token this is not required

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

Get all list of repositories using fetch or Axios API Example with 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);
          });

类似地，您可以访问Microsoft提及的所有API REST API文档. 链接

Similarly, you can access all the API's mentioned REST API documentation of Microsoft. link

这篇关于使用Reactjs向Azure DevOps Rest API发出POST请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！