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

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37736310.html
の続き。
今度は、 Flask(フラスク)を使って、簡易的なRest APIを作成する。

■ 環境構築

前提条件

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

インストール

以下をコマンドして、インストールする
python -m pip install --upgrade pip
pip install flask-restful

■ サンプル

restapi-flask.py

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

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

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

@app.route('/')
def home():
  return render_template('demo-json.html')
@app.route('/result', methods=['GET', 'POST'])
def result():
  json_data = request.get_json(force=True)
  id = json_data['id']
  name = json_data['name']
  return json.dumps({'status':'OK', 'result-id':id, 'result-name':name});
    
if __name__ == "__main__":
  app.run(debug=True, host="localhost", port=8000)

demo-json.html

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
ID: <input type="text" size="30" name="id" id="inputId">
Name: <input type="text" size="30" name="name" id="inputName">
<button id="button-json">Click Me</button>
</form>
<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(){
  console.log("[Enter]");
  
  var idValue = $('#inputId').val();
  var nameValue = $('#inputName').val();
  console.log("idValue = " + idValue);
  console.log("nameValue = " + nameValue);
  
  var inputData = {
    'id': idValue,
    'name': nameValue
  };
  $.ajax({
    url: 'http://localhost:8000/result',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(inputData)
  })
  // Ajaxリクエストが成功した時発動
  .done( (data) => {
      $('#result').append(JSON.stringify(data));
      console.log(JSON.stringify(data));
  })
  // Ajaxリクエストが失敗した時発動
  .fail( (data) => {
      $('#result').append(JSON.stringify(data));
      console.log(JSON.stringify(data));
  });
});
</script>
</body>
</html>

■ 実行コマンド

python restapi-flask.py

動作確認

 * 以下のサイトをブラウザでアクセスする
  => ID, Nameに値(例「ID001」「Mike」)を入力し、ボタン押下。
  => 「Result」に「{"status":"OK","result-id":"ID001","result-name":"Mike"}」と表示されたらOK
[[http://localhost:8000]]


関連記事

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

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

Webフレームワーク 「Flask」 ~ REST API編 [2] ~

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