vue.js axios 예제

https://reqres.in/

Reqres - A hosted REST-API ready to respond to your AJAX requests

API는 위에 사이트에서 가져왔습니다.

 

https://reqres.in/api/users?page=1

이렇게 생겼습니다.

 

유저 리스트를 뿌려주고 페이지 이동이 되도록 하겠습니다.

 

// App.vue
<template>
  <div>
    <User />
  </div>
</template>

<script>
import User from "@/components/User";

export default {
  components: {
    User
  }
};
</script>

 

User 컴포넌트를 만들도록 하겠습니다.

axios 를 사용하여 ajax를 구현하겠습니다.

설치법과 사용법은 https://www.npmjs.com/package/axios

axios

// User.vue
<template>
  <div>
    <h1>User Info</h1>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: null,
      totalPage: null,
      pageNum: 1
    };
  },
  methods: {
    fetchData(pageNum) {
      axios
        .get("https://reqres.in/api/users?page=" + pageNum)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.fetchData(this.pageNum);
  }
};
</script>

 

콘솔창에서 아래와 같은 결과를 받을 수 있을겁니다.

 

 

 

받은 데이터를 입혀보겠습니다.

 

// User.vue
<template>
  <div>
    <div v-for="(user, idx) in users" :key="idx">
      <h2>{{user.first_name}}</h2>
      <img :src="`${user.avatar}`" alt />
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: null,
      totalPage: null,
      pageNum: 1
    };
  },
  methods: {
    fetchData(pageNum) {
      axios
        .get("https://reqres.in/api/users?page=" + pageNum)
        .then(res => {
          this.users = res.data.data;
          this.totalPage = res.data.total_pages;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.fetchData(this.pageNum);
  }
};
</script>

 

 

first name과 이미지만 가져온 모습입니다.

이제 페이지 이동을 위에 페이징 버튼을 만들겠습니다.

total_page를 props로 넘겨주겠습니다.

 

// User.vue
<template>
  <div class="user_wrap">
    <div class="box" v-for="(user, idx) in users" :key="idx">
      <h2>{{user.first_name}}</h2>
      <img :src="`${user.avatar}`" alt />
    </div>
    <Paging :totalPage="totalPage" />
  </div>
</template>

 

// Paging.vue
<template>
  <ul class="paging">
    <li v-for="(page, idx) in totalPage" :key="idx">{{page}}</li>
  </ul>
</template>

<script>
export default {
  props: ["totalPage"],
  data() {
    return {};
  }
};
</script>

 

버튼이 생겼으니 이제 이동이 되도록 합니다.

$emit으로 이벤트를 User.vue로 전달하도록 하겠습니다.

 

// Paging.vue
<template>
  <ul class="paging">
    <li v-for="(page, idx) in totalPage" :key="idx" @click="movePage(page)">{{page}}</li>
  </ul>
</template>

<script>
export default {
  props: ["totalPage"],
  data() {
    return {};
  },
  methods: {
    movePage(page) {
      this.$emit("movePage", page);
    }
  }
};
</script>

 

현재 페이지 번호를 $emit에 인자로 넘겨줍니다.

User.vue에서 이벤트를 받으면 fetchData의 인자에 페이지 번호를 넘겨주면 됩니다.

 

 

// User.vue
<template>
  <div>
    <divv-for="(user, idx) in users" :key="idx">
      <h2>{{user.first_name}}</h2>
      <img :src="`${user.avatar}`" alt />
    </div>
    <Paging :totalPage="totalPage" @movePage="movePage" />
  </div>
</template>

<script>
import axios from "axios";
import Paging from "./Paging";

export default {
  data() {
    return {
      users: null,
      totalPage: null,
      pageNum: 1
    };
  },
  methods: {
    fetchData(pageNum) {
      axios
        .get("https://reqres.in/api/users?page=" + pageNum)
        .then(res => {
          this.users = res.data.data;
          this.totalPage = res.data.total_pages;
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    movePage(page) {
      this.fetchData(page);
    }
  },
  created() {
    this.fetchData(this.pageNum);
  },
  components: {
    Paging
  }
};
</script>

 

잘 작동하는지 확인해줍니다.