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需要同时开启服务器

效果图如下:

点击按钮后:

相关推荐
百锦再5 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
飞翔的佩奇7 小时前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
喜欢吃豆1 天前
目前最火的agent方向-A2A快速实战构建(二): AutoGen模型集成指南:从OpenAI到本地部署的全场景LLM解决方案
后端·python·深度学习·flask·大模型
亚力山大抵2 天前
实验六-使用PyMySQL数据存储的Flask登录系统-实验七-集成Flask-SocketIO的实时通信系统
后端·python·flask
百锦再2 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code2 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16882 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员3 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_3 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
何双新3 天前
第 1 课:Flask 简介与环境配置(Markdown 教案)
后端·python·flask