인텔리J+Gradle+SpringBoot2개발 타임리프 템플릿으로 html구현_4

지난 포스트에 이어서

[인텔리J+Gradle+SpringBoot2개발 타임리프 템플릿으로 html구현_4] 을 해 보았습니다.

- 기술참조: http://wonwoo.ml/index.php/post/1209

- 공통내역: 메이븐 빌더기반 -> 그래들 빌더기반으로 변경, 스프링부트1.4 -> 스프링부트2.2.0 으로 마이그레이션

- 디자인 부분은 클린 블로그라는 부트스트랩 기반의 Free디자인 소스 사용

  소스잠조: https://startbootstrap.com/themes/clean-blog/

- 작업결과: 스프링 타임리프 템플릿으로 html파일에 jsp 템플릿 코드 적용 및 페이징 처리(아래화면)

- (아래 페이징 처리된 결과 와 h2-console로 post테이블에 입력된 내용 확인OK)

- 현재는 thymeleaf-spring-data-dialect:3.4.0 플러그인으로 페이지을 html에서 간닪 처리 했습니다.(아래코드)

<nav class="pull-right">
    <ul class="pagination" sd:pagination="full">
      <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true"></span></a></li>
      <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    </ul>
</nav>

- 만약 위 플러그인을 사용하지 않는다면, 아래처럼 길게 작성해야 합니다.

<!-- 사용예 출처: https://attacomsian.com/blog/spring-boot-thymeleaf-pagination -->
<nav aria-label="Pagination" th:if="${customers.totalPages gt 0}">
    <ul class="pagination justify-content-center font-weight-medium">
        <li class="page-item" th:classappend="${customers.number eq 0} ? 'disabled'">
            <a class="page-link svg-icon"
               th:href="@{/admin/customers?page={id}(id=${customers.number lt 2 ? 1 : customers.number})}"
               aria-label="Previous"
               title="Previous Page" rel="tooltip">
                <span aria-hidden="true" data-feather="chevrons-left" width="20" height="20"></span>
            </a>
        </li>
        <li class="page-item" th:classappend="${i eq customers.number + 1} ? 'active'"
            th:each="i : ${#numbers.sequence( customers.number + 1, customers.totalPages > 10 + customers.number ? customers.number + 10 : customers.totalPages, 1)}">
            <a class="page-link" th:href="@{/admin/customers?page={id}(id=${i})}" th:text="${i}"
               th:title="${'Page '+ i}"
               rel="tooltip"></a>
        </li>
        <li class="page-item disabled" th:if="${customers.number + 10 < customers.totalPages}">
            <a class="page-link svg-icon" href="#">
                <span data-feather="more-horizontal" width="20" height="20"></span>
            </a>
        </li>
        <li class="page-item" th:classappend="${customers.number + 1 eq customers.totalPages} ? 'disabled'">
            <a class="page-link svg-icon" th:href="@{/admin/customers?page={id}(id=${customers.number + 2})}"
               aria-label="Next"
               title="Next Page" rel="tooltip">
                <span aria-hidden="true" data-feather="chevrons-right" width="20" height="20"></span>
            </a>
        </li>
    </ul>
</nav>

- 오늘 작업소스(그래들+스프링부트2.2.0버전)

timespace_blog_20191219.zip

- 마이그레이션 이전 Git참조소스(메이븐+스프링부트1.5.1버전): https://github.com/wonwoo/spring-boot-clean-blog

Ps. 작업예정

- [인텔리J+Gradle+SpringBoot2개발 글쓰기구현_5] : http://wonwoo.ml/index.php/post/1236

timespace_blog_20191219.zip

8.11MB