vue从flask获取数据并显示

记录一个前后端分离遇到的问题,即vue前端从flask后端获取数据。具体描述如下:flask只负责连接数据库并获取数据库的数据,并返回给前端vue;vue则需要获取后端返回的数据并显示。

方法如下,分别用一个vue组件和一个flask启动文件展示。

首先是flask启动文件app.py

python 复制代码
from flask import Flask
from flask_cors import CORS  # 跨域请求模块

app = Flask(__name__)
CORS(app)  # 处理跨域请求


@app.route("/", methods=["GET"])
def get_info():
    return "我爱你ლ(′◉❥◉`ლ)"


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

这里简化了flask连接数据库的部分,假设已经取得了数据这里用"我爱你ლ(′◉❥◉`ლ)"字符串表示后端返回的数据库数据。需要注意的是需要pip install flask_cors这个包用于处理跨域交流的问题,也很简单:

CORS(app)

一行代码就搞定了。

然后看一下vue组件,coach.vue

html 复制代码
<template>
  <div>
    <div>GET返回数据:{{ items }}</div>
  </div>

  <div>
    <button @click="initData()">Get获取数据</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      items: [],
      name: "",
      age: "",
      post: []
    }
  },

  methods: {
    initData() {
      axios.get('http://127.0.0.1:5000/')
          .then(response => {
            this.items = response.data
          })
          .catch(error => {
            console.error(error)
          })
    },
    mounted() {
      this.initData();
    },
  }
}
</script>

<style scoped>

</style>

这里我们点击按钮后利用axios(也需要npm install axios进行安装)就可以获取从后端返回的数据。

需要注意的是,后端flask与前端vue需要同时开启服务器

效果图如下:

点击按钮后:

相关推荐
带娃的IT创业者17 小时前
《Python Web部署应知应会》No3:Flask网站的性能优化和实时监测深度实战
前端·python·flask
Json____17 小时前
使用node-Express框架写一个学校宿舍管理系统练习项目-前后端分离
node·express·前后端分离·宿舍管理
0_0梅伊阁诗人19 小时前
Flask
开发语言·数据库·python·flask
吃饭最爱1 天前
⽹络请求Axios的概念和作用
vue
程序员的世界你不懂1 天前
【Flask】实现一个前后端一体的项目-脚手架
后端·python·flask
魂尾ac1 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐2 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
安岁的笔记本2 天前
Flask/Django 生产部署:Gunicorn vs Nginx,Windows 与 Linux 实战指引
django·flask·gunicorn
Q_Q19632884752 天前
python+springboot大学生心理测评与分析系统 心理问卷测试 自动评分分析 可视化反馈系统
开发语言·spring boot·python·django·flask·node.js·php