明日学习団11日制作チャレンジ2日目

3281 ワード
明日の学習カード 公費支援 明日学習団 11日制作チャレンジ エンコーディング テキストリンク
2日目(FlaskサーバのフォルダをAPI構造/プロジェクト2日目に設定)

[2日目]ホームの構成について説明する

  • 条名称選定:民初団年俸6条
  • ページ構成
    1)トップスライド画像バナー
    2)次のカテゴリ(クリックして表示)
    3)次のカードリスト(選択したカテゴリによって表示)
    4)検索ウィンドウの追加
    5)個々のページがゲーム固有の詳細ページ(詳細,コメント)

    • ［1］Flashベース


    (0)フォルダの設定
    1つのフォルダで、
  • 静的フォルダ(画像、cssファイル)
  • templatesフォルダ(htmlファイル)
  • app.pyファイル(サーバコードファイル)
    • (1)パッケージFlaskをインストールする.
    (2)フレームワークを用いたFlash基本コードを入力する.
  • フレームワーク:サーバを駆動しやすいコードのセット.
    • Flash基本コード
    from flask import Flask
app = Flask(__name__)
@app.route('/')
     def home():
        return 'This is Home!'
if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)
    (3)http://localhost:5000/に入って接続を確認する.
  • ‘This is Home!’ 表示すると成功する
  • ターミナルウィンドウ&Ctrl+Cをクリックするとサーバーが閉じます.
  • @app.URLを区切るにはroute("/")セクションを変更します.
    • (4)htmlファイルをロードして適用することもできます.
    サンプルコード
    from flask import Flask, render_template
			#template 폴더를 임포트
app = Flask(__name__)
@app.route('/')
	def home():
   		return render_template('index.html')
        		#template 폴더 안에 있는 index.html 파일을 적용
if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

  • API:銀行の窓口のように、お客様の要求に基づいてデータを提供します.リクエストはHTTPリクエストメソッドを使用する必要があります.
    ①GET:通常、「データ照会」を要求するために使用されます.
    データはURLの後ろに疑問符を付けてkey=valueで渡されます.
    ②POST:通常、「データの作成、変更、削除」を要求するために使用されます.
    データはkey:valueの形で非表示のHTML bodyに渡されます.
    • サンプルコード
    GET要求APIコード
    @app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   			#title_give의 값을 불러와 title_receive에 저장.
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
   			#클라이언트에게 회신.
    GET要求確認Ajaxコード
    $.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    		#title_give, 즉, '봄날은 간다'가 데이터로 들어감.
    data: {},
    success: function(response){
       console.log(response)
       		#위 API 코드에서 마지막 줄을 회신받게 됨.
    }
  })
    POST要求APIコード
    @app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   			#title_give의 값을 불러와 title_receive에 저장.
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
  			#클라이언트에게 회신.
    POST要求確認Ajaxコード
    $.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
   		#data로서 key:vaule 형태로 '봄날은 간다'를 전달
    success: function(response){
       console.log(response)
    		#위 API 코드에서 마지막 줄을 회신받게 됨.
    }
  })

    授業を聞いてから

    	:아직은 이 모든 내용들을 전부 이해하지는 못하지만, 그래도 아직
	예제가 4개나 남았으니까 그것들을 반복하다 보면 조금은 이해할 
    	수 있지 않을까 싶다. 수업을 듣다보면 나도 조금은 이것들을 응용
        하여 나만의 페이지를 만들 수 있을까? 일단은 공부를 더 해서 프
        로젝트에 조금이라도 보탬이 되고 싶다.
        프로젝트에 쓸만한 부트스트랩들을 찾고 정리해보자.
    HTTPとは?
    JSP DAO分離JOIN CODE