javascript - Github API。per_page 不起作用并且文本被打乱

Question

所以我使用 Github api 来制作这个个人资料查找器页面。但是有一个问题。首先，如果您观察“最新存储库”部分，请尝试进行一些不同的搜索。它应该每次搜索只显示 3 个存储库，但有时它会显示超过 3 个（它不止一次地重复某些项目）。有时（在最新存储库下方）中的文本也会被打乱或类似的东西。就像它与其他文本重叠。知道如何解决这个问题吗？

$(document).ready(function() {
  $("#search-user").on("keyup", function(e) {
      let username = e.target.value;

      // make request to github
      $.ajax({
          url: 'https://api.github.com/users/' + username,
          data: {
              client_id: '2b6ea7e23a43591cb35d',
              client_secret: '36c9787ee66083eea83a3c15a53d680d1fe82571'
          }
      }).done(function(user) { // .done is same as success: function(user) {}

          $.ajax({
              url: 'https://api.github.com/users/' + username + '/repos',
              data: {
                  client_id: '2b6ea7e23a43591cb35d',
                  client_secret: '36c9787ee66083eea83a3c15a53d680d1fe82571',
                  sort: 'created: async',
                  per_page: 3
              }
          }).done(function(repos) {
              $.each(repos, function(index, repo) { // VERY IMPORTANT LINE OF CODE
                  $("#repos").append(`
              
                      <div class="well">
                          <div class="row">
                              <div class="col-md-7">
                                  ${repo.name}: ${repo.description}
                              </div>
                              <div class="col-md-3">
                                  <span class="label label-default">Forks: ${repo.forks_count}</span>
                                  <span class="label label-primary">watchers: ${repo.watchers_count}</span>
                                  <span class="label label-success">Stars: ${repo.stargazers_count}</span>
                              </div>
                              <div class="col-md-2">
                                  <a style="line-height: 0; font-size: 12px;"href="${repo.html_url}" target="_blank" class="btn btn-default">Go to Repository</a>
                              </div>
                          </div>
                      </div>

                  `);
              });
          });

          $("#profile").html(`
          
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">${user.name}</h3>
              </div>
              <div class="panel-body">
                  <div class="row">
                      <div class="col-md-3">
                          <img style="width: 100%" class="thumbnail avatar" src="${user.avatar_url}">
                          <a class="btn btn-primary btn-block" target="_blank" href="${user.html_url}">View Profile</a>
                      </div>
                      <div class="col-md-9">
                          <span class="label label-default">Repositories: ${user.public_repos}</span>
                          <span class="label label-primary">Public Gists: ${user.public_gists}</span>
                          <span class="label label-success">Followers: ${user.followers}</span>
                          <span class="label label-info">Following: ${user.following}</span>
                          <br>
                          <br>
                          <ul class="list-group">
                              <li class="list-group-item">Company: ${user.company}</li>
                              <li class="list-group-item">Website/blog: ${user.blog}</li>
                              <li class="list-group-item">Location: ${user.location}</li>
                              <li class="list-group-item">Member since: ${user.create_at}</li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
          <h3 class="page-header" style="font-size: 25px">Latest repos</h3>
          <div id="repos" style="line-height: 0"></div>
          `);
      });
  })
});

body {
    font-size: 1.6rem;
}

.main {
    font-size: 30px!important;
}

avatar {
    width: 100%
}

h1 {
    font-size: 32px;
}

p {
    font-size: 1.6rem!important;
}

.navbar-brand {
    font-size: 2.5rem;
}

.form-control {
    height: 34px;
    font-size: 1.8125rem;
}

#repos {
    line-height: 0.5;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://bootswatch.com/4/simplex/bootstrap.min.css" rel="stylesheet">

    <!-- Latest compiled and minified JavaScript -->
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->



    <!-- <link rel="stylesheet" href="https://bootswatch.com/4/simplex/bootstrap.min.css"> -->
    <link rel="stylesheet" href="css/style.css">

    <title>GitHub Finder</title>
  </head>
  <body>

        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <a class="navbar-brand" href="#">GitHub Finder</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        
            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav mr-auto">
                
                </ul>
            </div>
        </nav>
        
        <main role="main" class="container">
        
            <div class="searchContainer">
                <h1>Search GitHub Users</h1>
                <p class="lead">Enter a username to fetch a user's profile info and respositories</p>
                <input type="text" id="search-user" class="form-control" placeholder="GitHub Username...">
                <br>
                <div id="profile"></div>
            </div>
        
        </main><!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

标签： javascripthtmlajaxgithub