之前采用原生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中
