如何从GitHub仓库链接获取目录树结构并在Web UI展示？能否用GitHub API？

当然有，GitHub官方API是比网页爬取更可靠、更高效的方案，主要有三种实现方式，下面逐个说明：

1. REST API 递归遍历目录 #

使用GitHub REST API的GET /repos/{owner}/{repo}/contents/{path}端点，通过递归请求来构建层级目录树：

• 核心逻辑：请求根路径（path设为空或/），返回当前目录下的文件/文件夹列表；遇到type: "dir"的项时，递归请求该文件夹的路径，直到遍历完所有层级。
• 认证建议：使用个人访问令牌（PAT）添加请求头Authorization: token YOUR_PAT，可以将请求限额从每小时60次提升到5000次，避免触发限流。

示例JavaScript实现：

async function buildRepoTree(owner, repo, path = '') {
  const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
  const headers = {
    'Authorization': 'token YOUR_PERSONAL_ACCESS_TOKEN' // 可选，提升限额
  };

  const res = await fetch(apiUrl, { headers });
  const items = await res.json();

  const tree = [];
  for (const item of items) {
    if (item.type === 'dir') {
      tree.push({
        name: item.name,
        type: 'dir',
        children: await buildRepoTree(owner, repo, item.path)
      });
    } else {
      tree.push({
        name: item.name,
        type: 'file'
      });
    }
  }
  return tree;
}

// 使用示例：获取vuejs/vue仓库的目录树
buildRepoTree('vuejs', 'vue').then(tree => {
  console.log(tree);
  // 这里可以将tree渲染到Web UI中
});

2. Git Trees API 一次性获取全量树 #

如果仓库结构复杂，递归请求效率低，可以用GET /repos/{owner}/{repo}/git/trees/{tree_sha}?recursive=1端点，一次性获取整个仓库的扁平目录结构，再转换成层级树：

• 步骤：
  1. 先通过GET /repos/{owner}/{repo}获取仓库默认分支名称
  2. 再通过GET /repos/{owner}/{repo}/git/refs/heads/{branch_name}获取分支对应的tree SHA
  3. 最后请求带recursive=1参数的Git Trees API，得到所有文件/目录的扁平列表，再自行处理成层级结构

示例代码片段：

async function getFullRepoTree(owner, repo) {
  // 获取默认分支
  const repoRes = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
  const repoData = await repoRes.json();
  const defaultBranch = repoData.default_branch;

  // 获取分支的tree SHA
  const branchRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/refs/heads/${defaultBranch}`);
  const branchData = await branchRes.json();
  const treeSha = branchData.object.sha;

  // 获取全量扁平树
  const treeRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/${treeSha}?recursive=1`);
  const treeData = await treeRes.json();

  // 转换为层级结构
  const root = { name: '/', type: 'dir', children: [] };
  const pathMap = { '/': root };

  for (const item of treeData.tree) {
    const pathParts = item.path.split('/');
    let currentPath = '';
    let parentNode = root;

    pathParts.forEach((part, index) => {
      currentPath += (currentPath ? '/' : '') + part;
      if (!pathMap[currentPath]) {
        const node = {
          name: part,
          type: item.type === 'tree' ? 'dir' : 'file'
        };
        if (node.type === 'dir') node.children = [];
        pathMap[currentPath] = node;
        parentNode.children.push(node);
      }
      parentNode = pathMap[currentPath];
    });
  }

  return root;
}

3. GraphQL API 按需查询嵌套结构 #

GitHub GraphQL API支持更灵活的嵌套查询，可以一次性请求指定深度的目录结构，减少请求次数：

• 核心查询：通过repository和object字段，指定expression为仓库分支+路径，递归查询目录条目

示例GraphQL查询：

query GetRepositoryTree($owner: String!, $repo: String!, $branch: String!) {
  repository(owner: $owner, name: $repo) {
    object(expression: $branch) {
      ... on Tree {
        entries {
          name
          type
          object {
            ... on Tree {
              entries {
                name
                type
                object {
                  ... on Tree {
                    entries {
                      name
                      type
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

你可以根据需要调整查询的嵌套深度，或者结合分页处理超大仓库的情况。

内容的提问来源于stack exchange，提问作者S VAIBHAVE