5. Spring Boot에 BootStrap 적용하기

사용할 BootStrap 템플릿 다운받기

아래 URL에서 자신의 서버에 적용할 Spring Boot 템플릿을 다운로드 받자.

URL : https://startbootstrap.com/themes

 

해당 글에서는 무료 템플릿인 https://startbootstrap.com/theme/sb-admin-2 를 다운로드 받음.

zip 파일이 다운로드 되며 아무 장소에 압축을 풀어보자.

 

css, img, js, scss, vendor 폴더와 각각의 html 파일들을 확인할 수 있다.

 

css, img, js, scss, vendor 폴더를 Spring Boot 프로젝트가 위치한 폴더의 static 폴더로 복사하자.

보통 다른 가이드들을 보면 별도로 bootstrap 폴더를 생성후 넣어주는 글들이 있는데 그렇게 하면 bootstrap에서 제공해주는 html 파일들에서 css, js 파일등을 참조하는 코드에 /bootstrap/ 를 추가해주어야 하므로 번거로울 수 있으며 html이 많은 bootstrap의 경우 휴먼 에러를 유발 할 수 있다.

 

이후 bootstrap에서 제공해주는 index.html 파일을 아래 처럼 project -> templates 경로로 이동시켜주자.

 

이후 추가할 코드는 없다. 최초 Spring boot의 경우 index.html을 참조하게 되어있으므로 이대로 서버를 실행하면 된다.

localhost:8080으로 접속 시도하자.

 

폴더와 html 파일 하나만 옮겨주었을 뿐인데 아래와 같이 정상적으로 bootstrap이 적용된 것을 알 수 있다.

 

만약 다른 html을 API와 연동하고 싶은경우 APIHTML.java를 생성한 뒤 @Controller 어노테이션과 매칭시켜주면 된다. 아래 이미지와 같이 똑같이 @ReqeustMapping을 진행한뒤 return으로 html 파일명을 넣어주면 연동된다.

 

@Controller와 @ReqeustController의 차이점은 Controller는 단순 html 페이지를 response 하는 용도로 사용되며, RequestController는 return 하는 값을 페이지에 보여주는 용도로 주로 사용된다.

 

@Controller를 통해서도 @RequestController와 같이 return되는 값을 보여주는 방법이 있다.

아래와 같이 @ResponseBody를 사용할경우 index.html을 response하는것이 아닌 index text를 브라우저상에서 보여주게 된다.

@RequestMapping(value="/test1", method = RequestMethod.GET)
public @ResponseBody String api_test(){
	return "index";
}