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-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vuex的使用步骤
Jan 06 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
关于vue-router-link选择样式设置
Apr 30 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php显示时间常用方法小结
2015/06/05 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
发布你的Python模块详解
2016/09/15 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Python 爬虫的原理
2020/07/30 Python
python实现代码审查自动回复消息
2021/02/01 Python
品恩科技软件测试面试题
2014/10/26 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
幼儿教师考核制度
2014/01/25 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
会计求职自荐信
2014/06/20 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
检讨书模板
2015/01/29 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
初婚初育证明范本
2015/06/18 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书