211129 TIL ( ajax 카테고리 )

오전은 그냥 빨리가고 오후는 밥먹고 뭐하려면 3시라서 좀 하다보면 저녁먹고 그럼 하루 다 간다 

ajax로 카테고리를 구현하려면 전에 했던 데이터필터 그걸로는 안되고 특정 카테고리 선택 시 선택된 값을 서버에 보내 그 값에 맞는 데이터를 받아와서 페이지에 붙여야된다.

 

 

-메인 페이지에 카테고리 html

<div class="product-filters">
                        <input type="button" id="All" name="button" value="All"/>
                        <input type="button" id="운동" name="button" value="운동"/>
                        <input type="button" id="공부" name="button" value="공부"/>
                        <input type="button" id="취미" name="button" value="취미""/>
                </div>

-특정 카테고리가 클릭되었을 때 그 value 값을 가져와서 호출할 함수에 넣어 보낸다.

 $("input:button[name='button']").on('click', function () {
                let category = $(this).val()
                getChallenges(category);
            });

( 메인에서 운동 카테고리를 클릭하면 category = "운동" 이 된다 )

 

-받은 값을 서버에 보내서 선택한 카테고리에 해당하는 게시물을 가져와 페이지에 붙인다 !

 

Repository

카테고리가 같은 게시물 찾기

public interface ChallengeRepository extends JpaRepository<Challenge, Long> {
    List<Challenge> findAllByCategoryNameEquals(String category);
}

진짜 jpa도 신기한데 이걸로도 처리 못 하는 건 querydsl을 쓴다고 해서 어떤 건지 궁금하다.

 

-여기서는 카테고리에 All 도 있어서 All 이 파라미터 값으로 넘어갈때는 findAll( ) 을 쓰고 그 외에는 위에 걸 썼다.

 

 

---

 

-reponseDto를 리턴해야해서 엔티티값을 가져와서 dto로 새로 매핑하는데 코드가 지저분해 보여서 줄일 수 있었으면 좋겠다. 있나 모르겠다.

return challengeRepository.findAll().stream()
                    .map(ChallengeResponseDto::new)
                    .collect(Collectors.toList());

 

-클라이언트에 get 요청시 보내는 파라미터 값 서버에서 받기

@GetMapping("/search")
    public List<ChallengeResponseDto> searchChallenges(@RequestParam("search") String search) {
        return challengeService.searchChallenges(search);
    }

 

 

오래 찾았는데 이렇게 보니까 간단하다..!

 

 

참고 블로그

게시판 버튼형 카테고리 구현 방법[AJAX]