스토리 페이지
2. Ajax로 포토 리스트 가져오기
스토리 로드 하는 js에 가서 ajax로 데이터를 불러올거다.
우선 임시로 셋팅해서 확인
story.js
// (1) 스토리 로드하기
function storyLoad() {
$.ajax({
url:`/api/image`,
dataType: "json"
}).done(res=>{
console.log(res);
}).fail(error=>{
console.log("오류", error)
});
}
storyLoad();
JavaScript
복사
이제 갖고오는 데이터를 기반으로 뿌려줘야한다,
story.jsp 에서
<article class="story-list" id="storyList">
</article>
JavaScript
복사
article 사이에 있는 html 소스들을 ctrl+x
story.js
getStoryItem 함수 안에 붙여넣어서 리턴해주게 한다.
function getStoryItem() {
let item =`<div class="story-list__item">
<div class="sl__item__header">
<div>
<img class="profile-image" src="#"
onerror="this.src='/images/person.jpeg'" />
</div>
<div>TherePrograming</div>
</div>
<div class="sl__item__img">
<img src="/images/home.jpg" />
</div>
<div class="sl__item__contents">
<div class="sl__item__contents__icon">
<button>
<i class="fas fa-heart active" id="storyLikeIcon-1" onclick="toggleLike()"></i>
</button>
</div>
<span class="like"><b id="storyLikeCount-1">3 </b>likes</span>
<div class="sl__item__contents__content">
<p>등산하는 것이 너무 재밌네요</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;
}
JavaScript
복사
ajax에서 성공했을때 getStoryItem함수의 리턴값을 받아서 타임라인 화면에 forEach가 돌면서 뿌리게 해준다.
// (1) 스토리 로드하기
function storyLoad() {
$.ajax({
url:`/api/image`,
dataType: "json"
}).done(res=>{
console.log(res);
res.data.forEach((image)=>{
let storyItem = getStoryItem();
$("#storyList").append(storyItem);
});
}).fail(error=>{
console.log("오류", error)
});
}
JavaScript
복사
(지금은 가져온 데이터들을 맵핑해준게 아니라서 고정된 사진들과 글들이 뿌려진다)
8개 데이터를 가져오기때문에 8개 사진들이 뿌려진다.
이제 값들을 맵핑해주자
image값을 넘겨줘서
4번째 오타로 image.postImageUrl이다
값들을 맵핑
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-1" onclick="toggleLike()"></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;
}
JavaScript
복사
잘들어온다.