[Spring] 게시판 프로젝트11 - detail페이지로 이동(+history.state제어)

리스트에서 특정 게시물을 선택해서 세부 내용을 조회하고 싶은 경우에는 get방식을 사용한다.

get방식으로 bno(pk)값을 넘겨주기 위해서는 아래의 코드를 수정해야한다.

 

해당 코드는 단순히 bno값을 조회하는 부분이다.

<td><c:out value="${board.bno}" /></td>

bno부분을 눌렀을 때 디테일 페이지로 이동하도록 a태그를 붙여준다.

<td><a href="/board/get?bno=<c:out value="${board.bno}" />"><c:out value="${board.bno}" /></a></td>

코드를 보면 <c:out value="${board.bno}" />부분은 결과적으로 숫자값이기 때문에 get방식으로 붙여주었다.

(url의 get은 페이지 이름이다.)

bno=1로 인덱스값이 잘 들어가진다.

우린 이전 실습에서 컨트롤러에 /get을 정의해주었다. 미리 작업을 해두었기 때문에 a태그로 연결만 해도 디테일 페이지로 이동이 가능하다.

@GetMapping("/get")
public void get(@RequestParam("bno") Long bno, Model model) {
    model.addAttribute("board", service.get(bno));
}

 

get.jsp파일은 register.jsp파일의 내용과 유사하기 때문에 복사 붙여넣기 해주고,

input태그들이 입력이 불가능하도록 변경한다. (readonly="readonly" 사용, form태그 제거)

 

특정 bno값의 데이터를 불러와야 하기 때문에 input태그의 value속성에 JSTL을 사용한다.

value="<c:out value='${board.bno}'/>"	<!--이런 식으로!-->

폼 부분의 전체 코드를 확인하면 다음과 같다.

<div class="panel-body">
    <div class="form-group">
        <label>Bno</label> <input class="form-control" name="bno"
        readonly="readonly" value="<c:out value='${board.bno}'/>">
    </div>
    <div class="form-group">
        <label>Title</label> <input class="form-control" name="title"
        readonly="readonly" value="<c:out value='${board.title}'/>">
    </div>
    <div class="form-group">
        <label>Content</label>
        <textarea class="form-control" rows="5" name="content"
        readonly="readonly"> <c:out value='${board.content}' /></textarea>
    </div>
    <div class="form-group">
        <label>Writer</label> <input class="form-control" name="writer"
        readonly="readonly" value="<c:out value='${board.writer}'/>">
    </div>
    <button data-oper="modify" onclick="location.href='/board/modify?bno=<c:out value="${board.bno}"/>'" class="btn btn-default">수정</button>
    <button data-oper="list" onclick="location.href='/board/list'" class="btn btn-default">목록</button>
</div>

 

여기서 마무리를 하면 2퍼센트 부족한 코드이다. 

게시물을 등록하고 리스트페이지로 이동한 후, 디테일페이지를 클릭하고나서 뒤로가기를 하면 다시 등록되었습니다 alert창이 뜨게 된다. 이전 실습 내용 중에서 redirect의 AddFlashAttribute속성에 대해 배웠는데, 그럼 여기서도 적용이 필요한 것 아니냐는 의문이 들 수 있다.

 

👇 안봤으면 참고하기

2021.07.13 - [WEB/Spring] - [Spring] 게시판 프로젝트10 - Redirect 처리 (addFlashAttribute)

[Spring] 게시판 프로젝트10 - Redirect 처리 (addFlashAttribute)

 

그러나 이 경우에는 get에서 list로 redirect해주는 것이 아니기 때문에 RedirectAttributes클래스를 사용하지 않는다.

그래서 이 문제를 해결하기 위한 다른 방안을 찾아야하는데,

이 '뒤로가기'(혹은 '앞으로가기')의 경우에는 서버를 다시 호출하는 것이 아니라 과거에 자신이 가진 모든 데이터를 활용하여 화면을 보여주기 때문에 alert창이 다시 뜨게 된다.

 

이 문제를 해결하기 위해서는 windows의 history객체를 이용할 수 있다.

현재 페이지는 alert를 다시 띄울 필요가 없다고 표시를 해두는 방법을 사용하려고 한다.

 

👇 windows의 history객체에 관해서는 아래의 포스팅에서 더욱 자세히 설명하였으니 참고하기

https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7

(HTML&DOM) History API - 주소를 내 마음대로!

history.replaceState(status,title,"url");

첫 번째 인자는 바뀐 주소와 함께 저장할 데이터 객체이고, 두 번째 인자는 바꿀 제목, 세 번째 인자는 바꿀 주소이다.

우린 이 값을 아무것도 없는 null상태로 만들어서 전달해줘야 하기 때문에, 알림창을 띄웠으면 바로 history.state의 상태값을 변경해서 문제를 해결할 수 있다.

$(document).ready(function() {
		var result = '<c:out value="${result}"/>';
		if(history.state){
			return;
		}
		if(!(result=='')&& parseInt(result)>0){
			alert(parseInt(result)+"번 게시물이 등록되었습니다!");
			history.replaceState({}, null, null);
		}	
	});