之前采用原生JavaScript写了系统，但是随着页面的增加，代码冗余不断提升，为了方便以后维护，同时为了接下来求职，因此决定学习一下vue。
根据之前写的系统，进行梳理。
整改为vue系统有以下几个问题需要解决。
1、页面的搭建。
vue中组件可以重复使用，因此需要梳理本来页面中重复使用的部分。
哪些部分可以封装成组件、组件的哪些地方应该封装成参数。
2、原系统的功能该如何迁移。
3、值的传递
搜了不少博客，主要介绍的都是将flask中的值传递到前端页面中。
但是，往往我们需要通过这样一种手段：
前端点击某个操作，获取值，将值传递至flask中，进行相对应的操作，再返回至前端。接下来便开始介绍
首先——构建简单的前端界面
Door.vue 文件
{{msg2}}
在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中
