開発ログ4

講義資料

ローカル開発環境

クラウド環境

Flaskフレームワーク:サーバを駆動するための便利なコードのセット.サーバを起動するには、複雑なタスクを簡単に処理できます.

フラスコサーバーを起動するファイルはappです.pyと名付けて!

htmlファイルの読み込み:フラスコ内蔵関数render templateを使用する

from flask import Flask, render_template
GET、POST方式

要求GET→データ読み出し時
例)ムービーリストの表示
→データ転送時:
URLの後ろに疑問符を付けてkey=valueに転送
) google.com?ホッキョクグマ

POST→データの作成、更新、削除を要求した場合
例)会員加入、会員脱退、パスワード修正
→データ転送時:
key:value形式で非表示のHTML bodyに渡す

火星土地団体購入-POST

要求情報:URL=/mars、要求方式=POST

カラット(ajax)→サーバー(フラスコ):name、address、size

サーバ(フラスコ)→クライアント(ajax):メッセージ送信(注文完了!)

共同購入

火星土地-GET

要求情報:URL=/mars、要求方式=GET

カラット(Ajax)→サーバー(フラスコ):(なし)

サーバ(フラスコ)→クライアント(ajax):フルオーダー

を送信
*METAタグとは?
URLのみ入力し、「meta」タグをスクロールすることで自動的にこれらの部分を取得できます.
セクションでは、
「表示」(body)以外のサイト属性を記述するタグ.
例えば、Google検索時に表示される説明文字、サイトタイトル、KakaoTalk共有時に表示される画像など.

スパルタピディア-POST

要求情報:URL=/movie、要求方式=POST

カラット(ajax)→サーバー(フラスコ):url、star、comment

サーバ(フラスコ)→クライアント(ajax):メッセージ送信(転送完了!)

スパルタピディア-GET

要求情報:URL=/movie、要求方式=GET

カラット(Ajax)→サーバー(フラスコ):(なし)

サーバ(フラスコ)→クライアント(ajax):フルムービー

を送信

メモ

mongody/HMLCSS JS/サーバを作成!
->自分のコンピュータで作成し、自分のコンピュータでテストする=ローカル開発環境
フラスコフレーム:サーバーを作成するフレーム
(サーバの駆動が容易なコードのセット)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return 'This is mypage!!!'
localhost:5000/mypage
<フラスコのデフォルトフォルダ構造>
[セットアップルーチン:(常にプロジェクトフォルダで設定して開始)]

ファイル→新規プロジェクトフォルダの設定

フォルダにパス(ディレクトリ)を作成するには:
.static(画像、cssファイル、暗い)
.templates(htmlファイルを含むロールとロードするロール)

フォルダにPythonファイルを作成するには:
. app.py

templatesパスのindex.htmlの生成

ファイル→設定→プロジェクト→python-interpret-+-パッケージのインストール
. flask
. pymongo
. dnspython

render_template
return render template(「index.html」)を使用する場合
templatesフォルダのhtmlを読み込み、サーバに送信

.localhost:サーバに表示されるコンテンツ
▲右上クロム:私のパソコンのファイルを開くのと同じ概念
< api >
get:データクエリー
urlの後ろ?key=value
post:データを削除して変更を作成する
.html bodyでキーを押します:value
cf.フロントエンドhtmlページ、バックエンドフラスコ/サーバページ
<課題>
[火星の土地を共同購入]

dbpracファイルを参照して作成
cf)リフレッシュ:window.location.reload()

注文/ライフサイクル(post)/情報サーバ(Information Server)ボタンをクリックして完了
->ボタンはsave order関数を実行します.
->name、address、size情報をjqueryにインポートして送信
->約束通り(ウィンドウ)->app.py約定で受信(post)
->ウィンドウdbに保存->受注完了後に戻る
->メッセージを受信してalert->Windowsの再ロードとして表示

受注/ロード完了時の自動クエリーの表示(get)

[スパルタピディア-movie]

ブロック機能:プロジェクト実施前に必要な機能

を先に実施する.

スクロール練習-metaラベル
ex)NAVER映画:html head部分のog:image,og:title...

スケルトン作成APIの準備(POST)
▲作成するものを特定
サーバの作成(app.py)-クライアントの作成(html)-チェック

mongo DBに保存した値画面に表示(GET)

[ファン名簿作成課題]
サーバの作成やクライアントの作成など、よくやったと思います.
データ入力後、mongo DBに保存して画面にロードし、エラーが発生します.
※エラーコード:
name_receive = request.form['name_give']
ファイル[詳細ファイルの場所]デスクトップ[タスク][ジョブ][ファイル][サイトパッケージ][werkzeug][データ構造.py]行375,in getitem
raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'name_give'
-->解決済み!(04/20)
POST側ではname giveは定義されていません…^^;

      function save_comment() {
        let name = $('#name').val()
        let comment = $('#comment').val()

        $.ajax({
            type: 'POST',
            url: '/homework',
            data: {name_give:name, comment_give: comment},
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        })
    }