게시글 상세 페이지
정적으로 만들어 낸 상세 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시글 상세 페이지</title>
</head>
<body>
<h1>제목 입니다.</h1>
<p>내용이 들어갈 부분입니다.</p>
</body>
</html>👉 정적 페이지로 고정된 글을 불러오는 일은 매우 쉽지만 실제로는 우리는 우리의 정보에 맞게 화면을 출력해야 하기 때문에 이를 위한 작업 방법을 알아볼 것이다.
1. 게시글 불러오기(Service)
public Board boardview(Integer id){
return boardRepository.findById(id).get();
}- 해당 게시글의 상세페이지를 불러오기 위해서 필요한 작업으로 이 역시 컨트롤러에서 사용합니다.
서비스 로직에서 해당 상세페이지를 보기 위해서 해당 아이디를 받아올 때 get()을 사용하는 이유는? +
findById( )의 값이 Optional로 감싸져 있기 때문에 Optional 안에 값을 가져오기 위해서 get()을 사용한 것이다. (get()은 매우 위험한 방식으로 null값이 있을 땐 예외를 발생시키기에 추천하지 않습니다!!)
2. 불러온 게시글 id 뷰로 넘기기
@GetMapping("board/view") //localhost:8080/board/view?id=1
public String boardview(Model model, Integer id){
model.addAttribute("board", boardService.boardview(id));
return "boardview";
}- 해당 컨트롤러는 쿼리로 입력받은 id를 넘겨주면 각 생성된 상세페이지를 우리가 따로 만들지 않고도(정적페이지로 고정된 것들을 보여주지 않고) DB에 저장된 정보를 가져와 보여줄 수 있습니다.
- 이때 쿼리로 직접 입력해주어도 되지만 우리는 이미 생성한 db에 id가 있기 때문에 이를 사용합니다.
3. 뷰(view)
[상세 페이지로 들어가기 위한 링크 작업]
<!DOCTYPE html>
<html 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>
<tr>
<th>글번호</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr th:each = "board:${list}">
<td th:text="${board.id}">1</td>
<td >
<a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}"></a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>localhost:8080/board/view?id=1처럼 쿼리로 들어오는 id 값을 리스트 요소마다 접근해서 돌려주기에 맞는 id값을 넣어 돌려줍니다.
[상세 페이지]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시글 상세 페이지</title>
</head>
<body>
<h1 th:text ="${board.title}">제목 입니다.</h1>
<p th:text ="${board.content}">내용이 들어갈 부분입니다.</p>
</body>
</html>- 상세 페이지의 겨우 controller에서 받은 정보를 이용해 해당 상세 페이지의 제목과 내용을 보여줍니다.
즐겁고 괴로운 개발😎