实现Vue和Flask通信的示例分析

这篇文章给大家分享的是有关实现Vue和Flask通信的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

安装axios和实现通信

这里我们通过axios来连接Vue前端和Flask后端，使用AJAX请求进行通信。使用如下命令安装

npm install axios

axios的使用格式:

import axios from 'axios';
  export default {
    data: function () {
      return {
        serverResponse: 'res_test'
      };
    },
    methods: {
      getData() {
        // 设置对应python的接口，这里使用的是localhost:5000
        const path = 'http://127.0.0.1:5000/getMsg';
        // 这里要使用 res =>表示返回的数据
        axios.get(path).then(res => {
          // 这里服务器返回response为一个json对象
          // 通过.data来访返回的数据，然后在通过.变量名进行访问
          // 可以直接通过response.data取得key-value
          var msg = res.data.msg;
          this.serverResponse = msg; // 因为不能直接使用this作为指针，因此在这之前将this赋给了then指针
          alter('Success' + response.status + ',' + response.data + ',' + msg); // 成功后显示提示
        }).catch(error => {
          console.error(error);
        });
      }
    },
  }

代码及演示

前端代码

对./components/HelloWorld.vue文件进行改写。代码如下:

<!-- html部分 -->
<template>
  <div>
    <span>{{ serverResponse }}</span>
    <!--这里使用{{}}来引用JavaScript中赋给this的值-->
    <button @click="getData">get data</button>
  </div>
</template>
<!-- js部分 -->
<script>
  import axios from 'axios';
  export default {
    data: function () {
      return {
        serverResponse: 'res_test'
      };
    },
    methods: {
      getData() {
        // 设置对应python的接口，这里使用的是localhost:5000
        const path = 'http://127.0.0.1:5000/getMsg';
        axios.get(path).then(res => {
          // 这里服务器返回response为一个json对象
          // 通过.data来访返回的数据，然后在通过.变量名进行访问
          // 可以直接通过response.data取得key-value
          var msg = res.data.msg;
          this.serverResponse = msg; // 因为不能直接使用this作为指针，因此在这之前将this赋给了then指针
          alter('Success' + response.status + ',' + response.data + ',' + msg); // 成功后显示提示
        }).catch(error => {
          console.error(error);
        });
      }
    },
  }
</script>
<!-- css部分 -->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h2,
  h3 {
    font-weight: normal;
  }

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

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

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

这里主要实现了通过单击按钮来和服务器端进行交互获得数据并传回前端，将得到的数据重新来对前端进行渲染。

得到如上页面之后，我们单击get date按钮，就会像后端发送GET请求，后端服务器监听到请求之后就会返回对应的数据。

客户端代码

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!'

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


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

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

感谢各位的阅读！关于“实现Vue和Flask通信的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！