Spring Boot To do List_05 완료 여부 수정

목록으로 버튼 동작

To do List 상세 조회 화면에서

1. 목록으로 클릭하면 main 페이지 보이게 하기

js 연결해서 버튼 누르면 돌아가게 설정할 거

detail.html

<button id="goToList">목록으로</button>

<script src="/js/detail.js"></script>

Spring 에서 정적자원 요청(접근)시 static 폴더 기준으로 작성

static 폴더 안에 js 폴더 안에 detail.js 파일 만들어서 연결

detail.js

const goToList = document.querySelector("#goToList");

goToList.addEventListener("click", () => {
    // 메인 페이지로 재요청
    location.href = "/";
});

메인 페이지 요청

location.href

javaScript window 객체 속성 중 하나
현재 문서의 URL 을 나타냄

완료 여부 수정

1. 완료 여부 button 태그 만들 때 속성으로 js 에 todoNo 값을 전달할 수 있게 th:data-* 속성 설정

detail.html

<button
    type="button" 
    class="complete-btn" 
    th:text="${todo.complete}"
    th:data-todo-no="${todo.todoNo}"
    >완료 여부</button>

data-* 속성

• 데이터에 대한 확장성을 고려하여 설계된 속성
• js 에서 요소.dataset 을 이용해 해당 값을 얻어갈 수 있는 속성

2. javaScript 에서 complete-btn 값을 얻어오기

detail.js

const completeBtn = document.querySelector(".complete-btn");

3. completeBtn click 했을 때 이벤트 추가

detail.js

completeBtn.addEventListener("click", e => {
    // e -> event 객체
    // data-todo-no 얻어올 거임
    // 요소.dataset 으로 얻어올 수 있음
    const todoNo = e.target.dataset.todoNo;

    // Y <-> N 변경
    // 현재 상태가 Y 인지 N 인지가 중요함
    // 기존 완료 여부값 얻어오기
    let complete = e.target.innerText;
    // innerText 가 Y 인지 N 인지

    // complete 가 Y 이면 N 으로 보내주고 N 이면 Y 로 보내줌
    complete = (complete === 'Y') ? 'N' : 'Y';

    // 완료 여부 수정 요청하기 (요청 주소 작성)
    location.href = `/todo/changeComplete?todoNo=${todoNo}&complete=${complete}`;
    
    // /todo/changeComplete?todoNo=3&complete=Y
    // -> 이런 식으로 넘어갈 거임
});

javaScript 에서 queryString으로 java에 값 전달하면서 controller에 넘겨줄 주소 작성할 때

location.href

location.href = `/todo/changeComplete?todoNo=${todoNo}&complete=${complete}`;

4. Controller 에서 전달 받은 요청 주소 mapping, 매개변수로 받은 값으로 service 호출

TodoController

	@GetMapping("changeComplete")
	public String changeComplete(Todo todo) {
		// RequestParam 으로도 얻어올 수 있지만 ModelAttribute 로 얻어와서 Todo 에 바로 세팅
		// @ModelAttribute 는 생략 가능
		// js 에서 넘겨준 값이 todoNo, complete 쿼리스트링으로 넘겨줌
		
		// 변경 서비스 호출
		int result = service.changeComplete(todo);

javaScript 에서 location.href 로 요청 넘어온 건 GET 요청임 GetMapping 으로 받아줘야함

5. ServiceImpl 에서 mapper 호출해서 값 넘겨주고 반환 받기

ServiceImpl

	// 완료 여부 변경
	@Override
	public int changeComplete(Todo todo) {
		return mapper.changeComplete(todo);
	}

TodoMapper interface

	/** 완료 여부 수정
	 * @param todo
	 * @return result
	 */
	int changeComplete(Todo todo);

todo-mapper.xml
전달 받은 값으로 DB update 해줄 거라서 update 로 받음

	<!-- 완료 여부 변경 -->
	<update id="changeComplete" parameterType="Todo">
		UPDATE TB_TODO SET
		COMPLETE = #{complete}
		WHERE TODO_NO = #{todoNo}
	</update>

받아온 todoNo 에서
전달할 때 원래 DB 에 complete 가 Y 로 저장돼있었으면 N 으로 넘겨주고 N 이었으면 Y 로 넘겨줘서 받아온 값을 그대로 update 해주는 구문

6. Controller 로 값 반환받아서 처리

받아온 값에 따라 변경 성공 시와 실패 시 나눠서 message 값 세팅

redirect 로 값 전달할 거라서 method 매개변수에 RedirectAttributes ra 추가

		String message = null;
		
		if(result > 0) message = "변경 성공";
		else message = "변경 실패";
		
		// 현재 요청 주소 : /todo/changeComplete
		// 응답 주소 : /todo/detail
		
		ra.addFlashAttribute("message", message);
		
		return "redirect:detail?todoNo=" + todo.getTodoNo(); // 상대경로

상대 경로 작성시 주의

상대 경로 작성이라서 redirect:/ 이렇게 작성하면 localhost/detail 이 요청됨
그런 경로는 존재하지 않음

return "redirect:detail?todoNo=" + todo.getTodoNo();

Controller 에서 실어준 message 있어서 요청 받은 detail.html 하단에 message 넣어줄 footer 넣어줌

<th:block th:replace="~{common/footer}"></th:block>

footer.html

<!-- message 값 alert 띄워줄 script 작성 -->
<script th:inline="javascript">
    // th:inline="javascript" 적어두면 script 태그 안에서 thymeleaf 사용할 수 있음
    const message = /*[[${message}]]*/ "전달받은메세지";

    // 전달 받은 message가 없으면 null

    if(message != null) {
        alert(message);
    }

</script>