게시물 리스트까지 만들었고, 제목을 클릭했을때 상세페이지로 넘어가는 페이지를 만들고 처리 할 수 있도록 한다.
- 먼저 templates 패키지에 상세 페이지를 만든다.
디자인 없이 h1태그와 p태그로 내용을 입력한다. - controller에 GetMapping으로 상세 페이지를 만든다.
이렇게 화면이 완성된것을 볼 수 있다.
이 과정은 데이터를 가져오는것이 아니라 직접 적어준거라 데이터 넘어오는 과정을 이제 처리해주어야한다.
서비스 파일에 입력해주고 return 값은 Board
3.작성해둔것을 수정한다.
localhost:8080/board/view?id=1을 주소창에 입력하게되면 그 id값이
Integer id에 들어가고 다시
boardView(id)에 들어간다.
get방식으로 게시글을 불러 올 수 있다.
불러오기만 하고 출력하는 부분이 없기때문에 타임리프로 이제 처리를 해주어야한다.
둘째중에 xmlns:~~이 줄을 넣어주어야 타임리프 문법을 사용할 수 있고,
8번째줄에 th를 추가할 수 있다.
<!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>${board.content} 이 내용을 내용이 들어갈 부분입니다.에 넣어주게된다.
이런식으로 주소에따라 게시물이 달라지는것을 볼 수 있다.
제목을 누를때 게시물 상세화면으로 넘어가야한다.
게시물 리스트가 나열된 화면에서
th:href="@{/board/view{id=${board.id})}를 추가해준다.
/board/view로 보내줄건데 id를 담아서 보내준다는 뜻이다.
href는 a태그에 링크를 걸어주는 역할로 /board/view?id=board.id
<td>
<a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}"></a>
</td>
제목을 누를 수 있고 이동할 수 있도록 된다.
리스트처리+상세페이지 넘어가기
