웹개발 종합반 - 4주차 - 13. [스파르타피디아] - GET 연습(보여주기)

이번엔 POST에 이어서

GET방식으로 DB에서 데이터를 받아 클라이언트로 전달해주자!

 

먼저 간단하게 서버부터 해주자 

@app.route("/movie", methods=["GET"])
def movie_get():
    movie_list = list(db.movies.find({},{'_id':False})) #movies DB에서 id만 제외한뒤 list화 시켜서 저장하자
    return jsonify({'movies':movie_list}) # list를 json형식으로 리턴해주자

 

 

 

다음으로는 조금은 복잡한 클라이언트쪽을 손봐주자 ㅎ

function listing() {
    $('#cards-box').empty()  //기존 영화 리스트들 비우기
    $.ajax({
        type: 'GET',
        url: '/movie',
        data: {},
        success: function (response) {
            let rows = response['movies']  //받아온 데이터에서 movie배열만 빼서 저장
            for(let i = 0; i < rows.length; i++) {  //for문으로 하나씩 빼오자!
                let image = rows[i]['image']
                let title = rows[i]['title']
                let des = rows[i]['des']
                let star = rows[i]['star']
                let comment = rows[i]['comment']

                let star_image = '⭐'.repeat(star)

                let temp_html = `<div class="col">    
                                    <div class="card h-100">
                                        <img src="${image}"
                                             class="card-img-top">
                                        <div class="card-body">
                                            <h5 class="card-title">${title}</h5>
                                            <p class="card-text">${des}</p>
                                            <p>${star_image}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                    </div>
                                </div>`
                                //영화 리스트 카드 부분에 해당하는 html코드

                $('#cards-box').append(temp_html)  //마지막으로 삽입!
            }
        }
    })
}

 

 

이렇게 하면?

1. DB에서 위 내용을 서버로 보내고

2. 서버에서는 해당 데이터를 id값만 뺴고 list화하여 json 형식으로 클라이언트에게 전달!

3. 데이터를 받은 클라이언트는 원하는 형식에 맞게 표현해준다