[스프링] 쇼핑몰 - 상품목록과 페이징

[스프링] 쇼핑몰 - 상품목록과 페이징

관리자가 등록한 상품을 사용자가

회원가입 - 로그인 - 상품목록 - 상품내용 - 장바구니 - 주문 의 로직으로 주문을 완료하면

관리자가 다시 주문관리에서 배송 및 취소 등 주문관리를 통해 상품을 판매하고 쇼핑몰을 운영할 수 있도록 구현했다.

이번엔 그 중, 상품목록과 페이징 그리고 비동기 검색에 관한 포스팅을 작성하려고 한다.

상품들은 다수의 카테고리를 가지고 있기 때문에, 카테고리별로 페이징이 되어야하며,

신상품순, 높은가격순, 낮은가격순으로 정렬을 할 수 있도록 구현했다.

검색은 상품목록 페이지에서 하는 것이 아닌,

상단바에 넣어서 사이트 어느곳이던 검색을 할 수 있도록 했고,

비동기로 처리해서 페이지 새로고침없이,

따로 버튼을 누르지 않고 키워드 입력만으로 검색이 되도록 만들었다.

다수의 카테고리

검색창

KNIT 입력

페이징에 필요한 파라미터를 받을 VO

public class ItemCriteria { private int page; private int perPageNum; private int rowStart; private int rowEnd; private String catemain; private String catesub; private String sort; /* */ public String getSort() { /* 16 */ return this.sort; /* */ } /* */ /* */ public void setSort(String sort) { /* 20 */ this.sort = sort; /* */ } /* */ /* */ public String getCatemain() { /* 24 */ return this.catemain; /* */ } /* */ /* */ public void setCatemain(String catemain) { /* 28 */ this.catemain = catemain; /* */ } /* */ /* */ public String getCatesub() { /* 32 */ return this.catesub; /* */ } /* */ /* */ public void setCatesub(String catesub) { /* 36 */ this.catesub = catesub; /* */ } /* */ /* */ public ItemCriteria() { /* 40 */ this.page = 1; /* 41 */ this.perPageNum = 8; /* */ } /* */ /* */ public void setPage(int page) { /* 45 */ if (page <= 0) { /* 46 */ this.page = 1; /* */ return; /* */ } /* 49 */ this.page = page; /* */ } /* */ /* */ public void setPerPageNum(int perPageNum) { /* 53 */ if (perPageNum <= 0 || perPageNum > 100) { /* 54 */ this.perPageNum = 10; /* */ return; /* */ } /* 57 */ this.perPageNum = perPageNum; /* */ } /* */ /* */ public int getPage() { /* 61 */ return this.page; /* */ } /* */ /* */ public int getPageStart() { /* 65 */ return (this.page - 1) * this.perPageNum; /* */ } /* */ /* */ public int getPerPageNum() { /* 69 */ return this.perPageNum; /* */ } /* */ /* */ public int getRowStart() { /* 73 */ this.rowStart = ((this.page - 1) * this.perPageNum) + 1; /* 74 */ return this.rowStart; /* */ } /* */ /* */ public int getRowEnd() { /* 78 */ this.rowEnd = this.rowStart + this.perPageNum - 1; /* 79 */ return this.rowEnd; /* */ } /* */ /* */ /* */ public String toString() { /* 84 */ return "Criteria [page=" + this.page + ", perPageNum=" + this.perPageNum + ", rowStart=" + this.rowStart + ", rowEnd=" + this.rowEnd + /* 85 */ "]"; /* */ } /* */ } }

페이징에 필요한 파라미터를 받아서 페이징버튼을 만들 클래스

package kr.co.vo; import org.springframework.web.util.UriComponents; import org.springframework.web.util.UriComponentsBuilder; public class ItemPageMaker { private int totalCount; private int startPage; private int endPage; private boolean prev; private boolean next; private int displayPageNum = 10; private ItemCriteria cri; public void setCri(ItemCriteria cri) { this.cri = cri; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; calcData(); } public int getTotalCount() { return totalCount; } public int getStartPage() { return startPage; } public int getEndPage() { return endPage; } public boolean isPrev() { return prev; } public boolean isNext() { return next; } public int getDisplayPageNum() { return displayPageNum; } public ItemCriteria getCri() { return cri; } private void calcData() { endPage = (int) (Math.ceil(cri.getPage() / (double)displayPageNum) * displayPageNum); startPage = (endPage - displayPageNum) + 1; int tempEndPage = (int) (Math.ceil(totalCount / (double)cri.getPerPageNum())); if (endPage > tempEndPage) { endPage = tempEndPage; } prev = startPage == 1 ? false : true; next = endPage * cri.getPerPageNum() >= totalCount ? false : true; } public String makeQuery(int page) { UriComponents uriComponents = UriComponentsBuilder.newInstance() .queryParam("page", page) .queryParam("perPageNum", cri.getPerPageNum()) .queryParam("catemain", cri.getCatemain()) .queryParam("catesub", cri.getCatesub()) .queryParam("sort", cri.getSort()) .build(); return uriComponents.toUriString(); } public String makeOrderQuery(int page) { UriComponents uriComponents = UriComponentsBuilder.newInstance() .queryParam("page", page) .queryParam("perPageNum", cri.getPerPageNum()) .queryParam("delivstate", cri.getCatemain()) .build(); return uriComponents.toUriString(); } }

UriComponents를 이용해 쿼리를 만들어준다.

uriComponents의 사용법을 전에 정리한 적이 있다..

UriComponents과 URLEncoding :: 간편 웹프로그래밍 (tistory.com)

Mapper

SELECT ITEM_NO , ITEM_NAME , ITEM_PRICE , ITEM_SIZE, ITEM_COLOR, ITEM_DISC, ITEM_CONTENT , ITEM_IMGMAIN, ITEM_IMGSUB, ITEM_DATE, ITEM_STAR, ITEM_CATEMAIN, ITEM_CATESUB FROM ( SELECT ITEM_NO , ITEM_NAME , ITEM_PRICE , ITEM_SIZE, ITEM_COLOR, ITEM_DISC, ITEM_CONTENT , ITEM_IMGMAIN, ITEM_IMGSUB,ITEM_DATE, ITEM_STAR, ITEM_CATEMAIN, ITEM_CATESUB, ROW_NUMBER() OVER( ) AS RNUM FROM ITEM WHERE ITEM_CATEMAIN = AND ITEM_CATESUB = ) WHERE RNUM BETWEEN #{rowStart} AND #{rowEnd} SELECT COUNT(*) FROM (select * from ITEM where ITEM_CATEMAIN = AND ITEM_CATESUB = ) WHERE ITEM_NO > 0 ORDER BY ITEM_NO DESC ORDER BY ITEM_NO DESC ORDER BY ITEM_PRICE DESC ORDER BY ITEM_PRICE ASC 'item' 'item' 'main' 'popular' 'jumper' OR ITEM_CATESUB = 'coat' OR ITEM_CATESUB = 'jacket' OR ITEM_CATESUB = 'padding' 'long' OR ITEM_CATESUB = 'knit' OR ITEM_CATESUB = 'halftee' OR ITEM_CATESUB = 'shirts' OR ITEM_CATESUB = 'blank' 'pants' OR ITEM_CATESUB = 'denim' OR ITEM_CATESUB = 'halfpants' OR ITEM_CATESUB = 'jogger' OR ITEM_CATESUB = 'sult' 'sneakers' OR ITEM_CATESUB = 'boots' OR ITEM_CATESUB = 'walker' OR ITEM_CATESUB = 'derby' OR ITEM_CATESUB = 'sandal' 'jumper' 'coat' 'jacket' 'padding' 'long' 'knit' 'halftee' 'shirts' 'blank' 'pants' 'denim' 'halfpants' 'jogger' 'sult' 'sneakers' 'boots' 'walker' 'derby' 'sandal'

그간 웹개발을 공부하면서 , 다수의 프로젝트들을 만들었었는데

항상 빠지지않고 사용했던게 바로 페이징인 것 같다.

이젠 많이 어렵지 않다고 느낄 정도로 많이 사용해서 익숙해졌지만 정리한 적이 없어 한번 정리해보려고 한다.

적다보니 너무 길어져서 따로 글을 작성했다.

페이징에 대하여 :: 간편 웹프로그래밍 (tistory.com)

Controller

@RequestMapping(value = {"/itemView"}, method = {RequestMethod.GET}) public String itemView(Model model, @ModelAttribute("cri") ItemCriteria cri) throws Exception { logger.info("itemView" + cri.getPage()); model.addAttribute("itemList", this.mainService.itemList(cri)); ItemPageMaker pageMaker = new ItemPageMaker(); pageMaker.setCri(cri); pageMaker.setTotalCount(this.mainService.itemCount(cri)); model.addAttribute("pageMaker", pageMaker); return "/main/itemView"; }

특별할 것은 없다.

페이징에 필요한 매개변수를 @ModelAttribute로 받고, 던지고,

mapper에 넣어주고, 페이징을 계산하여 출력해준다.

View

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@include file="../include/header.jsp"%> Shop Products A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. JAMPER COAT JACKET PADDING LONG KNIT 1/2 TEE SHIRTS BLANK BOTTOM DENIM 1/2PANTS Jogger sult SNEAKERS BOOTS WALKER DERBY SANDAL ${itemList.item_name} ₩ ${idx} <%@include file="../include/footer.jsp"%>

다음 포스팅은 상품에 대한 비동기 검색 부분을 작성하려고 한다.

from http://kimfk567.tistory.com/96 by ccl(A) rewrite - 2021-12-09 17:27:30