vue从flask获取数据并显示

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

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

首先是flask启动文件app.py

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

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

 效果图如下:

点击按钮后: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2807369.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

C++——基础语法(3):内联函数、auto关键字、基于范围的for循环、空指针nullptr

6. 内联函数 在函数前加入inline修饰即可将函数变为内联函数。所谓内联函数&#xff0c;就是在编译时C编译器会将函数体在调用内联函数的地方展开&#xff0c;从而省去了调用函数的栈帧开销&#xff0c;提高程序运行效率。 inline int Add(int a, int b) {return a b; } int …

Ansible user 模块 该模块主要是用来管理用户账号

目录 参数语法验证创建用户删除用户验证 删除用户 参数 comment  # 用户的描述信息 createhome  # 是否创建家目录 force  # 在使用stateabsent时, 行为与userdel –force一致. group  # 指定基本组 groups  # 指定附加组&#xff0c;如果指定为(groups)表示删除所有…

Camunda7.18流程引擎启动出现Table ‘camunda_platform_docker.ACT_GE_PROPERTY‘的解决方案

文章目录 1、问题描述2、原因分析3、解决方案3.1、方案一&#xff1a;降低mysql版本3.2、方案二&#xff1a;增加nullCatalogMeansCurrent参数&#xff08;推荐&#xff09; 4、总结 1、问题描述 需要在docker中&#xff0c;部署Camunda流程引擎。通过启动脚本camunda-platfor…

【C++】类和对象之拷贝构造函数篇

个人主页 &#xff1a; zxctscl 文章封面来自&#xff1a;艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. 传值传参和传引用传参3. 概念4. 特征 1. 前言 在前面学习了6个默认成员函数中的构造函数和析构函数 【C】构造函数和析构函数详解&#xff0c;接下来继续往后看拷…

Github 2024-02-21 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-02-21统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目8非开发语言项目1TypeScript项目1 gpt4free 语言模型集合改进计划 创建周期&#xff1a;300 天开…

<网络安全>《51 网络攻防专业课<第十四课 - 华为防火墙的使用(4)>

8 防火墙的防范技术&#xff08;3&#xff09; 8.1 IP spoofing攻击防范 攻击介绍 为了获得访问权&#xff0c;或隐藏入侵者的身份信息&#xff0c;入侵者生成带有伪造源地址的报文。 处理方法 检测每个接口流入的IP报文的源地址与目的地址&#xff0c;并对报文的源地址反查路…

【图论】【堆优化的单源路径】LCP 20. 快速公交

作者推荐 【广度优先搜索】【网格】【割点】【 推荐】1263. 推箱子 LCP 20. 快速公交 小扣打算去秋日市集&#xff0c;由于游客较多&#xff0c;小扣的移动速度受到了人流影响&#xff1a; 小扣从 x 号站点移动至 x 1 号站点需要花费的时间为 inc&#xff1b; 小扣从 x 号站…

计算机组成原理(14)----总线

目录 一.总线的物理实现 二.总线概述 三.总线的特性 四.总线的分类 &#xff08;1&#xff09;按数据传输格式分类 •串行总线 •并行总线 &#xff08;2&#xff09;按总线功能分类 •片内总线 •系统总线 系统总线的结构 •通信总线 &#xff08;3&#xff09;按…

从软硬件以及常见框架思考高并发设计

目录 文章简介 扩展方式 横向扩展 纵向扩展 站在软件的层面上看 站在硬件的层面上看 站在经典的单机服务框架上看 性能提升的思考方向 可用性提升的思考方向 扩展性提升的思考方向 文章简介 先从整体&#xff0c;体系认识&#xff0c;理解高并发的策略&#xff0c;方…

深入理解JS的执行上下文、词法作用域和闭包(上)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

ARM Cortex-X5 传言表现不佳,高功率浪涌和低多核分数影响即将推出的核心设计

ARM 的新 Cortex-X5 设计似乎遇到了问题&#xff0c;有新的传言称&#xff0c;超级核心在提高时钟速度时会经历严重的高功耗&#xff0c;并且当最大功率限制降低时&#xff0c;多核性能会下降。虽然这对高通来说可能不是问题&#xff0c;因为据说其 Snapdragon 8 Gen 4 采用定制…

华为HCIP Datacom H12-831 卷24

多选题 1、如图所示&#xff0c;某园区部署OSPF实现网络互通&#xff0c;其中Area1部署为NSSA区域。某工程师为了实现R1访问R4的环回口地址&#xff0c;在R4的OSPF进程中引入直连路由。以下关于该场景的描述,错误的有哪些项? A、在R4引入直连路由后&#xff0c;R1通过转换后的…

服务区智慧公厕

在如今追求智能化、便捷化的社会背景下&#xff0c;高速公路服务区智慧公厕正成为人们关注的焦点。作为高速公路上的必要设施&#xff0c;公厕的提升已经不再局限于简单的清洁卫生&#xff0c;而是更多地涉及到智能化、舒适度和用户体验。本文以智慧公厕源头厂家广州中期科技有…

华为---RSTP(三)---P/A机制及RSTP的生成树形成过程

目录 1. P/A机制简介 1.1 P/A机制的作用 1.2 P/A协商的前提条件 1.3 RSTP选举思路 2. P/A协商过程 3. 举例说明RSTP的生成树形成过程 3.1 示例环境要求 3.2 RSTP的生成树形成过程 3.2.1 SW和SW1之间链路上抓包分析 3.2.2 SW和SW2之间链路上抓包分析 3.2.3 SW1和SW2之…

CSS重点知识整理1

目录 1 平面位移 1.1 基本使用 1.2 单独方向的位移 1.3 使用平面位移实现绝对位置居中 2 平面旋转 2.1 基本使用 2.2 圆点转换 2.3 多重转换 3 平面缩放 3.1 基本使用 3.2 渐变的使用 4 空间转换 4.1 空间位移 4.1.1 基本使用 4.1.2 透视 4.2 空间旋转 4.3 立…

Type-C连接器笔记

一、Type-C的介绍 Type-C是一种全新的USB接口形式&#xff0c;由USB Implementers Forum&#xff08;USB-IF&#xff09;制定&#xff0c;并在2014年获得苹果、谷歌、英特尔、微软等厂商支持后开始普及。它是一种通用串行总线&#xff08;USB&#xff09;的硬件接口规范&#x…

Stable Diffusion 3 发布及其重大改进

1. 引言 就在 OpenAI 发布可以生成令人瞠目的视频的 Sora 和谷歌披露支持多达 150 万个Token上下文的 Gemini 1.5 的几天后&#xff0c;Stability AI 最近展示了 Stable Diffusion 3 的预览版。 闲话少说&#xff0c;我们快来看看吧&#xff01; 2. 什么是Stable Diffusion…

React18源码: Fiber树中的全局状态与双缓冲

Fiber树构造 在React运行时中&#xff0c;fiber树构造位于 react-reconciler 包在正式解读 fiber 树构造之前&#xff0c;再次回顾一下renconciler的4个阶段 1.输入阶段&#xff1a;衔接react-dom包&#xff0c;承接fiber更新请求2.注册调度任务&#xff1a;与调度中心(schedu…

JavaScript+PHP实现视频文件分片上传

摘要 视频文件分片上传&#xff0c;整体思路是利用JavaScript将文件切片&#xff0c;然后循环调用上传接口 upload.php 将切片上传到服务器。这样将由原来的一个大文件上传变为多个小文件同时上传&#xff0c;节省了上传时间&#xff0c;这就是文件分片上传的其中一个好处。 上…

STL容器之list

​ 1.封装除了对数据的保护、更好地管理数据之外&#xff0c;还有实现了对上层的统一&#xff1b; ​ 2.类模板参数的不同&#xff0c;一方面是为了实例化出来不同的类&#xff0c;另一方面是为了实现类的成员函数的不同&#xff1b; 一、认识list ​ 1.list是一种带头双向循…