Implementation of communication between Vue and Flask

npm install axios

import axios from 'axios';
  export default {
    data: function () {
      return {
        serverResponse: 'res_test'
      };
    },
    methods: {
      getData() {
        // Set the corresponding python interface, here we use localhost:5000
        const path = 'http://127.0.0.1:5000/getMsg';
        // Here we need to use res => to represent the returned data axios.get(path).then(res => {
          // Here the server returns a response as a json object // Access the returned data through .data, and then access it through .variable name // You can directly get the key-value through response.data
          var msg = res.data.msg;
          this.serverResponse = msg; // Because this cannot be used directly as a pointer, this is assigned to the then pointer before alter('Success' + response.status + ',' + response.data + ',' + msg); // Display prompt after success }).catch(error => {
          console.error(error);
        });
      }
    },
  }

<!-- html part -->
<template>
  <div>
    <span>{{ serverResponse }}</span>
    <!--{{}} is used here to reference the value assigned to this in JavaScript-->
    <button @click="getData">get data</button>
  </div>
</template>
<!-- js part -->
<script>
  import axios from 'axios';
  export default {
    data: function () {
      return {
        serverResponse: 'res_test'
      };
    },
    methods: {
      getData() {
        // Set the corresponding python interface, here we use localhost:5000
        const path = 'http://127.0.0.1:5000/getMsg';
        axios.get(path).then(res => {
          // Here the server returns a response as a json object // Access the returned data through .data, and then access it through .variable name // You can directly get the key-value through response.data
          var msg = res.data.msg;
          this.serverResponse = msg; // Because this cannot be used directly as a pointer, this is assigned to the then pointer before alter('Success' + response.status + ',' + response.data + ',' + msg); // Display prompt after success }).catch(error => {
          console.error(error);
        });
      }
    },
  }
</script>
<!-- css part -->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

from flask import Flask
from flask import jsonify
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, resources={r"/getMsg": {"origins": "*"}})


@app.route('/')
def hello_world():
    return 'test!'

# Listen for 127.0.0.1:5000/getMsg requests @app.route('/getMsg', methods=['GET', 'POST'])
def home():
    response = {
        'msg': 'Hello, Python!'
    }
    return response


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