RestController / 4

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

- 로그인 했을때와 익명일때 차이

            <div>
	            <a href="" 
	               th:href = "@{list(id=${m.id})}" 
	               sec:authorize = "isAuthenticated()"
	               th:data-member-id="${#authentication.principal.id}"
	               class="icon icon-heart" th:classappend="${m.like}?'icon-heart-fill' : ''">좋아요</a>
	               <a href="" 
	               th:href = "@{list(id=${m.id})}" 
	               sec:authorize = "isAnonymous()"
	               class="icon icon-heart" th:classappend="${m.like}?'icon-heart-fill' : ''">좋아요</a>
               <span th:text="${m.likeCount}">0</span>
            </div>

1. 첫 번째 <a> 태그:
   • th:href 속성은 Thymeleaf 템플릿 엔진을 사용하여 링크 URL을 동적으로 생성합니다.
   • sec:authorize 속성은 보안 및 인증 처리를 위한 서버 사이드 코드에서 사용됩니다. 여기서는 사용자가 인증된 상태(isAuthenticated())일 때만 해당 링크가 표시되도록 설정되어 있습니다.
   • th:data-member-id 속성은 좋아요 기능과 관련된 추가적인 데이터를 전달하기 위해 사용됩니다. 여기서는 authentication.principal.id 값을 해당 속성에 할당하여 현재 인증된 사용자의 아이디를 전달하고 있습니다.
   • class 속성은 CSS 클래스를 지정합니다. 여기서는 icon과 icon-heart 클래스가 지정되어 있으며, th:classappend 속성은 조건에 따라 icon-heart-fill 클래스가 추가될 수 있도록 설정되어 있습니다. 이는 좋아요 상태에 따라 하트 아이콘의 색상을 변경하는 데 사용됩니다.
2. 두 번째 <a> 태그:
   • sec:authorize 속성이 isAnonymous()로 설정되어 있으므로, 사용자가 비인증 상태일 때 해당 링크가 표시됩니다. 여기서는 로그인하지 않은 사용자를 위한 처리를 담당합니다.
   • 나머지 속성과 클래스는 첫 번째 <a> 태그와 동일한 방식으로 작동합니다.
3. <span> 태그:
   • th:text 속성은 Thymeleaf를 사용하여 동적으로 텍스트 내용을 생성합니다. ${m.likeCount}는 좋아요 수를 나타내는 변수 또는 표현식을 나타내며, 해당 값이 텍스트로 표시됩니다.

 

 

 

 

@PostMapping
public int add(
    @RequestParam("mb") int memberId,
    @RequestParam("mn") int menuId){

        MenuLike menuLike = MenuLike
           .builder()
           .memberId(memberId)
           .menuId(menuId)
           .build();
        return service.append(menuLike);
    }

}

위코드 설명.. +좋아요 누르면 데이터베이스에 정보가 추가되게함

 

 

   menuList.onclick = function(e){
	   let el = e.target;
	      if (!el.classList.contains('icon-heart'))
	         return;
	
	      e.preventDefault();
	
	
	      let {memberId, menuId} = el.dataset;
	      let data = `mb=${memberId}&mn=${menuId}`;
	      
	      fetch("/api.menulikes",{
		      method:'POST',
		      headers:{
			      'Content-Type':'application/x-www-form-urlencoded'
		      },
		      body: new URLSearchParams(data)
	      })
	      .then(response=>response.text())
	      .then(result=>{
		      console.log(result);
	      });
	
	   console.log(data);

   }

이 코드는 클릭 이벤트 핸들러를 정의하는 JavaScript 코드입니다. 주어진 요소를 클릭할 때 실행되며, 다음 작업을 수행합니다:

1. 클릭된 요소를 확인하여 icon-heart 클래스를 가지고 있는지 확인합니다. 만약 해당 클래스를 가지고 있지 않은 경우, 코드 실행을 중지하고 함수를 종료합니다.
2. 클릭 이벤트의 기본 동작을 방지하기 위해 e.preventDefault()를 호출합니다. 이렇게 함으로써, 기본적으로 클릭된 요소에 정의된 링크를 따라가지 않고 추가적인 작업을 수행할 수 있습니다.
3. el.dataset을 사용하여 클릭된 요소에 정의된 data-* 속성의 값을 가져옵니다. 여기서는 memberId와 menuId를 가져오고 있습니다.
4. data 변수에 mb=memberId&mn=menuId 형식으로 데이터를 할당합니다.
5. fetch() 함수를 사용하여 서버에 HTTP POST 요청을 보냅니다. 요청 URL은 "/api.menulikes"로 설정되고, 요청 헤더에는 'Content-Type'이 'application/x-www-form-urlencoded'로 설정됩니다. 요청 본문에는 data 변수의 값을 URLSearchParams 객체로 변환하여 전달합니다.
6. 서버로부터 응답이 도착하면, response.text()를 호출하여 응답 텍스트를 가져옵니다.
7. 마지막으로, result를 콘솔에 출력합니다.

이 코드는 클릭된 요소가 하트 아이콘을 가지고 있고, 클릭된 요소에 정의된 데이터를 사용하여 서버에 POST 요청을 보내는 로직을 구현하고 있습니다. 서버 응답은 콘솔에 출력됩니다.