5주차 WIL🐱‍👤API설계복습, 서버올리기

Wintering·2022년 4월 18일
0

내일배움캠프

목록 보기
5/17

무비스타 API 복습 🎀

무비스타 GET 🎀

  1. 클라이언트 - 서버 연결

  2. 서버 만들기

    @app.route('/api/list', methods=['GET'])
    def show_stars():
        movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1)) # 내림차순 정렬
        return jsonify({'movie_stars': movie_star})
    • point : 내림차순 정렬방법 sort('like', -1)
  3. 클라이언트 만들기

               function showStar() {
                    $.ajax({
                        type: 'GET',
                        url: '/api/list?sample_give=샘플데이터',
                        data: {},
                        success: function (response) {
                            let mystars = response[`movie_stars`]
    
                            for(let i=0; i < mystars.length; i++){
                                let name = mystars[i][`name`]
                                let img_url = mystars[i][`img_url`]
                                let recent = mystars[i][`recent`]
                                let url = mystars[i][`url`]
                                let like = mystars[i][`like`]
    
                                let temp_html =`<div class="card">
                                                    <div class="card-content">
                                                        <div class="media">
                                                            <div class="media-left">
                                                                <figure class="image is-48x48">
                                                                    <img
                                                                            src="${img_url}"
                                                                            alt="Placeholder image"
                                                                    />
                                                                </figure>
                                                            </div>
                                                            <div class="media-content">
                                                                <a href="${url}" target="_blank" class="star-name title is-4">${name} ${like}</a>
                                                                <p class="subtitle is-6">${recent}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <footer class="card-footer">
                                                        <a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">
                                                            위로!
                                                            <span class="icon">
                                                  <i class="fas fa-thumbs-up"></i>
                                                </span>
                                                        </a>
                                                        <a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">
                                                            삭제
                                                            <span class="icon">
                                                  <i class="fas fa-ban"></i>
                                                </span>
                                                        </a>
                                                    </footer>
                                                </div>`
    
                                $('#star-box').append(temp_html)
                            }
                        }
                    });
                }
    • point : likeStar와 deleteStar가 (name)값을 변수로 받는 함수이기 때문에, 변수가 들어가는 부분에도 꼭 ${'name'}을 해주기
  4. 완성

무비스타 POST (좋아요) 🎀

  1. 클라이언트 - 서버 연결

  2. 서버 만들기

    @app.route('/api/like', methods=['POST'])
    def like_star():
        name_receive = request.form['name_give']
    
        target_star = db.mystar.find_one({'name' : name_receive})
        current_like = target_star['like']
    
        new_like = current_like + 1
    
        db.mystar.update_one({'name':name_receive}, {'$set':{'like' : new_like}})
    
        return jsonify({'msg': '좋아요 완료!'})
    • point
      1. target_star > 'name'을 조건으로 한명의 정보 가져오기
      2. current_like > 한명의 정보 중 update가 필요한 like 정보만 가져오기
      3. new_like > like 수정
      4. update 문
  3. 클라이언트 만들기

                function likeStar(name) {
                    $.ajax({
                        type: 'POST',
                        url: '/api/like',
                        data: {name_give:name},
                        success: function (response) {
                            alert(response['msg']);
                            window.location.reload()
                        }
                    });
                }
  4. 완성

무비스타 POST (좋아요) 🎀

  1. 클라이언트 - 서버 연결

  2. 서버 만들기

    @app.route('/api/delete', methods=['POST'])
    def delete_star():
        name_receive = request.form['name_give']
    
        db.mystar.delete_one({'name' : name_receive})
    
        return jsonify({'msg': '삭제 완료!'})
    • point
      1. delete문 형식
  3. 클라이언트 만들기

                function deleteStar(name) {
                    $.ajax({
                        type: 'POST',
                        url: '/api/delete',
                        data: {name_give:name},
                        success: function (response) {
                            alert(response['msg']);
                            window.location.reload()
                        }
                    });
                }
  4. 완성

AWS 🎀

0개의 댓글