Vue
vue.js axios 예제
hjcode
2020. 1. 13. 17:49
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
// 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>
잘 작동하는지 확인해줍니다.
반응형