[springBoot] 구독/구독취소

구독/구독취소

---

1. profile.js onclick 이벤트 처리

- 이벤트생성

<!-- profile.jsp -->
<button class="cta blue" onclick="toggleSubscribe(this)">구독취소</button>

- 구독취소틀

// profile.js
// (1) 유저 프로파일 페이지 구독하기, 구독취소
if ($(obj).text() === "구독취소") {
		$(obj).text("구독하기");
		$(obj).toggleClass("blue");
	} else {
		$(obj).text("구독취소");
		$(obj).toggleClass("blue");
	}

- ajax 분기

$.ajax().done().fail();
<!--------------------------------------->
	$.ajax({
			
		}).done(res=>{
			
		}).fail(error=>{
			
		});

- ajax 분기 내용 생성

 

// profile.js

// (1) 유저 프로파일 페이지 구독하기, 구독취소
function toggleSubscribe(toUserId,obj) {
	if ($(obj).text() === "구독취소") {

		$.ajax({ //구독취소
			type:"delete",
			url:"/api/subscribe/"+toUserId,
			dataType:"json"
		}).done(res=>{ //구독취소 성공시
			$(obj).text("구독하기");
			$(obj).toggleClass("blue");
		}).fail(error=>{
			console.log("구독취소실패",error);
		});

	} else {
		$.ajax({ //구독하기
			type:"post",
			url:"/api/subscribe/"+toUserId,
			dataType:"json"
		}).done(res=>{ //구독하기 성공시
			$(obj).text("구독취소");
			$(obj).toggleClass("blue");
		}).fail(error=>{
			console.log("구독하기실패",error);
		});
	}
}

---

feat. header에 user.id도 바꿔주자!

// header.jsp
...
<li class="navi-item"><a href="/user${principal.user.id}">
							<i class="far fa-user"></i>
						</a></li>
...