'spring thymeleaf'에 해당되는 글 2건

[Spring MVC] thymeleaf 적용하기

[Spring] 2020. 10. 6. 20:20

# [Spring MVC] thymeleaf 적용하기

1. pom.xml 

<dependency>
	<groupId>org.thymeleaf</groupId>
	<artifactId>thymeleaf-spring5</artifactId>
	<version>3.0.11.RELEASE</version>
</dependency>

2. servlet-context.xml 설정 

 # 만약 thymelead 한글 깨진 다면,  아래의 UTF-8 들어간 부분을 확인하시길 바랍니다.

<beans:property name="characterEncoding" value="UTF-8" />

<beans:property name="fileEncoding" value="UTF-8" />

	<!-- 기존 jsp로 화면 설계 부분 -->
	<!-- 
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 
		<beans:property name="prefix" value="/WEB-INF/views/" /> <beans:property 
		name="suffix" value=".jsp" /> </beans:bean> 
	-->
	
	<!-- thymeleaf 설정 부분  -->
	<beans:bean id="templateResolver"
		class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".html" />
		<beans:property name="templateMode" value="HTML5" />
		<beans:property name="cacheable" value="false" />
		<beans:property name="characterEncoding" value="UTF-8" />
	</beans:bean>

	<beans:bean id="templateEngine"
		class="org.thymeleaf.spring5.SpringTemplateEngine">
		<beans:property name="templateResolver"
			ref="templateResolver" />
	</beans:bean>

	<beans:bean
		class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
		<beans:property name="templateEngine"
			ref="templateEngine" />
		<beans:property name="characterEncoding" value="UTF-8" />
	</beans:bean>

	<beans:bean
		class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
		<beans:property name="location"
			value="/resources/config/application.config" />
		<beans:property name="fileEncoding" value="UTF-8" />
	</beans:bean>
	<!-- thymeleaf 설정 부분  -->

3. 페이지 

<!DOCTYPE html>

<!-- thymelead 불러오기 -->
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>파일업로드</title>
</head>

<body>
	<div th:if="${msg!=null}" style="">
		<h1>파일 업로드 결과</h1>
		<h2 th:text="${msg}">${msg}</h2>
	</div>

	<h1>단일 파일 보내기</h1>
	<form method="post" enctype="multipart/form-data" action="" th:action="@{fileUpload}">
		<label>file : </label> <input type="file" name="file"> <label>name
			: </label> <input type="text" name="name"> <input type="submit" value="upload">
	</form>

	<h2>여러개 파일 보내기</h2>
	<form method="post" enctype='multipart/form-data' action="" th:action="@{multiFileUpload}">
		<label>files : </label> <input type="file" name="files" multiple>
		<label>name : </label> <input type="text" name="name"> <input type="submit" value="upload">
	</form>

    <div id="root">
        
    </div>
    <!-- <script src="../resources/dist/app.js"></script> -->
    <script src="../dist/app.js"></script>
</body>

</html>
저작자표시 비영리 변경금지

'[Spring]' 카테고리의 다른 글

PGR 패턴(Post-Get-Redirect) 패턴  (0) 2020.09.06
[SpringMVC] 커스텀 컨트롤러 어노테이션(Annotation) 만들기  (0) 2020.08.22
[Spring] Spring에서 Thymeleaf 테이블 만들기 (index 사용)  (0) 2020.07.31
[SpringMVC] 스프링 JSP에서 HTML로 설정 변경하기  (0) 2020.07.31
[SpringMVC] @GetMapping MockMVC 테스트해보기  (0) 2020.04.02
블로그 이미지

미나미나미

,

[Spring] Spring에서 Thymeleaf 테이블 만들기 (index 사용)

[Spring] 2020. 7. 31. 22:40

[Spring] Spring에서 Thymeleaf 테이블 만들기 (index 사용)

- Spring MVC, boot 둘 동일하게 작동 가능(thymeleaf 설정의 차이는 있음)

 

 

 

1. Event.java : 이벤트 내용 정의

package com.example.demo;

import java.time.LocalDateTime;

public class Event {
    private String name;
    private int limitOfEnrollment;
    private LocalDateTime startDateTime;
    private LocalDateTime endDateTime;

    public static Event.EventBuilder builder() {
        return new Event.EventBuilder();
    }

    public String getName() {
        return this.name;
    }

    public int getLimitOfEnrollment() {
        return this.limitOfEnrollment;
    }

    public LocalDateTime getStartDateTime() {
        return this.startDateTime;
    }

    public LocalDateTime getEndDateTime() {
        return this.endDateTime;
    }

    public void setName(final String name) {
        this.name = name;
    }

    public void setLimitOfEnrollment(final int limitOfEnrollment) {
        this.limitOfEnrollment = limitOfEnrollment;
    }

    public void setStartDateTime(final LocalDateTime startDateTime) {
        this.startDateTime = startDateTime;
    }

    public void setEndDateTime(final LocalDateTime endDateTime) {
        this.endDateTime = endDateTime;
    }

    public Event() {
    }

    public Event(final String name, final int limitOfEnrollment, final LocalDateTime startDateTime, final LocalDateTime endDateTime) {
        this.name = name;
        this.limitOfEnrollment = limitOfEnrollment;
        this.startDateTime = startDateTime;
        this.endDateTime = endDateTime;
    }

    public static class EventBuilder {
        private String name;
        private int limitOfEnrollment;
        private LocalDateTime startDateTime;
        private LocalDateTime endDateTime;

        EventBuilder() {
        }

        public Event.EventBuilder name(final String name) {
            this.name = name;
            return this;
        }

        public Event.EventBuilder limitOfEnrollment(final int limitOfEnrollment) {
            this.limitOfEnrollment = limitOfEnrollment;
            return this;
        }

        public Event.EventBuilder startDateTime(final LocalDateTime startDateTime) {
            this.startDateTime = startDateTime;
            return this;
        }

        public Event.EventBuilder endDateTime(final LocalDateTime endDateTime) {
            this.endDateTime = endDateTime;
            return this;
        }

        public Event build() {
            return new Event(this.name, this.limitOfEnrollment, this.startDateTime, this.endDateTime);
        }

        public String toString() {
            return "Event.EventBuilder(name=" + this.name + ", limitOfEnrollment=" + this.limitOfEnrollment + ", startDateTime=" + this.startDateTime + ", endDateTime=" + this.endDateTime + ")";
        }
    }
}

2. EventService.java : 이벤트 객체 만들기

package com.example.demo;

import org.springframework.stereotype.Service;

import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;

@Service
public class EventService {
    public List<Event> getEvents(){
        Event event = Event.builder()
                    .name("Spring")
                    .limitOfEnrollment(5)
                    .startDateTime(LocalDateTime.of(2019,1,10,10,10))
                    .endDateTime(LocalDateTime.of(2019,1,10,13,10,10))
                    .build();

        Event event2 = Event.builder()
            .name("Spring")
            .limitOfEnrollment(5)
            .startDateTime(LocalDateTime.of(2019,1,17,10,10))
            .endDateTime(LocalDateTime.of(2019,1,17,13,10,10))
            .build();

        return List.of(event,event);
    }
}

3. EventController.java : 이벤트 객체 페이지 전달

package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class EventController {

    @Autowired
    EventService eventService;

    //@RequestMapping(value = "/events" ,method = RequestMethod.GET)
    @GetMapping("events")
    public String events(Model model){
        model.addAttribute("events" ,eventService.getEvents());
        return "events";
    }

}

 

 

4. Event.html : 이벤트 내용 표현

<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #444444;
            text-align: center;
        }
        th, td {
            border: 1px solid #444444;
        }
    </style>
</head>
<body>
    <h1>이벤트 목록</h1>
    <table>
        <tr>
            <th>#</th>
            <th>이름</th>
            <th>참가 인원</th>
            <th>시작</th>
            <th>종료</th>
            <th>index 내용</th>
        </tr>
        <tr th:each="event , index: ${events}">
            <td th:text="${index.index}">#</td>
            <td th:text="${event.name}">이벤트 이름</td>
            <td th:text="${event.limitOfEnrollment}">100</td>
            <td th:text="${event.startDateTime}">2019년 1월 10일 오전 10시</td>
            <td th:text="${event.endDateTime}">2019년 1월 10일 오전 12시</td>
            <td th:text="${index}">index</td>
        </tr>
    </table>
</body>
</html>

5. 결과화면

저작자표시 비영리 변경금지

'[Spring]' 카테고리의 다른 글

PGR 패턴(Post-Get-Redirect) 패턴  (0) 2020.09.06
[SpringMVC] 커스텀 컨트롤러 어노테이션(Annotation) 만들기  (0) 2020.08.22
[SpringMVC] 스프링 JSP에서 HTML로 설정 변경하기  (0) 2020.07.31
[SpringMVC] @GetMapping MockMVC 테스트해보기  (0) 2020.04.02
@GetMapping 테스트 해보기  (0) 2020.04.02
블로그 이미지

미나미나미

,
반응형

공지사항

글 보관함

달력

«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

티스토리툴바