基础准备
flask获取前端提交数据的方式
导入request包，
from flask import Flask,request,
request.form.get(‘price’) 获取表单的数据 或者使用 request.form[‘price’]
获取get请求提交的参数方式
request.args.get('name')
获取post 请求提交参数的方式
request.get_json()['name']
flask中设置调试为true，保存后就会重启服务器，方便调试。
if __name__ == '__main__':
app.run(debug='True') 在此设置
vue中十分重视语法对齐，如果template标签中的元素没有对齐，则会出现错误
error Mixed spaces and tabs no-mixed-spaces-and-tabs
当元素对齐后，该错误就会消失。
input框中获取数据有两种方式，第一种使用ref关键字，第二种v-model
详解请看 https://www.cnblogs.com/zbl3033/p/13394855.html
flask中的跨域请求，可以使用全局跨域请求路由，或者用于单个路由。
详情参考： https://www.jianshu.com/p/66f34be9cf81
一、安装axios：
首先安装axios，axios为通过api接口的方式访问flask，官方介绍地址：https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html 安装命令如下：
npm install –save axios
然后在 main.js中引入axios，import axios from “axios” ，然后绑定原形，全局注册
Vue.prototype.$axios = axios，以后在使用的时候，可以直接使用 $axios 关键字直接发起get或者post请求。
更多的axios 使用方式请访问 https://www.cnblogs.com/hongdoudou/p/12677440.html
二、使用axios访问flask项目中的接口，通过get或者post方法
单纯获取flask返回的数据
1、vue文件中的设置
定义一个按钮，用来点击后使用弹窗显示flask返回的数据
点击我
然后再script标签中定义 方法postd，获取flask返回的数据，访问方式为post
//这里使用了ES6的语法 ，定义访问的接口地址
methods:{
postd:function() {
this.$axios.post('http://127.0.0.1:5000/login').then(res=>{ //这里使用了ES6的语法
console.log(res.data); //res作为返回数据名，data中包含返回的数据
alert(res.data['name']); //返回的是字典类型数据，name作为数据名，是flask中返回的名字
});
}
}
//不使用了ES6的语法的写法
methods:{
postd:function() {
this.$axios.post('http://127.0.0.1:5000/login').then((function (res) {
//不使用了ES6的语法的写法
console.log(response); //res作为返回数据名，可以随意修改
})
.catch(function (error) {
console.log(error);
});}
2、flask中的设置
首先需要解决flask中的 跨域访问，在flask环境中安装 flask_cors包 ，安装命令如下
pip install flask-cors
然后使用方法为，就可以解决跨域访问了。
from flask_cors import *
app = Flask(__name__)
CORS(app, supports_credentials=True)
如果不安装则会出现错误，无法跨域请求，错误提示如下：
Failed to load http://127.0.0.1:5000/login: No ‘Access-Control-Allow-Origin’
由于需要返回的是json格式数据，需要在flask中引入json包，在返回的时候使用。
from flask import Flask,request,jsonify 导入json包
定义路由，vue中的访问地址要和这里保持一致，设置访问方式
@app.route('/login', methods=['POST', 'GET'])
def returns():
try:
if request.method=='POST': 判断访问方式，
datas={'name':'张三','age':18} 构造返回数据
return jsonify(datas)
然后启动flask项目和vue项目，如果点击vue项目的按钮，flask项目出现状态码200，则说明flask项目没有问题
在vue项目中点击按钮，弹出flask返回的数据 ，说明vue项目正常。
发送给flask项目数据并输出flask项目返回的数据
1、设置vue文件
定义一个输入框用于获取数据，定义一个按钮，用来提交数据，vue中十分重视代码对齐，确定代码之间的格式正确无误。input框的格式特殊，需要使用v-mode语法定义，然后才可以获取输入的内容，获取输入的内容在Template标签中可以使用{{ message }} ，在script标签中使用 this.message。可以获取输入的值。
提交
定义点击方法，最好添加
方法一：
methods:{
postdd:function() { ES6语法 message为要向flask发送的数据
this.$axios.get('http://127.0.0.1:5000/login',{params:{"name":this.message}}).then(red=>{
console.log(this.message);
console.log(red.data); red为返回的值
alert(this.message); 显示返回的值
});
}
}
方法二：
或者声明发送值的参数和简写的参数传递
var _this=this; //必须重新声明this关键字，因为进入方法内部，则是局域变量，无法指代全局
this.$axios.post(_this.base_url+'cell/findByCellName.action', {
"cell_sale_name": 'ZZ'
}, { //传递所选择的参数
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).then(res => {//这里使用了ES6的语法
console.log(res.data); //res作为返回数据名，data中包含返回的数据
_this.options1=res.data[0];
_this.options2=res.data[1];
}).catch(function(error){
alert('创建数据获取失败，请刷新后重试！');
});
2、设置flask项目
通过get方式访问，
@app.route('/login', methods=['POST', 'GET'])
def returns():
if request.method=='GET':
val=request.args.get('name') get访问方式获取提交的数据，参数名字为name
print(val)
data={'msg': 'ok'}
return jsonify(data)
flask运行后和vue运行后，调出html调试，可以查看提交的参数
Original: https://blog.csdn.net/u014535666/article/details/118057590
Author: 水月灯花
Title: vue.js和flask项目之间的数据传递
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/746417/
转载文章受原作者版权保护。转载请注明原作者出处！