TIL | 11.24.목 [DRF ↔️ JS CRUD ]

- Django Rest Framework

Front JS CRUD

 

 

[좋아요 .js]

좋아요에 따라 바뀌는 아이콘과, 좋아요 받은 수 표기

async function load_like_page(){
    const payload = localStorage.getItem('payload')
    const personObj = JSON.parse(payload)
    const userId = personObj['user_id']

    const response = await fetch (`http://127.0.0.1:8000/articles/${userId}/likepage/`,{
        headers : {
            'Authorization' : 'Bearer ' + localStorage.getItem('access'),
            'content-type' : 'application/json',
        },
        method : 'GET',
    })
    response_json = await response.json()
    console.log(response_json)


    const img_box = document.getElementById('img_box')

    response_json.forEach(element => {

        const dislike_img = 'https://cdn-icons-png.flaticon.com/512/3669/3669713.png'
        const like_img = 'https://cdn-icons-png.flaticon.com/512/3670/3670159.png'

        const like = document.createElement('img') //좋아요버튼 이미지
        like.style.width = '30px'

        if(element.likes.includes(userId)){
            like.src = like_img
        } else {
            like.src = dislike_img

        }

        const like_count = document.createElement('p')
        like_count.innerText = 'likes' + element.likes_count

        const like_btn = document.createElement('button')
        like_btn.style.backgroundColor = 'transparent'
        like_btn.style.border = '0'
        like_btn.onclick = async function() {
            if(like.src === like_img){
            const response = await fetch(`http://127.0.0.1:8000/articles/${element.id}/likes/`,{
                headers : {
                    'Authorization' : 'Bearer ' + localStorage.getItem('access'),
                },
                method : 'POST',
                body:{}
            })
                like.src = dislike_img
                location.reload()
            }
            else{
                const response = await fetch(`http://127.0.0.1:8000/articles/${element.id}/likes/`,{
                    headers : {
                        'Authorization' : 'Bearer ' + localStorage.getItem('access'),
                    },
                    method : 'POST',
                    body:{}
                })
                    like.src = like_img
                    location.reload()
                }

        }

        
        like_btn.appendChild(like)
        like_btn.appendChild(like_count)
        img_box.appendChild(main_img)

    })    


}