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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
详解Vue router路由
Nov 20 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python实现静态服务器
2019/09/05 Python
python如何将两个txt文件内容合并
2019/10/18 Python
tornado+celery的简单使用详解
2019/12/21 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
python主要用于哪些方向
2020/07/05 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
最热门的自我评价
2013/12/30 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
公司门卫管理制度
2014/02/01 职场文书
优秀广告词大全
2014/03/19 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书