맛집 스타일별 정렬하기 / 별점순 / 인기순 / 거리순 구현하기

 

맛집 스타일별 정렬하기

 

 

 

 

list.html

 

화면 구성은 select와 option 사용!

 

<div class="col-md-2 float-right">
<div class="form-group">
<form id="myForm" method="get">
<select class="form-control" name="cuisineSelect" onchange="submitForm()">
<option selected disabled>FOOD STYLE</option>
<option value="한식">한식</option>
<option value="중식">중식</option>
<option value="일식">일식</option>
<option value="양식">양식</option>
<option value="퓨전">퓨전</option>
<option value="푸드코트">푸드코트</option>
</select>
</form>
</div>
</div>

 

 

버튼이 없고

option 선택하면 바로 controller로 전송되도록!

 

<script>
function submitForm() {
var form = document.getElementById("myForm");
var selectedValue = form.querySelector('select[name="cuisineSelect"]').value;
form.action = "/store/list?cuisineSelect=" + encodeURIComponent(selectedValue);
form.submit();
}
</script>

 

 

 

 

 

 

 

StoreController

 

@RequestParam 이용해서 전달해준 cuisineSelect를 받는다.

그런데 메인 페이지의 경우, 음식스타일을 선택하지 않기에

required=false로 해놓으면 파라미터를 필수로 받지 않음을 의미한다.

 

 

에러 나지 않게 하기 위해, 그리고 mapper에서 if 쓰기 위해서

값이 없을때는 없음으로 저장되게 한다.

 

@GetMapping("/list")
public void get(Model model
,@RequestParam(value="cuisineSelect",required = false) String cuisineSelect){

if(cuisineSelect == null){
cuisineSelect = "없음";
}

log.info("cuisineSelect : " + cuisineSelect);

List<StoreVO> storeVO = service.store_getList(cuisineSelect);

model.addAttribute("storeList", storeVO);

}

 

 

Service

public List<StoreVO> store_getList(String cuisineSelect) {

//List<StoreVO> storeList = mapper.store_getList();
List<StoreVO> storeList = mapper.store_getList_withStar(cuisineSelect);

return storeList;
}

 

 

mapper

List<StoreVO> store_getList_withStar(String cuisineSelect);

 

 

 

 

mapper.xml

 

별점과 같이 받는 것 때문에 복잡한데

사실 중요한 부분은

parameterType = "string"과      <-- 이것이 cuisineSelect

if문을 사용하는 것이다!

 

<!-- 메인 맛집 전체보기 화면에서 별점과 같이 받기 -->
<select id="store_getList_withStar" resultMap="storeStarResultMap"
parameterType="string">
<!--select * from store-->
SELECT s.store_idx, s.user_idx, s.store_name, s.category1, s.store_address,
s.store_lati, s.store_longi, s.phone_number, s.store_count, s.filename,
avg_star.STORE_STAR
FROM STORE s
LEFT OUTER JOIN (
SELECT store_idx, ROUND(AVG(store_star), 1) AS STORE_STAR
FROM STAR
GROUP BY store_idx
) avg_star ON s.store_idx = avg_star.store_idx

<if test="cuisineSelect != '없음'">
where category1 = #{cuisineSelect}
</if>

ORDER BY s.store_idx
</select>

 

 

 

 

---

 

별점순 / 인기순 / 거리순 구현하기

 

 

 

모두 메인 페이지에서 이루어진다.

 

 

 

 

 

 

list.html

 

a 태그를 사용해서 파라미터를 전달해주었다.

 

<a class="btn btn-warning"
th:href="@{/store/list(storeStar='별점순')}">별점순</a>
<a class="btn btn-warning"
th:href="@{/store/list(storeCount='인기순')}">인기순</a>
<a class="btn btn-warning"
th:href="@{/store/list(storeDistance='거리순')}">거리순</a>

 

 

 

 

Controller

 

받아올 파라미터가 4개가 되어서 Map을 사용했다.

파라미터는 한번에 하나만 받아오게 했고

모두 필수값이 아닐 수도 있기에 required = false 는 항상 적용!

 

null 인 경우에는 없음이라는 값을 넣어줘서

mapper if문에서 조건으로 활용함

 

@GetMapping("/list")
public void get(Model model
,@RequestParam(value="cuisineSelect",required = false) String cuisineSelect
,@RequestParam(value="storeStar",required = false) String storeStar
,@RequestParam(value="storeCount",required = false) String storeCount
,@RequestParam(value="storeDistance",required = false) String storeDistance
){

if(cuisineSelect == null){
cuisineSelect = "없음";
}

if(storeStar == null){
storeStar = "없음";
}

if(storeCount == null){
storeCount = "없음";
}

if(storeDistance == null){
storeDistance = "없음";
}

Map<String,String> orderMap = new HashMap<>();
orderMap.put("cuisineSelect", cuisineSelect);
orderMap.put("storeStar", storeStar);
orderMap.put("storeCount", storeCount);
orderMap.put("storeDistance", storeDistance);

log.info("orderMap : " + orderMap);

List<StoreVO> storeVO = service.store_getList(orderMap);

model.addAttribute("storeList", storeVO);

}

 

 

 

 

Service

 

public List<StoreVO> store_getList(Map<String,String> orderMap) {

//List<StoreVO> storeList = mapper.store_getList();
List<StoreVO> storeList = mapper.store_getList_withStar(orderMap);

return storeList;
}

 

 

 

Mapper

 

List<StoreVO> store_getList_withStar(Map<String,String> orderMap);

 

 

 

 

Mapper.xml

 

if문을 열심히 넣어줬다.

지금 쓰면서 생각해보니까 case 사용할걸 그랬나 싶기도 하네...

and와 or 사용해서 조건 하나씩만 만족하게 해주었다 ㅎㅎㅎ

 

여기서 조건 잘못 만족하면

order by가 두번 들어가서 sql문 에러 난다 ^^

 

 

<select id="store_getList_withStar" resultMap="storeStarResultMap"
parameterType="Map">
<!--select * from store-->
SELECT s.store_idx, s.user_idx, s.store_name, s.category1, s.store_address,
s.store_lati, s.store_longi, s.phone_number, s.store_count, s.filename, s.distance,
avg_star.STORE_STAR
FROM STORE s
LEFT OUTER JOIN (
SELECT store_idx, ROUND(AVG(store_star), 1) AS STORE_STAR
FROM STAR
GROUP BY store_idx
) avg_star ON s.store_idx = avg_star.store_idx

<if test="cuisineSelect != '없음'">
where category1 = #{cuisineSelect}
</if>

<if test="storeStar != '없음' and storeCount == '없음' and storeDistance == '없음'">
ORDER BY avg_star.STORE_STAR desc nulls last
</if>

<if test="storeCount != '없음' and storeStar == '없음' and storeDistance == '없음'">
ORDER BY s.store_count desc nulls last
</if>

<if test="storeDistance != '없음' and storeStar == '없음' and storeCount == '없음'">
ORDER BY distance nulls last
</if>

<if test="storeStar == '없음' and storeCount == '없음' and storeDistance == '없음'">
ORDER BY s.store_idx
</if>



</select>

 

 

 

=> choose로 변경함

https://boracoding.tistory.com/208

Day108_230601_페이징처리... 하...........