원본 본문으로 이동하기

스프링 MVC 템플릿 엔진 Thymeleaf 사용하기

정니케 - Using spring template engine Thymeleaf Thymeleaf http://www.thymeleaf.org/doc/articles/springmvcaccessdata.html Thymeleaf는 템플릿엔진은 기존의 Mustache 템플릿 사용시 세션값을 가져오지 못하는 단점을 해결하여 사용시 매우 편함을 느끼실수있음. 공식 사이트보다 스프링을 이용하시는분이라면 아래의 dependency를 추가해주세요 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> DB연동안하고 세션값이 재대로 나타나는지에 대한 내용만 다룹니다. 서버측 코드 package com.modjk.jbbs.controllers; import javax.servlet.http.HttpSession; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.servlet.ModelAndView; @Controller public class LoginController { private static final Logger logger = LoggerFactory.getLogger(LoginController.class); @RequestMapping("/login") public String login(Model model, HttpSession session) { String id = session.getAttribute("id") == null ? (String) session.getAttribute("id") : ""; model.addAttribute("id", id); return "login"; } @RequestMapping(value = "/loginProcess", method = RequestMethod.POST ) public ModelAndView loginProcess(@RequestParam("user_id") String id, @RequestParam("user_password") String password, Model model, HttpSession session) { ModelAndView mv = new ModelAndView(); System.out.println(id); System.out.println(password); if( "123".equals(password) ) { session.setAttribute("id", id); } else { } mv.setViewName("redirect:/login"); return mv; } @RequestMapping("/logout") public ModelAndView loginProcess(Model model, HttpSession session) { ModelAndView mv = new ModelAndView(); session.invalidate(); mv.setViewName("redirect:/login"); return mv; } } 클라이언트측 코드 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Insert title here</title> <link rel="stylesheet" href="./css/bootstrap.min.css" /> <link rel="stylesheet" href="./css/bootstrap-theme.css" /> <script src="./js/jquery-1.12.4.min.js"></script> <script src="./js/bootstrap.min.js"></script> </head> <body> <div th:if="${session.id}"> <span th:text="${session.id}"></span> <a href="logout">로그아웃</a> </div> <div th:unless="${session.id}"> 로그인안됨 </div> <div style="padding:20px;text-align:center;"> <form name="form1" method="post" action="./loginProcess"> <div style="width:300px;display:inline-block;"> <div style="background-color:#F9F9F9;border-bottom:2px solid #DDDDDD;padding:8px;text-align:center;font-size:12px;height:33px;font-weight:bold;"> 회원 로그인 </div> <div style="border-bottom:1px solid #DDDDDD;padding:8px;width:300px;text-align:center;font-size:12px;overflow:hidden;"> <div class="row-fluid"> <div class="col-sm-4" style="padding-left:0px;padding-top:5px;"> <span>아이디</span> </div> <div class="col-sm-8"> <input class="form-control input-sm" name="user_id" id="user_id" type="text" style="width:100%;" /> </div> </div> </div> <div style="border-bottom:1px solid #DDDDDD;padding:8px;width:300px;text-align:center;font-size:12px;overflow:hidden;"> <div class="row-fluid"> <div class="col-sm-4" style="padding-left:0px;padding-top:5px;"> <span>비밀번호</span> </div> <div class="col-sm-8"> <input class="form-control input-sm" name="user_password" id="user_password" type="password" style="width:100%;" /> </div> </div> </div> <div class="row-fluid" style="margin-top:8px;"> <div class="col-sm-6" style="text-align:right;"> <button type="submit" class="btn btn-default btn-sm">로그인</button> </div> <div class="col-sm-6" style="text-align:left;"> <button type="button" class="btn btn-default btn-sm">목록보기</button> </div> </div> </div> </form> </div> </body> </html> 결과 [미디어]가리사니 1-156.png[/미디어] [미디어]가리사니 1-155.png[/미디어] - Bootstrap 서블릿 jQuery HTML 스프링 자바