Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

bright jazz music

[bootBoard] N:1(다대일) 연관관계: 10-1 화면처리: 목록, 페이징 본문

Framework/Spring

[bootBoard] N:1(다대일) 연관관계: 10-1 화면처리: 목록, 페이징

bright jazz music 2022. 10. 8. 22:57

컨트롤러와 화면처리

 

 

서비스 계층 까지의 구현이 끝났다.

이제부터는 컨트롤러와 화면을 처리한다.

 

 

원래는 컨트롤러부터 작성하려고 했지만 그 전에, 화면에 필요한 정적 리소스들과 페이지들을 추가해야 한다.

이전 장에서 사용한 소스들을 그대로 붙여 넣는다.

 

1. 정적 리소스 추가하기

아래를 보면 static 폴더와 templates 폴더가 비어있다.

  • static 폴더의 경우, guestbook 프로젝트의 static 폴더 내의 파일들을 그대로 붙여 넣어 준다.
  • templates는 guestbook 프로젝트의 templates 내부의 layout 폴더만 붙여 넣어준다.
  • templates에는 추가로 board 폴더를 생성해준다.

이전 프로젝트의 정적 소스들

https://github.com/hojuncha997/guestbook/tree/master/src/main/resources

 

 

소스를 복사하고 생성하기 전

static과 templates 디렉토리가 비어있음을 알 수 있다.

소스를 복사하고 새로운 디렉토리를 생성하기 전.

 

static 디렉토리와 template 디렉토리에 이전 프로젝트의 소스들이 복사되었을을 알 수 있다.

또한 templates 폴더에는 board 디렉토리가 생성되었음을 확인할 수 있다.

 

이제 프로젝트에 컨트롤러 패키지를 추가하고 BoardController 클래스를 작성하자.

 

2. board 패키지 추가 후 BoardController 클래스 작성

controller 패키지 추가 후 BoardController.java 클래스 생성

 

BoardController.java

//BoardController.java
package com.example.bootboard.controller;

import com.example.bootboard.dto.PageRequestDTO;
import com.example.bootboard.service.BoardService;
import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
@RequestMapping("/board/")
@Log4j2
@RequiredArgsConstructor
public class BoardController {
    private final BoardService boardService;

    @GetMapping("/list")
    public void list(PageRequestDTO pageRequestDTO, Model model){
        log.info("list............." + pageRequestDTO);
        model.addAttribute("result", boardService.getList(pageRequestDTO));
    }
}

 

 

2. templates → board → list.html 작성

list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">

    <th:block th:fragment="content">

        <h1 class="mt-4">Board List Page
            <span>
                <a th:href="@{/board/register}">
                    <button type="button" class="btn btn-outline-primary">REGISTER
                    </button>
                </a>
            </span>
        </h1>

        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Title</th>
                <th scope="col">Writer</th>
                <th scope="col">Regdate</th>
            </tr>
            </thead>
            <tbody>

            <tr th:each="dto : ${result.dtoList}">
                <th scope="row">
                    <a th:href="@{/board/read(bno = ${dto.bno},
                    page= ${result.page},
                    type=${pageRequestDTO.type} ,
                    keyword = ${pageRequestDTO.keyword})}">
                        [[${dto.bno}]]
                    </a>
                </th>
                <td>[[${dto.title}]] ---------------- [<b th:text="${dto.replyCount}"></b>]</td>
                <td>[[${dto.writerName}]] <small>[[${dto.writerEmail}]]</small></td>
                <td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td>
            </tr>


            </tbody>
        </table>

 

콘솔로그

2022-10-09 15:14:21.009  INFO 18488 --- [  restartedMain] o.s.b.d.a.OptionalLiveReloadServer       : LiveReload server is running on port 35729
2022-10-09 15:14:21.054  INFO 18488 --- [  restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2022-10-09 15:14:21.061  INFO 18488 --- [  restartedMain] c.e.bootboard.BootBoardApplication       : Started BootBoardApplication in 2.476 seconds (JVM running for 3.667)
2022-10-09 15:14:32.503  INFO 18488 --- [nio-8080-exec-3] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
2022-10-09 15:14:32.503  INFO 18488 --- [nio-8080-exec-3] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
2022-10-09 15:14:32.504  INFO 18488 --- [nio-8080-exec-3] o.s.web.servlet.DispatcherServlet        : Completed initialization in 1 ms
2022-10-09 15:14:32.537  INFO 18488 --- [nio-8080-exec-3] c.e.b.controller.BoardController         : list.............PageRequestDTO(page=1, size=10, type=null, keyword=null)
2022-10-09 15:14:32.551  INFO 18488 --- [nio-8080-exec-3] c.e.bootboard.service.BoardServiceImpl   : PageRequestDTO(page=1, size=10, type=null, keyword=null)
Hibernate: 
    select
        board0_.bno as col_0_0_,
        member1_.email as col_1_0_,
        count(reply2_.rno) as col_2_0_,
        board0_.bno as bno1_0_0_,
        member1_.email as email1_1_1_,
        board0_.moddate as moddate2_0_0_,
        board0_.reg_date as reg_date3_0_0_,
        board0_.content as content4_0_0_,
        board0_.title as title5_0_0_,
        board0_.writer_email as writer_e6_0_0_,
        member1_.moddate as moddate2_1_1_,
        member1_.reg_date as reg_date3_1_1_,
        member1_.name as name4_1_1_,
        member1_.password as password5_1_1_ 
    from
        board board0_ 
    left outer join
        member member1_ 
            on board0_.writer_email=member1_.email 
    left outer join
        reply reply2_ 
            on (
                reply2_.board_bno=board0_.bno
            ) 
    group by
        board0_.bno 
    order by
        board0_.bno desc limit ?
Hibernate: 
    select
        count(board0_.bno) as col_0_0_ 
    from
        board board0_
2022-10-09 15:15:01.075  INFO 18488 --- [nio-8080-exec-7] c.e.b.controller.BoardController         : list.............PageRequestDTO(page=1, size=10, type=null, keyword=null)
2022-10-09 15:15:01.075  INFO 18488 --- [nio-8080-exec-7] c.e.bootboard.service.BoardServiceImpl   : PageRequestDTO(page=1, size=10, type=null, keyword=null)
Hibernate: 
    select
        board0_.bno as col_0_0_,
        member1_.email as col_1_0_,
        count(reply2_.rno) as col_2_0_,
        board0_.bno as bno1_0_0_,
        member1_.email as email1_1_1_,
        board0_.moddate as moddate2_0_0_,
        board0_.reg_date as reg_date3_0_0_,
        board0_.content as content4_0_0_,
        board0_.title as title5_0_0_,
        board0_.writer_email as writer_e6_0_0_,
        member1_.moddate as moddate2_1_1_,
        member1_.reg_date as reg_date3_1_1_,
        member1_.name as name4_1_1_,
        member1_.password as password5_1_1_ 
    from
        board board0_ 
    left outer join
        member member1_ 
            on board0_.writer_email=member1_.email 
    left outer join
        reply reply2_ 
            on (
                reply2_.board_bno=board0_.bno
            ) 
    group by
        board0_.bno 
    order by
        board0_.bno desc limit ?
Hibernate: 
    select
        count(board0_.bno) as col_0_0_ 
    from
        board board0_

 

 

화면

 

 

3. 페이징 처리

 

list.html 하단에 페이징 처리 코드 추가

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">

    <th:block th:fragment="content">

        <h1 class="mt-4">Board List Page
            <span>
                <a th:href="@{/board/register}">
                    <button type="button" class="btn btn-outline-primary">REGISTER
                    </button>
                </a>
            </span>
        </h1>

        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Title</th>
                <th scope="col">Writer</th>
                <th scope="col">Regdate</th>
            </tr>
            </thead>
            <tbody>

            <tr th:each="dto : ${result.dtoList}">
                <th scope="row">
                    <a th:href="@{/board/read(bno = ${dto.bno},
                    page= ${result.page},
                    type=${pageRequestDTO.type} ,
                    keyword = ${pageRequestDTO.keyword})}">
                        [[${dto.bno}]]
                    </a>
                </th>
                <td>[[${dto.title}]] ---------------- [<b th:text="${dto.replyCount}"></b>]</td>
                <td>[[${dto.writerName}]] <small>[[${dto.writerEmail}]]</small></td>
                <td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td>
            </tr>
            
            </tbody>
        </table>

<!--        페이징-->
        <ul class="pagination h-100 justify-content-center align-items-center">

            <li class="page-item " th:if="${result.prev}">
                <a class="page-link" th:href="@{/board/list(page= ${result.start -1},
                    type=${pageRequestDTO.type} ,
                    keyword = ${pageRequestDTO.keyword} ) }" tabindex="-1">Previous</a>
            </li>

            <li th:class=" 'page-item ' + ${result.page == page?'active':''} " th:each="page: ${result.pageList}">
                <a class="page-link" th:href="@{/board/list(page = ${page} ,
                   type=${pageRequestDTO.type} ,
                   keyword = ${pageRequestDTO.keyword}  )}">
                    [[${page}]]
                </a>
            </li>

            <li class="page-item" th:if="${result.next}">
                <a class="page-link" th:href="@{/board/list(page= ${result.end + 1} ,
                    type=${pageRequestDTO.type} ,
                    keyword = ${pageRequestDTO.keyword} )}">Next</a>
            </li>

        </ul>

 

 

화면 결과

 

 

 

'Framework > Spring' 카테고리의 다른 글

[bootBoard] N:1(다대일) 연관관계: 10-3 화면처리: 게시물 조회 처리  (0) 2022.10.09
[bootBoard] N:1(다대일) 연관관계: 10-2 화면처리: 게시물 등록 처리  (0) 2022.10.09
[bootBoard] N:1(다대일) 연관관계: 9-5. 프로젝트 적용: 게시물 수정 처리  (0) 2022.10.08
[bootBoard] N:1(다대일) 연관관계: 9-4. 프로젝트 적용: 게시물 삭제 처리  (0) 2022.10.07
[bootBoard] N:1(다대일) 연관관계: 9-2. 프로젝트 적용: 게시물 목록 처리  (0) 2022.10.05
'Framework/Spring' Related Articles more
Comments