Python +フラスコPT 2 .反応の追加

最後のポストは、Python +フラスコアプリケーションを作成し、Herokuに配備することでした.このポストは、私たちは、同じPython +フラスコアプリケーションを取るし、それに反応フロントエンドを追加します.Python +フラスコバックエンドの最初のいくつかの未完成のタッチ.ローカルで実行するには、いくつかの変更を加える必要があります.
我々のアプリで.Py、我々はCors機能を追加するつもりです、そして、我々は我々の出力を単純なストリングからJSONオブジェクトに変えるつもりです.

from flask import Flask
from flask_cors import CORS #comment this on deployment

app = Flask(__name__)
CORS(app) #comment this on deployment

@app.route("/")
def hello_world():
    return {
      'resultStatus': 'SUCCESS',
      'message': "Hello, World!"
      }

フラスコサーバをテストすることができます.

// ♥  flask run
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

この時点で多くのエラーが発生する可能性があります.Pythonのインストールやその他のモジュールを調整する必要があります.あなたが物事を終了したとき、あなたが上記で見るものはあなたのフラスコサービスが動いていることを確認します.
ブラウザから出力を見ると、JSONオブジェクトの出力が表示されます.これは、我々のバックエンドから反応フロントエンドを通して出力を表示する方法です.ブラウザでこのようになります.

{
  "message": "Hello, World!",
  "resultStatus": "SUCCESS"
}

今では反応フロントエンドを作成する時間です.別のリポジトリまたは既存のサブディレクトリだけを作成できます.それはすべて個人的な好みです.一旦あなたが「ルート」フォルダが何であるかについて決定するならば、あなたはそのディレクトリから「反応を起こしているアプリケーション」コマンドを使用します

npx create-react-app .

これは、そのルートディレクトリに新しい反応アプリを作成します.これには多少の時間がかかります.最後のメッセージを見てください.
インストールが成功すると、' appを見つけます.' src 'サブディレクトリのjs 'と以下の変更を行います.
(このうちのいくつかはhttps://towardsdatascience.com/build-deploy-a-react-flask-app-47a89a5d17d9チュートリアルから参照されています)

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios'

function App() {
  const [getMessage, setGetMessage] = useState({})
  useEffect(()=>{
    axios.get('http://localhost:5000').then(response => {
      console.log("SUCCESS", response)
      setGetMessage(response)
    }).catch(error => {
      console.log(error)
    })

  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>React + Flask Tutorial</p>
        <div>{getMessage.status === 200 ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>}</div>
      </header>
    </div>
  );
}

export default App;

“株式”アプリ.JSファイルにはすでにいくつかあります.追加するのは以下の通りです.

import React, { useEffect, useState } from 'react';
import axios from 'axios'

“UseeffectとUSENT”は“反応フック”と呼ばれ、Googleはそれらについて読むことができます.彼らは本質的に“状態”と他の反応機能を使用するクラスを書くことなく使用できる機能を追加します.「axios」は「レンダリング中」のasyncリクエストを可能にする反応のためのコンポーネントです.これは、情報を要求することができますし、他の電子源に情報を送信し、使用可能なオブジェクトにそれらの出力を回す.この場合、私たちはバックエンドサーバから「こんにちは、世界」出力を得ます.

  const [getMessage, setGetMessage] = useState({})
  useEffect(()=>{
    axios.get('http://localhost:5000').then(response => {
      console.log("SUCCESS", response)
      setGetMessage(response)
    }).catch(error => {
      console.log(error)
    })

  }, [])

“USENT”は私たちの“セッター/ゲッター”機能のペアを作成する予定です."getMessage "はAxiosリクエスト( axios . get )からの応答を受け取り、レスポンスを返します.

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>React + Flask Tutorial</p>
        <div>{getMessage.status === 200 ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>}</div>
      </header>
    </div>
  );
}

次に、反応サーバーを起動します.

npm start

反応アプリ“戻る”は、バックエンドサーバーからの応答に基づいて出力をレンダリングします.条件付き( 3 )ビューがあります.

        <div>{
          getMessage.status === 200 
          ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>
          }
       </div>

ここで応答が200のステータスコードを返すまで、反応コンポーネントは単語“読み込み”を示すだけです.

レスポンスが200のステータスコードを返すと、反応コンポーネントは“getmessage . data . message”を“getmessage”関数から返されます.レスポンスオブジェクトには"message "の"key "があります.

{
  "message": "Hello, World!",
  "resultStatus": "SUCCESS"
}

「メッセージ」の「値」は表示されます、この場合、「Hello、World!」!

「NPM」はNode Package Managerです、そして、Installはめったに衝突なしであるので、どんな「欠落している構成要素」誤りか他の非難警告をトラブルシューティングする準備ができています.Googleはあなたの友人であり、ノードは非常に複雑です.あなたは、ノードがどこに反応する仕事をするのに使用する30000の資源からのどこかを持っている「NodeRankモジュール」フォルダで終わります.インストールエラーが発生したときには、単に送信したコマンドを繰り返してください.他の回、それはより複雑です.エラーを厳密に読み、修正のために必要な手順については有益なリソースを見つけてください.グッドラック!