【Python】Webフレームワーク 「Flask」 ～ REST API編 [2] ～

Python

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37736752.html
の続き。
「Formでのデータ送信」と「セッション」について取り扱う。

■ 環境構築

前提条件

 * 実行環境を以下の関連記事を参考に構築する
https://blogs.yahoo.co.jp/dk521123/33850352.html
https://blogs.yahoo.co.jp/dk521123/37736310.html

■ サンプル

restapi-flask.py

#!/usr/bin/env python
# -*- coding: UTF-8 -*-

import sys
import json
from flask import Flask, session, render_template, request
from flask_restful import Resource, Api, reqparse

app = Flask(__name__, template_folder='.')
app.secret_key = 'sample_key'
api = Api(app)

@app.route('/')
def home():
  return render_template('demo.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
  if request.form['userName'] == 'admin' and request.form['password'] == 'pass':
    return render_template('success.html')
  else:
    return render_template('fail.html')

@app.route('/count', methods=['GET', 'POST'])
def count():
  counter = 0
  if 'count' in session:
    counter = int(session.get('count'))
  counter = counter + 1
  session['count'] = str(counter)
  
  return json.dumps({'result-count':session.get('count')});
    
if __name__ == "__main__":
  app.run(debug=True, host="localhost", port=8000)

demo.html

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<h1>From(POST)で送信</h1>
<form name="Form" method="POST" action="/login">
 User Name: <input type="text" size="30" name="userName">
 Password: <input type="password" size="30" name="password">
<input type="submit" value="submit" name="login">
</form>
<hr />
<h1>Ajax(JSON)で送信(Session)</h1>
<button id="button-json">Click Me</button>
<div id="result">Result</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript">
$('#button-json').on('click',function(){
  $.ajax({
    url: 'http://localhost:8000/count',
    type: 'POST',
    dataType: 'json'
  })
  // Ajaxリクエストが成功した時発動
  .done( (data) => {
      $('#result').append(JSON.stringify(data));
      console.log(JSON.stringify(data));
  })
  // Ajaxリクエストが失敗した時発動
  .fail( (data) => {
      $('#result2').append(JSON.stringify(data));
      console.log(JSON.stringify(data));
  });
});
</script>
</body>
</html>

success.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Success</title>
</head>
<body>
 Success
</body>
</html>

fail.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fail</title>
</head>
<body>
 Fail
</body>
</html>

■ 実行コマンド

python restapi-flask.py

動作確認

 * 以下のサイトをブラウザでアクセスする
[[http://localhost:8000]]

参考文献

https://qiita.com/ikaro1192/items/d890eefbdbbfe1460252
http://thr3a.hatenablog.com/entry/20171106/1509973583
https://blog.mobming839.net/entry/flask-session-01

関連記事

Webフレームワーク 「Flask」 ～ Hello World編 ～

https://blogs.yahoo.co.jp/dk521123/37736310.html

Webフレームワーク 「Flask」 ～ REST API編 [1] ～

https://blogs.yahoo.co.jp/dk521123/37736752.html