[JAVA/Spring] 국비 학원 최종프로젝트 #3 - 쇼핑몰 구현 - 어드민 관리자 페이지 (상품목록 부분,Ajax 활용)

해당 페이지는 체크박스를 사용하였다.

특별한 점은, 체크한 상품목록이 바로 삭제되지 않고, 삭제목록 페이지로 한번더 넘어가는 방식이다.

이 부분에 대해서는 mapper에서도 delete 형식이 아닌, update 형식으로 del 이라는 컬럼이 기본 N값에서 Y값으로 바뀌게끔 만들었다. 즉, 기본 상품목록 페이지는 DEL컬럼이 N값만 가지고있는 목록들만 보이게 되고, 삭제목록으로 이동하면 Y값만 가지고있는 상품목록으로 넘어가는 것이다.

 

페이징 처리 까지 구문에 넣었으므로 다소 복잡하다..보시다시피 A 테이블의 product_del  값이 'N'인 값만 가져오게끔 하였다.

 

다음은 Controller 부분.

@RequestMapping(value = "/admin_product_list.do")
	public String productListAdmin(HttpServletRequest req, @RequestParam(required = false) Map<String, String> map,@RequestParam(required = false)String mode) {
		
		int pageSize = 5;
		String pageNum = req.getParameter("pageNum");
		if (pageNum == null){
			pageNum = "1";
		}
		
		int currentPage = Integer.parseInt(pageNum);
		int startRow = (currentPage - 1) * pageSize + 1;
		int endRow = startRow + pageSize - 1;
		int count = adminMapper.getListProdCount();
		
		if (endRow>count) endRow = count;
		List<EzenatProductAllDTO> list = null;
		
		if(count > 0) {
			
			map = new HashMap<>();
			map.put("start", String.valueOf(startRow));
			map.put("end", String.valueOf(endRow));
			
			list = adminMapper.listProd(map);
			int pageCount = count/pageSize + (count%pageSize==0 ? 0 : 1);
			int pageBlock = 5;
			int startPage = (currentPage-1)/pageBlock * pageBlock + 1;
			int endPage = startPage + pageBlock - 1;
			
			if (endPage > pageCount) endPage = pageCount;
			
			req.setAttribute("startPage", startPage);
			req.setAttribute("endPage", endPage);
			req.setAttribute("pageBlock", pageBlock);
			req.setAttribute("pageCount", pageCount);
		}
		int rowNum = count - (currentPage - 1) * pageSize;
		req.setAttribute("count", count);
		req.setAttribute("rowNum", rowNum);
			
		HttpSession session = req.getSession();
		String upPath = (String) session.getAttribute("upPath");
		if (upPath == null) {
			session.setAttribute("upPath", session.getServletContext().getRealPath("/resources/images"));
		}
		System.out.println(mode);
		if(mode==null || mode.equals("")) {
			list = adminMapper.listProd(map);
			
			req.setAttribute("listProd", list);
			
		}else if(mode.equals("Y")) {
			System.out.println("들어왔다");
			list = new ArrayList<>();
				
			list = adminMapper.deleteProdList(map);
			
			req.setAttribute("listProd", list);
			req.setAttribute("mode", "Y");
		}
		
		return "admin/admin_product_list";
	}

 

체크된 값들이 삭제목록으로 넘어갈수 있도록 아래와 같이 구현하였다.(update 구문활용)

mapper.xml

Controller.java

@PostMapping(value = "/admin_product_moveDeleteList.do")
	@ResponseBody
	public int move_delete_list(@RequestParam(value="list", required=false) List<String> list) {
		
		if(list != null) {
			for(String str : list) {
				str = str.split("\"")[1];				
				int res = adminMapper.moveDeleteProdList(str);
			}
		}
		return 1;
	}

jsp 부분.

function moveDeleteList() {

		var isDel = confirm("삭제목록으로 이동하시겠습니까?");
		if (isDel) {
			//alert("이동확인")
			//alert(document.getElementById('mode').value)
			var mode = document.getElementById('mode').value;
			var del = document.getElementsByName('RowCheck');

			const arr = [];
			for (i = 0; i < del.length; ++i) {
				if (del[i].checked == true) {
					arr.push(del[i].value);

					/* 		alert(del[i].value) */
				}

			}
			if (arr == null || arr == "") {
				alert("이동할 상품을 체크해주세요.")
				return;
			}
			/* 	alert(arr[0]) */
			$.ajax({
				url : './admin_product_moveDeleteList.do',
				type : 'post',
				data : {
					list : JSON.stringify(arr)

				},
				cache : false,
				success : function(res) {
					//alert("진짜여기")
					/*  	if(mode == 'Y'){ /* 재등록 할거면 필요한 로직 
								alert("")
					 			document.location.href = document.location.href;
								 location.href('admin_product_list.do?mode=N')
							 }  */
					if (mode == null || mode == '' || mode == 'N') {
						alert("상품삭제목록으로 이동했습니다.")
						document.location.href = document.location.href;
						location.href='admin_product_list.do?mode=Y'
					}
				}
			});
		}
	}

 

구현 화면.

위와 같이 상품삭제목록으로 넘어간것을 확인할수 있다.

상품 복구 기능 역시 같은 방법으로 했으며, N값이 Y값으로 변경되게끔 만들었고,

완전 삭제는 Delete 구문을 활용하여 구현하였다.

Ajax 구현 부분은 메서드 부분만 바꾸면 됨으로 따로 올리지않았다.

(해당 프로젝트는 정리하여 깃허브에 따로 업로드 예정입니다.)