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

效果图如下:

点击按钮后:

相关推荐
Linux运维技术栈6 小时前
企业级配置:Azure 邮件与 Cloudflare 域名解析的安全验证落地详解
运维·安全·flask·azure·cloudflare
Skrrapper8 小时前
Flask 入门到实战(2):使用 SQLAlchemy 打造可持久化的数据层
后端·python·flask
梁辰兴9 小时前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
一斤代码16 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
sunbyte21 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
普宁彭于晏1 天前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
淮北4941 天前
最简单的实验室资产管理系统,使用Flask,mysql,html(四、知识补充)
mysql·flask·html
你喜欢喝可乐吗?1 天前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
魂兮归乡1 天前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
Q_Q5110082851 天前
python的保险业务管理与数据分析系统
开发语言·spring boot·python·django·flask·node.js·php