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编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
短波的认识
2021/03/01 无线电
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
深入理解Promise.all
2018/08/08 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python实现红包裂变算法
2016/02/16 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python deque模块简单使用代码实例
2020/03/12 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
学前教育学生自荐信范文
2013/12/31 职场文书
员工考核管理制度
2014/02/02 职场文书
小学英语教学反思案例
2014/02/04 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
高考学习决心书
2015/02/04 职场文书
质检员工作总结2015
2015/04/25 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript