APIをつかってみる

2023年10月27日 12:39

フロントエンドをAPIを通して、データをもらってくるという方法を学ぶ。
ゲット方式：
例えば、あるサイトをみているときに、そのURLの情報を送って！というリクエストをする方法。データを要請するときに使う。ひっぱってくるイメージかな。
例）天気のデータを見る、とか。
ポスト方式：
という方法があるらしい。コンピュータ同士がやりとりする方式。
データを作る時、削除するとき、会員登録をするときにつかう。

htmlのファイルはフロントエンドファイル
Pythonのデータはバックエンドのファイル

ふむふむ。

from flask import Flask,render_template,request,jsonify
app = Flask(__name__)

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

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': 'これはGETリクエスト'})

”ゲットメソッドというものを使ってデータを貰う。このときの窓口が、「/test」。「title_give」というものは、このデータがあればタイトルレシーブという変数の中に入れる、という意味。それで、print（title.receive）で確認してみる、、、という意味。”
フロントエンドにデータを送る必要があるが、jsonifyのかっこの中身だそう。

えーわかんねぇす。
とりあえず、htmlのほうにも、コードを打つ。

<script> function hey(){ fetch("/test").then(res => res.json()).then(data => { console.log(data) }) } </script>

/testというURLに要請を送って、もらってきたデータをコンソールタブに表示させる、の意味。

それで、サイトを見てみると…なるほど、コンソールの方に表示されてる。

ポスト方式について

from flask import Flask,render_template,request,jsonify
app = Flask(__name__)

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

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': 'これはPOSTリクエスト'})

if __name__ == '__main__':
   app.run('0.0.0.0',port=5000,debug=True)

”/testを通して、title_giveというデータをもらったら、まずはプリントした後に、リターンをつかって、htmlファイルにデータを送る、
というコードになっている”らしいです。はい。

次にhtmlにfetchコードを貼り付ける。

    <script>
        function hey(){
            let formData = new FormData();
formData.append("title_give", "ブラックパンサー");

fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
    console.log(data)
})
        }
    </script>

ゲットは、あるデータをみるだけ、要請するだけだけど、ポストはデータを変更したりするから、フロントエンドでデータを指定する必要がある、ってことらしい。FromDataがそうらしい。

このFromDataというところにデータをいれて、/testを通して送る。
バックエンドのコードを見ると、タイトルギブでもらったデータをプリントする、というものがあるので、htmlで指定したデータが正しく表示されるかも要確認。

なんかブラックパンサーが表示された。

127.0.0.1 - - [27/Oct/2023 12:26:16] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [27/Oct/2023 12:26:18] "POST /test HTTP/1.1" 200 -
ブラックパンサー
192.168.10.108 - - [27/Oct/2023 12:27:09] "GET / HTTP/1.1" 200 -
192.168.10.108 - - [27/Oct/2023 12:27:09] "GET /favicon.ico HTTP/1.1" 404 -

コンソールでも、できてるっぽい。

でも難しいなー。。。あー。難しい。
理屈はわかってきたけど。

おさらい

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>

    <script>
        function hey(){
            let formData = new FormData();
formData.append("title_give", "ブラックパンサー");

fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
    console.log(data)
})
        }
    </script>
</head>
<body>
<h1>初のWebページ</h1>
    <button onclick="hey()">私はボタン!</button>
</body>
</html>

まず、フロントエンドのhtmlコードを見る。
heyという関数。ボタンを押したらこの関数が作動。これはわかる。
ボタンをおしたことで、”ブラックパンサー”というデータが生まれる。
このブラックパンサーは、/testという窓口を通してバックエンドに送られる。

from flask import Flask,render_template,request,jsonify
app = Flask(__name__)

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

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': 'これはPOSTリクエスト'})

if __name__ == '__main__':
   app.run('0.0.0.0',port=5000,debug=True)

バックエンドでは、title_receiveという変数がふくまれているので、それをプリントする。つぎにフロントエンドに表示させる文字’これはPOSTリクエスト’を送り返す。

そして、フロントデータに送られたデータはfetchをとおして、データという中に含まれる、ということらしい。

    <script>
        function hey(){
            let formData = new FormData();
formData.append("title_give", "ブラックパンサー");

fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
    console.log(data)
})
        }
    </script>

難しいけど、イメージはわかった・・・

ポスト形式は複雑だな。あたりまえか。ゲットは引き出すだけだけど。
ポストは書き換えとかするもんね。そうだよね。

この記事が気に入ったらサポートをしてみませんか？