1.  조회 처리와 화면 개발

BoardController에 특정한 번호의 게시물을 조회하는 기능을 추가
조회할 때는 PageRequestDTO를 같이 활용해서 나중에 목록 화면으로 이동이 가능하도록 구성

@GetMapping("/read")
public void read(Long bno, PageRequestDTO pageRequestDTO, Model model) {
    BoardDTO boardDTO = boardService.readOne(bno);
    log.info(boardDTO);
    model.addAttribute("dto", boardDTO);
}

 

templates의 board 폴더에는 read.html을 구성
<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{layout/basic.html}">
<head>
    <meta charset="UTF-8">
    <title>Board Read</title>
</head>

<div layout:fragment="content">
    <div class="row mt-3">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Board Read
                </div>
                <div class="card-body">
                
                </div><!--end card body-->
            </div> <!-- end card -->
        </div> <!-- end col -->
    </div> <!-- end row -->
</div>

 

브라우저에서 /board/read?bno=310 같이 존재하는 번호로 조회

 

BoardController에서 Model에 'dto'라는 이름으로 전달되는 BoardDTO를 출력하는 부분을 <div class="card-body"> 내에 작성
<div class="card-body">
    <div class="input-group mb-3">
        <span class="input-group-text">Bno</span>
        <input type="text" class="form-control" th:value="${dto.bno}" readonly>
    </div>
    
    <div class="input-group mb-3">
        <span class="input-group-text">Title</span>
        <input type="text" class="form-control" th:value="${dto.title}" readonly>
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">Content</span>
        <textarea class="form-control col-sm-5" rows="5" readonly>[[${dto.content}]]</textarea>
    </div>

    <div class="input-group mb-3">
         <span class="input-group-text">Writer</span>
         <input type="text" class="form-control" th:value="${dto.writer}" >
    </div>

    <div class="input-group mb-3">
         <span class="input-group-text">RegDate</span>
         <input type="text" class="form-control" th:value="${#temporals.format(dto.regDate, 'yyyy-MM-dd HH:mm:ss')}" readonly>
    </div>
                   
    <div class="input-group mb-3">
         <span class="input-group-text">ModDate</span>
         <input type="text" class="form-control" th:value="${#temporals.format(dto.modDate, 'yyyy-MM-dd HH:mm:ss')}" readonly>
    </div>

    <div class="my-4">
        <div class="float-end">
            <button type="button" class="btn btn-primary">List</button>
            <button type="button" class="btn btn-secondary">Modify</button>
        </div>
    </div>


2.  목록 페이지로 이동

read.html의 마지막 부분에 버튼을 통해서 이동하는 부분이 존재. 이에 대한 처리는 각 버튼을 감싸는 <a>태그를 이용해서 PageRequestDTO의 getLink()를 활용

<div class="my-4">
    <div class="float-end" th:with="link = ${pageRequestDTO.getLink()}">
        <a th:href="|@{/board/list}?${link}|" class="text-decoration-none">
            <button type="button" class="btn btn-primary">List</button>
        </a>
        <a th:href="|@{/board/modify(bno=${dto.bno})}&${link}|" class="text-decoration-none">
            <button type="button" class="btn btn-secondary">Modify</button>
        </a>
    </div>
</div>


1)  목록에서 조회 링크 처리

목록 화면에서 게시물을 선택해 이동하도록 처리
목록을 반복문으로 처리하는 부분에서 th:with를 이용해 PageRequestDTO의 getLink() 결과를 변수로 처리하고 나머지 링크를 완성

<tbody th:with="link = ${pageRequestDTO.getLink()}">
    <tr th:each="dto:${responseDTO.dtoList}">
        <th scope="col">[[${dto.bno}]]</th>
        <td><a th:href="|@{/board/read(bno =${dto.bno})}&${link}|"> [[${dto.title}]] </a></td>
        <td>[[${dto.writer}]]</td>
        <td>[[${#temporals.format(dto.regDate, 'yyyy-MM-dd')}]]</td>
    </tr>
</tbody>

 

  ✓  완성된 후에는 페이지나 검색 조건을 유지된 채로 목록에서 조회, 조회에서 목록으로 이동이 가능

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]

+ Recent posts