vue.js spring boot server와 통신하기

[1] intelliJ로 vue.js 프로젝트 시작하기

[2] vue.js spring boot server와 통신하기 

 

개요

1편을 통해 vue.js로 프로젝트를 시작해 보고 이제 2편에서는 spring boot server와 api 통신을 수행해보고자 합니다.

 

Axios 라이브러리 설치하기

npm install axios
added 6 packages, and audited 967 packages in 839ms

npm ls axios
axios@1.3.4

vue.js에서 Spring Boot 서버와 통신하기 위해서는 Axios 라이브러리를 사용할 수 있습니다.

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 간단한 설정으로 HTTP 요청을 보낼 수 있습니다.

 

npm ls axios 명령어를 통해 해당 패키지의 버전 정보가 출력되면 정상적으로 설치됨을 확인할 수 있습니다.

 

 

HelloWorld.vue

<template>
  <div>
    <h1>API Call Test</h1>
  </div>

  <div>
    Test API CALL : {{ message }}
  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: 'none'
    };
  },
  mounted() {
    axios.get('http://localhost:8080/')
        .then(response => {
          this.message = response.data;
        })
        .catch(error => {
          console.log(error);
        });
  }
};
</script>

template 섹션

message를 받아올 준비를 합니다.

{{ message }} 는 템플릿 문법으로 중괄호 안에 데이터를 바인딩하여 화면에 렌더링 할 수 있습니다.

data 객체에 있는 속석 중 하나로 Vue 인스턴스의 데이터를 변경하면 이에 바인딩된 화면의 내용도 자동으로 업데이트됩니다.

초기 값을 'none'으로 정의하면 api call이 발생하지 않으면 화면에 none이 표시됩니다.

 

script 섹션

axios를 활용하여 실제 api call이 진행됩니다.

mounted 라이프 사이클 훅에서 axios.get 메서드를 이용해 http:localhost:8080 경로에 GET 요청을 보냅니다.

요청이 실패하면 catch 블록에서 에러를 처리합니다.

mounted 라이프사이클 훅은 Vue 인스턴스가 DOM에 마운트 되면 실행됩니다.

 

Spring Boot Server 준비

@RestController
class ApiCallTestController {

    @GetMapping
    fun apiCallTest(): String{
        return "success"
    }
}

Spring Boot Server의 기본 포트인 8080으로 실행시킵니다.

 

CORS 설정

@Configuration
class CorsConfig : WebMvcConfigurer {
    override fun addCorsMappings(registry: CorsRegistry) {
        registry.addMapping("/**") //모든 경로
            .allowedOrigins("http://localhost:3000") //vue.js의 포트번호 명시
            .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS") // 허용할 HTTP 메서드
            .allowCredentials(true) //요청에 인증 정보를 포함시킬 수 있음
    }
}

 

Spring Boot 서버와 Vue.js 애플리케이션이 서로 다른 도메인이기 때문에 호출 시 Same-Origin-Policy에 의해 브라우저 보안상 이유로 CORS 에러가 발생합니다.

이 문제를 해결하기 위해 Spring Boot 서버에서 CORS 설정을 허용해주어야 합니다.

 

API Call Test

2개의 서버를 모두 구동하면 Spring Boot의 / 경로에서 반환되는 success 메시지가 출력되는 것을 확인할 수 있습니다.

 

버튼을 사용하여 API Call

<template>
  <div>
    <h1>API Call Test</h1>
  </div>

  <div>
    <h1>{{ message }}</h1>
    <button @click="callApi">API 호출</button>
  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: 'none'
    }
  },
  methods: {
    callApi() {
      const url = 'http://localhost:8080/';
      axios.get(url)
          .then(response => {
            this.message = response.data;
          })
          .catch(error => {
            console.error('API 호출 에러:', error);
          });
    }
  }
}
</script>

버튼을 눌러서 API Call을 하도록 수행하고 싶습니다.

button 태그에 @click 이벤트를 추가하면 클릭 이벤트를 처리할 수 있습니다.

이후 클릭 이벤트가 발생하면 callApi() 메서드를 호출합니다.

 

message는 defualt값으로 'none'으로 설정합니다.

이후 methods를 통하여 callApi를 정의하고 스프링서버로 axios호출을 하여 데이터를 받아옵니다.

 

더 이상 mounted 라이프사이클 훅을 사용하지 않습니다(버튼을 누르면 이벤트로 호출하기 때문)

 

버튼 클릭 전

버튼 클릭 전

버튼 클릭 후