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

[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. 결과화면