스프링 부트 비동기 통신
백엔드 서버를 돌린 상태에서 프론트엔드에서 비동기 통신을 통해 백엔드 서버로 데이터를 요청하는 방식으로 예제를 구성한다.
Cors 설정
각각 두 개의 환경에서 이클립스를 실행하여 다른 포트로 서버를 실행할 것이기 때문에 cors를 신경써야 한다.
즉 허용하는 도메인을 설정해야한다는 것이다.
스프링부트 프로젝트로 가서 java내의 자신이 생성한 패키지 폴더 내에 WebConfiguration.java파일을 만든다.
@Configuration
public class WebConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*");
}
}
allowedOrigins() 내에 허용하는 도메인(여기서는 포트를 사용하므로 localhost:3000등)을 적는다. *을 사용하면 모든 경우 진입을 허용하는 것이다.
백엔드 프론트엔드 통신
사용할 컨트롤러는 아래와 같다. 또한 스프링 부트 포트 프로젝트의 포트는 3100번을 사용한다.
@RestController
public class HelloController {
@GetMapping("/human")
public HumanDto human() {
System.out.println("----- HelloController human() -----" + new Date());
HumanDto human = new HumanDto(1, "길동", "여기");
return human;
}
}
이제 다른 서버로 실행시킨 html파일에서 해당 스프링 부트 서버의 컨트롤러에 진입해 값을 받아올 수 있다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<body>
<button type="button" id="btn">Btn</button>
</body>
<script>
$(document).ready(() => {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:3100/human",
type: "get",
success: function (res) {
console.log(res);
},
error: function () {
alert("error");
}
});
});
});
</script>
</html>
아래의 데이터를 받아왔음을 확인할 수 있다.
결과
{number: 1, name: '길동', address: '여기'}
데이터 사용
프론트에서 백엔드의 아래의 컨트롤러로 데이터를 넘겨 처리한 결과를 받아오는 예제이다.
@RestController
public class HelloController {
@GetMapping("conn_param")
public Map<String, Object> conn_param(int num, String str) {
System.out.println("HelloController conn_param() -----" + new Date());
System.out.println("num : " + num + " str : " + str);
Map<String, Object> responseMap = new HashMap<>();
responseMap.put("num", num + 100);
responseMap.put("str", str + ":processed");
return responseMap;
}
}
받아온 num에 100을 더하고, str에는 :processed라는 문자열을 붙여서 내보낸다.
컨트롤러에 RestController 어노테이션이 붙었으므로 결과값인 맵 객체는 Json형식으로 반환되어 프론트로 전달 될 것이다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<body>
<button type="button" id="btn">Btn</button>
</body>
<script>
$(document).ready(() => {
$("#btn").click(function () {
let frontData = {
num:12,
str:"from front html"
}
$.ajax({
url: "http://localhost:3100/conn_param",
data:frontData,
type: "get",
success: function (res) {
console.log(res);
},
error: function () {
alert("error");
}
});
});
});
</script>
</html>
결과
{str: 'from front html:processed', num: 112}
추가 : 바닐라 JS를 이용한 통신
function getHuman(){
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){//통신 성공
alert(this.response);//제이손형태 문자열로 받아진다.
let human = JSON.parse(this.response);
console.log(human);
}
}
xhttp.open("GET", "http://localhost:3100/human", true);
xhttp.send();
}
소스 코드(깃허브)
https://github.com/fkthfvk112/springBoot_practice/tree/main/asyncPrac
'컴퓨터 > Spring' 카테고리의 다른 글
| [Spring] 스프링 Optional 클래스를 이용한 null 쿼리스트링 처리 (0) | 2023.08.21 |
|---|---|
| [Spring Boot] 스프링 부트 파일 업로드 다운로드 예제 코드 (깃허브 포함) (0) | 2023.08.02 |
| [Spring boot] 스프링 부트 컨트롤러 기본 코드 (0) | 2023.08.02 |
| [Spring Boot] 스프링 부트 시작하기 (0) | 2023.08.02 |
| [Spring] 컨트롤러 사이 이동 (0) | 2023.07.17 |
댓글