Vue 검색 저장소 GitHub

얘들아!

제 이름은 Gustavo Scarpim이고 Vue에서 GitHub API를 사용하는 방법을 보여드리겠습니다.

API 부분만 보여드리고 전체 코드는 이 포스트 마지막에 남겨두겠습니다.

1- 템플릿 만들기:

<template>
  <div>
    <div class="card" v-if="loading === false">
      <avatar circle size="sm" :img="userData.avatar_url"/>
      <user :perfil="perfilUsuario"/>
      <div class="repositorios">
        <ul id="myList" v-if="userRepositories.length > 0">
        <h4>Repositórios</h4>
        <small>Total: {{userRepositories.length}}</small>
        <hr>
          <li v-for="repository in userRepositories" :key="repository.id">{{repository.name}}</li>
        </ul>
      </div>
    </div>
    <div v-if="loading" style="margin-top: 40px; align-items: center; justify-content: center;">
      <cube-spin v-if="loading"/>
    </div>
  </div>
</template>

우리는 2가지 방법을 만들 것입니다:

사용자 데이터를 얻기 위한 getUser:

getUser(name) {
      this.loading = true
      fetch(`https://api.github.com/users/${name}`, {
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        method: "GET"
      })
        .then(response => {
          response.json().then(x => (this.userData = x))
          this.loading = false
        })
        .catch(error => { 
          console.log(error)
          this.loading = false
        });
    },

사용자 저장소 데이터를 가져오는 getRepos:

    getRepos(name) {
      fetch(`https://api.github.com/users/${name}/repos`, {
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        method: "GET"
      })
        .then(response => response.json().then(x => (this.userRepositories = x)))
        .catch(error => console.log(error));
    },

2- 스크립트 만들기

<script>
import Avatar from "./Avatar";
import User from "./User";
import CubeSpin from 'vue-loading-spinner/src/components/RotateSquare2'
export default {
  components: { Avatar, User, CubeSpin },
  name: "",
  props: {
    userName: String
  },
  data: () => ({
    userData: "",
    userRepositories: [],
    loading: false,
  }),
  computed: {
    perfilUsuario () {
      return {
        name: this.userData.name,
        bio: this.userData.bio,
        location: this.userData.location,
        blog: this.userData.blog
      };
    }
  },
  methods: {
    getUser(name) {
      this.loading = true
      fetch(`https://api.github.com/users/${name}`, {
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        method: "GET"
      })
        .then(response => {
          response.json().then(x => (this.userData = x))
          this.loading = false
        })
        .catch(error => { 
          console.log(error)
          this.loading = false
        });
    },
    getRepos(name) {
      fetch(`https://api.github.com/users/${name}/repos`, {
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        method: "GET"
      })
        .then(response => response.json().then(x => (this.userRepositories = x)))
        .catch(error => console.log(error));
    },
  },

  watch: {
    userName(context) {
      this.getUser(context);
      this.getRepos(context);
    }
  }
};
</script>

그리고 준비!
API에 대한 호출은 이미 완료되었습니다. 실행 중인 코드를 보려면 소스 코드와 동일한 아래 링크를 클릭하세요.



여기 GitHubClick Here에서 전체 코드를 참조하십시오.

작동 중인 프로젝트를 확인하십시오Deploy.

읽어 주셔서 감사합니다.