[明日の学習キャンプ]#210916(feat.ネット基礎の復習)

個人手帳PROJECT(feat.Webベース2週目復習)

jQueryの使用

jQueryは、HTML要素を操作するために予め作成された便利なJavaScript、ライブラリです!

jQuery操作時には操作要素も指し示さなければなりません!jqueryはid値によって操作要素を指す.

機能

Postboxボタンclick=>非表示ウィンドウを開きます.ボタンの内容はPostboxを閉じるように変更する必要があります.

Postboxボタンclick=>表示を閉じるウィンドウは非表示になります.ボタンの内容はPostboxを開くように変更する必要があります.

ページを最初に更新する場合は、Postbox、

を非表示にする必要があります.

に対して位置決め枠ボタンを開く機能

を追加する.

<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>

転送ボックスでdivループid値

を使用する.

位置決め枠制御(位置決め枠の状態による)

<script>
function openclose() {
	#id값 post-box의 display 값이 block이면
    if($('#post-box)).css('display')=='block')
    {
        // post-box를 가리고
        $('#post-box').hide();
     	$('#btn-posting-box").text('포스팅박스 열기')
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
        $('#btn-posting-box").text('포스팅박스 딛ㄱ;')
    }
    	
}
</script>


<button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</a>     //포스팅박스 열기 버튼에 id값 주기

最初から

の位置決め枠

を隠す.

これをインラインスタイル

と呼ぶ.

<div class="form-post" id="post-box" style="display:none">

サーバ-クライアント通信について

APIとは?

プログラムのインタラクションを支援するメディア

は、開発者がプログラムの作成に必要な機能を直接実現するのではなく、APIプロバイダが提供するデータやモジュールなどをAPIおよびAPIドキュメントに書き込むことを可能にする
(APIの作成者は、他の人が使用できるように独自のデータベースまたは機能をモジュール化)

クライアントの要求方式

GET:要求クエリーデータ

POST:データの作成、変更、削除を要求する

Ajax

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", //서버에 있는 API 
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

responseはapi呼び出し結果を受信するパラメータです!
上の反応部分は最初は少し混同されていましたが、ランダム変数で、反応を結果に変えても結果値は同じです.

サーバはjsonify()を応答として返します
サーバがjsonify(response)を使用するのは、データを下図に示すフォーマットに作成するからです.(質問室で助けてもらう)

ネットワークスクロール(feat.ネットワークベース3週間復習)

まずパッケージをインストールします.仮想環境の概念をよく知りません.講座を聞いて、パッケージをインストールして、プログラムを編纂して、私はどうしてこのコマンドを打ってそれを実行するのかもっと分かりました.

仮想環境

まず、Pythonにはライブラリと呼ばれるバンドル機能のパッケージが必要です.

プロジェクトごとに必要な機能が異なるため、インストールするライブラリも異なるが、毎回削除して再インストールすることはできないため、いわゆる仮想環境

が作成される.

すなわち、仮想環境は、プロジェクト別にパッケージされたツールボックスと見なすことができる.

Webスクロール

ロールバックの情報を格納および利用するには、pymongoというデータベース

が必要です.

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta 

pymongoが提供する使い方

doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
same_ages = list(db.users.find({'age':21},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

全員の書評(feat.web 4週間復習)

機能

POST(REVIEW保存)
:サーバは、受信した=>デバイスにクライアントから提供された情報を保存する必要があります=>保存に成功したときに応答データを送信します.

GET(データベースに保存されているコメントを表示)
:サーバがデータベースからコメントを取得し、応答=>クライアントがサーバから受信します.

サーバコード

@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

    doc = {
        'title': title_receive,
        'author': author_receive,
        'review': review_receive
    }

    db.bookreview.insert_one(doc)

    return jsonify({'msg': '리뷰가 저장되었습니다'})

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

    return jsonify({'all_reviews': reviews})

クライアントコード

function makeReview() {
                let title = $('#title').val()
                let author = $('#author').val()
                let review = $('#bookReview').val()

                if (title == '' || author == '' || review == '') {
                    alert('다시 입력해주세요')
                }
                else {
                        $.ajax({
                            type: "POST",
                            url: "/review",
                            data: {title_give:title,author_give:author,review_give:review},
                            success: function (response)
                            {
                                alert(response["msg"]);
                                window.location.reload();
                            }
                                })
                        }
                    }
            function showReview() {
                $.ajax({
                    type: "GET",
                    url: "/review",
                    data: {},
                    success: function (response) {
                        let reviews=response['all_reviews']
                        for(let i=0;i<reviews.length;i++)
                        {
                            let title=reviews[i]['title']
                            let author=reviews[i]['author']
                            let review=reviews[i]['review']

                            let temp_html=`<tr>
                                                <td>${title}</td>
                                                <td>${author}</td>
                                                <td>${review}</td>
                                           </tr>`

                            $('#reviews-box').append(temp_html)
                        }
                    }
                })
            }
        </script>