[スパルタコードクラブ]ネットワーク開発総合クラス5週目

▼▼▼▼▼▼▼▼GET、POST復習->実際にWebサービスを開始

実習:映画スター

APIの作成(俳優照会=Read)
1 . 検索(READ)機能:すべての俳優情報を表示する
2 . 賛(UPDATE)機能:クライアントから取得した名前(name give)で賛増加を検索する
3 . 削除(DELETE)機能:クライアントから受け取った名前(name give)を使用して俳優を検索し、俳優を削除する
APIの作成に必要な情報
1 . 要求情報:要求URL=/api/list,要求方式GET,無要求データ
2 . サーバ提供機能:DBは俳優情報を検索し、俳優情報を応答データとして送信する
3 . 応答データ:(JSON形式)「start list」=俳優情報リスト
[サーバ部分コード]

# API 역할을 하는 부분
@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})


@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': '좋아요 완료!!'})


@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': '삭제 완료!'})

[クライアント部分コード]

            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 url = mystars[i]['url']
                            let recent = mystars[i]['recent']
                            let like = mystars[i]['like']

                            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)
                        }
                    }
                });
            }

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

                });
            }

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

[結果画面:リストを表示]

[結果画面:よかった]

私のプロジェクトをサーバにアップロード

Webサービス起動に必要な概念

Webサービスを実行するためには、クライアントの要求にいつでも応答できるサーバ上でプロジェクトを実行する必要があります.
要求にいつでも応えるために、コンピュータは常にオープン状態でプログラムを実行し、公開アドレス公開IPアドレスを使用してWebサービスにアクセスする必要があります.
AWSを使用してサーバにプログラムを実行する->ドメインを購入し、IPアドレスに接続する->ogタグの追加

ポスト

Webサービスがどのように動作するかを詳しく知る週です.AWSでEC 2を使用してサーバーにプログラムをアップロードして実行したことがありますが、ガビアからドメインを購入して実際にそのアドレスに移動してみることもできます.これらの過程を一つ一つメモすると、おそらくたくさんのものがあるので、簡単に書きました.思ったより面白い講座でした.私はアプリケーションの開発にしか興味がありません.これはネットに興味を持った経験です.