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 다음 블로그를 참고합시다
위 블로그를 (많이) 참고하여 작성했습니다
'Vue > Vue' 카테고리의 다른 글
8. 상세페이지 출력 (springboot + vue 6) (0) | 2021.12.01 |
---|---|
7. 게시판 출력 (Vue + Springboot 연동 5) (0) | 2021.11.26 |
5. get방식 통신 (Vue + Springboot 연동 3) (0) | 2021.11.18 |
4. axios & vuetify (Vue + Springboot 연동 2) (0) | 2021.11.18 |
3. Vue + Springboot 연동 1 (0) | 2021.11.17 |