728x90
구현 순서
1. index.html
2. BoardController
3. BoardService
4. BoardServiceProcess
5. BoardMapper
6. board-mapper.xml
7. board-detail.html
8. 게시글 상세보기 구현 화면
1. index.html
상세보기로 페이지로 이동을 위해 글제목을 <a> 태그로 변경
<table border="1">
<tr>
<td>글번호</td>
<td>제목</td>
<td>조회수</td>
<td>수정일</td>
</tr>
<tr th:each="dto : ${list}">
<td th:text="${dto.no}">글번호</td>
<td>
<a th:href="|/board/${dto.no}|" th:text="${dto.title}">제목</a>
</td>
<td th:text="${dto.readCount}">조회수</td>
<td th:text="${#temporals.format(dto.updateDate, 'yyyy-MM-dd hh:mm:ss')}">수정일</td>
</tr>
<tr th:if="${#lists.isEmpty(list)}">
<th colspan="4">게시글이 존재하지 않습니다.</th>
</tr>
</table>
index.html에서 글제목을
<td th:text="${dto.title}">글번호</td>↓
<td>
<a th:href="|/board/${dto.no}|" th:text="${dto.title}">제목</a>
</td>
로 변경
- th:href="|/board/${dto.no}|" : URL을 동적으로 만들어준다
- | | => Thymeleaf의 URL표현법. ${} 안의 값들을 서버 측에서 동적으로 계산되어 URL의 일부로 포함되게 함
- * 동적이란? 프로그램이 실행되는 동안 여러 가지 조건에 따라 결과가 변할 수 있도록 설계되는 방식
2. BoardController
Controller에서 상세보기 매핑 메서드 추가
private final BoardService service;
//게시글 상세보기
@GetMapping("/board/{no}")
public String boardDetail(@PathVariable long no, Model model) {
service.boardDetailProcess(no, model);
return "board/board-detail";
}- /board/{no} : {no}는 경로 변수(Path Variable)를 나타낸다.클라이언트가 요청할 때 실제로 해당 변수의 값으로 대체된다.
10번 게시글을 요청했을 경우 /board/10 과 URL이 동적으로 요청된다. - @PathVariable : 경로 변수의 값을 메서드의 매개변수에 바인딩하는 데 사용 (클라이언트가 요청한 게시글 번호를 변수로 선언할 수 있음)
- Model : 뷰로 데이터를 전달하기 위한 컨테이너. 컨트롤러에서 뷰로 데이터를 넘기는 데 사용
3. BoardService
BoardService 인터페이스에 boardDetailProcess() 메서드 선언
//게시글 상세보기
void boardDetailProcess(long no, Model model);
4. BoardServiceProcess
BoardService 인터페이스의 boardDetailProcess() 메서드를 구현
private final BoardMapper mapper;
//게시글 상세보기
@Override
public void boardDetailProcess(long no, Model model) {
BoardDTO result = mapper.findByNo(no);
model.addAttribute("detail", result);
}- 요청된 게시글 번호(long no)를 매개변수로 가지고 와서 데이터 조회시 no를 조건으로 데이터를 조회할 수 있다.
- BoardDTO 타입의 참조변수에 글번호가 no인 게시글을 조회해서 저장한다
- 저장한 값을 "detail"이름으로 model에 저장한다(뷰로 데이터를 전달하기 위해)
5. BoardMapper
XML 파일에 정의된 쿼리를 호출할 findByNo() 메서드 선언
BoardDTO findByNo(long no);
6. board-mapper.xml
동적 쿼리를 사용하여 게시글 번호(no)를 매개변수로 받아 해당 번호에 해당하는 게시글 1개를 조회하는 쿼리를 구현
<select id="findByNo" resultType="com.pha.project.dto.BoardDTO">
select * from board where no = #{no}
</select>
7. board-detail.html
Thymeleaf 속성을 사용해서 상세페이지에 데이터를 동적으로 렌더링
<!DOCTYPE html>
<html>
<body>
<h3>게시글 상세페이지</h3>
<table border="1">
<tr>
<td>글번호</td>
<td>제목</td>
<td>내용</td>
<td>조회수</td>
<td>수정일</td>
</tr>
<tr th:each="dto : ${detail}">
<td th:text="${dto.no}">글번호</td>
<td th:text="${dto.title}">제목</td>
<td th:text="${dto.content}">내용</td>
<td th:text="${dto.readCount}">조회수</td>
<td th:text="${#temporals.format(detail.updateDate, 'yyyy-MM-dd HH:mm:ss')}">수정일</td>
</tr>
</table>
</body>
</html>
8. 상세보기 기능 구현 화면
728x90
'프로젝트 > 게시판' 카테고리의 다른 글
| [SpringBoot] 게시판 7. 게시글 삭제 기능 구현 (0) | 2023.08.04 |
|---|---|
| [SpringBoot] 게시판 6. 게시글 입력 기능 구현 (0) | 2023.08.03 |
| [SpringBoot] 게시판 4. 게시글 조회 기능 +페이징 처리 - 비동기 구현 (0) | 2023.08.02 |
| [SpringBoot] 게시판 3. 게시글 입력 테스트 코드 작성 (0) | 2023.08.01 |
| [SpringBoot] 게시판 2. Spring Starter Project 프로젝트 생성, 데이터베이스 설정(MariaDB, MyBatis) (0) | 2023.07.30 |
