- vuejs를 처음 사용해보았기에 복습과 정리를 위해 작성합니다. 틀린 부분은 알려주시면 감사하겠습니다~. 과제로 진행한 프로젝트라 많은 부분의 코드들이 생략 되어있습니다.
프로젝트 내에서 Axios 사용
- axios를 사용할 때마다 직접 axios를 불러 사용하는 것이 아닌 'api.service.js' 파일에 정의하여 사용.
- 프로젝트 진행 도중 값을 가져오는 형태를 변경하게 될 일이 생길 경우 변경/관리가 용이하기 때문이다.
- 마찬가지로 axios 뿐만 아니라 모든 외부 라이브러리는 사용시 프로젝트 내부에서 한번 감싸주는 것을 권장한다.
Vuejs에서 Axios로 Spring data 가져오기
1. Spring controller에 '/account/findAll' api 작성 (서버 코드 생략)
2. Vuejs에서 axios로 데이터를 가져오기
- 'api.service.js'에 작성한 get 메서드
get(resource, slug = "") {
return Vue.axios.get(`${resource}/${slug}`).catch((error) => {
console.log(error);
});
},
- res를 console에 찍어보면 아래 사진의 구조로 가져오는데, 여기서 list 안에 들어있는 데이터가 실제 필요한 데이터이기 때문에 res.data.list로 접근하여 account에 담아준다.
data() {
return {
account: [],
}
}
methods: {
findAllAccountInfo() {
ApiService.get("account", "findAll").then((res) => {
this.account = res.data.list;
this.createAccountInfoList();
});
},
}
- 처음엔 account를 전역으로 선언해서 모든 메서드에서 사용할 수 있다고 생각해 많이 헤맸던 부분이다. account에 담은 데이터는 axios 통신이 이루어졌을때만 유효한 데이터이기 때문에 현재 메서드를 벗어나면 그저 빈 리스트이다.
3. 가져온 데이터를 리스트에 저장하기.
- account에는 json 형태로 각 계정에 대한 정보들이 담겨있고, 그 계정들이 리스트에 담겨있다.
- 이 데이터를 전역적으로 사용하기 위해 item에 계정을 담아주고, 그 item을 items라는 리스트에 push 해주는 형태로 데이터를 저장할 것이다.
data() {
return {
item: {
IdNo: "",
},
items: [],
}
}
methods: {
createAccountInfoList() {
for (var i = 0; i < this.account.length; i++) {
this.item.IdNo = this.account[i].IdNo;
this.items.push(this.item);
this.item = {};
}
},
}
가져온 데이터를 화면에 뿌리기
- vuetify의 DataTable을 사용해 화면에 뿌려준다.
- items:에 저장한 리스트 items를 넣어주면 된다.
<v-data-table
:headers="headers"
:items="items"
:search="searchName"
>
</v-data-table>
전체 코드
<template>
<v-data-table
:headers="headers"
:items="items"
:search="searchName"
@click:row="handleClick"
>
</v-data-table>
</template>
<script>
import ApiService from "@/core/services/api.service.js";
<script>
export default {
mounted() {
this.findAllAccountInfo();
},
data() {
return {
account: [],
item: {
IdNo: "",
},
items: [],
};
},
methods: {
findAllAccountInfo() {
ApiService.get("account", "findAll").then((res) => {
console.log(res);
this.account = res.data.list;
this.createAccountInfoList();
});
},
createAccountInfoList() {
for (var i = 0; i < this.account.length; i++) {
this.item.IdNo = this.account[i].IdNo;
this.items.push(this.item);
this.item = {};
}
},
}
};
</script>