[Vue] Vue와 Spring 연동하기 (서버 통신 : 데이터 주고 받기)

 

연동하기 전 준비

Spring

1) spring-controller에 vue 패키지 따로 만든 후 클래스 생성해준다.

 

 

Vue

1) vue - store에 패키지 아래 이미지와 같이 클래스들 만든다.

(거의 이 형식 그대로 유지하면서 사용한다고 함)

 

 

2) view 패키지에도 클래스 하나 생성

 

3) cmd창에서 axios 인스톨하기.

vue 프로젝트 폴더로 이동한 후에 

npm install axios --save-dev 입력

 

입력 후 엔터 치면 설치완료!

 

 

 

 

 

연동하기

우선 테스트로 

눌러봐! 라는 버튼을 누르면 밑에 랜덤한 숫자를 나타내는 동작을 구현했다.

이번 페이지에서는 연동할 때 들어가는 코드들의 전체적인 흐름을 설명하고,

생소한 것들 중에 디테일한 풀이들은 따로 새로운 글로 풀이를 해보려고 한다. 

 

 

 

vue와 spring을 연결하고 데이터를 주고 받기 위해서는 아래의 코드들을 작성한 뒤에
vue와 spring의 서버를 모두 구동시켜야한다.
spring은 실행버튼 눌러주고
vue는 cmd창에서 npm run serve !

 

 

Spring

1) spring controller 클래스 작성하기

해당 클래스 연결할 URL주소 설정하고, 실행될 메서드, 리턴값등을 정해준다.

(우선 test를 해보는 거라 RandomNumber라는 클래스를 생성해놓고, 기존에 작성했던 클래스를 활용했다.)

 

package kr.eddi.demo.controller.vue.thirthieth;


import kr.eddi.demo.entity.vue.RandomNumber;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Slf4j
@RestController
@RequestMapping("/30th/vue2spring")
@CrossOrigin(origins = "http://localhost:8080/", allowedHeaders = "*")
public class AxiosTestController {

    @GetMapping("/test")
    public RandomNumber getVueDataTest(){
        log.info("getVueDataTest()");

        RandomNumber randomNumber = new RandomNumber();

        log.info("randomNumber: " + randomNumber);
        return randomNumber;
    }
}

package kr.eddi.demo.entity.vue;

import kr.eddi.demo.utility.basic.third.CustomRandom;
import lombok.Getter;
import lombok.ToString;


@Getter
@ToString
public class RandomNumber {
    private int randomNumber;

    public RandomNumber(){
        randomNumber = CustomRandom.makeIntCustomRandom(1, 10);
    }
}

 

 

 

Vue

아까 생성해놓은 패키지와 클래스들에 코드를 입혀준다.

store

actions

import {
    REQUEST_DATA_FROM_SPRING,
} from './mutation-types'

// npm install axios --save-dev
import axios from 'axios'

export default {
    requestDataFromSpring ({ commit }) {
        console.log("I'm from action - requestDataFromSpring()")
        return axios.get('http://localhost:7777/30th/vue2spring/test')
            .then((res) => {
                commit(REQUEST_DATA_FROM_SPRING, res.data.randomNumber)
            })
    }
}

 

 

mutations

import {
    REQUEST_DATA_FROM_SPRING,
} from './mutation-types'

export default {
    [REQUEST_DATA_FROM_SPRING] (state, passingData) {
        state.springFromVueTestValue = passingData
    }
}

 

mutations-type

export const REQUEST_DATA_FROM_SPRING = 'REQUEST_DATA_FROM_SPRING'

 

states

export default {
    springFromVueTestValue: null
}

 

getter

(이번에 getter는 아직 사용안함)

export default {

}

 

view

vueToSpringView

<template>
  <div>
    <h2>Vue 2 Spring Test</h2>
    <button @click="callRequestDataFromSpring">눌러봐!</button>
    <p>{{ returnValue }}</p>
  </div>
</template>

<script>

import { mapActions } from 'vuex'

export default {
  name: "VueToSpringView",
  data(){
    return{
      returnValue: 0,
    }
  },
  methods: {
    ...mapActions(['requestDataFromSpring']),
    //액션에 배치 되는애들은 모두 쓰레드 베이스임!
    async callRequestDataFromSpring({commit}) {
      await this.requestDataFromSpring({commit})
      // 위에 commit은 없어도 상관없음
      this.returnValue = this.$store.state.springFromVueTestValue
    }
  }
}
</script>

<style scoped>

</style>