Implementierung der Kommunikation zwischen Vue und Flask

npm installiere Axios

importiere Axios von „Axios“;
  Standard exportieren {
    Daten: Funktion () {
      zurückkehren {
        Serverantwort: „res_test“
      };
    },
    Methoden: {
      getData() {
        // Stellen Sie die entsprechende Python-Schnittstelle ein, hier verwenden wir localhost:5000
        const Pfad = "http://127.0.0.1:5000/getMsg";
        // Hier müssen wir res => verwenden, um die zurückgegebenen Daten darzustellen axios.get(path).then(res => {
          // Hier gibt der Server eine Antwort als JSON-Objekt zurück // Greifen Sie über .data auf die zurückgegebenen Daten zu und greifen Sie dann über .variable name darauf zu // Sie können den Schlüssel-Wert direkt über response.data abrufen
          var msg = res.data.msg;
          this.serverResponse = msg; // Da dies nicht direkt als Zeiger verwendet werden kann, wird dies dem then-Zeiger zugewiesen, bevor alter('Success' + response.status + ',' + response.data + ',' + msg); // Eingabeaufforderung nach Erfolg anzeigen }).catch(error => {
          konsole.fehler(fehler);
        });
      }
    },
  }

<!-- html-Teil -->
<Vorlage>
  <div>
    <span>{{ Serverantwort }}</span>
    <!--{{}} wird hier verwendet, um auf den in JavaScript zugewiesenen Wert zu verweisen-->
    <button @click="getData">Daten abrufen</button>
  </div>
</Vorlage>
<!-- js-Teil -->
<Skript>
  importiere Axios von „Axios“;
  Standard exportieren {
    Daten: Funktion () {
      zurückkehren {
        Serverantwort: „res_test“
      };
    },
    Methoden: {
      getData() {
        // Stellen Sie die entsprechende Python-Schnittstelle ein, hier verwenden wir localhost:5000
        const Pfad = "http://127.0.0.1:5000/getMsg";
        axios.get(Pfad).then(res => {
          // Hier gibt der Server eine Antwort als JSON-Objekt zurück // Greifen Sie über .data auf die zurückgegebenen Daten zu und greifen Sie dann über .variable name darauf zu // Sie können den Schlüssel-Wert direkt über response.data abrufen
          var msg = res.data.msg;
          this.serverResponse = msg; // Da dies nicht direkt als Zeiger verwendet werden kann, wird dies dem then-Zeiger zugewiesen, bevor alter('Success' + response.status + ',' + response.data + ',' + msg); // Eingabeaufforderung nach Erfolg anzeigen }).catch(error => {
          konsole.fehler(fehler);
        });
      }
    },
  }
</Skript>
<!-- CSS-Teil -->
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
  h1,
  h2 {
    Schriftstärke: normal;
  }

  ul {
    Listenstiltyp: keiner;
    Polsterung: 0;
  }

  li {
    Anzeige: Inline-Block;
    Rand: 0 10px;
  }

  A {
    Farbe: #42b983;
  }
</Stil>

aus Flasche importieren Flasche
aus Flask importieren Sie jsonify
von flask_cors importiere CORS

App = Flask(__name__)
cors = CORS(Anwendung, Ressourcen={r"/getMsg": {"Ursprünge": "*"}})


@app.route('/')
def hallo_welt():
    gib „Test!“ zurück

# Auf 127.0.0.1:5000/getMsg-Anfragen warten @app.route('/getMsg', methods=['GET', 'POST'])
def home():
    Antwort = {
        'msg': 'Hallo, Python!'
    }
    Antwort zurückgeben


wenn __name__ == '__main__':
    app.run()