vue/cli axios를 이용하여 백엔드 통신하기(회원가입)

이번에는 axios를 이용하여 백엔드 통신을 해보았습니다.

회원가입 화면에서 Sign In 버튼을 클릭하면 spring boot의 Controller를 통하여 VO에 form값을 주입하도록

하였습니다.

 

<<백엔드로 form값을 어떻게 넘겨야 할 지 고민했던 시간만큼 이번 포스트는 글이 길어졌습니다 ㅠ>>

 

우선 코드를 작성하기에 앞서 axios를 설치해 주었습니다.

 

1.  vue/cli axios plugin 설치

vue add vue-cli-plugin-axios

기존에는 npm install axios 로 설치하는 방법만 찾을 수 있었는데, vue/cli인 경우에는 어떻게 설치해야 하나 찾아보니

플러그인을 직접 설치하는 방법이 있었습니다.

plugin으로 설치 시 main.js에 수동으로 추가해주어야 하는 vue.use( )를 자동으로 생성해줍니다.

 

//axios.js

Plugin.install = function (Vue, options) {
  Vue.axios = _axios
  window.axios = _axios
  Object.defineProperties(Vue.prototype, {
    axios: {
      get () {
        return _axios
      }
    },
    $axios: {
      get () {
        return _axios
      }
    }
  })
}

Vue.use(Plugin)

export default Plugin

 

2. join.vue에 axios 코드 작성

<button type="submit" class="btn bSuccess" @click="submitForm()">Sign In</button>

methods: {
    submitForm () {
      this.$axios.post('/api/user/joinform',
        { userId: this.member.userId,
         userPw: this.member.userPw,
         userName: this.member.userName,
         userEmail: this.member.userEmail }
      ).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }

Sign In 버튼을 클릭하면 submitForm( ) 메소드가 실행되고, axios에 data값을 담아 spring boot의 Controller로 보내주었습니다.

 

여기서! 보통 책이나 블로그를 찾아보면 $axios.post(URL, {DATA}) 형식으로 코드를 작성하라고 나와있었지만

저는 아무리해도 axios가 정의되어있지 않다는 에러만 나왔습니다.

stackoverflow를 찾아보니 this.data 처럼 경우에따라 $axios 앞에 반드시 this.를 붙여줘야지만 설치된 axios를

인식한다고 하여 this.를 붙여주니 에러는 더이상 나오지 않았습니다.

 

그 다음으로 애를 먹었던 부분은 바로 URL 이었습니다. 

구글링으로 찾아보면 URL앞에 '/api/'가 붙어있는데.. 모두가 다 쓰는걸 보면 필수인 것 같긴 한데.......

'/api/'가 대체 뭔가 정말 한참을 고민했습니다.

 

그러다가 문득 vue.config.js 을 생성하면서 백엔드 서버와 통신을 위한 proxy설정을 했던것이 떠올랐습니다.

 

//vue.config.js

proxy: {
      '/api/*': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

 

결국 '/api/user/joinform' 으로 path를 작성하고 다시 버튼을 클릭하고나니!

 

통신이 성공하고, then( ) 메소드로 응답을 받을 수 있었습니다.

 

3. VO 코드 작성

 

//memberVO.java

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor //생성자
@NoArgsConstructor //기본생성자
@Data //Getter, Setter
public class MemberVO {
  private String userId;
  private String userPw;
  private String userName;
  private String userEmail;
}

저는 spring boot initializer로 생성 시 lombok을 기본적으로 추가하였습니다.

DB컬럼명과 맞춰서 변수선언을 해주고 lombok과 관련한 어노테이션을 추가해줍니다.

 

form으로 넘기는 데이터명, 변수명, DB컬럼명은 헷갈리지 않고 (에러를 보지 않고) 정확하게 들어 갈 수 있도록 모두 동일하게

맞춰주었습니다.

 

4. Controller 코드 작성

UserController.java

@RestController //비동기 통신을 위한 Annotation
@RequestMapping("/api/user")//'/api/user/'를 포함하는 모든 요청을 받음
public class UserController {

  @PostMapping(value="/joinform")
  @ResponseBody
  public void joinForm(@RequestBody MemberVO vo) {

    System.out.println(vo.toString());

  }
}

우선 UserController에서는 사용자에 대한 모든 요청을 처리하기 위해 class에 @RequestMapping('/api/user/')

어노테이션을 선언 해주었습니다.

 

그리고 비동기통신으로 넘어온 값을 바로 VO에 담을 수 있도록 @RequestBody 어노테이션을 이용하여 매개변수로

MemberVO를 받아왔습니다.

 

그리고 값이 잘 넘어왔고, VO에 정상적으로 담겼는지 확인하기 위해 vo.toSting( )으로 터미널에 출력되도록 해 보았습니다.

 

결과는!!!!

화면에서 Sign In 버튼을 누른 후 터미널을 확인해 보면 값들이 VO에 무사히 잘 들어간 값들을 확인 할 수 있습니다!

 

 

 

사실 mapper를 통해 DB에 값을 넣어주는 것 까지 시도를 해 보았지만 값이 넘어가지 않는다는 에러로 인해 또 다시 고전중에 있습니다 ㅠ

 

정말 한 고비 넘으니 더 큰 고비가 나타나는 것 같습니다.

 

다음 포스팅에서는 MySQL과의 외로운 싸움에 대해 상세히 다뤄보도록 하겠습니다!

 

여기까지 읽어주셔서 감사합니다^^