17 abr. 2018 · Leitura de 3 min

Buscando Usuário GitHub com AXIOS

Frontend

Neste artigo não vou enrolar. Vamos colocar a mão na massa e aprender na prática a utilizar o AXIOS.

Faremos uma página onde digitaremos um usuário GitHub para buscar os dados na API do GitHub e montaremos em nossa tela todos os repositórios deste usuário.

Vamos lá.

Crie o index.html já colocando o VUE e AXIOS via CDN mesmo.

<!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>

Agora vamos criar o config/index.js para instanciar nosso VUE.

Vamos utilizar duas variáveis VUE:

  • usuario para termos o v-bind do nosso campo texto digitado
  • github que será nosso objeto retornado da API do GitHub
var app = new Vue({
  el: "#app",
  data: {
    usuario: "",
    github: {},
  },
})

Voltamos para o index.html para escrevermos nosso layout.

Para deixar um pouco mais bonito nosso exemplo, vamos colocar o Bootstrap. Em nosso layout teremos uma <nav> e logo abaixo nosso <div class="container"> para colocar o <button> e o campo usuario.

<nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
  <a class="navbar-brand" href="#">Vue-js + Axio</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">Usuário</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="usuario"
            placeholder="Usuario"
          />
        </div>
        <button
          type="submit"
          class="btn btn-primary mb-2"
          @click="buscarGit"
          :class="{'disabled':usuario.trim()==''}"
        >
          Buscar
        </button>
      </form>
    </div>
  </div>
</div>

Percebem que em nosso <form> temos um v-on:submit.prevent apenas para não ser chamado a função submit do <form> e atualizar a página.

Já colocamos também o @click="buscarGit" que será nosso método para buscar as informações na API. Usamos também um v-bind na nossa class para desabilitar o <button> caso usuario seja vazio.

Axios

Nosso axios será a parte mais facil deste simples exemplo.

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

Agora busque um usuário e observe o cosole.

É possível ver tudo o que a API fornece. Agora terminamos nosso código mostrando os repositórios do usuário que buscamos.

<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

Agora basta ler a documentação do GitHub e deixar a criatividade fluir.

Gostou desta dica? Comente ai embaixo e vamos trocar uma ideia.

Encontrou algum erro? Pow... me ajuda ae!😁

Como esse blog é open source, então é só alterar o arquivo de texto, no próprio Github e abrir um pull-request. Simples não?

Quer conhecer mais meu trabalho? Sigam-me os bons!!!😜🚀

- Twitter: @dgsapenas
- Github: @douglasporto
- Linkedin: @douglas-porto

Comentários