2/16 SpringBoot Likes 모델 만들기

목표

좋아요 모델 만들기 좋아요 API 만들기좋아요 구현하기

			<i class="fas fa-heart active" id="storyLikeIcon-1" onclick="toggleLike()"></i>
	</button>

여기에 보면 toggleLike라고 있는데  아이디가 -1이라서 문제이다.  그래서 다른애들을 못찾는것이다 

그래서 아이디를 이미지 아이디로 주려고한다.

/**
	2. 스토리 페이지
	(1) 스토리 로드하기
	(2) 스토리 스크롤 페이징하기
	(3) 좋아요, 안좋아요
	(4) 댓글쓰기
	(5) 댓글삭제
 */

// (1) 스토리 로드하기
let page = 0;

function storyLoad() {
	$.ajax({
		url: `/api/image?page=${page}`,
		dataType: "json"
	}).done(res=> {
		console.log(res);
		res.data.content.forEach((image)=>{
			let storyItem = getStoryItem(image);
			$("#storyList").append(storyItem);
		});
	}).fail(error=>{
		console.log("오류",error);
	});
}

storyLoad();

function getStoryItem(image) {
	let item =`<div class="story-list__item">
	<div class="sl__item__header">
		<div>
			<img class="profile-image" src="/upload/${image.user.profileImageUrl}"
				onerror="this.src='/images/person.jpeg'" />
		</div>
		<div>${image.user.username}</div>
	</div>

	<div class="sl__item__img">
		<img src="/upload/${image.postImageUrl}" />
	</div>

	<div class="sl__item__contents">
		<div class="sl__item__contents__icon">

			<button>
				<i class="fas fa-heart active" id="storyLikeIcon-${image.id}" onclick="toggleLike(${image.id})"></i>
	</button>
</div>

<span class="like"><b id="storyLikeCount-1">3 </b>likes</span>

<div class="sl__item__contents__content">
	<p>${image.caption}</p>
</div>

<div id="storyCommentList-1">

	<div class="sl__item__contents__comment" id="storyCommentItem-1"">
		<p>
			<b>Lovely :</b> 부럽습니다.
		</p>

		<button>
			<i class="fas fa-times"></i>
		</button>

	</div>

</div>

<div class="sl__item__input">
	<input type="text" placeholder="댓글 달기..." id="storyCommentInput-1" />
	<button type="button" onClick="addComment()">게시</button>
		</div>

	</div>
</div>`;
	return item;
}

// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {
	//console.log("윈도우 scrollTop",$(window).scrollTop());
	//console.log("문서의 높이",$(document).height());
	//console.log("윈도우 높이",$(window).height());
	
	let checkNum = $(window).scrollTop() - ($(document).height() - $(window).height() );
	console.log(checkNum);
	
	if(checkNum <1 && checkNum > -1){
			page++;
			storyLoad();
	}
});


// (3) 좋아요, 안좋아요
function toggleLike(imageId) {
	let likeIcon = $(`#storyLikeIcon-${imageId}`);
	if (likeIcon.hasClass("far")) {
		likeIcon.addClass("fas");
		likeIcon.addClass("active");
		likeIcon.removeClass("far");
	} else {
		likeIcon.removeClass("fas");
		likeIcon.removeClass("active");
		likeIcon.addClass("far");
	}
}

// (4) 댓글쓰기
function addComment() {

	let commentInput = $("#storyCommentInput-1");
	let commentList = $("#storyCommentList-1");

	let data = {
		content: commentInput.val()
	}

	if (data.content === "") {
		alert("댓글을 작성해주세요!");
		return;
	}

	let content = `
			  <div class="sl__item__contents__comment" id="storyCommentItem-2""> 
			    <p>
			      <b>GilDong :</b>
			      댓글 샘플입니다.
			    </p>
			    <button><i class="fas fa-times"></i></button>
			  </div>
	`;
	commentList.prepend(content);
	commentInput.val("");
}

// (5) 댓글 삭제
function deleteComment() {

}

이제 클릭했을떄 좋아요가 되고 클릭하지않았을떄 좋아요가 되지 않게 구현하기위해서는 

첫번쨰로는 모델을 만들어야한다! 

@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
@Entity
@Table(
		uniqueConstraints = {
				@UniqueConstraint(
						name="likes_uk",
						columnNames = {"imageId", "userId"}
						)
				
		}
		)
public class Likes {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY) 
	private int id;
	
	private Image image;
	
	private User user;
	
	private LocalDateTime createDate;
	
	@PrePersist
	public void createDate() {
		this.createDate = LocalDateTime.now();
	}
	
	
}

Likes라는 클래스를 만들어서 어떤이미지를 누가 좋아하는지를 만들어야하는데 

첫번째로는 이미지가 필요하고 

두번쨰로는 누가가 필요하다

이제 연관관계를 볼것이다. 이미지 입장으로 먼저보자

하나의 이미지는 좋아요를 몇번할수 있는가? 하나의 이미지는 백개의 좋아요가 있을수도 있다. 

하나의 이미지(1)는 여러개의 좋아요(N)가 될수 있으니  1:N관계가 성립되고 

하나의 좋아요를 여러가지 이미지가 동시에하는것은 불가능하다. 

데이터베이스나오는 하나의 좋아요 기록이 여러가지 이미지는 불가능하다. 

한명의 유저(1)는 좋아요(N) 를 여러번 할수 있다. 

 

쌀이라는 유저가 1번 이미지를 좋아헀는데 , 쌀이라는 유저가 또 1번이미지를 좋아할수 없으니 중복될수없으니  중복유니크키로 바꿔논것이다. 

@Table(
uniqueConstraints = {  // 유니크 제약조건
@UniqueConstraint(
name="likes_uk",
columnNames = {"imageId", "userId"}
)
}
)

 

내가 라이크 정보를 가져올때 Image를 가져오는데 Image는 USer를 가져온고 그안에 들어가면 images를 가져온데 User로 접근하게 되면 images를 안가져오게 되니까 무한참조는 안되서 괜찮다. 

package com.cos.photogramstart.domain.likes;

import java.time.LocalDateTime;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.PrePersist;
import javax.persistence.Table;
import javax.persistence.UniqueConstraint;

import com.cos.photogramstart.domain.image.Image;
import com.cos.photogramstart.domain.subscribe.Subscribe;
import com.cos.photogramstart.domain.user.User;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
@Entity
@Table(
		uniqueConstraints = {
				@UniqueConstraint(
						name="likes_uk",
						columnNames = {"imageId", "userId"}
						)
				
		}
		)
public class Likes { //N
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY) 
	private int id;
	
	@JoinColumn(name = "imageId")
	@ManyToOne
	private Image image; //1
	
	//오류가 터지고 나서 잡아봅시다.
	@JoinColumn(name = "userId")
	@ManyToOne
	private User user; //1 
	
	private LocalDateTime createDate;
	
	@PrePersist
	public void createDate() {
		this.createDate = LocalDateTime.now();
	}
	
	
}

이렇게 결과가 나오면 Model 형성은 완료가 된것이다.!