Axios를 사용해서 여러 기능 수정
##### fake-insta 좋아요 기능 수정
- 페이지 요청을 다시하지 않고 그 해당 페이지에서 바뀌도록
1
2
3
4
5
6
| // posts-_post.html
{% if user in post.likes.all %}
<i class="like-btn fas fa-heart" style="color:#ed4956" data-id=""></i>
{% else %}
<i class="like-btn far fa-heart" style="color:black" data-id=""></i>
{% endif %}
|
- then() : 성공했을 때
- catch() : 실패했을 때
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| // list.html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
# 모든 하트버튼 가져옴
let likeBtnList = document.querySelectorAll('.like-btn')
// console.log(likeBtnList)
for(const likeBtn of likeBtnList){
// console.log(likeBtn)
# 각각의 버튼에 리스너를 달아줌
likeBtn.addEventListener('click', (e) => {
console.log(e.target)
const post_id = e.target.dataset.id
# 게시글 번호에 따라 url에 axios요청
## urls에 <int:id>로 정해놨기 때문에
axios.get(`/posts/${post_id}/like/`)
.then(function(response){
# 여기의 response.data 는 views.py에서 해준 True, False값
## 실제로 버튼을 바꾸는게 아니라 'far'/'fas' 클래스 조작을 통해 바꿔줌
if(response.data.is_like){
# 버튼을 누른 타겟
e.target.classList.remove('far') ## 빈하트
e.target.classList.add('fas') ## 채워진하트
e.target.style.color = "red"
}else{
e.target.classList.add('far')
e.target.classList.remove('fas')
e.target.style.color = "black"
}
})
.catch(function(error){
console.log(error)
})
})
}
</script>
|
- 위와같이 수정을 하면 html파일이 넘어오기 때문에
- views.py에서 Json데이터로 받아올 수 있도록 처리
1
2
3
4
5
6
7
8
9
10
11
12
13
| # views.py
## def like의 return 수정
### response를 javascript object형태로 바꿔서 return해줌
from django.http import JsonResponse
if user in post.likes.all():
is_like = False
else:
post.likes.add(user)
# 추가
is_like = True
return JsonResponse({"is_like":is_like})
|
1
2
3
| # views.py
## def like수정
return JsonResponse({"is_like":is_like, "like_count":post.likes.count()})
|
1
2
3
| # _post.html
## span태그 추가
<p class="card-text">좋아요 <span id="like-count-"></span>개</p>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
let likeBtnList = document.querySelectorAll('.like-btn')
for(const likeBtn of likeBtnList){
likeBtn.addEventListener('click', (e) => {
const post_id = e.target.dataset.id
axios.get(`/posts/${post_id}/like/`)
.then(function(response){
if(response.data.is_like){
e.target.classList.remove('far')
e.target.classList.add('fas')
e.target.style.color = "red"
} else{
e.target.classList.add('far')
e.target.classList.remove('fas')
e.target.style.color = "black"
}
console.log(response.data.like_count)
# 요기 추가
document.querySelector(`#like-count-${post_id}`).innerHTML = response.data.like_count
})
.catch(function(error){
console.log(error)
})
})
}
</script>
|
