@GetMapping("response-string")
@ResponseBody
public String getString(@RequestParam("name") String name){return "hello" + name;}
Node.js에서의 res.send()와 동일하다고 생각해도 된다.
DTO 이용하기
request.html
<h2>DTO 이용하기</h2>
<div style="display: flex">
<form action="/dto/response1" method="get" style="margin-right: 20px;">
<h3>Get - DTO</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="submit">GET 전송</button>
</form>
<form action="/dto/response2" method="post" style="margin-right: 20px;">
<h3>Post - DTO</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="submit">Post 전송 ( RequestBody x )</button>
</form>
<form action="/dto/response3" method="post" style="margin-right: 20px;">
<h3>Post - DTO</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="submit">Post 전송 ( RequestBody O )</button>
</form>
</div>
UserDTO.java
get, set 함수를 만들어줘야 한다.
package codingon.kdt.kdt8.dto;
public class UserDTO {
private String name;
private String age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
}
MainController.java
@RequestBody를 사용했을 때만 오류가 발생한다.
@RequestBody는 json 이나 xml 데이터 형식을 읽기 때문이다.
즉, 일반 폼 Get 방식 DTO(@ModelAttribute)로 전송을 해야한다.
@GetMapping("/dto/response1")
@ResponseBody
public String dtoAPI1(@ModelAttribute UserDTO userDTO){
//ModelAttribute: html 폼 데이터를 컨트롤러로 전달할 때 사용. get이나 post 전송에서 사용
String msg = userDTO.getName() +" "+ userDTO.getAge()+"!!!!";
return msg;
}
//일반 폼 Get 방식 - DTO(@ModelAttribute) 전송 가능
//일반 폼 Get 방식 - DTO(@RequestBody) 오류 발생
@PostMapping("/dto/response2")
@ResponseBody
public String dtoAPI2(UserDTO userDTO){
String msg = userDTO.getName() + " " + userDTO.getAge() + "!!!";
return msg;
}
@PostMapping("/dto/response3")
@ResponseBody
public String dtoAPI3( @RequestBody UserDTO userDTO){
//RequestBody : json 또는 xml 데이터 형식을 읽는다.(axios)
//일반 폼 전송 시 데이터 형식은 기본값으로 x-www-form-urlencoded
String msg = userDTO.getName() + " " + userDTO.getAge() + "!!!";
return msg;
}
Axios-DTO 이용하기
request.html
<script>
function dtoResponse1() {
var form = document.getElementById('form_dto1');
axios.get(`/axios/response1?name=${form.name.value}&age=${form.age.value}`)
.then((res)=>{
console.log( res );
console.log( 'dtoResponse1 : ', res.data );
});
}
function dtoResponse2() {
var form = document.getElementById('form_dto1');
axios.get(`/axios/response2?name=${form.name.value}&age=${form.age.value}`)
.then((res)=>{
console.log( res );
console.log( 'dtoResponse2 : ', res.data );
});
}
function dtoResponse3() {
var form = document.getElementById('form_dto2');
axios.post(`/axios/response3`, {name: form.name.value, age: form.age.value})
.then((res)=>{
console.log( res );
console.log( 'dtoResponse3 : ', res.data );
});
}
function dtoResponse4() {
var form = document.getElementById('form_dto2');
axios.post(`/axios/response4`, {name: form.name.value, age: form.age.value})
.then((res)=>{
console.log( res );
console.log( 'dtoResponse1 : ', res.data );
});
}
function dtoResponse5() {
var form = document.getElementById('form_dto2');
axios.post(`/axios/response5`, {name: form.name.value, age: form.age.value})
.then((res)=>{
console.log( res );
console.log( 'dtoResponse5 : ', res.data );
});
}
</script>
<br>
<hr>
<h2>DTO 이용하기 - axios</h2>
<div style="display: flex">
<form action="/axios/response1" method="get" style="margin-right: 20px;" id="form_dto1">
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="button" onclick="dtoResponse1();">GET ( 일반 ) - axios</button>
<button type="button" onclick="dtoResponse2();">Get ( DTO ) - axios</button>
</form>
<form action="/axios/response3" method="post" style="margin-right: 20px;" id="form_dto2">
<h3>Post ( 일반 ) - axios</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="button" onclick="dtoResponse3();">Post ( 일반 ) - axios</button>
<button type="button" onclick="dtoResponse4();">Post ( DTO ) - axios ( RequestBody X )</button>
<button type="button" onclick="dtoResponse5();">Post ( DTO ) - axios ( RequestBody O )</button>
</form>
</div>
MainController.java
axios로 값을 전달하게 되면 파라미터로 값이 들어오지 않는다. 이 상태에서 @RequestParam으로 값을 전달 받으면 required의 기본값이 true이기 때문에 오류가 발생한다.
@GetMapping("/axios/response1")
@ResponseBody
public String axiosResponse1(@RequestParam String name, @RequestParam String age){
String msg = "이름: " + name + ", 나이: " + age;
return msg;
}
@GetMapping("/axios/response2")
@ResponseBody
public String axiosResponse2(UserDTO userDTO){
String msg = "이름: " + userDTO.getName() + ", 나이: "+ userDTO.getAge();
return msg;
}
@PostMapping("/axios/response3")
@ResponseBody
//@RequstParam required 기본값이 true
//axios로 값을 전달하게 될 경우 파라미터로 값이 들어오지 않는다.(Post로 보냈을 때)
//값이 들어오지 않는데, @RequestParasm의 required가 기본값이 true이기 때문에 오류
public String axiosResponse3(@RequestParam String name, @RequestParam String age){
String msg = "이름: " + name + ", 나이: "+ age;
return msg;
}
@PostMapping("/axios/response4")
@ResponseBody
public String axiosResponse4(UserDTO userDTO){
String msg = "이름:" + userDTO.getName() + ", 나이: "+ userDTO.getAge();
return msg;
}
@PostMapping("/axios/response5")
@ResponseBody
public String axiosResponse5(@RequestBody UserDTO userDTO){
String msg = "이름:" + userDTO.getName() + ", 나이: "+ userDTO.getAge();
return msg;
}
//@RequestParam @ModelAttribute : 매개변수(파라미터)로 전달된 친구들을 변환
//@RequestBody: json 형태의 데이터 (데이터)
VO 이용하기
request.html
<h2>VO 이용하기</h2>
<div style="display: flex">
<form action="/vo/response1" method="get" style="margin-right: 20px;">
<h3>Get - VO</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="submit">GET 전송</button>
</form>
<form action="/vo/response2" method="post" style="margin-right: 20px;">
<h3>Post - VO</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="submit">Post 전송 ( RequestBody x )</button>
</form>
<form action="/vo/response3" method="post" style="margin-right: 20px;">
<h3>Post - VO</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="submit">Post 전송 ( RequestBody O )</button>
</form>
</div>
UserVO.java
VO의 경우에는 set 함수를 만들지 않는다.
package codingon.kdt.kdt8.vo;
public class UserVO {
private String name;
private String age;
public String getName() {
return name;
}
public String getAge() {
return age;
}
}
<script>
function voResponse1() {
var form = document.getElementById('form_vo1');
axios.get(`/axios/vo/response1?name=${form.name.value}&age=${form.age.value}`)
.then((res)=>{
console.log( res );
console.log( 'dtoResponse1 : ', res.data );
});
}
function voResponse2() {
var form = document.getElementById('form_vo1');
axios.get(`/axios/vo/response2?name=${form.name.value}&age=${form.age.value}`)
.then((res)=>{
console.log( res );
console.log( 'voResponse2 : ', res.data );
});
}
function voResponse3() {
var form = document.getElementById('form_vo2');
axios.post(`/axios/vo/response3`, {name: form.name.value, age: form.age.value})
.then((res)=>{
console.log( res );
console.log( 'voResponse3 : ', res.data );
});
}
function voResponse4() {
var form = document.getElementById('form_vo2');
axios.post(`/axios/vo/response4`, {name: form.name.value, age: form.age.value})
.then((res)=>{
console.log( res );
console.log( 'voResponse4 : ', res.data );
});
}
function voResponse5() {
var form = document.getElementById('form_vo2');
axios.post(`/axios/vo/response5`, {name: form.name.value, age: form.age.value})
.then((res)=>{
console.log( res );
console.log( 'voResponse5 : ', res.data );
});
}
</script>
<br>
<hr>
<h2>VO 이용하기 - axios</h2>
<div style="display: flex">
<form id="form_vo1" style="margin-right: 20px;">
<h3>Get ( 일반 ) - axios</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="button" onclick="voResponse1();">GET ( 일반 ) - axios</button>
<button type="button" onclick="voResponse2();">Get ( VO ) - axios</button>
</form>
<form id="form_vo2" style="margin-right: 20px;">
<h3>Post ( 일반 ) - axios</h3>
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<button type="button" onclick="voResponse3();">Post ( 일반 ) - axios</button>
<button type="button" onclick="voResponse4();">Post ( VO ) - axios ( RequestBody X )</button>
<button type="button" onclick="voResponse5();">Post ( VO ) - axios ( RequestBody O )</button>
</form>
</div>
MainController.java
@RequestBody로 값을 전달하면 userVO에 setter 함수가 없어도 값이 들어간다.(필드에 내장된 set 함수를 실행한다.)
@PostMapping("/axios/vo/response4")
@ResponseBody
public String axiosVoResponse4(UserVO userVO){
String msg = "이름: "+ userVO.getName() + ", 나이: "+ userVO.getAge();
return msg;
}
@PostMapping("/axios/vo/response5")
@ResponseBody
public String axiosVoResponse5(@RequestBody UserVO userVO){
//@RequestBody로 값을 전달할때 userVO에 setter 함수가 없어도 값이 들어간다.
//@RequestBody는 setter 함수 실행이 아니라 각각의 필드(변수)에 직접적으로 값을 주입하면서 매핑
//@ModelAttribute가 setter 함수를 실행해 값을 넣어준다면
//@RequestBody는 각각의 필드(변수)에 직접적으로 값을 주입한다. 필드에 내장된 set 함수를 실행
String msg = "이름: "+ userVO.getName() + ", 나이: "+ userVO.getAge();
return msg;
}
총 정리
일반 폼 전송 시
RequestParam : Get과 Body 둘 다 가능
ParamVariable : Get만 가능
DTO 이용 - 일반 폼 전송
Get 전송 가능
Post 전송 - RequestBody가 없을 경우 가능
Post 전송 - RequestBody가 있을 경우 실패
VO 이용 - 일반 폼 전송
Get 전송 Null
Post 전송 - RequestBody가 없을 경우 Null
Post 전송 - RequestBody가 있을 경우 실패
Axios 이용 - DTO
Get 일반 : 가능
Get DTO : 가능
Post 일반 : 실패
Post DTO - RequestBody가 없을 경우 : Null
Post DTO - RequestBody가 있을 경우 : 가능
Axios 이용 - VO
Get 일반 : 가능
Get DTO : 가능
Post 일반 : 실패
Post DTO - RequestBody가 없을 경우 : Null
Post DTO - RequestBody가 있을 경우 : 가능
@RequestBody
View에서 Controller로 값을 전달할 때 HTTP Body 안에 JSON을 VO에 매핑시켜주는 Spring Annotation
