当前位置： 首页 > news >正文

flask入门（四）前后端数据传输

news 2026/2/11 1:20:28

文章目录

  • 1、flask后端接收来自前端的数据
    • 1）如果前端提交的方法为POST
    • 2）如果前段提交的方法是GET
  • 2、flask后端向前端传数据
  • 3、案例
  • 参考文献

1、flask后端接收来自前端的数据

1）如果前端提交的方法为POST

后端接收时的代码：

xx=request.form.get('xx');
xx=request.form['xx']

2）如果前段提交的方法是GET

xx=request.args.get(xx)

2、flask后端向前端传数据

传送单个数据：

return render_template('html文件',xx='xx')

传送多个数据：先把数据写进字典，字典整体进行传输

return render_template('html文件',xx='字典变量')

3、案例

目录结构：
在这里插入图片描述
index.py文件：

# --*-- coding:utf-8 --*--
# @Author : 一只楚楚猫
# @File : index.py
# @Software : PyCharmfrom flask import *
from sentence_transformers import SentenceTransformer
import torch.nn as nn
import torch
import torch.nn.functional as Fmodel = SentenceTransformer(r'E:\楚楚猫\code\python\01design\01creativity\01distance\all-MiniLM-L6-v2')app = Flask(__name__)result = dict()
result["results"] = ""@app.route('/', methods=('GET', 'POST'))
def index():global resultif request.method == 'POST':step1 = request.form.get("step1")step2 = request.form.get("step2")step3 = request.form.get("step3")step4 = request.form.get("step4")# 用户输入的内容sentences = [step1, step2, step3, step4]results = list()# 384维embeddings = torch.FloatTensor(model.encode(sentences))# p=2就是计算欧氏距离，p=1就是曼哈顿距离euclidean_distance = nn.PairwiseDistance(p=2)for i in range(0, embeddings.size()[0]):for j in range(i + 1, embeddings.size()[0]):cosine_similarity = round(F.cosine_similarity(embeddings[i], embeddings[j], dim=0).item(), 4)distance = round(euclidean_distance(embeddings[i], embeddings[j]).item(), 4)results.append(f"step{i + 1} & step{j + 1}的相关性：{cosine_similarity}       step{i + 1} & step{j + 1}的距离：{distance}")print(f"step{i + 1} & step{j + 1}之间的相关性：{cosine_similarity}step{i + 1} & step{j + 1}之间的距离：{distance}")result["results"] = resultsreturn render_template('hello.html', result=result)return render_template('hello.html', result=result)if __name__ == '__main__':app.run(port=11252)

hello.html文件：

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta http-equiv="content-type" content="text/html;charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>欢迎来到我的世界</title><link href="../static/css/style.css" rel="stylesheet" type="text/css">
</head><div id="container"><div id="output"><div class="containerT"><h1>Yimo</h1><form class="form" id="entry_form" method="post"><h2><input type="text" name="step1" style="height:30px"></h2><br><h2><input type="text" name="step2" style="height:30px"></h2><br><h2><input type="text" name="step3" style="height:30px"></h2><br><h2><input type="text" name="step4" style="height:30px"></h2><br><center><button><h3>Click me!(๑•̀ㅂ•́)و✧</h3></button></center>{{result.results}}</form></div></div>
</div></body>
</html>

上面涉及到的sentence_transformers模块来自论文：《Sentence-BERT: Sentence Embeddings using Siamese BERT-Networks》，使用孪生网络（Siamse Network）将两个文本映射到特征空间得到特征向量（384维）

参考文献

1、flask 前端（html）与后端（python）相互传数据：https://www.cnblogs.com/zzai/p/html_dataStream.html
2、如何从Python发布数据并进入Flask前端：https://www.cnpython.com/qa/1513860

相关文章：

flask入门（四）前后端数据传输

文章目录 1、flask后端接收来自前端的数据1&#xff09;如果前端提交的方法为POST2&#xff09;如果前段提交的方法是GET 2、flask后端向前端传数据3、案例参考文献 1、flask后端接收来自前端的数据 1&#xff09;如果前端提交的方法为POST 后端接收时的代码&#xff1a; xx…...

编程日记 2023/10/24 12:08:29

JS——垃圾回收的原理

引言 JavaScript是一种高级的、解释型的编程语言&#xff0c;广泛应用于网页开发和移动应用开发中。在JavaScript中&#xff0c;内存管理是一个重要的话题&#xff0c;而垃圾回收就是内存管理的一部分。本文将介绍JavaScript垃圾回收的原理&#xff0c;并提供一些示例代码来帮助…...

编程日记 2023/10/24 12:07:28

Spring Cloud Gateway 路由构建器的源码分析

Spring Cloud Gateway 路由构建器的源码分析 文章目录 1. 路由构建器的入口2. 创建路由规则3. 设置路由规则和属性4. 路由过滤器的设置5. 构建和获取路由规则&#xff1a;6. 实例化路由构建器&#xff1a;8. 路由构建器的源码分析8.1 RouteLocator接口8.2 RouteLocatorBuilder…...

编程日记 2023/10/24 12:06:27

IT行业哪个方向比较好就业?

IT行业哪个方向比较好就业? IT行业里&#xff0c;哪些方向更好就业&#xff0c;这是一个很常见也很重要的问题。不同的IT方向有不同的技能要求、就业前景和发展空间&#xff0c;因此需要根据自己的兴趣、能力和目标来选择合适的方向。 软件开发与工程&#xff1a;软件开发是…...

编程日记 2023/10/24 12:05:26

uniapp中nvue页面使用fixed后，数据更改不更新到该视图。

解决方案&#xff1a;position: fixed;定位改成position: absolute; 记录一下&#xff0c;遇到这个贼离谱的问题&#xff0c;uniapp项目里的nvue页面因为要弄个引导蒙版&#xff0c;所以使用了fixed定位&#xff0c;点击蒙版关闭&#xff0c;加了this.$forceUpdate()也不行&am…...

编程日记 2023/10/24 12:03:25

力扣第55题 跳跃游戏 c++ 贪心 + 覆盖 加暴力超时参考

题目 55. 跳跃游戏 中等 相关标签 贪心 数组 动态规划 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &…...

编程日记 2023/10/24 12:02:23

系列十四、Redis的集群（一）

一、是什么 1.1、概述 由于数据量过大&#xff0c;单个master-slave模式难以承担&#xff0c;当出现master节点故障的一瞬间&#xff0c;哨兵重新选举新的master节点之前&#xff0c;这一小段时间将会导致Redis服务不可用&#xff0c;因此需要对多个master-slave主从复制集进行…...

编程日记 2023/10/24 12:01:22

红帽认证 | RHCE考试包括哪些内容？

Red Hat Certified Engineer&#xff08;RHCE&#xff09;考试是一项面向企业级系统管理员的认证考试&#xff0c;是认证Linux系统管理员技能的一种方式。 RHCE证书是Linux管理员领域中最受欢迎和最受认可的证书之一。 那RHCE考试都有哪些内容呢&#xff0c;一起来看看吧&…...

编程日记 2023/10/24 12:00:21

ASPICE标准快速掌握「3.1. 实践示例」

实践示例 本章内容是最重要的，建议慢下来跟着博主的思路一步一步前进 1. 示例背景说明 假设我们现在是一个Tier1的车窗控制软件开发商，我们给OEM提供软件解决方案 1.1. 本过程目标 根据客户、上级部门、安全团队与质量团队等提出的要求，本项目要求SYS.1过程达到ASPICE过…...

编程日记 2023/10/24 11:59:20

pytorch 训练可视化

pytorch 训练可视化 1.from torch.utils.tensorboard 1.from torch.utils.tensorboard from torch.utils.tensorboard import SummaryWriter在最新版本的pytorch中官方提供了tensorboard的api。以下是官方教程的链接 https://pytorch.org/tutorials/intermediate/tensorboard…...

编程日记 2023/10/24 11:58:19

webgis开发参考资料

一、ArcGIS相关 1、ArcGIS for Server 10.3.X 新型紧凑型缓存的解读和应用 http://zhihu.geoscene.cn/article/1038 2、arcgis server 紧促&#xff08;bundle&#xff09;格式缓存文件的读取 https://blog.csdn.net/abc553226713/article/details/8668839 3、ArcGIS 10.0紧…...

编程日记 2023/10/24 11:57:18

JSX 注意事项

学习目标&#xff1a; 掌握 JSX 实际开发过程中的一些注意事项   1. JSX 必须具有一个根节点&#xff0c;如果没有根节点可以使用<></>(幽灵节点)代替根节点将所有元素包裹起来 function App() {return (<><div className"App">1</div&…...

编程日记 2023/10/24 11:56:17

MQ常见的问题（kafka保证消息不丢失）

MQ常见的问题 1&#xff0c;mq如何避免消息堆积问题。 消息堆积&#xff1a;生产者的生产速率远远大于消费者的消费速率&#xff0c;使消息大批量的堆积在消息队列。 解决方案&#xff1a;1&#xff0c;提升消费者的消费速率&#xff08;增加消费者集群&#xff09; 2&…...

编程日记 2023/10/24 11:55:16

Unity编辑器扩展 --- AssetPostprocessor资源导入自动设置

unity导入资源的编辑器设置: 防止策划资源乱导入,资源导入需要的格式&#xff0c;统一资源管理 AssetPostprocessor资源导入管线 AssetPostprocessor用于在资源导入时自动做一些设置&#xff0c;比如当导入大量图片时&#xff0c;自动设置图片的类型&#xff0c;大小等。Ass…...

编程日记 2023/10/24 11:54:15

用Flask快速生成报表

一、前言 《用Python快速生成报表之一》 我们介绍了用html-table快速生成表格数据报表&#xff0c;今天我们再介绍一下用Python Flask 快速开发报表&#xff0c;使用的是最古老的套页面方式。 二、Flask快速生成报表 Python有N多Web框架&#xff0c;最强大最出名的是Django&…...

编程日记 2023/10/24 11:53:11

关于时序预测可解释性预测

本文做一些论文收集使用&#xff0c;先更新一两篇 论文 1 Learning Structured Components: Towards Modular and Interpretable Multivariate Time Series Forecasting 论文地址&#xff1a; https://browse.arxiv.org/pdf/2305.13036.pdf 论文代码&#xff1a;https://gi…...

编程日记 2023/10/24 11:52:10

泊车功能专题介绍 ———— AVP系统技术要求之场地规范定位要求

文章目录 停车场场地规范场地分级规范场地标识规范位置标识跨层标识十字路口标识丁字路口处标识闸口/收费口标识上下车点标识 定位功能要求环境要求定位精度要求场端定位要求道路自动驾驶定位要求泊车入位定位要求 车端定位要求道路自动驾驶定位要求泊车入位定位要求初始定位要…...

编程日记 2023/10/24 11:51:09

【STM32】时钟设置函数（寄存器版）

一、STM32时钟设置函数移植 1.时钟模块回顾 一个疑问 前面代码并没有设置时钟为什么可以直接使用。 2.时钟树 3.时钟树分析 1.内部晶振&#xff08;HSI&#xff09; 内部晶振不稳定&#xff0c;当我们上电后&#xff0c;会自动产生振动&#xff0c;自动产生时钟&#xff0c;…...

编程日记 2023/10/24 11:50:08

【DDD】贫血模型和充血模型

基于业务开发的项目大多是MVC架构的。成为Web项目的标准开发模式&#xff0c;但它却是违反面向对象编程风格的&#xff0c;是面向过程的。之后基于领域驱动设计开发模式被人提倡。 DDD&#xff08;Domain-driven design&#xff09;领域驱动设计是一种通过将实现连接到持续进化…...

编程日记 2023/10/24 11:49:07

【JS学习】字符串的substring方法

1. 介绍 substring 是JavaScript字符串对象的一个方法&#xff0c;用于从一个字符串中提取子字符串&#xff0c;并返回提取的部分。 可以使用 substring 方法来截取字符串的一部分&#xff0c;指定起始索引和结束索引&#xff08;或只指定起始索引&#xff09;。 这个方法不…...

编程日记 2023/10/24 11:48:05

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/11/10 19:07:59

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2026/2/4 16:04:21

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38