6. get방식 통신2 (Vue + Springboot 연동 4)

axios 통신

이번 연습에는 서버에서 boardList를 받아와서 원하는 내용 보여주자

 

 

Home.vue

---

<template>
    <v-card style="width: 30%">
      <h3 v-for="user in users" :key="user.id">{{user.content}}</h3>
    </v-card>
</template>

v-for 지시문으로, for문을 돌려 users를 탐색하여 content를 보여준다.

 

 

 

Script

---

<script>
export default {
  name: 'App',
  data: () => ({
    users:[]
  }),

  methods: {
    retrieveUsers(){
      this.$axios.get("board/list")
          .then(response=>{
            this.users = response.data;
            console.log(response.data);
          })
          .catch(e=>{
          console.log(e);
      })
    }
  },
  mounted(){
    this.retrieveUsers();
  }
}
</script>

data()안에 users 배열 변수 선언

methods에 retieveUsers함수를 추가한다. 이 부분이 Axios를 활용하여 Get 요청을 보내는 것이다.

 

이후 Mounted에 retieveUsers를 호출한다.

Mounted는 lifecycle 단계 중 하나로, 쉽게 얘기하여 페이지가 로드될 때 이 함수를 수행하겠다. 라는 의미이다.

나머지 부분은 [Springboot+vue 연동3] 에서 설명했으니 넘어가도록 하자

 

 

 

springboot 연동 3, 4를 성공적으로 구현한 사진

답글 순서를 정하느라 글 내용이 저모양이다..

 

 

 

 

처음 서버부터 다시 연결하고싶으면 

https://rangsub.tistory.com/100?category=973239 다음 블로그를 참고합시다

위 블로그를 (많이) 참고하여 작성했습니다