스프링 #18 페이징 수정삭제처리(수정 to 현재 목록페이지 이동)

스프링 #18 페이징 수정/삭제처리

게시글을 누르고(GET) 수정페이지에서 다시 List로 넘어갈 때 현재 페이지에 해당하는 리스트로 복귀하는 기능을 구현한다.

get에서 수행했던 것 처럼 modify페이지에서도 amount, pageNum 데이터를 가지고 있다가 list의 cri 객체에 넘겨주어야한다.

그러기 위해 modify.jsp의 form태그에 pageNum, amount를 갖는 input태그를 추가한다.

				<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum }"/>'>
				<input type='hidden' name='amount' value='<c:out value="${cri.amount }"/>'>

.

해당 값들은 get방식으로 modify메소드로 전달된다.

	@GetMapping({"/get", "/modify"})
	public void get(@RequestParam("bno") int bno, @ModelAttribute("cri") Criteria cri, Model model) {
	

컨트롤러는 @ModelAttirubte어노테이션으로 받아온 cri의 2개의 멤버변수를 model에 넣어서 브라우저를 출력한다.

• 게시글 modify 화면 URL

http://localhost:8090/board/get?pageNum=2&amount=10&bno=1

데이터를 수정화면까지 받아오는 것을 확인했고 글을 수정했을 때, 기존 페이지로 이동함을 확인해야한다.

그러기 위해서 post방식으로 호출하는 modify메소드를 수정해야한다.

view에서 form태그안의 데이터를 submit하기때문에 기존의 데이터 받는 것 이외에도 Criteria 객체의 데이터를 받는 부분을 추가작성한다.

	
@PostMapping("/modify")
public String modify(BoardVO board, @ModelAttribute("cri") Criteria cri ,RedirectAttributes rttr) {
	
	service.modify(board);
	rttr.addFlashAttribute("resultBno", board.getBno());
	rttr.addAttribute("pageNum", cri.getPageNum());
	rttr.addAttribute("amount", cri.getAmount());
	log.info("************modify end***************");
	return "redirect:/board/list";
    }

ModelAttribute로 받아온 cri객체를 model에 붙이고 rttr객체로 덧붙여 list로 redirect했을때 list메소드에서 cri객체를 받아 해당 값을 이용할 수 있도록한다.

modelAttribute 어노테이션을 사용하지 않아도 cri 객체에 데이터 바인딩이 된다.

@ModelAttribute는 파라미터 값으로 DTO객체에 바인딩을 하는 방식이기 때문에 바인딩하려는 DTO객체에 Setter메소드가 반드시 있어야 하고,

@RequestBody는 요청 본문의 body에 json이나 xml값으로 요청을 하여 HttpMessageConveter를 반드시 거쳐 DTO객체에 맞는 타입으로 바꿔서 바인딩을 시켜준다.

https://dionysus2074.tistory.com/172

https://bactoria.github.io/2019/05/28/ModelAttribute%EC%99%80-RedirectAttributes/

그렇다면 수정화면에서 list버튼 클릭시 기존 화면으로 이동하는 것을 구현하면 된다. pageNum, amount를 modify(view)->list메소드로 전달해보자.

나머지 데이터(수정데이터)들은 필요없으니 formObj를 빈 공간으로 만든 뒤, pageTag, amountTag만 덧붙여서 submit메소드로 /board/list에 get방식으로 제출한다.

	<script type="text/javascript">
			$(document).ready(function(){
				
				var formObj = $("form");
				
				$('button').on("click", function(e){//버튼을 클릭했을때에,
					
					e.preventDefault();
					
					var operation = $(this).data("oper");
					
					console.log(operation);
					
					if(operation === 'remove'){ // if data속성의 oper값이 remove거나 list일때 각 로직 수행
						formObj.attr("action", "/board/remove");
					}
					else if(operation === 'list'){
						formObj.attr("action", "/board/list").attr("method","get");
						var pageNumTag = $("input[name='pageNum']").clone();
						var amountTag = $("input[name='amount']").clone();

						formObj.empty();
						form.append(pageNumTag); // pageNum데이터 추가
						form.append(amountTag);  //amount 데이터 추가
					}
					formObj.submit(); // 그렇지 않으면, form태그의 객체를 submit
				});
			});
		</script>

전체 데이터갯수 카운트

PageDTO에 total값을 아직 지정해주지 않았다. 그렇기에 현재 페이지 갯수가 제대로 나오지 않는다.

DB내 전체 데이터 갯수를 CNT하는 방법을 알아보자.

mapper인터페이스에 해당하는 함수를 작성한다.

public int getTotalCount(Criteria cri);

SQL만을 이용해 구할 수 있지만 이후 검색에 필요한 내용이기에 Criteria을 사용한다.

sql문

<select id="getTotalCount" resultType="int">
		select count(*) from board where bno > 0	
</select>