스프링 부트/[스프링 부트] 게시판 무작정 따라하기

[스프링 부트] 게시판 무작정 따라하기 - 2. 게시글 리스트

sungw00 2023. 3. 12. 16:26
728x90

게시글이 잘 보이는지 테스트

임의의 게시글 120개를 생성해주는 프로시저

DELIMITER $$

CREATE PROCEDURE testDataInsert()
BEGIN
    DECLARE i INT DEFAULT 1;

    WHILE i <= 120 DO
        INSERT INTO board(title, content)
          VALUES(concat('제목',i), concat('내용',i));
        SET i = i + 1;
    END WHILE;
END$$
DELIMITER $$

프로시저를 콜해서 실행하기

call testDataInsert;

데이터 생성 확인

 

게시글 리스트를 보여주는 boardlist.html 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>게시글 리스트 페이지</title>
</head>
<style>
  .layout {
      width: 500px;
      margin: 0 auto;
      margin-top: 40px;
  }
</style>
<body>
  <div class="layout">
    <table>
        <thead>
          <tbody>
            <tr>
              <th>글 번호</th>
              <th>제목</th>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td>1</td>
              <td>제목입니다.</td>
            </tr>
          </tbody>
        </thead>
    </table>
  </div>
</body>
</html>

BoardController에 boardList 메서드 추가

@GetMapping("/board/list")
    public String boardList() {
        return "boardList";
    }

실행 후 결과 확인


BoardService에 boardList 메서드 추가

public List<Board> boardList() {
        return boardRepository.findAll();
    }

findAll( ) 메서드는 리스트 형태로 반환하기 때문에 boardList의 반환 타입을 List<Board>로 해주었다.

BoardController의 boardList 메서드 내용 수정

@GetMapping("/board/list")
    public String boardList(Model model) {
        model.addAttribute("list", boardService.boardList());
        return "boardList";
    }

데이터를 담아 보는 페이지로 보내주어야 하는데 여기서 Model을 사용한다.

model의 addAttribute를 사용해 "list"라는 이름에 boardService.boardList()를 바인딩해서 보내겠다는 의미이다.

 

타임리프를 이용해 받아온 데이터들을 반복하여 출력하는 문법 작성

BoardController에서 list라는 이름으로 전달했고 list에는 board가 담겨있으므로 반복을 돌며 하나씩 값을 얻어오는 것

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>게시글 리스트 페이지</title>
</head>
<style>
  .layout {
      width: 500px;
      margin: 0 auto;
      margin-top: 40px;
  }
</style>
<body>
  <div class="layout">
    <table>
        <thead>
          <tbody>
            <tr>
              <th>글 번호</th>
              <th>제목</th>
            </tr>
          </tbody>
          <tbody>
            <tr th:each="board : ${list}">
              <td th:text="${board.id}">1</td> <!-- board의 id를 출력 -->
              <td th:text="${board.title}">제목입니다.</td> <!-- board의 title을 출력 -->
            </tr>
          </tbody>
        </thead>
    </table>
  </div>
</body>
</html>

프로젝트 재시작 후 localhost:8080/board/list 요청해서 결과 확인

DB에서 id와 title 값을 정상적으로 가져와 출력한다.

 

728x90