ChaKanNom's Blog: Spring Boot Part2 ( Spring MVC + Thymeleaf )

Spring MVC, Thymeleaf로 데모 웹 페이지를 만들어보자.

(Thymeleaf로 선택한 이유: 서버 동작 없이 브라우저에서 열 수 있다는 점)

Part1에서 선택만으로 web의존성을 넣었다. @Controller, @RequestMapping만으로 Controller설정이 하고 View와 연결이 가능하다.

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class DemoController {
   @RequestMapping("/")
   String demo(){
      return "demo";
   }
}

src/main/java/com.example.cotroller/DemoController.java

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="ko">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Demo</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>

src/main/resources/templates/demo.html

1차 결과화면

css, js, image파일과 같은 정적 리소스들을 관리해준다. "src/main/resources/static"에 정적 리소스들을 넣어주면 된다.

.demo { 
   width: 100px;
   height: 100px;
   border:2px solid #000000;
   color: #DDD;
}

src/main/resources/static/demo.css

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="ko">
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<link rel="stylesheet" href="../static/demo.css" th:href="@{demo.css}"/>

</head>
<body>
<h1>Hello</h1>
<div class="demo">Demo Text</div>
</body>
</html>

src/main/resources/templates/demo.html

위 html 밑줄친 부분에 "href"와 "th:href"가 있다. "href"는 일반적인 html 속성으로 템플릿 파일을 바로 브라우저로 읽을 때 사용하고,"th:href"은 SPeL(Spring Expression language)을 사용하여 랜더링하여 브라우저에서 보여준다.

2차 결과화면

마지막으로, WebJars(bootstrap, jquery, ...) 사용방법을 설명한다. 메이븐 POM에 사용하고자 하는 WebJars의존성을 추가한다.

<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>bootstrap</artifactId>
   <version>3.3.4</version>
</dependency>

pom.xml

<head lang="ko">
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="../static/demo.css" th:href="@{demo.css}"/>

<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css"
   th:href="@{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}"
   rel="stylesheet" media="screen" />

</head>

src/main/resources/templates/demo.html

Part3에선 DB연결 및 DAO을 만들는 방법을 알아보려 함.

ChaKanNom's Blog

페이지

2015년 11월 19일 목요일

Spring Boot Part2 ( Spring MVC + Thymeleaf )

댓글 없음:

댓글 쓰기