10

当您访问 GitHub 时,在问题下,它会将所有未解决的问题作为 HTML 页面拉出。我们希望实现一个仪表板,显示存储库中的所有问题,按标签分组,包括那些未正确标记的问题。

这是相应的list-issues-for-a-repository API

虽然我最初使用 jQuery 和 Javascript,但现在我使用 PHP 进行概念验证,因为它的内置会话处理允许我使用同一页面登录,让 GitHub 验证和回调,然后继续。但这对我来说无所谓,任何语言都可以。

我已经设法通过 OAUTH2 访问 GitHub API,但是当我通过https://api.github.com/orgs/{org}/repos它获取存储库列表时,它会显示为一个空数组。

因为/orgs/{org}/reposAPI返回的是一个空数组,所以对应的/repos/{org}/{repo}/issuesAPI当然会返回错误。

编辑:请参阅此后续解决方案!很高兴我终于让它工作了!

4

2 回答 2

7

它是一个休息 API。您需要使用 Http 请求调用一些端点。我不知道您要使用哪种语言,所以我无法为您提供如何实现这一目标的好例子。如果您还不知道要使用哪种语言,请使用postman创建对 github API 的 REST API 调用。

假设您要检索microsoft 的 typescript repo的问题,您需要调用此 API 端点:

https://api.github.com/repos/microsoft/typescript/issues

请注意,我已经替换了我想要获取的文档的:owner和值。:repo

然后,您可以将一些参数传递给调用以过滤您的数据,例如 API 标签。

https://api.github.com/repos/microsoft/typescript/issues?labels=API

这只会返回标记为 的问题API

这是如何使用 API 的基础知识。

于 2019-11-04T16:59:51.167 回答
4

您可以使用 jQuery Ajax 访问 Github API 并添加一个基本的身份验证标头来进行身份验证(参见此处),示例如下所示,这将拉取给定 repo 的问题并在警报窗口中显示前 10 个问题。

请参阅此处有关拉取问题的文档:https ://developer.github.com/v3/issues/以查看可用于过滤、排序等的参数。

例如,您可以使用以下方法获取所有标记为“错误”的问题:

/issues?labels=bug

这可以包括多个标签,例如

/issues?labels=enhancement,nicetohave

您可以轻松修改以在表格等中列出。

const username = 'github_username'; // Set your username here
const password = 'github_password'; // Set your password here
const repoPath = "organization/repo" // Set your Repo path e.g. microsoft/typescript here

$(document).ready(function() {
    $.ajax({
        url: `https://api.github.com/repos/${repoPath}/issues`,
        type: "GET",
        crossDomain: true,
        // Send basic authentication header.
        beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
        },
        success: function (response) {
            console.log("Response:", response);
            alert(`${repoPath} issue list (first 10):\n - ` + response.slice(0,10).map(issue => issue.title).join("\n - "))
        },
        error: function (xhr, status) {
            alert("error: " + JSON.stringify(xhr));
        }
    });
});

下面是一个使用 jQuery 和 Github API 的(公共)repo 的代码片段列表:

(请注意,我们不会在此处添加身份验证标头!)

const repoPath = "leachim6/hello-world" // 

$(document).ready(function() {
$.ajax({
    url: `https://api.github.com/repos/${repoPath}/issues`,
    type: "GET",
    crossDomain: true,
    success: function (response) {
        tbody = "";
        response.forEach(issue => {
            tbody += `<tr><td>${issue.number}</td><td>${issue.title}</td><td>${issue.created_at}</td><td>${issue.state}</td></tr>`;
        });
        $('#output-element').html(tbody);
    },
    error: function (xhr, status) {
        alert("error: " + JSON.stringify(xhr));
    }
});
});
<head>
<meta charset="utf-8">
<title>Issue Example</title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
</head>
<body style="margin:50px;padding:25px">
<h3>Issues in Repo</h3>
<table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Issue #</th>
        <th scope="col">Title</th>
        <th scope="col">Created</th>
        <th scope="col">State</th>
      </tr>
    </thead>
    <tbody id="output-element">
    </tbody>
</table>
</body>

于 2019-11-06T17:09:28.920 回答