스프링 페이징 구현 - 게시글 수정,삭제,내용보기 후 검색어유지

UriComponents 을 사용해서 페이징과 게시글 검색 기능을 구현했다.

그 후에 

 

검색기능 후 url로 검색어 유지 기능

1.검색 후 게시글 내용페이지로 들어가서 목록을 눌렀을때 검색어를 유지한채로 list로 돌아가기

2.삭제 시 원래 검색어를 유지한채 list로 돌아가기)
3.수정페이지에서 취소시 원래 검색어를 유지한채 readView로 돌아가기)

4.수정 후 readView에서 목록을 눌러 list로 돌아갈때 검색어 유지)

 

을 추가했다.

 

 

*************

SearchCriteria scri = 페이징과 검색어 값이 담긴 클래스

BoardVO boardVO = 게시글 PR,제목,내용,작성자 등 게시글 관련값이 담긴 클래스

RedirectAttributes  rttr= http주소 header 뒤에 uri을 추가해주는 라이브러리

/list = 게시글목록

/readView = 게시글내용 ( 목록에서 제목클릭으로 상세보기)

/updateView = 수정화면

/update = 수정로직

/delete = 삭제로직

---

 

1.검색어 후 게시글 내용페이지에서 목록을 눌러 list로 돌아왔을때 검색어와 페이지를 유지하기

	@RequestMapping(value="/board/readView", method=RequestMethod.GET)
	public String read(@ModelAttribute("scri") SearchCriteria scri,BoardVO boardVO, Model model) throws Exception{
		logger.info("read");
		
		model.addAttribute("read", service.read(boardVO.getBno()));
		model.addAttribute("scri", scri);
		return "/board/readView";

게시글 목록(list)에서 제목을 눌렀을때 게시글 내용으로 연결해주는 컨트롤러 readView이다

 

 

list에서 가져온 SearchCriteria값을 사용하기위해 매개변수에 파라미터를 통해 값을 받고

model을 이용하여 scri를 보내준다.

 

 

ex)

 

http://localhost:8080/board/list?page=1&perPageNum=10&searchType=t&keyword=fsd

이건 게시글목록에서 검색타입t (title) 검색어 fsd 를 검색한 내용의 1페이지의 url이다. 

 

여기서 1페이지의 bno(게시글번호)=858 번째 게시글에 들어가면

 

http://localhost:8080/board/readView?perPageNum=10&bno=858&page=1&keyword=fsd&searchType=t

가 된다

 

url을 이런식으로 UriComment 함수로 만든 page,perPageNum,searchType,keyword와 bno(게시글 기본키)

를 유지하면서 url값을 다음 화면으로 넘겨주는게 검색어 유지의 키포인트이다.

 

 

---

 readView.html (게시글 내용보기 뷰) 에 들어가서

<section id="container">
	<form name="readForm" role="form" method="post">
  <input type="hidden" id="bno" name="bno" value="${read.bno}" />
   <input type="hidden" id="page" name="page" value="${scri.page}"> 
  <input type="hidden" id="perPageNum" name="perPageNum" value="${scri.perPageNum}"> 
  <input type="hidden" id="searchType" name="searchType" value="${scri.searchType}"> 
  <input type="hidden" id="keyword" name="keyword" value="${scri.keyword}">
</form>
</section>

readView.jsp에 들어가서 scri값을 보관하기위해 form태그안에 타입 hidden으로 input태그를 추가해준다.

scri값 = SearchCriteria값(검색타입,검색어,페이지번호,표시페이지숫자) 와 bno(게시글 기본키번호)

 

---

<div>
<button type="button" class="btn btn-primary" id="list_btn">목록</button>
</div>

목록버튼을 만들고

id는 script 태그의 #list_btn으로 연결된다.

 

 

// 목록버튼

$("#list_btn").on("click", function(){ location.href = "/board/list?page=${scri.page}" +"&perPageNum=${scri.perPageNum}" +"&searchType=${scri.searchType}&keyword=${scri.keyword}"; })

 head태그 아래에 script태그 안에 함수를 추가해준다.

여기서 list에서 받아온 scri의 uri값들을 location.href로 사용한다.

 

이제 게시글목록 (list) 에서 게시글에 들어간 후(readView) 목록버튼(readView.html)을 눌러보면

처음에 list에서 받은 uri로 검색어를 유지한채 목록으로 돌아갈 수 있다.

이 순서를 잘 기억하자.

 

---

2.삭제 시 원래 검색어를 유지한채 list로 돌아가기)

 

 

 

// 게시판 수정뷰
	@RequestMapping(value = "/board/updateView", method = RequestMethod.GET)
	public String updateView(BoardVO boardVO, @ModelAttribute("scri") SearchCriteria scri, Model model) throws Exception{
		logger.info("updateView");
		
		model.addAttribute("update", service.read(boardVO.getBno()));
		model.addAttribute("scri", scri);
		
		return "board/updateView";
	}
	
	// 게시판 수정
	@RequestMapping(value = "/board/update", method = RequestMethod.POST)
	public String update(BoardVO boardVO, @ModelAttribute("scri") SearchCriteria scri, RedirectAttributes rttr) throws Exception{
		logger.info("update");
		
		service.update(boardVO);
		
		rttr.addAttribute("page", scri.getPage());
		rttr.addAttribute("perPageNum", scri.getPerPageNum());
		rttr.addAttribute("searchType", scri.getSearchType());
		rttr.addAttribute("keyword", scri.getKeyword());
		
		return "redirect:/board/list";
	}

	// 게시판 삭제
	@RequestMapping(value = "/board/delete", method = RequestMethod.POST)
	public String delete(BoardVO boardVO, @ModelAttribute("scri") SearchCriteria scri, RedirectAttributes rttr) throws Exception{
		logger.info("delete");
		
		service.delete(boardVO.getBno());
		
        rttr.addAttribute("bno", boardVO.getBno());
		rttr.addAttribute("page", scri.getPage());
		rttr.addAttribute("perPageNum", scri.getPerPageNum());
		rttr.addAttribute("searchType", scri.getSearchType());
		rttr.addAttribute("keyword", scri.getKeyword());
		
		return "redirect:/board/list";
	}

게시판 수정뷰인 updateView와 수정쿼리 update , 삭제쿼리 delete의 컨트롤러 부분이다

 

수정뷰는 readView (게시글 내용)에서 넘어갈 수 있는 페이지이다.

삭제쿼리또한 readView에서 넘어오는 쿼리이다.

 

일단 2번의 삭제 후 원래 검색어를 유지한채 list로 돌아가기는 (컨트롤러의 /delete 부분)

 

RedirectAttributes 함수를 사용한다.

RedirectAttributes는 쉽게 설명하면 리턴시 url뒤에 ?로 시작하는 값들을 붙여준다.

간단히 http 주소중 header 뒤에 붙는다고 생각하면 된다.

 

삭제쿼리 /delete 는 readView.html에 존재하는데

앞서 활용했던 input태그로 넣어놓은 scri값을 사용한다.

 

ModelAtrribute("scri")로 가져온 scri의 파라미터를 RedirectAtrributes로 url의 뒤에 붙여주고

return "redirect:/board/list"; 하면 원래의 검색을 유지한채 목록(list로 돌아간다)

 

ex)

 

http://localhost:8080/board/readView?bno=746&page=1&perPageNum=10&searchType=t&keyword=fsd

 

위의 주소는 검색타입-title ,검색어 - fsd, perPageNum- 1~10페이지중, page - 1페이지 에서 bno=746 - 746번 게시글을 클릭했을때 나오는 readView의 주소이다.

 

여기서 삭제버튼을 눌러서 삭제를하면

 

http://localhost:8080/board/list?perPageNum=10&page=1&keyword=fsd&searchType=t 

 

로 돌아오게 된다. 컨트롤러의 rttr 과 return을 붙여보면 어떻게 주소가 만들어지는지 알 수 있다.

 

 

 

---

3.수정페이지에서 취소시 원래 readView로 돌아가기

 

수정페이지(updateView) 에 다음 함수를 script 함수안에 추가해준다.

	$(".cancel_btn").on("click", function(){
		event.preventDefault();
		location.href = "/board/readView?bno=${update.bno}"
			   + "&page=${scri.page}"
			   + "&perPageNum=${scri.perPageNum}"
			   + "&searchType=${scri.searchType}"
			   + "&keyword=${scri.keyword}";
	})

다음 취소버튼에 대한 함수이다.

	<div>
    <button type="button" id="cancel_btn" class="btn btn-primary">취소</button>
    </div>

 

수정페이지에서 취소버튼을 누르면 다시 원래의 게시글로 돌아가는 것은 간단하다.

컨트롤러의 updateview에서 scri의 파라미터를 받아주고,

취소 버튼에  원래의 url주소값이 담긴 scri을 이용해서 location/href를 작성해주면 끝이다.

 

---

4.수정페이지(updateView) -> 수정(update) -> 게시글내용(readView)에서 목록을 눌러 list로 돌아갈때 검색어 유지)

3번의 과정까지 했다면 게시글내용에서 수정버튼을 눌러 수정페이지에 들어간다음 취소를 눌러 나오면

scri 파라미터를 이용해서 location.href를 통해 목록으로 돌아가도 검색어가 유지되지만

수정페이지에서 수정을하면 url값이 저장이 안되서 원래의 검색어가 유지되지 않는다.

(애초에 수정페이지에 들어가보면 url에 bno만 표시가 됨 , 페이징 검색기록이 들어가있지 않음)

 

그럼 일단 수정페이지에서 url값을 받아야한다.

		// 수정 
			$("#update_btn").on("click", function(){
				formObj.attr("action", "/board/updateView");
				formObj.attr("method", "get");
				formObj.submit();
				

				location.href = "/board/updateView?bno=${read.bno}"
					+"&page=${scri.page}"
					+"&perPageNum=${scri.perPageNum}"
					+"&searchType=${scri.searchType}&keyword=${scri.keyword}";
			})

수정 함수에 location.href로 url값을 붙여준다.

 

 

<form name="updateForm" role="form" method="post" action="/board/update">
<input type="hidden" name="bno" value="${update.bno}" readonly="readonly"/>
  <input type="hidden" id="page" name="page" value="${scri.page}"> 
  <input type="hidden" id="perPageNum" name="perPageNum" value="${scri.perPageNum}"> 
  <input type="hidden" id="searchType" name="searchType" value="${scri.searchType}"> 
  <input type="hidden" id="keyword" name="keyword" value="${scri.keyword}">
  </form>

 

그후 updateView.html(수정페이지) 에서 scri값을 저장 할 수 있게 input type=hidden을 추가한다.

 

그럼 수정페이지(updateView)에서도 scri값이 그대로 넘어온다(readView에서).

 

이제 scri값을 사용하는 부분이다. 여긴 삭제하는 부분과 같다.

 

위의 /update 컨트롤러 부분을 보면 원래의 게시글로 돌아오면서(bno값) 검색기록도 같이 가져와야하기 때문에(scri값)

RedirectAttributes로 /board/readView 뒤에 url을 붙여준다.

 

그러면 수정 후에도 다시 처음의 readView의 주소를 가져올 수 있게 되고 값을 가진 readView에서 list로 나가도 원래의 readView가 가진 검색어 저장기능으로 검색어 유지를 할 수 있다.

 

---

과정을 간단히 나열해보면

 

1. list(게시글 목록) 검색 (list.html)

http://localhost:8080/board/list?searchType=t&keyword=fsd

 

2. 검색목록의 게시글내용 보기 (readView.html) - 검색타입 t, 검색어 fsd , 1~10페이지 중, 1페이지의 , 752번 게시물 

http://localhost:8080/board/readView?bno=752&page=1&perPageNum=10&searchType=t&keyword=fsd

 

이 부분에서 삭제, 목록,수정취소버튼 클릭시의 로직을 만듬

 

3.게시글수정뷰 ( readView에서 수정버튼 클릭 -> updateView)

http://localhost:8080/board/updateView?bno=752&page=1&perPageNum=10&searchType=t&keyword=fsd

 

4.게시글 수정 후 원래 게시글로(updateView -> update -> readView)

 

url 값을 가지고 readView로 왔다면 2번의 readView과정으로 돌아간 것과 같다. (삭제, 목록 버튼 클릭시 검색어 유지)