vue应用转flutter(Vue和Flask通信的实现)
类别:编程学习 浏览量:1362
时间:2022-03-31 20:28:29 vue应用转flutter
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> <li> <span>{{ serverResponse }}</span> <!--这里使用{{}}来引用JavaScript中赋给this的值--> <button @click="getData">get data</button> </li> </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>
这里主要实现了通过单击按钮来和服务器端进行交互获得数据并传回前端,将得到的数据重新来对前端进行渲染。
得到如上页面之后,我们单击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和Flask通信的实现的文章就介绍到这了,更多相关Vue和Flask通信内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue渲染数据的过程(Vue前端高效开发之列表渲染指令)
- vue-router的安装(详解Vue-Router的安装与使用)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- vue 设置头部可以左右滑动(vue实现左右滑动效果实例代码)
- vue动态列表布局(vue项目实现左滑删除功能完整代码)
- vue验证码怎么用(vue验证码组件使用方法详解)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- vue 中后台管理系统(Vue实现学生管理功能)
- vue用手动上传图片(vue上传图片文件的多种实现方法)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- 花不语 下 如果重来一次的话,你还会这么选择吗(花不语下如果重来一次的话)
- 城市记忆之上海 最难忘的是老弄堂里的市井味道(城市记忆之上海)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
热门推荐
- nginx部署配置详解(Nginx服务器基本的模块配置和使用全攻略)
- python类定义(浅谈python新式类和旧式类区别)
- linux开启ssh服务(Linux ssh服务器配置代码实例)
- nginxdocker界面(Docker部署nginx实现过程图文详解)
- python中的变量与变量类型(Python变量类型知识点总结)
- javascript文件解压(JavaScript 如何在线解压 ZIP 文件)
- html5长按动画效果(HTML5实现移动端弹幕动画效果)
- docker-compose绑定端口失效(docker-compose创建网桥,添加子网,删除网卡的实现)
- 微信公众号文章 爬虫(python抓取搜狗微信公众号文章)
- python设计一个聊天机器人(手把手教你使用Python创建微信机器人)