【VUE + FLASK学习】FLASK接收前端VUE界面传递的值

之前采用原生JavaScript写了系统，但是随着页面的增加，代码冗余不断提升，为了方便以后维护，同时为了接下来求职，因此决定学习一下vue。

根据之前写的系统，进行梳理。

整改为vue系统有以下几个问题需要解决。

1、页面的搭建。

vue中组件可以重复使用，因此需要梳理本来页面中重复使用的部分。

哪些部分可以封装成组件、组件的哪些地方应该封装成参数。

2、原系统的功能该如何迁移。

3、值的传递

搜了不少博客，主要介绍的都是将flask中的值传递到前端页面中。

但是，往往我们需要通过这样一种手段：

前端点击某个操作，获取值，将值传递至flask中，进行相对应的操作，再返回至前端。

接下来便开始介绍

首先——构建简单的前端界面

 Door.vue 文件

<template>
    <div>
        <input type="text" placeholder="Edit Me" ref="fmsg">
        <button @click="PostEm()">点我传信息给flask</button>
        <h1>{{msg2}}</h1>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "Door",
        data(){
            return{
                msg2:''
            }
        },
        methods:{
            PostEm(){
                const FPath = 'http://localhost:5000/vueflask'
                axios.post(FPath,this.$refs.fmsg.value)
                    .then((res) => {this.msg2 = res.data})
                    .catch((err) => {console.log(err)})
            }
        },
        created() {
            this.PostEm()
        }
    }
</script>

在Script中，通过axios.post(path,value)将值传递给flask中的路由地址,res为接收返回的结果

参数path为目标路由，value为传递的值

在app.py中

import json
from flask import Flask,jsonify,request
from flask_cors import CORS

DEBUG = True

app = Flask(__name__)
app.config.from_object(__name__)

CORS(app,resources={r'/*':{'origins':'*'}})

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/vueflask',methods=['POST','GET'])
def vueflask():
    if request.method == 'POST':
        # 获取vue中传递的值
        GetMSG = request.get_data(as_text=True)
        print(GetMSG)
        print(int(GetMSG) + 10)
        return jsonify(int(GetMSG) + 10)
    else:
        return 'defeat'


if __name__ == '__main__':
    app.run()

通过request.get_data（）获取axios.post（）传递的值

使用两个print（）分别测试结果“是否成功接收值”

step1：输入值，点击按钮

 step2：pycharm终端展示与前端展示

 

 总结：

将vue前端的值传递到flask中，使用axios中的post请求即可，在flask中通过request来获取值，通过return将值返回至前端axios中