javaSpring

스프링 부트, JPA, Thymeleaf를 이용한 페이징 처리 2 - 게시판 화면 생성

JPA, Spring, java, pagination

view에서 사용할 bootstrap을 추가하기 위해 pom.xml에 bootstrap webjar의 dependency를 추가한다.

1
2
3
4
5
<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>bootstrap</artifactId>
	<version>3.3.5</version>
</dependency>

좌측 1:Project의 External Libraries에서 webjars를 검색해보면 다음과 같이 bootstrap이 있는 것을 확인할 수 있다.

이제 본격적으로 화면을 만들어보자

게시판 view를 불러오기 위한 Controller를 추가하자

  • BoardController
1
2
3
4
5
6
7
8
9
10
11
12
13
package com.devson.pagination.web.controller;

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

@Controller
public class BoardController {

    @GetMapping("/boards")
    public String boardView() {
        return "board";
    }
}

“/boards”를 호출하면 board 라는 view를 불러오는데 스프링 부트의 자동설정에 의해 resources/templates/board.html을 불러온다.
마치 Spring MVC 프로젝트를 생성하면 기본적으로 view resolver가 설정돼있는 것과 같다.

그럼 resources/templates/board.html을 생성해보자

  • board.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>게시판</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body class="container">

    <div class="jumbotron">
        <h2>스프링 부트 게시판</h2>
    </div>

    <table class="table">
        <tr>
            <th>글 번호</th>
            <th>글쓴이</th>
            <th>글 제목</th>
        </tr>
        <tr th:each="i: ${#numbers.sequence(1, 10)}">
            <td th:text="${i}"></td>
            <td th:text="글쓴이 + ${i}"></td>
            <td th:text="제목 + ${i}"></td>
        </tr>
    </table>


    <nav style="text-align: center;">
        <ul class="pagination">
            <li class="disabled">
                <a href="#" aria-label="First">
                    <span aria-hidden="true">First</span>
                </a>
            </li>
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&lt;</span>
                </a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&gt;</span>
                </a>
            </li>
            <li>
                <a href="#" aria-label="Last">
                    <span aria-hidden="true">Last</span>
                </a>
            </li>
        </ul>
    </nav>

</body>
</html>

위 코드에서 아래와 같은 tr 태그에 th라는 속성이 있다.
이는 Thymeleaf에서 제공하는 기능으로 JSP로 치면 <c:forEach>와 같다.
아래 코드를 통해 table에 일일이 tr+td 태그를 박아넣지 않아도 화면 테스트를 할 수 있다.

1
2
3
4
5
<tr th:each="i: ${#numbers.sequence(1, 10)}">
	<td th:text="${i}"></td>
	<td th:text="글쓴이 + ${i}"></td>
	<td th:text="제목 + ${i}"></td>
</tr>

서버를 실행시켜 http://localhost:8080/boards 에 접속하여 view를 확인해보자.

Share