明日学習団第五週目WIL🐱‍👤API設計の復習、サーバーのアップグレード


Movie Star APIの復習🎀


映画スターGET🎀


  • クライアント-サーバ接続

  • サーバの作成
    @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)

  • クライアントの作成
               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'}を提供する必要があります.

  • 完了
  • MOVIESTAR POST(いいですね)🎀


  • クライアント-サーバ接続

  • サーバの作成
    @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
  • target star>nameを条件として情報
  • をインポート
  • curry like>更新が必要なlike情報のみ取得
  • new like>like水晶
  • update文

  • クライアントの作成
                function likeStar(name) {
                    $.ajax({
                        type: 'POST',
                        url: '/api/like',
                        data: {name_give:name},
                        success: function (response) {
                            alert(response['msg']);
                            window.location.reload()
                        }
                    });
                }

  • 完了
  • MOVIESTAR POST(いいですね)🎀


  • クライアント-サーバ接続

  • サーバの作成
    @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
  • delete文フォーマット

  • クライアントの作成
                function deleteStar(name) {
                    $.ajax({
                        type: 'POST',
                        url: '/api/delete',
                        data: {name_give:name},
                        success: function (response) {
                            alert(response['msg']);
                            window.location.reload()
                        }
                    });
                }

  • 完了
  • AWS 🎀