백엔드/자바
간단하게 게시판 만들기3(게시물 상세페이지)
후누피
2023. 6. 11. 15:44
728x90
boardview.html
<!DOCTYPE html>
<html lang="en" 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>
<html lang="en" 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>
게시글 상세페이지 뷰단이다.
thymleaf를 통해, 데이터베이스에 저장된 제목과 내용을 불러오게된다.
BoardController.java
@GetMapping("/board/view") // ex) localhost:8090/board/view?id=1
public String boardView(Model model, Integer id){
model.addAttribute("board", boardService.boardView(id));
return "boardview";
}
public String boardView(Model model, Integer id){
model.addAttribute("board", boardService.boardView(id));
return "boardview";
}
boardView 메서드는 모델과 id값을받아, boardview view단에 전달해준다.
이때 model에 board라는 객체에
service의 boardview 메서드 로직을통해
데이터베이스에 해당하는 id의 데이터를
저장해준다.
즉 board객체에 해당id 데이터값을 저장해서 boardview view단으로 전달해준다.
BoardService.java
public Board boardView(Integer id){
return boardRepository.findById(id).get();
}
return boardRepository.findById(id).get();
}
JpaRepository에 있는 findById 메서드를 사용해준다.
결과
해당하는 id값을 가진 게시물로 이동한다.
추가적으로 게시물리스트에서 해당게시물을 클릭했을 때
이동하는것을 구현하기위해 boardlist 뷰단에 추가작업을 한다.
boardlist.html
<!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>
<th>
<tr>
<th>글 번호</th>
<th>글 제목</th>
</tr>
</th>
<tbody>
<tr th:each="board : ${list}">
<td th:text="${board.id}">1</td> <!--localhost:8090/board/view?id=board.id-->
<td>
<a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}"></a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</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>
<th>
<tr>
<th>글 번호</th>
<th>글 제목</th>
</tr>
</th>
<tbody>
<tr th:each="board : ${list}">
<td th:text="${board.id}">1</td> <!--localhost:8090/board/view?id=board.id-->
<td>
<a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}"></a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
역시나 thymeleaf를 통해
제목 부분 <td></td>태그 안에 이동해주기위한 <a></a>태그를 추가해주고
a태그의 속성에 href를 추가하여 id=${board.id}로 해당 게시물의 상세페이지로 이동하게 구현해준다.
728x90