Spring 게시물 조회 페이지 처리 / 히스토리 조작(history.replaceState( ) )

Spring 게시물 조회 페이지 처리 / 히스토리 조작 (history.replaceState( ) )

광고 한 번의 클릭은 개발자에게 매우 큰 도움이 됩니다.

 

등록 페이지를 만들었다면, 이제 상세 조회 페이지를 만들어 보겠습니다. 먼저 지난 등록 페이지 이미지입니다.

 

아래 링크에서 지난 등록 페이지 작업 글을 확인할 수 있습니다.

 

https://lifere.tistory.com/155

[Spring] 등록 입력 페이지와 등록 처리

 

게시물의 조회는 Controller에서 get( ) 메서드로 구성되어 있습니다.

등록 페이지를 복사해서 상세조회 화면을 만듦니다. register.jsp 를 복사하여 get.jsp로 붙여넣습니다.

단순 조회 페이지이므로 form 태그를 제거했고, 게시글 번호를 불러올 수 있게 추가했으며, 모든 input태그는 readonly 속성을 부여해주었습니다. 그리고 목록 화면으로 이동 버튼과 게시글 수정 버튼을 추가했습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@include file="../includes/header.jsp" %>

	<div class="row">
		<div class="col-lg-12">
			<h1 class="page-header">Tables</h1>
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<!-- /.row -->
	<div class="row">
		<div class="col-lg-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					Board Read Page
				</div>
                 <!-- /.panel-heading -->
                 
                 <div class="panel-body">
                 
                 	<div class="form-group">
                 		<label>Bno</label>
                 		<input class="form-control" name="seq_bno" 
                 			value='<c:out value="${board.seq_bno }" />' readonly="readonly">
                 	</div>
                 	
                 	<div class="form-group">
                 		<label>Title</label>
                 		<input class="form-control" name="title"
                 			value='<c:out value="${board.title }" />' readonly="readonly">
                 	</div>
                 	
                 	<div class="form-group">
                 		<label>Text area</label>
                 		<textarea class="form-control" rows="3" name="content" readonly="readonly">
                 		<c:out value="${board.content }"/></textarea>
                 	</div>
                 	
                 	<div class="form-group">
                 		<label>writer</label>
                 		<input class="form-control" name="writer"
                 			value='<c:out value="${board.writer }" />' readonly="readonly">
                 	</div>
                 	
                 	<button data-oper="modify" class="btn btn-default">Modify</button>
                 	<button data-oper="list" class="btn btn-default">List</button>
                 	
				</div>
            	<!-- /.panel-body -->
			</div>	
        	<!-- /.panel -->
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<!-- /.row -->
	
<%@include file="../includes/footer.jsp" %>

브라우저에서는 '/board/get?seq_bno=1'과 같이 게시물의 번호를 반드시 파라미터로 전달해야 합니다. 파라미터로 전달하는 값이 존재한다면 아래와 같은 페이지를 보게 됩니다.

화면 하단의 버튼은 '/board/list'와 '/board/modify?bno=xx'와 같이 이동하는 링크를 추가합니다.

 

버튼의 링크

Modify : /board/modify?bno=xx

List : /board/list

 

하단의 버튼에 onclick 속성을 부여합니다.

<button data-oper="modify" class="btn btn-default"
onclick="location.href='/board/modify?seq_bno=<c:out value="${board.seq_bno }" />'">Modify</button>
<button data-oper="list" class="btn btn-default"
onclick="location.href='/board/list'">List</button>

---

목록에서 조회 페이지로의 이동

list.jsp 페이지는 아래와 같이 조금 수정합니다.

 

변경 전

변경 후

---

게시글을 등록한 뒤에 모달 팝업이 뜨도록 세팅했었는데요.

띄워진 모달 창을 닫고,

뒤로가기를 했다가 다시 앞으로 와보겠습니다.

 

이미 끝난 처리인데 팝업이 다시 나타납니다. window.history 객체를 조작하여 모달창이 나타나지 않도록 처리할 수도 있습니다. 스크립트를 수정합니다.

다음 '뒤로 가기', '앞으로 가기' 동작을 확인합니다.

모달창이 나타나지 않는 것을 확인할 수 있습니다. 

---

오늘은 Spring에서 상세 페이지를 조회하는 방법에 대해 알아보았습니다. 도움이 되셨다면, 구독! 좋아요♥ 를 눌러주세요!

 

감사합니다!