-
main page 에서 할 일 제목 클릭하면 상세 조회 페이지로 넘어갈 수 있게 a 태그 안 연결 주소에 할 일 번호 queryString으로 넘겨주기
-
controller 에서 parameter 값 받아서 service 호출
-
service 에서 할 일 번호 넘겨서 mapper 에서 sql 조회 후 조회된 값 반환
-
controller 로 값 들고 돌아와서 조회된 결과가 있을 때와 없을 때 구분해서 분기처리
(값이 있을 때는 상세조회 페이지 보여줄 거) -
상세조회 html 만들어서 받아온 값에 대한 상세 페이지 띄워주기
1. main page 에서 할 일 제목 클릭하면 상세 조회 페이지로 넘어갈 수 있게 a 태그 안 연결 주소에 할 일 번호 queryString으로 넘겨주기
<tr th:each="todo : ${todoList}" th:object="${todo}">
<td th:text="*{todoNo}">할 일 번호</td>
<td>
<!--
url 주소 조합이 필요함 위에 th:object 있어서 *{todoNo}
없었으면 #{todo.todoNo}
-->
<a th:href="@{/todo/detail(todoNo=*{todoNo})}"
th:text="*{todoTitle}">할 일 제목</a>
</td>
<td th:text="*{complete}">완료 여부(Y/N)</td>
<td th:text="*{regDate}">등록일</td>
</tr> 타임리프를 이용한 쿼리스트링 작성법
${key} == 제목 ${query} == 검색어로 controller 세팅해둠
<a th:href="@{/board(key=${key}, query=${query})}">@{} 사용</a>/board?key=제목&query=검색어
2. controller 에서 parameter 값 받아서 service 호출
Controller
// 상세 조회
@GetMapping("detail")
public String todoDetail(
@RequestParam("todoNo") int todoNo
) {
Todo todo = service.todoDetail(todoNo);todoNo 보내서 돌려 받을 값이 Todo DTO 에 todo 하나여서 반환을 Todo로 받음
3. service 에서 할 일 번호 넘겨서 mapper 에서 sql 조회 후 조회된 값 반환
Service
// 할 일 상세조회
@Override
public Todo todoDetail(int todoNo) {
return mapper.todoDetail(todoNo);
}mapper.xml
<!-- 할 일 상세 조회 -->
<!-- com.home.todo.model.dto.Todo (원래이름) == Todo (별칭) -->
<select id="todoDetail" parameterType="_int" resultType="Todo">
SELECT TODO_NO, TODO_TITLE , TODO_CONTENT , COMPLETE,
TO_CHAR(REG_DATE, 'YYYY-MM-DD HH24:MI:SS') REG_DATE
FROM TB_TODO
WHERE TODO_NO = ${todoNo}
</select>- controller 로 값 들고 돌아와서 조회된 결과가 있을 때와 없을 때 구분해서 분기처리
(값이 있을 때는 상세조회 페이지 보여줄 거)
매개변수에 Model, RedirectAttributes 추가
조회 결과가 있을 경우 detail.html 화면 보여주고
조회 결과가 없을 경우 메인 페이지로 redirect 하면서 message 값 실어서 보냄
Controller
// 상세 조회
@GetMapping("detail")
public String todoDetail(
@RequestParam("todoNo") int todoNo,
Model model,
RedirectAttributes ra
) {
Todo todo = service.todoDetail(todoNo);
// 분기 처리
String path = null;
if(todo != null) { // 조회 결과 있을 경우
// forward : templates/todo/detail.html
path = "todo/detail";
} else { // 조회 결과 없을 경우
path = "redirect:/"; // 메인 페이지로 리다이렉트
// RedirectAttributes :
// - 리다이렉트 시 데이터를 request scope -> (잠시) session scope 로
// 전달할 수 있는 객체 (응답 후 request scope 로 복귀)
ra.addFlashAttribute("message", "해당 할 일이 존재하지 않습니다.");
}
model.addAttribute("todo", todo);
return path;
}- 상세조회 html 만들어서 받아온 값에 대한 상세 페이지 띄워주기
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="${todo.todoTitle}">할 일 제목</title>
<style>
table {
border-collapse: collapse;
}
.todo-content {
white-space: pre-wrap;
}
</style>white-space: pre-wrap;
pre 태그 처럼 처리 == HTML에 작성된 모양 그대로 화면에 출력
</head>
<body>
<h3 th:text="${todo.todoTitle}">할 일 제목</h3>
<table border="1">
<tr>
<th>번호</th>
<td th:text="${todo.todoNo}">할 일 번호</td>
</tr>
<tr>
<th>등록 날짜</th>
<td>[[${todo.regDate}]]</td>
</tr>th:text="${todo.regDate}" == [[${todo.regDate}]]
<tr>
<th>완료 여부</th>
<td>
<button
type="button"
class="complete-btn"
th:text="${todo.complete}"
th:data-todo-no="${todo.todoNo}"
>완료 여부</button>
</td>
</tr>th:data-* 속성
(data- 뒤에는 이름 짓고싶은 대로 지어주면 됨)
- 데이터에 대한 확장성을 고려하여 설계된 속성
- js 에서 요소.dataset 을 이용해 해당 값을 얻어갈 수 있는 속성
button 태그는 javascript 연결해서 기능 설정할 거임
<tr>
<th>내용</th>
<td class="todo-content" th:text="${todo.todoContent}"></td>
</tr>
</table>
<button id="goToList">목록으로</button>
<button id="updateBtn" th:data-todo-no="${todo.todoNo}">수정</button>
<button id="deleteBtn" th:data-todo-no="${todo.todoNo}">삭제</button>
<th:block th:replace="~{common/footer}"></th:block>
</body>
</html>출력 화면
