Querydsl을 사용하여 페이징 처리 및 네비게이션바에 있는 Search 버튼을 이용하여 상품명으로 검색이 가능하도록 구현하겠습니다.
MainItemDto
import com.querydsl.core.annotations.QueryProjection;
import lombok.Getter;
import lombok.Setter;
@Setter
@Getter
public class MainItemDto {
private Long id;
private String itemNm;
private String itemDetail;
private String imgUrl;
private Integer price;
@QueryProjection // Alt+insert 누르면 생성자 만들수 있음.
public MainItemDto(Long id, String itemNm, String itemDetail, String imgUrl, Integer price) {
this.id = id;
this.itemNm = itemNm;
this.itemDetail = itemDetail;
this.imgUrl = imgUrl;
this.price = price;
}
} 생성자에 @QueryProjection 어노테이션을 선언하여 Querydsl로 결과 조회시 MainItemDto 객체로 바로 받아오도록 활용하겠습니다.
@QueryProjection을 사용할때 Maven compile을 실행해 QDto파일을 생성해야합니다.
ItemRepositoryCustom
Page<MainItemDto> getMAinItemPage(ItemSearchDto itemSearchDto, Pageable pageable);ItemRepositoryCustomImpl
@Override
public Page<MainItemDto> getMAinItemPage(ItemSearchDto itemSearchDto,
Pageable pageable) {
QItem item = QItem.item;
QItemImg itemImg = QItemImg.itemImg;
QueryResults<MainItemDto> results = queryFactory
.select(
new QMainItemDto(
item.id,
item.itemNm,
item.itemDetail,
itemImg.imgUrl,
item.price
)
).from(itemImg)
.join(itemImg.item, item)
.where(itemImg.repimgYn.eq("Y"))
.where(itemNmLike(itemSearchDto.getSearchQuery()))
.orderBy(item.id.desc())
.offset(pageable.getOffset())
.limit(pageable.getPageSize())
.fetchResults();
List<MainItemDto> content = results.getResults();
long total = results.getTotal();
return new PageImpl<>(content, pageable, total);
}ItemService
@Transactional(readOnly = true)
public Page<MainItemDto> getMainItemPage(ItemSearchDto itemSearchDto, Pageable pageable){
return itemRepository.getMAinItemPage(itemSearchDto,pageable);
}
MainController
package com.shop.shop.controller;
import com.shop.shop.dto.ItemSearchDto;
import com.shop.shop.dto.MainItemDto;
import com.shop.shop.service.ItemService;
import lombok.RequiredArgsConstructor;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Optional;
@Controller
@RequiredArgsConstructor
public class MainController {
private final ItemService itemService;
@GetMapping("/")
public String main(ItemSearchDto itemSearchDto, Optional<Integer> page, Model model){
Pageable pageable = PageRequest.of(page.isPresent() ? page.get() : 0,6);
Page<MainItemDto> items = itemService.getMainItemPage(itemSearchDto,pageable);
model.addAttribute("items",items);
model.addAttribute("itemSearchDto",itemSearchDto);
model.addAttribute("maxPage",5);
return "main";
}
}Main
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout1}">
<!-- 사용자 CSS 추가 -->
<th:block layout:fragment="css">
<style>
.carousel-inner > .item {
height: 350px;
}
.margin{
margin-bottom:30px;
}
.banner{
height: 300px;
position: absolute; top:0; left: 0;
width: 100%;
height: 100%;
}
.card-text{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
a:hover{
text-decoration:none;
}
.center{
text-align:center;
}
</style>
</th:block>
<div layout:fragment="content">
<div id="carouselControls" class="carousel slide margin" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active item">
<img class="d-block w-100 banner" src="https://user-images.githubusercontent.com/13268420/112147492-1ab76200-8c20-11eb-8649-3d2f282c3c02.png" alt="First slide">
</div>
</div>
</div>
<input type="hidden" name="searchQuery" th:value="${itemSearchDto.searchQuery}">
<div th:if="${not #strings.isEmpty(itemSearchDto.searchQuery)}" class="center">
<p class="h3 font-weight-bold" th:text="${itemSearchDto.searchQuery} + '검색 결과'"></p>
</div>
<div class="row">
<th:block th:each="item, status: ${items.getContent()}">
<div class="col-md-4 margin">
<div class="card">
<a th:href="'/item/' +${item.id}" class="text-dark">
<img th:src="${item.imgUrl}" class="card-img-top" th:alt="${item.itemNm}" height="400">
<div class="card-body">
<h4 class="card-title">[[${item.itemNm}]]</h4>
<p class="card-text">[[${item.itemDetail}]]</p>
<h3 class="card-title text-danger">[[${item.price}]]원</h3>
</div>
</a>
</div>
</div>
</th:block>
</div>
<div th:with="start=${(items.number/maxPage)*maxPage + 1}, end=(${(items.totalPages == 0) ? 1 : (start + (maxPage - 1) < items.totalPages ? start + (maxPage - 1) : items.totalPages)})" >
<ul class="pagination justify-content-center">
<li class="page-item" th:classappend="${items.number eq 0}?'disabled':''">
<a th:href="@{'/' + '?searchQuery=' + ${itemSearchDto.searchQuery} + '&page=' + ${items.number-1}}" aria-label='Previous' class="page-link">
<span aria-hidden='true'>Previous</span>
</a>
</li>
<li class="page-item" th:each="page: ${#numbers.sequence(start, end)}" th:classappend="${items.number eq page-1}?'active':''">
<a th:href="@{'/' +'?searchQuery=' + ${itemSearchDto.searchQuery} + '&page=' + ${page-1}}" th:inline="text" class="page-link">[[${page}]]</a>
</li>
<li class="page-item" th:classappend="${items.number+1 ge items.totalPages}?'disabled':''">
<a th:href="@{'/' +'?searchQuery=' + ${itemSearchDto.searchQuery} + '&page=' + ${items.number+1}}" aria-label='Next' class="page-link">
<span aria-hidden='true'>Next</span>
</a>
</li>
</ul>
</div>
</div>
개발자로 차근차근