[Vue.js] Vuejs에서 Axios로 Spring data 가져오기/가져온 데이터를 화면에 뿌리기

• 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 메서드

// resource = 최상단 api 경로
// slug = 최상단 api 뒤에 오는 api 경로
get(resource, slug = "") {
    return Vue.axios.get(`${resource}/${slug}`).catch((error) => {
      console.log(error);
    });
  },

• res를 console에 찍어보면 아래 사진의 구조로 가져오는데, 여기서 list 안에 들어있는 데이터가 실제 필요한 데이터이기 때문에 res.data.list로 접근하여 account에 담아준다.
  

data() { //vuejs는 data()에 사용할 변수들을 선언한다.
    return {
      account: [],
    }
}
methods: { //메서드 작성은 methods와 computed에서 할 수 있다.
    findAllAccountInfo() { //데이터를 가져오는 메서드
      ApiService.get("account", "findAll").then((res) => {
        this.account = res.data.list; //선언한 변수, 메서드들은 모두 this로 불러 사용할 수 있다.
        this.createAccountInfoList();  //가져온 데이터를 저장하는 메서드
        //가져온 데이터(=account)는 현재 메서드 내에서만 유효하기 때문에 이 메서드 안에서 핸들링한다.
      });
    },
}

• 처음엔 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; // i번째 계정의 정보를 item에 담아준다.
        this.items.push(this.item); //i번째 계정을 리스트에 추가해준다.
        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>