loading...
Cover image for Searching Github Users With AXIOS

Searching Github Users With AXIOS

douglasporto profile image Douglas Porto ・1 min read

In this article, we'll see in practice how to use AXIOS.
Getting straight to the point, we'll make a page that searches for a GitHub user and shows on-screen its repositories.

Having said that, let's go!

First, you'll create index.html and put on VUE and AXIOS by CDN.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link rel="shortcut icon" href="assets/img/ico/favicon.ico">  
  <title></title>
</head>
<body>
  <div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="config/index.js"></script>
</body>
</html>

Then, create a config/index.js file to instantiate VUE.

In this step, we'll use two VUE variables:

  • user: for input text;
  • gitHub: for the API's return.
var app = new Vue({
  el: '#app',
  data: {
    user: '',
    github: {}
  },
})  

Use the index.html to create the layout of your page. You can use the Bootstrapor any other framework if you want to make it more sophisticated. Check out the example:

  <nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
    <a class="navbar-brand" href="#">Vue-js + Axios</a>
  </nav>
  <div class="container">
    <div class="row">      
      <div class="col-md-12 jumbotron">
        <form class="form-inline"  v-on:submit.prevent>
        <label class="sr-only" for="userGit">User</label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input type="text" class="form-control" id="userGit" v-model='user' placeholder="user">
        </div>
        <button type="submit" class="btn btn-primary mb-2" @click="searchGit" :class="{'disabled':user.trim()==''}">Search</button>
      </form>
    </div>
  </div>

Notice that the <form> has a v-on:submit.prevent just to avoid calling the submit function. Also, we use a @click="searchGit" tag to call the API information's search and a v-bind class to disable the <button> if the user is empty.

Axios

Apply AXIOS is the easiest part of the example. Let's check it out:

methods: {
  searchGit: function () {
    let api = 'https://api.github.com/users/' + this.user;
    vm = this;
    axios.get(api).then(function(response) {
      vm.github = response.data;
      console.log(vm.github);
    });
  }
}

You are now able to search for a user. Check the console to see the result. You'll see everything that the API GitHub provides.

The last step is to display its repositories. You can do it as follows:

<div v-if="github.name">
  <div class="row jumbotron">
    <div class="col-md-6">
      <div class="avatar">
        <img :src="github.avatar_url">
      </div>
      <div class="nickname">
        <h2>{ { github.name } }</h2>
        <h2 class="login"><small>({ { github.login } })</small></h2>
      </div>
    </div>
    <div class="col-md-6">
      <div class="pull-right well info">
        <ul>
          <li><h1>{ { github.public_repos } }</h1>Public Repos</li>
          <li><h1>{ { github.followers } }</h1>Followers</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Screen Axios+Vue.js

That's it!

Read the GitHub Documentation for further information and let the creativity flow!

Did you like this tip? Comment here below and let's talk.

Posted on by:

Discussion

markdown guide