基础准备

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返回的数据

<button v-on:click="postd()">点击我</button> 

然后再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。可以获取输入的值。

<input type= 'text' v-model="message" placeholder="edit me">
<button v-on:click="postdd()">提交</button>

 定义点击方法，最好添加

方法一：  
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调试，可以查看提交的参数