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