Vue和Flask通信的实现


Posted in Vue.js onMay 19, 2021

安装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>
  h1,
  h2 {
    font-weight: normal;
  }

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

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

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

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

Vue和Flask通信的实现

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

Vue和Flask通信的实现

客户端代码

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和Flask通信的实现的文章就介绍到这了,更多相关Vue和Flask通信内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
Vue Element UI自定义描述列表组件
使用这 6个Vue加载动画库来减少我们网站的跳出率
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
详解vue中v-for的key唯一性
解读Vue组件注册方式
May 15 #Vue.js
如何理解Vue简单状态管理之store模式
May 15 #Vue.js
Vue如何实现组件间通信
May 15 #Vue.js
You might like
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
vue分页器组件编写方法详解
2019/06/28 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python中的变量和作用域详解
2016/07/13 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
python实现连连看游戏
2020/02/14 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
校三好学生主要事迹
2014/01/11 职场文书
毕业设计说明书
2014/05/07 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
早会开场白台词大全
2015/06/01 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js