5. get방식 통신 (Vue + Springboot 연동 3)

드디어 Vue와 Springboot 통신을 위한 준비가 다 되었다.

axios를 통해 spring으로 데이터를 보낸 후 다시 Vue로 받아보자 (Get방식 통신)

 

 

 

Vue

---

통신을 확인하기 위해서 프론트의 Home.vue의 코드를 다음과 같이 바꿔주었다

<template>
  <v-container>
    <v-card style="width: 30%">
      <v-text-field v-model="b1" label="1 or 2"></v-text-field>
      <v-btn outlined @click="button">Click</v-btn>
      <p>{{a}}</p>
    </v-card>
  </v-container>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    b1: '',
    a: ''
  }),
  methods: {
    button () {
      this.$axios.get('/example', { params: { tEst: this.b1 } }).then(result => {
        console.log(result.data)
        this.a = result.data
      })
    }
  }
}
</script>

 

• methods 부분에서 axios를 사용해서 backend와 통신하고 있다
• this.axios.get 부분에서 통신을 하고 있고, get방식으로 통신이 진행된다
• '/example' 부분은 보내는 주소이다. 스프링에서 /example로 받는부분을 작성
• { params: ... } : params에 보낼 데이터를 넣으면 된다. 만약 없다면 안넣어도 된다
• .then(result => {  }) : 통신을 보낸 다음 데이터의 결과를 볼 수 있게 한다

 

 

 

Springboot

---

Springboot의 src/java/ 경로에 Exam.java를 만들어서 /example을 받는 코드를 작성한다

@Slf4j
@RestController
public class Exam {
    @GetMapping("/example")
    public String  SomeAction(@RequestParam("tEst")String test) {
        log.info("test = " + test);
        String res = "";
        if (test.equals("1")) {
            res = "one";
        } else if (test.equals("2")) {
            res = "two";
        } else {
            res = "nothing";
        }
        return res;
    }
}

@RequestParam("...") : 아까 axios를 통해 보낸 데이터 이름이 그대로 들어가야 한다. 

'tEst'로 했으니 그 이름이 그대로 들어갔다.

 

 

다시 Vue로 돌아가서

• return 부분을 통해 다시 vue 부분의 .then(result => {  }) 안으로 넘어가게 된다
• console.log : result.data의 값을 콘솔에서 볼 수 있게 한다.

 

빌드 후 실행

 

 

1을 입력하고 클릭버튼을 눌러 데이터를 보내면 One이 출력되고

Springboot의 콘솔창으로 데이터를 받은 모습을 볼 수 있다.

 

 

그리고 board에서 /example을 받아서 test에 해당하는 숫자의 글을 출력해봤다

오우..

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

https://jhhan009.tistory.com/39

Spring & Vue.js

위 블로그의 코드를 사용했고 axios 설치 vuetify등 때문에 고생을 좀 많이했다..

아직 갈 길이 엄청 멀지만 덕분에 Vue에 조금 더 다가간 것 같다.