[스프링 부트] 기본 페이지 설정 및 fetch

기본 페이지 설정

static 폴더 아래에 만들어야 실행할때의 기본 위치로 암.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>만만세</h1>
</body>
</html>

결과 화면2 : static 폴더 안에 파일 생성 / 하단의 실행버튼으로 실행

Cotroller 파일 생성 및 실습

BaboController.java

package com.th.merorng.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController //@Controller + @RestController 기능을 함
@RequestMapping("/babo")
public class BaboController {
	
	@GetMapping("/pc")
	public String getBabo() {
		return "피씨바보";
	}
}

fetch 사용 방법

1번 방법 : fetch then

BaboController.java

package com.th.merorng.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController //@Controller + @RestController 기능을 함
@RequestMapping("/babo")
public class BaboController {
	
	@GetMapping("/pc")
	public String getBabo() {
		return "피씨바보";
	}
}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>만만세</h1>
<button id="pcBtn">피씨는?</button>

<script>
	//스크립트 자동완성 됨 (Ctrl + 스페이스로 자바스크립트 타입으로 변경해줘야함)
	const pcBtn = document.querySelector("#pcBtn");
	pcBtn.onclick = function(){
		fetch("/babo/pc").then((resp)=>{ //프라미스 타입으로 반환되기에 then를 사용할 수 있음
			//text 말고 json, blob 사용할 수 있음
			resp.text().then((retVal)=>{  //기본적으로 fetch를 사용할 경우 then을 두 번 씀
				alert("최종 서버가 돌려준 값: " + retVal);
			});
		});
	}
</script>
</body>
</html>

2번 방법 : async await

BaboController.java

1번 방법과 같은 컨트롤러 내용

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>만만세</h1>
<button id="pcBtn">피씨는?</button>

<script>
	//스크립트 자동완성 됨 (Ctrl + 스페이스로 자바스크립트 타입으로 변경해줘야함)
	const pcBtn = document.querySelector("#pcBtn");
	
	//async/await 세트를 잘 쓰면 Promise에 대응하는 가독성이 높아짐
	async function fetchData() {
		let resp = await fetch("/babo/pc"); //promise이기에 then 대신 await를 사용할 수 있음
		let retVal = await resp.text(); //await를 사용하기 위해선 async 함수여야함
		alert("보기 좋은가? " + retVal); //아래와 같이 함수를 하나 필수로 만들어야함
	}
	
	pcBtn.onclick = function(){
		fetchData();
	}
	
</script>
</body>
</html>

'스프링 부트' 카테고리의 다른 글

[스프링 부트] 프로젝트 생성 시 설정 및 진행1 (0)	2024.07.11
[스프링 부트] jsp로 데이터 전달 (0)	2024.07.10
[스프링 부트] lombok 파일, 로그 레벨, jsp 파일 사용을 위한 설정 (0)	2024.07.10
[스프링 부트] sts4 설정 및 실행 방법 (0)	2024.07.10
[스프링 부트] spring boot 설치 및 amazon corretto, sts4 설치 (0)	2024.07.10

'스프링 부트' 카테고리의 다른 글

티스토리툴바