7. 게시글 목록 - 스프링부트(SpringBoot)

Haeun Shin·2021년 1월 28일

스프링 부트

목록 보기

7/10

1. 비즈니스 로직

BoardMapper.xml

게시글 목록, 게시글 개수를 가져오는 쿼리 작성

<!-- 2. 게시글 목록 -->
<select id="selectBoardList" parameterType="BoardDTO" resultType="BoardDTO">
  SELECT
  	include refid="boardColumns" />
  FROM
  	TB_Board
  WHERE
  	delete_yn = 'N'
  ORDER BY
  	notice_yn ASC,
    idx DESC,
    insert_time DESC
</select>

<!-- 3. 게시글 개수 -->
<select id="selectBoardTotalCount" parameterType="BoardDTO" resultType="int">
  SELECT
  	COUNT(*)
  FROM
  	tb_board
  WHERE
  	 mndelete_yn = 'N'
</select>

BoardMapper.java

DB와 연결하는 Mapper 인터페이스 작성

// 게시글 목록
public List<BoardDTO> selectBoardList();

// 게시글 총 갯수
public int selectBoardTotalCount();

BoardService.java

구현할 메소드를 정의하는 인터페이스 작성

// 게시글 목록 (+ 게시글 총 개수)
public List<BoardDTO> getBoardList();

BoardServiceImpl.java

값을 전달할 인터페이스를 구현

// 게시글 목록
@Override
public List<BoardDTO> getBoardList() {

  List<BoardDTO> boardList = Collections.emptyList();

  // 게시글 총 개수를 가져와 저장
  int boardTotalCount = boardMapper.selectBoardTotalCount();

  // 게시글이 있을 경우에만, 게시글 목록을 가져오는 Mapper 실행
  if(boardTotalCount > 0) {
  boardList = boardMapper.selectBoardList();
  }

  return boardList;
}

BoardController.java

service에 있는 getBoardList()를 실행시켜 리스트를 변수에 담아 세팅하고board/list.html로 이동

// 게시글 목록
@GetMapping(value = "/board/list.do")
  public String openBoardList(Model model) {

  List<BoardDTO> boardList = boardService.getBoardList();
  model.addAttribute("boardList", boardList);

  return "board/list";
}

2. 인터페이스

templates/board/write.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="board/layout/basic">

<!-- header.html 안에 있는 title 사용 -->
<th:block layout:fragment="title">
  <title>This page is a list page</title>
</th:block>

<!-- body.html 안에 있는 search 영역에 내용 추가 -->
<th:block layout:fragment="search">
  <form action="#" id="searchform-header" class="searchform js__toggle active pull-right">
    <input type="search" placeholder="Search..." class="input-search">
    <button class="mdi mdi-magnify button-search" type="submit">
      <i class="fa fa-search" aria-hidden="true"></i>
    </button>
  </form>
</th:block>

<!-- body.html 안에 있는 content 영역에 내용 추가 -->
<!-- th:href : <a>태그의 href 속성과 동일하며, Context Path를 포함한다. -->
<th:block layout:fragment="content">
  <div class="table-responsive clearfix">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>작성자</th>
          <th>등록일</th>
          <th>조회 수</th>
        </tr>
      </thead>
      <!-- 게시글 목록이 출력되는 영역 -->
      <!-- th:if : 일반 if문과 같다 -->
      <!-- th:unless : else문이다. if문의 내용을 똑같이 적어줘야된다. -->
      <tbody>
        <tr th:if="${not #lists.isEmpty( boardList )}" th:each="row : ${boardList}">
          <!-- #strings.equals 함수를 사용해서 공지여부가 'Y'라면 "공지" 출력, 아니라면 게시물 번호 출력 -->
          <td scope="row" th:text="${#strings.equals( row.noticeYn, 'Y' ) ? '공지' : row.idx}"></td>
          <td class="text-left">
            <!-- 원래 사이에 물음표(?)가 붙어야하지만, 타임리프에선 그러지 않는다. -->
            <!-- 일반적인 GET : /board/view.do?idx=${idx}&page=${page} -->
            <!-- 타임리프 GET : /board/view.do(idx=${idx}, page=${page} -->
            <a th:href="@{/board/view.do( idx=${row.idx} )}" th:text="${row.title}"></a>
          </td>
          <td th:text="${row.writer}"></td>
          <!-- #temporals.format : 원하는 날짜 형태로 포맷할 수 있다. -->
          <td th:text="${#temporals.format( row.insertTime, 'yyyy-MM-dd' )}"></td>
          <td th:text="${row.viewCnt}"></td>
        </tr>
        <tr th:unless="${not #lists.isEmpty( boardList )}">
          <td colspan="5">조회된 결과가 없습니다.</td>
        </tr>
      </tbody>
    </table>

    <div class="btn_wrap text-right">
      <a th:href="@{/board/write.do}" class="btn btn-primary waves-effect waves-light">Write</a>
    </div>

    <!-- body.html 안에 있는 pageing 사용 -->
    <th:block layout:fragment="paging">
      <nav aria-label="Page navigation" class="text-center">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li><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">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </th:block>
  </div>
</th:block>

</html>