[Spring boot & Vue.js 프로젝트 기초] axios - get, post 해보기

get: axios.get(url[, config])
post: axios.post(url[, data[, config]])
patch: axios.patch(url[, data[, config]])
delete: axios.delete(url[, config])

 

여기서 일단 get과 post 연습을 해보았다. 간단히 console창에 찍어볼 예정이다!

 

npm axios 설치

npm install --save axios

 

Spring boot 의 FriendwithLombok.java

package com.example.demo.model;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter

public class FriendwithLombok {
    private String id;
    private String name;
    private Void getId;
    private Void getName;
    private Void setId;
    private Void setName;

    public FriendwithLombok(String id, String name) 
    {
		this.id = id;
        this.name = name;
	}

}

Friend 클래스를 미리 만들어두었다. Lombok 연습을 위해 만든 클래스이다. 

아래 코드는 lombok을 사용하지 않은 Friend 클래스이다. lombok 관련 내용은 또 다른 글로 정리할 것이다! 

package com.example.demo.model;

public class Friend {
    private String id;
    private String name;

    public Friend(String id, String name) 
    {
		this.id = id;
        this.name = name;
	}

	public String getId() {
		return this.id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return this.name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

 

Spring boot 의 FriendsController.java

package com.example.demo.api;

import java.util.ArrayList;
import java.util.List;

import com.example.demo.model.FriendwithLombok;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/twitter")
public class FriendsController {
    private List<FriendwithLombok> friends;
    
    public FriendsController() {
        friends = new ArrayList<>();
        friends.add(new FriendwithLombok("nicoll", "Stepane Nicoll"));
        friends.add(new FriendwithLombok("woojung", "Jeon Woojung"));
    }

    @GetMapping("/")
    public List<FriendwithLombok> list() {
        return friends;
    }

    @GetMapping("/{id}")
    public FriendwithLombok get(@PathVariable String id) {
        return friends.stream().filter(f -> id.equals(f.getId())).findAny().orElse(null);
    }

    @PostMapping("/post")
    public String PostTest(@RequestBody String msg) {
        return "post success!!!"+msg;
    }
}

Get 주소 매핑 시에는 @GetMapping이 쓰이고, Post 주소 매핑 시에는 @PostMapping이 쓰인다.

 

@RestController 는 Rest api 통신을 위한 어노테이션으로, @Controller에 @ResponseBody가 결합된 어노테이션이다. 

즉 컨트롤러 클래스에 @RestController를 붙이면, 컨트롤러 클래스 하위 메서드에 @ResponseBody 어노테이션을 붙이지 않아도 문자열과 JSON 등을 전송할 수 있다. 

@RequestMapping은 요청에 대해 어떤 Controller, 어떤 메소드가 처리할지를 맵핑하기 위한 어노테이션이다.

어노테이션 관련 내용도 더 공부가 필요하다.

@RestController
@RequestMapping("/api/twitter")

 

이제 FriendsController 클래스 부분을 보자.

private List<FriendwithLombok> friends;

앞에서 만들어둔 FriendwithLombok 또는 Friend 클래스로 이루어진 List인 friends를 선언한다.

public FriendsController() {
    friends = new ArrayList<>();
    friends.add(new FriendwithLombok("nicoll", "Stepane Nicoll"));
    friends.add(new FriendwithLombok("woojung", "Jeon Woojung"));
}

friends에 객체 두개를 추가한다.

@GetMapping("/")
public List<FriendwithLombok> list() {
    return friends;
}

@GetMapping("/{id}")
public FriendwithLombok get(@PathVariable String id) {
    return friends.stream().filter(f -> id.equals(f.getId())).findAny().orElse(null);
}

@GetMapping 어노테이션으로 두 가지 함수를 작성했다.

하나는 friends 리스트를 반환하는 함수,

또 하나는 url에 특정 id값이 들어왔을 때 해당 id를 갖고 있는 객체 내용을 반환하는 함수

 

@PostMapping("/post")
public String PostTest(@RequestBody String msg) {
    return "post success!!!"+msg;
}

post를 할 때는 @PostMapping 어노테이션을 사용한다. 

나는 RequestBody로 문자열을 받을 예정이다. (get할 때는 ResponseBody, post할 때는 RequestBody)

성공적인 post로 msg를 받게 되면 post success!!! {msg내용}이 리턴된다. 

 

 

 

Vue의 Test.vue

<template>
  <div class="test">
    <h1>This is a Test page. </h1>
    <div id="demo">
        <button @click="submitBtn()">post하기</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {},
  mounted() {
    this.load();
  },
  methods: {
    load() {
      this.axios.get('/api/twitter/').then(res => { 
        console.log(res.data);
      });
    },
    submitBtn() {
        this.$axios.post('/api/twitter/post', "this is string").then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        });
    }
  }
}

</script>

test.vue 창이 로드 되자마자 /api/twitter/ 의 데이터를 get해오도록 하였고, [post하기] 버튼을 누르면 /api/twitter/post으로 "this is string"이라는 문자열을 post를 하도록 하였다. 

 

 

axios.get(url[, config])

this.axios.get('/api/twitter/').then(res => { 
    console.log(res.data);
});

get 은 서버의 데이터를 가져오는 역할이다.  

 /api/tiwtter/의 데이터를 가져와서 콘솔창에 찍어준다. 

 

이때 api/twitter/nicoll 과 같이 파라미터 정보를 입력하여 정보를 얻어올 수도 있다.

또는 axios 메소드의 두 번째 인자인 config 객체로 요청값을 넘길 수 있다. 이 부분은 프로젝트 진행하면서 더 다룰 것이다!

 

 

axios.post(url[, data[, config]])

this.$axios.post('/api/twitter/post', "this is string").then(res => {
	console.log(res);
}).catch(err => {
	console.log(err);
});

post는 프론트의 값을 서버로 넘기는 역할을 수행한다.

아래 코드는 /api/twitter/post 에 "this is string"이라는 문자열을 넘긴다. 

post 성공 시 response를 콘솔에 찍고 실패한다면 err코드를 찍어준다. 

 

 

결과 화면 (콘솔창)

http://localhost:8081/test

(나는 vue의 포트번호를 8081, 스프링부트 서버를 8080으로 설정했다.)

test.vue을 띄우자마자 get해오는 것을 확인할 수 있다. friends 리스트에 있던 Friend의 두 객체를 받아온다. 

[post하기] 버튼을 누르면 오른쪽 콘솔창에 'post success!!!this+is+string' 이라는 메세지가 출력된다. 상태코드도 200이라고 뜨면서 통신이 잘 된 것을 확인할 수 있다. 

 

 

 

 

참고 자료

api/twitter/ 와 api/twitter/{id} 관련 부분은 이 영상을 보면서 이해했다. 

https://www.youtube.com/watch?v=uyWnq5RDVwY&t=1304s 

vue.js에서 axios 를 사용한 서버 통신 https://uxgjs.tistory.com/138