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://www.mzph.cn/news/701312.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

跟着爱学习的饲养员做题记录之两个数之和,力扣1

题目要求在给定的整数数组中找到两个数的索引&#xff0c;使它们的和等于一个特定的目标值。 import java.util.Hashtable;/*** 开发人员&#xff1a; * 时间&#xff1a;2024/2/24*/ //两数之和 public class leecode1 {public static void main(String[] args) {int[] nums …

npm install报错,如何解决

npm install报错可能有多种原因&#xff0c;以下是一些常见的解决方法&#xff1a; 检查网络连接&#xff1a;确保你的网络连接正常&#xff0c;有时候网络不稳定会导致npm install失败。 清除npm缓存&#xff1a;运行命令npm cache clean --force清除npm的缓存&#xff0c;然…

【网站项目】488服装店销售管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

【CMake】(9) 日志

message 函数被用于向用户显示信息。这个函数可以在 CMake 运行时输出各种级别的消息,包括状态消息、警告、错误等。 message 函数的语法 message([<mode>] "message to display" ...)<mode> 可选的参数,指定消息的类型。可能的值包括: STATUS: 显示…

迷你世界之建筑生成球体

local x0,y0,z00,30,0--起点坐标 local dx,dy,dz60,60,60--外切长方体横纵竖长度 local count,all0,dx*dy*dz--计数&#xff0c;总数 local m,k10000,0--单次生成方块数&#xff0c;无用循环值 local x,y,z0,0,0--当前坐标 local demath.random(2,19)/2 local id600--方块…

评估测试接口软件与网站的使用方法及优劣势比较

评估测试接口软件与网站的使用方法及优劣势比较 导言 在软件开发和测试过程中&#xff0c;对接口进行测试是至关重要的一步。测试接口的软件和网站提供了各种工具和方法&#xff0c;以便开发人员和测试人员能够有效地测试他们的应用程序接口。本文将探讨几种常见的测试接口软…

小米标准模组+MCU 快速上手开发(二)——之模组串口调试

小米标准模组+MCU 开发笔记之固件调试 背景技术名词简介● 小米IoT开发者平台● 小米IoT 模组● 固件● OTA● CRC32固件双串口调试● MHCWB6S-IB 模组资料下载● MHCWB6S-IB 模组管脚图● 上电调试背景 小米标准模组+MCU的开发过程中,由于部分官方资料较为古早,踩了很多的坑…

单片机上电后不工作,应该检查什么

当单片机上电后不工作&#xff0c;应该按照以下步骤进行检查&#xff1a; 1.电源检查。使用电压表测量单片机的电源电压是否正常&#xff0c;确保电压在规定的范围内&#xff0c;如常见的5V。 2.复位检查。检查复位引脚的电压是否正常&#xff0c;在单片机接通电源时&#xff…

中兴通讯携吉林移动迈向5G-A新阶段,完成3CC技术应用

日前&#xff0c;中兴通讯携手中国移动吉林移动分公司&#xff0c;在5G-A领域取得新突破。具体来说&#xff0c;双方基于MTK芯片M80终端&#xff0c;完成了5G-A三载波聚合试点&#xff0c;实测下行速率达到理论峰值4.25Gbps&#xff0c;相比2.6G单载波速率提升2.5倍。如此成绩&…

【JavaScript】减少 DOM 操作

文章目录 1. 了解DOM操作的性能影响2. 批量操作和缓存选择器2.1 批量操作2.2 缓存选择器 3. 使用事件委托4. 缓存计算值5. 合理使用样式操作6. 使用文档碎片和克隆节点7. 总结 在Web开发中&#xff0c;对DOM&#xff08;Document Object Model&#xff09;的频繁操作可能导致性…

C++面试题精选与解析

C面试题精选与解析 一、基础与语法 请问C中的指针和引用有什么区别&#xff1f; 指针是一个变量&#xff0c;存储的是另一个变量的内存地址。指针可以被重新赋值以指向另一个不同的对象。而引用是某个变量的别名&#xff0c;一旦引用被初始化为一个变量&#xff0c;就不能改变…

LLM权重量化

LLM权重量化 浮点表示的背景知识Nave 8位量化使用LLM.int8() 进行8位量化结论References 大型语言模型(llm)以其广泛的计算需求而闻名。通常&#xff0c;模型的大小是通过将**参数的数量(大小)乘以这些值的精度(数据类型)**来计算的。为了节省内存&#xff0c;可以通过称为量化…

cmake 项目。qt5升级 qt6 报错 error: “Qt requires a C++17 compiler 已解决

日常项目开发中。需要对qt5升级到qt6 做cmake兼容配置&#xff0c;在编译中发现&#xff0c;有c 编译环境 报错 2>C:\Qt\6.5.3\msvc2019_64\include\QtCore/qcompilerdetection.h(1226,1): fatal error C1189: #error: "Qt requires a C17 compiler, and a suitable …

了解 JavaScript 中的重放攻击和复现攻击

在网络安全领域&#xff0c;重放攻击&#xff08;Replay Attack&#xff09;和复现攻击&#xff08;Playback Attack&#xff09;是一些可能导致安全漏洞的攻击形式。这两种攻击类型涉及在通信过程中再次发送已经捕获的数据&#xff0c;以达到欺骗系统的目的。本文将介绍 JavaS…

企业微信怎么变更企业名称?

企业微信变更主体有什么作用&#xff1f;现在很多公司都用企业微信来加客户&#xff0c;有时候辛辛苦苦积累了很多客户&#xff0c;但是公司却因为各种各样的原因需要注销&#xff0c;那么就需要通过企业微信变更主体的方法&#xff0c;把企业微信绑定的公司更改为最新的。企业…

Qt Android sdk配置报错解决

使用的jdk8总是失败&#xff0c;报错command tools run以及platform sdk等问题。后来主要是设置jdk版本为17&#xff0c;就配置生效了。Android sdk路径可以选用Android Studio自带的&#xff0c;但是也要在Qt中点击“设置SDK”按钮做必要的下载更新等。 编译器这里会自动检测到…

linux中的权限

Linux 的权限 在了解Linux的权限之前&#xff0c;我们需要知道Linux的构成&#xff0c;Linux分为三个部分&#xff0c;内核、外部程序、以及用户。 内核&#xff1a; 内核一般是指Linux的操作系统&#xff0c;用来执行用户发送的指令 或者 拒绝执行用户发布指令时而发出的报…

大数据之Flink优化

文章目录 导言&#xff1a;Flink调优概览第1章 资源配置调优1.1 内存设置1.1.1 TaskManager 内存模型1.1.2 生产资源配置示例 1.2 合理利用 cpu 资源1.2.1 使用 DefaultResourceCalculator 策略1.2.2 使用 DominantResourceCalculator 策略1.2.3 使用DominantResourceCalculato…

YOLOv9来了,可编程梯度信息与广义高效层聚合网络 助力全新检测SOTA前沿

本文首发&#xff1a;AIWalker 欢迎关注AIWalker&#xff0c;近距离接触底层视觉与基础AI技术 摘要 当今的深度学习方法侧重于如何设计最合适的目标函数&#xff0c;以便模型的预测结果最接近真实情况&#xff1b;与此同时&#xff0c;必须设计一个适当的架构&#xff0c;以便…

[electron]官方示例解析

官方例子 github链接 main.js const { app, BrowserWindow } require(electron)说句实话这里的语法是有部分看不懂的。导入模块虽然electron有很多模块。但是这里只是用到了app 和 BrowserWindow function createWindow () {// Create the browser window.const mainWindo…