vue+flask,flask和vue.js
最近，我做了一个新项目。前端采用目前流行的前端框架。对于后端，本项目选择了简单易用的轻量级python后台框架：Flask。有兴趣的可以了解一下。
安装axios和实现通信
这里我们使用axios连接Vue前端和Flask后端，使用AJAX请求进行通信。使用以下命令安装
npm安装axios
axios的使用格式：
从“axios”导入axios；
导出默认值{
数据：函数(){
返回{
服务器响应：“res_test”
};
},
方法：{
getData() {
//设置python对应的接口，其中使用localhost:5000。
const path= http://127 . 0 . 0 . 1:5000/getMsg ；
//这里用res=来表示返回的数据。
axios.get(路径)。然后(res={
//在这里，服务器将响应作为json对象返回
//通过访问返回的数据。数据，然后通过。变量名。
//可以通过response.data直接获取键值
var msg=RES . data . msg；
this.serverResponse=msg//因为这不能直接作为指针使用，所以在此之前将其赋给then指针。
alter(Success response.status ， response.data ， msg)；//成功后显示提示
}).catch(错误={
console.error(错误)；
});
}
},
}
代码及演示
前端代码
重写。/components/HelloWorld.vue文件。代码如下：
！- html部分-
模板
差异
span{{服务器响应}}/span
！-此处{{}}用于引用在JavaScript中分配给此的值-
按钮@click=getData 获取数据/按钮
/div
/模板
！-js部分-
脚本
从“axios”导入axios；
导出默认值{
数据：函数(){
返回{
服务器响应：“res_test”
};
},
方法：{
getData() {
//设置python对应的接口，其中使用localhost:5000。
const path= http://127 . 0 . 0 . 1:5000/getMsg ；
axios.get(路径)。然后(res={
//在这里，服务器将响应作为json对象返回
//通过访问返回的数据。数据，然后通过。变量名。
//可以通过response.data直接获取键值
var msg=RES . data . msg；
this.serverResponse=msg//因为这不能直接作为指针使用，所以在此之前将其赋给then指针。
alter(Success response.status ， response.data ， msg)；//成功后显示提示
}).catch(错误={
console.error(错误)；
});
}
},
}
/脚本
！- css部分-
！-添加“scoped”属性以将CSS仅限制到此组件-
样式范围
h1，
h2 {
字体粗细：正常；
}
ul {
list-style-type:无；
填充：0；
}
李{
显示：内嵌-块；
边距：0 10px
}
一个{
颜色：# 42b983
}
/风格
这里主要实现的是通过点击按钮与服务器交互获取数据并发送回前端，而获取的数据会重新渲染到前端。
得到上面的页面后，我们点击get date按钮，会像后端一样发送get请求，后端服务器监听请求后会返回相应的数据。
客户端代码
从烧瓶进口烧瓶
从烧瓶导入jsonify
从cors进口
app=Flask(__name__)
cors=CORS(app，resources={ r /getMsg :{ origins : * })
@app.route(/)
def hello_world():
返回“测试！”
#侦听127.0.0.1:5000/getMsg请求
@app.route(/getMsg ，methods=[GET ， POST])
def home():
响应={
msg :你好，Python！
}
返回响应
if __name__==__main__ :
app.run()
关于Vue和Flask之间通信的实现的这篇文章到此为止。有关Vue和Flask之间通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。