2021. 12. 9. 19:06ㆍ스프링부트
orderList메서드의 urimapping을 페이지 이동을 위해 하나 더 추가 합니다
@GetMapping({"/orderList", "/orderList/{page}"})
@PathVariable을 받을 타입을 int로 하게 되면 page부분이 없을경우 에러가 나게 됩니다 그래서 Integer로 null도 받을 수 있게하고 필수 입력을 false로 설정합니다
orderList메서드를 page와 함께 넘길 수 있게 변경하고 model에도 페이지정보를 담습니다
@GetMapping({"/orderList", "/orderList/{page}"})
public String orderList(@AuthenticationPrincipal LoginService user, Model model, @PathVariable(required = false) Integer page) {
if (user == null) {
System.out.println("비로그인");
} else {
System.out.println("로그인");
long userId = user.getUser().getId();
Page p = new Page(page);
List<OrderList> orderList = orderService.orderList(userId, p);
if (orderList.size() == 0) {
return "order/orderList";
}
List<List<Cart>> cartList = new ArrayList<>();
for (int i=0;i<orderList.size();i++) {
cartList.add(FoodInfoFromJson.foodInfoFromJson(orderList.get(i).getFoodInfo()));
}
model.addAttribute("page", p);
model.addAttribute("user", user.getUser());
model.addAttribute("cartList", cartList);
model.addAttribute("orderList", orderList);
}
return "order/orderList";
}
OrderService
List<OrderList> orderList(long userId, Page p);
OrderServiceImp
@Override
public List<OrderList> orderList(long userId, Page p) {
Map<String, Object> map = new HashMap<>();
map.put("userId", userId);
map.put("firstList", p.getFirstList());
map.put("lastList", p.getLastList());
System.out.println("첫번째 목록 = " + p.getFirstList() + " 마지막 목록 = " + p.getLastList());
System.out.println("첫번째 = " + p.getFirstPage() + " 마지막 = " + p.getLastPage() );
System.out.println("이전페이지 = " + p.getPrevPage());
System.out.println("다음페이지 = " + p.getNextPage());
return orderDAO.orderList(map);
}
Page
@Getter
@ToString
public class Page {
private int view = 10; // 화면에 출력할 목록 수
private int firstList; // 페이지 첫번째 목록
private int lastList; // 페이지 마지막 목록
private int pageCount = 5; // 페이지 이동 버튼 갯수
private int firstPage; // 화면의 첫번째 페이지 1~5 => 1, 6~10 => 6
private int lastPage; // 화면의 마지막 페이지 1~5 => 5, 6~10 => 10
private int prevPage; // 이전페이지 버튼클릭
private int nextPage; // 다음페이지 버튼클릭
private int nowPage; // 현재페이지
public Page() {
this(1);
}
public Page(int movePage) {
page(movePage, view);
}
public Page(int movePage, int view) {
page(movePage, view);
}
public Page(Integer page) {
int movePage = 1;
if(page != null) {
movePage = page;
}
page(movePage, view);
}
public void page(int movePage, int view) {
this.firstList = (view * movePage) - view + 1;
this.lastList = movePage * view;
nowPage = movePage;
firstPage = movePage - (movePage - 1) % pageCount;
lastPage = firstPage + pageCount - 1;
prevPage = firstPage - 1;
nextPage = firstPage + pageCount;
}
}
화면 하단의 페이지 이동버튼을 만들어 주기 위해 page클래스에 코드를 추가 했습니다
현재페이지가 3페이지일 때 하단의 페이지 이동버튼은 1, 2, 3, 4, 5 가 출력되야 합니다
현재페이지가 12페이지일 때 하단의 페이지 이동버튼은 11, 12, 13, 14, 15 가 출력되야 합니다
이것을 공식으로 변환하면
현재페이지 - (현재페이지 - 1) % 출력 할 페이지 갯수가 됩니다
OrderMapper의 orderList 아래에 추가합니다
WHERE R BETWEEN #{firstList } AND #{lastList }
저장후 orderList의 페이지를 직접 요청하여 테스트해봅니다
이제 화면에 보여줄 페이지 버튼을 준비합니다
include폴더 아래에 pageBox.jsp를 붙여넣습니다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style>
.page_box {display: flex; justify-content: center; margin: 20px 0; }
.page_box li { border: 1px solid #999; border-right: none; width: 35px; height: 35px; text-align: center; line-height: 35px; }
.page_box li:last-child { border-right: 1px solid #999; }
.page_box li a { display: block; width: 100%; height: 100%; }
.now_page { background: #30DAD9; color: #fff; cursor: default; }
.now_page:hover { color: #fff; }
@media(max-width :767px) {
.page_box { margin-top: 20px; }
.page_box li { width: 25px; height: 25px; line-height: 25px; font-size: 12px; }
}
</style>
<c:set var="path" value="${requestScope['javax.servlet.forward.request_uri']}" />
<ul class="page_box">
<li><a href="${path }/${page.prevPage }">이전</a></li>
<c:forEach begin="${page.firstPage }" end="5" var="i">
<c:if test="${i != page.nowPage }">
<li><a href="${path }/${i } ">${i }</a></li>
</c:if>
<c:if test="${i == page.nowPage }">
<li><a class="now_page" onclick="return false;" href="${path }/${i }">${i }</a></li>
</c:if>
</c:forEach>
<li><a href="${path }/${page.nextPage }${query }">다음</a></li>
</ul>
orderList.jsp의 </main> 바로 위에 pageBox를 추가합니다
<%@ include file="/WEB-INF/view/include/pageBox.jsp" %>
end를 5까지 했기때문에 5번까지 나오지만 목록의 수가 view를 넘을 때마다 페이지가 추가되게 변경해야합니다
총 출력되야 하는 페이지의 수를 totalPage, 목록의 총 갯수를 listCount라고 했을 때
totalPage = listCount / view가 되지만 둘을 나눈 나머지가 0이 아닐경우 페이지를 하나 더 추가 해야합니다
listCount: 50, view: 10 => 5페이지 필요
listCount: 53, view: 10 => 5페이지와 남은 3개를 보여줄 페이지가 1개 더 필요
Page클래스에 totalPage를 구하는 메서드를 추가합니다
private int totalPage; // 총 페이지 수
public void totalPage(int listCount) {
if(listCount % view == 0) {
totalPage = listCount / view;
} else {
totalPage = listCount / view + 1;
}
}
OrderList클래스에 목록의 수를 받을 필드를 추가합니다
private int listCount; // 목록 총 갯수
컨트롤러에서 totalPage메서드를 실행합니다
p.totalPage(orderList.get(0).getListCount());
pageBox.jsp를 수정합니다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style>
.page_box {display: flex; justify-content: center; margin: 20px 0; }
.page_box li { border: 1px solid #999; border-right: none; width: 35px; height: 35px; text-align: center; line-height: 35px; }
.page_box li:last-child { border-right: 1px solid #999; }
.page_box li a { display: block; width: 100%; height: 100%; }
.now_page { background: #30DAD9; color: #fff; cursor: default; }
.now_page:hover { color: #fff; }
@media(max-width :767px) {
.page_box { margin-top: 20px; }
.page_box li { width: 25px; height: 25px; line-height: 25px; font-size: 12px; }
}
</style>
<c:set var="uri" value="${requestScope['javax.servlet.forward.request_uri']}" />
<c:set var="pathValiable" value="${'/' }${page.nowPage }" />
<c:set var="path" value="${fn:replace(uri, pathValiable, '') }${'/' }" />
<ul class="page_box">
<li><a href="${path }${page.prevPage }">이전</a></li>
<c:forEach begin="${page.firstPage }" end="${page.firstPage + page.pageCount - 1 }" var="i">
<c:if test="${i != page.nowPage }">
<li><a href="${path }${i } ">${i }</a></li>
</c:if>
<c:if test="${i == page.nowPage }">
<li><a class="now_page" onclick="return false;" href="${path }${i }">${i }</a></li>
</c:if>
</c:forEach>
<li><a href="${path }${page.nextPage }">다음</a></li>
</ul>
<c:set var="uri" value="${requestScope['javax.servlet.forward.request_uri']}" />
현재 uri을 가져옵니다 => /orderList, /orderList/1, /orderList/2 ...
<c:set var="pathValiable" value="${'/' }${page.nowPage }" />
uri에서 pathValiable을 가져옵니다/1, /2, /3 ...
<c:set var="path" value="${fn:replace(uri, pathValiable, '') }${'/' }" /> uri에서 pathValiable을 빈문자로 변환합니다/orderList/1 => /orderList
pageBox.jsp를 다른 페이지에서 재활용하기 위해서 위와 같이 구현했습니다
view의 값을 바꿔가며 확인해봅니다view = 10일때
view = 2 일때
현재페이지가 1~5페이지 일땐 이전버튼이 없어야하고 다음페이지가 있을 때만 다음버튼이 출력되게 수정합니다
<ul class="page_box">
<c:if test="${page.pageCount < page.firstPage }">
<li><a href="${path }${page.prevPage }">이전</a></li>
</c:if>
<c:forEach begin="${page.firstPage }" end="${page.firstPage + page.pageCount - 1 }" var="i">
<c:if test="${i <= page.totalPage}">
<c:if test="${i != page.nowPage }">
<li><a href="${path }${i } ">${i }</a></li>
</c:if>
<c:if test="${i == page.nowPage }">
<li><a class="now_page" onclick="return false;" href="${path }${i }">${i }</a></li>
</c:if>
</c:if>
</c:forEach>
<c:if test="${page.firstPage + page.pageCount <= page.totalPage }">
<li><a href="${path }${page.nextPage }">다음</a></li>
</c:if>
</ul>
'스프링부트' 카테고리의 다른 글
스프링부트+jsp로 배달사이트 만들기-22 찜하기(회원) (0) | 2021.12.10 |
---|---|
스프링부트+jsp로 배달사이트 만들기-21 인터셉터로 주소 불러오기 (0) | 2021.12.10 |
스프링부트+jsp로 배달사이트 만들기-19 매장목록 수정/페이징 (0) | 2021.12.09 |
스프링부트+jsp로 배달사이트 만들기-17 xss 방어하기 (0) | 2021.12.09 |
스프링부트+jsp로 배달사이트 만들기-18 주문상세 페이지 (0) | 2021.12.09 |