【Python】Flask ~ REST API編 [1] ~

■ はじめに

Flask(フラスク)を使って、簡易的なRest APIを作成する。

【1】環境構築

前提条件

* 実行環境を以下の関連記事を参考に構築する

インストール

# 以下をコマンドして、インストールする

python -m pip install --upgrade pip
pip install flask-restful

【2】サンプル

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>

【3】実行コマンド

python restapi-flask.py

動作確認

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

http://localhost:8000

参考文献

https://stackoverflow.com/questions/30491841/python-flask-restful-post-not-taking-json-arguments

関連記事

Python で 簡単なWebアプリ ~ formデータを受け取る ~
https://dk521123.hatenablog.com/entry/2018/09/10/164500
Flask ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2018/09/11/021900