Spring - 8 (페이징 이동처리2, 게시물 total)

목록에서 리스트로, 리스트에서 목록으로 가는데에는 pageNum과 amount가 잘 넘어갔지만,

 

그 이후인 수정, 삭제, 뒤로가기 동작들 이후에 목록으로 돌아가면 기존 페이지 정보가 남겨져 있지 않아 1페이지로 돌아가고있다.  때문에 해당 기능들을 동작시켜도 값을 제대로 넘길 수 있게 코드를 추가한다.

 

수정페이지로 가는것도 읽기페이지에 한것처럼 비슷한 방식으로 한다.

 

get.jsp에서 수정으로 가는 버튼의 a태그 링크에 넘길값들을 추가한다.

<button data-oper="modify" class="btn btn-warning">
	<a href="/board/modify?bno=${board.bno }&pageNum=${cri.pageNum}&amount=${cri.amount}"> 수정</a>
</button>

 

그리고 스크립트부분에 마찬가지로 submit()로 정보를 보내준다.

$("#modify_btn").on("click", function(e){
		e.preventDefault();
		var operation = $(this).data("oper");
		console.log(operation);
		if(operation === 'modify'){
			formObj.attr("action", "/board/modify")
		}
		formObj.submit();
	});

이동하면 주소에 정보들이 붙게된다.

 

다음은 modify.jsp의 스크립트

$(document).ready(function(){
		var formObj = $("#modifyForm"); // 문서중 form 요소를 찾아서 변수에 할당
		var iform = $("#infoForm");
		
		
		$('button').on("click", function(e) {
			// 버튼이 클릭된다면 아래 함수 수행, e라는 이벤트 객체를 전달하면서
			e.preventDefault(); // 기본 이벤트 동작 막기.
			var operation = $(this).data("oper");
			// 버튼에서 oper 속성 읽어서 변수에 할당.
			console.log(operation);
			// 브라우저 로그로 oper값 출력
			
			if(operation === 'remove'){
				formObj.attr("action", "/board/remove");
				// form에 액션 속성을 변경
			} else if (operation === 'list'){
				
				/* iform.find("#bno").remove();
				iform.attr("action", "/board/list"); */
				
				var PageNumTag = $("input[name='pageNum']");
				var amountTag = $("input[name='amount']");
				var keyword = $("input[name='keyword']");
				var typetag = $("input[name='type']");
				
				formObj.attr("action", "/board/list").attr("method","get");
				formObj.empty(); // 폼의 내용들 비우기.
				/* 폼의 내용을 비우고 재설정 하는 이유는, 목록 이동시 게시물의 제목, 내용, 작성자 등은 전달할 필요X */
				formObj.append(PageNumTag);
				formObj.append(amountTag);
				formObj.append(keyword);
				formObj.append(typetag);
			}
			formObj.submit();
			// 위의 조건이 아니라면 수정 처리.
		});
		
		/* $("#list_btn").on("click", function(e){
			iform.find("#bno").remove();
			iform.attr("action", "/board/list");
			iform.submit();
		}); */
	});

주석으로 처리된건 다른 방법이긴한데 결국은 form태그안에서 input hidden으로 정보를 보내는 방식은 동일하다.

remove 버튼이든 수정버튼이든, if문 밖에 formObj.submit()이 있기때문에 정보가 넘겨진다.

 

BoardControll에서 modify와 remove 매핑부분을 수정한다.

위에서는 목록으로 되돌아가는것만 페이지정보를 넘기는 처리를 하였지만,

modify와 remove가 동작하고나서 페이지정보를 넘겨야하기때문에 아래와같은 코드를 추가하였다.

// post요청으로 /modify가 온다면, 아래 메소드 수행
	@PostMapping("/modify")
	public String modify(BoardVO board, RedirectAttributes rttr, Criteria cri) {
		log.info("modify: " + board);
		if(service.modify(board)) {
			rttr.addFlashAttribute("result","success");
		}
		// 수정이 성공하면 success 메시지가 포함되어 이동.
		// 실패해도 메시지 빼고 이동.
		rttr.addAttribute("pageNum",cri.getPageNum());
		rttr.addAttribute("amount",cri.getAmount());
		rttr.addAttribute("type",cri.getType());
		rttr.addAttribute("keyword",cri.getKeyword());
		
		return "redirect:/board/list";
	}
	
	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes rttr, 
			Criteria cri) {
		
		log.info("remove..." + bno);
		if(service.remove(bno)) {
			rttr.addFlashAttribute("result", "success");
		}
		
		rttr.addAttribute("pageNum",cri.getPageNum());
		rttr.addAttribute("amount",cri.getAmount());
		rttr.addAttribute("type",cri.getType());
		rttr.addAttribute("keyword",cri.getKeyword());
		
		return "redirect:/board/list";
	}

값을 넘겨주는 처리를 해주었다.

8페이지 게시물을 읽고, 목록으로 돌아가도 남아있는 모습

---

게시물 갯수 반영

기존에 임의의 숫자로 190으로 게시물 수를 제한했던것을 데이터베이스에 있는 총 게시물의 수로 바꿔준다.

BoardMapper 인터페이스

public int getTotalCount(Criteria cri);
// 총 게시물 갯수 파악.

BoardMapper.xml 파일에 쿼리문 작성

<select id="getTotalCount" resultType="int">
<![CDATA[
select count(bno) from tbl_board where bno > 0
]]>
</select>

BoardService 인터페이스에 메소드 원형 추가

public int getTotal(Criteria cri);

BoardServiceImp 클래스에 메소드 구현부 추가

@Override
	public int getTotal(Criteria cri) {
		return mapper.getTotal(cri);
	}

BoardController에 변수 추가

@GetMapping("/list")
	public void list(Model model, Criteria cri) {
		
		log.info("list");
		
		model.addAttribute("list",service.getList(cri));
		
		int total = service.getTotal(cri);
		
		// /WEB-INF/views/list.jsp
		// 컨트롤러에서 리턴하는 문자열이 없다면 요청한 URL과 매칭되는 jsp를 우선 검색.
		model.addAttribute("pageMaker", new PageDTO(cri, total));
		// 임의로 총게시물 190로 설정.
	}

데이터베이스에서 읽어온 총 게시물의 수를, total 변수에 담아서 pageDTO의 생성자 매개변수 값으로 넘겨준다.

DB에 있는 게시물수가 250개인데 25페이지만큼 잘 처리된것을 볼 수 있다.

 

 

뒤로가기 버튼 동작시 bno번호가 중첩되는 문제

list.jsp 스크립트 부분에 해당 코드를 추가한다.

	$(".move").on("click",function(e) {
		e.preventDefault();
		
		var bno = actionForm.find("input[name='bno']").val();
		// 게시물 읽고 뒤로가기 버튼했을때 같은 게시물에 들어가지는 오류 해결
		// bno가 이미 있다면, 지운다는 뜻
		if(bno != ''){
			actionForm.find("input[name='bno']").remove();
		}
		
		actionForm.append("<input type='hidden' name='bno' "
				+"value='"+$(this).attr("href")+"'>");
		// <input type='hidden' name='bno' value='글번호'>
		actionForm.attr("action","/board/get");
		actionForm.submit();
		// http://localhost:8091/board/get?pageNum=10&amount=10&bno=191
	});

추가한것은 bno변수를 만들고 bno변수가 이미 존재할경우 그 번호를 지우는 동작처리이다.

이렇게 한 이유는, 게시물을 읽고나서 뒤로가기하면 계속해서 게시물번호가 주소에 추가로 붙여지기때문에

뒤로가기버튼을 누를시 기존번호를 삭제하는것이다. 이렇게 하면 뒤로가기하고 다시 게시물에 들어가도 같은 게시물이 뜨는 상황이 발생하지 않는다.