VueとFlask間の通信の実装

npm インストール axios

'axios' から axios をインポートします。
  エクスポートデフォルト{
    データ: 関数 () {
      戻る {
        サーバーレスポンス: 'res_test'
      };
    },
    メソッド: {
      取得データ() {
        // 対応する Python インターフェースを設定します。ここでは localhost:5000 を使用します。
        定数パス = 'http://127.0.0.1:5000/getMsg';
        // ここでは、返されたデータを表すために res => を使用する必要があります axios.get(path).then(res => {
          // ここでサーバーはレスポンスを json オブジェクトとして返します // 返されたデータに .data 経由でアクセスし、次に .variable name 経由でアクセスします // response.data 経由でキー値を直接取得できます
          var msg = res.data.msg;
          this.serverResponse = msg; // これを直接ポインターとして使用できないため、then ポインターに代入してから alter('Success' + response.status + ',' + response.data + ',' + msg); // 成功後にプロンプ​​トを表示します }).catch(error => {
          コンソールエラー(エラー);
        });
      }
    },
  }

<!-- html 部分 -->
<テンプレート>
  <div>
    <span>{{ serverResponse }}</span>
    <!--{{}} は、JavaScript でこれに割り当てられた値を参照するために使用されます-->
    <button @click="getData">データを取得</button>
  </div>
</テンプレート>
<!-- js 部分 -->
<スクリプト>
  'axios' から axios をインポートします。
  エクスポートデフォルト{
    データ: 関数 () {
      戻る {
        サーバーレスポンス: 'res_test'
      };
    },
    メソッド: {
      取得データ() {
        // 対応する Python インターフェースを設定します。ここでは localhost:5000 を使用します。
        定数パス = 'http://127.0.0.1:5000/getMsg';
        axios.get(path).then(res => {
          // ここでサーバーはレスポンスを json オブジェクトとして返します // 返されたデータに .data 経由でアクセスし、次に .variable name 経由でアクセスします // response.data 経由でキー値を直接取得できます
          var msg = res.data.msg;
          this.serverResponse = msg; // これを直接ポインターとして使用できないため、then ポインターに代入してから alter('Success' + response.status + ',' + response.data + ',' + msg); // 成功後にプロンプ​​トを表示します }).catch(error => {
          コンソールエラー(エラー);
        });
      }
    },
  }
</スクリプト>
<!-- css 部分 -->
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
  h1,
  h2 {
    フォントの太さ: 標準;
  }

  ul {
    リストスタイルタイプ: なし;
    パディング: 0;
  }

  li {
    表示: インラインブロック;
    マージン: 0 10px;
  }

  {
    色: #42b983;
  }
</スタイル>

FlaskからFlaskをインポート
Flaskからjsonifyをインポート
flask_corsからCORSをインポートする

アプリ = Flask(__name__)
cors = CORS(アプリ、リソース={r"/getMsg": {"origins": "*"}})


@app.route('/')
hello_world() を定義します:
    'test!' を返します。

# 127.0.0.1:5000/getMsg リクエストをリッスンします @app.route('/getMsg', methods=['GET', 'POST'])
デフホーム():
    レスポンス = {
        'msg': 'こんにちは、Python!'
    }
    応答を返す


__name__ == '__main__' の場合:
    アプリの実行()