블로그를 방문 하였을 때 가장 처음 보이는 'Welcome' 페이지를 작성하도록 하겠습니다.
루트 컨텍스트 ("/") 요청이 있는 경우 back-end 인 controller 에서 welcome 페이지를 호출하도록 합니다.
controller 패키지에 HomeController 를 추가할 것이고,
templates 패키지에 content/welcome.html 파일을 추가할 것입니다.
프로젝트 및 패키지 구조는 이전 글을 참조 해주세요.
소스
HomeController.java
import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping("/") public String home(Model model) { // View attribute model.addAttribute("template", "content/welcome"); return "index"; } } 호출할 template 를 Model 객체에 지정하고 index 페이지를 호출합니다.
index 페이지에서는 controller 에서 받은 template 변수에 대한 처리를 진행합니다.
@Controller : 해당 클래스를 Controller 로써 역할을 하도록 지정
@GetMapping : RESTful API 의 Get 형태로 호출하는 경우 처리
index.html
|
<body>
...
<!-- Main Content -->
<div th:replace="${template}"></div>
...
</body>
|
cs |
HomeController 에서 전달 받은 Model 객체의 속성 'template' 를 지정합니다.
index.html 페이지가 로딩되면 실제로 template 에는 'content/welcome' 으로 교체되고, 'welcome.html' 페이지가 보이게 됩니다.
(welcome.html 파일은 templates/content 패키지에 위치하고 있습니다)
th:replace : thymeleaf 문법으로 <div> 태그를 지정한 template 으로 교체합니다.
welcome.html
|
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-5">Welcome to Blog !!</h1>
<p>여러 가지 이야기를 담고 있습니다.</p>
</div>
</div>
|
cs |
Bootstrap 의 CSS를 이용하여 간단한 문구를 표현하는 영역을 만들었습니다.
결과
빨간 네모 박스 부분이 index.html 페이지 중 'welcome.html' 부분입니다.
'header' 부분과 'footer' 부분은 다음에 다루도록 하겠습니다.
'IT 프로젝트 > 블로그 만들기' 카테고리의 다른 글
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 로그인(login) 페이지 만들기 (0) | 2018.11.17 |
|---|---|
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 사이드바(sidebar) 만들기 (0) | 2018.11.16 |
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - Resource 경로 지정 (2) | 2018.11.15 |
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - index 페이지 작성 - UI 레이아웃 [Bootstrap + Thymeleaf] (6) | 2018.11.11 |
| [Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 개발 환경 구성 [Eclipse + Spring Boot + Gradle] (0) | 2018.11.11 |