프로젝트 개발하기 #5 - API 만들기 (GET)

개발순서

API 만들기 ( GET )

1. 필요한 데이터 조회하기
2. 데이터 불러와서 프론트로 구현하기

개발해보기

API 만들기 ( GET )

1) 필요한 데이터 조회하기

• 조회한 데이터를 'reviews' 키값으로 전달하기

@app.route('/review', methods=['GET'])
def get_review():
    reviews = list(db.reviews.find({},{'_id':False}))

    return jsonify({'result': 'success', 'reviews': reviews })

2) 데이터 불러와서 프론트로 구현하기

• 받아온 'reviews' 키 값으로 데이터를 받고 html에 삽입하기

$.ajax({
        type: "GET",
        url: "/review",
        data: {},
        success: function (response) {
            if (response["result"] == "success") {
                let reviews = response['reviews'];

                for(let i=0; i<reviews.length; i++){
                    let poster = reviews[i]['poster'];
                    let date = reviews[i]['date'];
                    let title = reviews[i]['title'];
                    let comment = reviews[i]['comment'];

                    let tempHtml = `<div class="review clearfix">
                                        <img class="review_img"
                                             src="${poster}"
                                             alt="">
                                        <div class="review_wrap">
                                            <p class="review_date">${date}</p>
                                            <p class="review_title">${title}</p>
                                            <span class="line"></span>
                                            <p class="review_line">"${comment}"</p>
                                        </div>
                                        <button onclick="close()" id="delete_btn" class="delete">
                                            <span class="material-icons">
                                                clear
                                            </span>
                                        </button>
                                    </div>`

                    $('#review_box').append(tempHtml);
                }
            } else {
                alert("리뷰를 받아오지 못했습니다");
            }
        }
    })

프론트 구현까지 완성한 결과물

이제 다음단계는 데이터 분석하기

TODO LIST

• DB에 저장된 장르/배우 데이터들을 각각 빈 리스트에 넣기
• 리스트에 담긴 데이터를 카운트하기
• 상위에 해당하는 데이터들만 뽑아내기