게시글 리스트 만들기

친친·2022년 10월 21일
0

이전에 작성한 게시글들을 한데 모아서 볼 수 있는 게시글 리스트를 만드는 과정이다
전체적인 흐름은 다음과 같다

  • 해당 테이블의 모든 데이터를 List로 반환하는 findAll()을 boardService에 추가한다
  • 'localhost:8080/board/list'로 요청시 boardlist.html 뷰를 반환하도록 Controller에 boardList()를 만든다.
  • 테이블에 있는 모든 데이터를 가져와 게시글 리스트로 만들어 화면에 뿌려주는 boardlist.html 뷰를 만든다

사전작업

//테스트 데이터 프로시저 생성

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 ;

DELIMITER 란?


//boardServce.java

@Service
public class BoardService{

	@Autowired
    private BoardRepository boardRepository;
    
    public List<Board> boardList(){
    	return boardRepository.findAll();
    }
}

findAll()

JpaRepository에서 기본적으로 제공하는 함수로서 DB에 저장된 전체 레코드를 불러와서 List로 반환해준다


//boardController.java

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

Model 객체

Model이란?

스프링에서는 Model 객체를 이용해서 데이터를 담아 뷰로 전달한다.
위 코드에서도 addAttribute()메서드를 이용해서 Model 객체에 데이터를 저장한다. 컨트롤러의 boardList메서드는 Model 객체를 파라미터로 받아, boardService.boardList()를 "list"란 key로 전달한다. 그리고 이를 뷰(boardlist.html)에서 "list"란 key를 이용해 사용한다.


//boardlist.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
...
<body>
  <div class="layout">
      <table>
            <thead>
                  <tr>
                        <th>글번호</th>
                        <th>제목</th>
                  </tr>
            </thead>
            <tbody>
                  <tr th:each="board : ${list}" >
                        <td th:text="${board.id}">1</td>
                        <td>                          <!--localhost:8080/board/view?id=1~121-->
                            <a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}"/>
                        </td>
                  </tr>
            </tbody>
      </table>
  </div>
</body>
</html>

thymeleaf 란?
Model 객체로 전달한 데이터들을 ${list}로 가져와서 th:each 문법에 따라 board에 하나씩 꺼내와서 ${board.id}와 ${board.title}을 화면에 뿌려준다.
결과는 아래와 같다.




[출처] 위 내용은 한코딩님의 강의를 보고 정리한 내용입니다

https://youtu.be/XytVcdgiVRk

profile
웹개발 블로그

0개의 댓글