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

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

news 2026/4/9 9:01:27

文章目录

  • 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

Pip生成requirements.txt文件

在Python开发中&#xff0c;requirements.txt文件是一个非常重要的文件&#xff0c;它列出了项目所需的所有外部Python库及其版本号。这对于项目的部署和版本控制非常有帮助&#xff0c;因为它确保了所有开发者和部署环境都能使用相同版本的库。 如何生成requirements.txt文件 …...

编程新知 2026/4/9 8:52:36

ChatTTS语音导航优化：车载系统更人性化播报

ChatTTS语音导航优化&#xff1a;车载系统更人性化播报 1. 引言&#xff1a;让车载导航真正"会说话" 你有没有遇到过这样的情况&#xff1a;开车时听着机械冰冷的导航语音&#xff0c;感觉像是在听机器人念经&#xff1f;"前方300米右转"、"请保持直…...

编程新知 2026/4/9 7:29:34

[特殊字符] 第72课:杨辉三角

想系统提升编程能力、查看更完整的学习路线&#xff0c;欢迎访问 AI Compass&#xff1a;https://github.com/tingaicompass/AI-Compass 仓库持续更新刷题题解、Python 基础和 AI 实战内容&#xff0c;适合想高效进阶的你。&#x1f4d6; 第72课:杨辉三角模块:动态规划 | 难度:…...

编程新知 2026/4/9 6:56:24

1张因果图，破解90%的决策误区：从相关性到因果性的终极分析框架

你是不是也遇到过这样的困惑&#xff1a;明明做了促销&#xff0c;销量涨了&#xff0c;却算不清到底是促销起了作用&#xff0c;还是商品本身就该爆&#xff1f;看到孩子上了补习班的同学成绩更好&#xff0c;就跟风报班&#xff0c;结果孩子成绩没涨&#xff0c;反而越来越厌…...

编程新知 2026/4/9 6:31:13

HY-MT1.5-1.8B快速上手：3步搭建你的专属翻译服务

HY-MT1.5-1.8B快速上手&#xff1a;3步搭建你的专属翻译服务 1. 准备工作&#xff1a;了解你的翻译助手 1.1 模型简介 HY-MT1.5-1.8B是一款轻量级但功能强大的翻译模型&#xff0c;专门为需要快速部署和高效运行的场景设计。这个模型虽然只有18亿参数&#xff0c;但在翻译质…...

编程新知 2026/4/9 6:17:06

量子力学语言：狄拉克符号法进阶全集

量子力学语言：狄拉克符号法进阶全集 这是一篇面向“已经见过狄拉克符号，但还没有彻底吃透它”的完整长文。目标不是只会抄写公式，而是真正理解：狄拉克符号到底是什么、为什么它能统一波函数和矩阵、它怎样承载测量、表象变换、多体系统与密度矩阵。 导读 很多人第一次接触…...

编程新知 2026/4/9 6:15:06

OpenClaw云端体验版：Phi-3-vision-128k-instruct沙盒环境快速验证

OpenClaw云端体验版&#xff1a;Phi-3-vision-128k-instruct沙盒环境快速验证 1. 为什么选择云端沙盒体验 当我第一次听说OpenClaw时&#xff0c;就被它"让AI像人类一样操作电脑"的理念吸引了。但作为一个谨慎的技术人&#xff0c;我习惯在正式投入时间前先做可行性…...

编程新知 2026/4/9 5:58:40

实战Electron跨进程通信实现SerialPort串口数据交互

1. 为什么Electron 9.0需要跨进程通信处理串口&#xff1f; 第一次用Electron对接工业秤重设备时&#xff0c;我直接把SerialPort代码写在渲染进程&#xff0c;结果控制台突然报错——就像被泼了盆冷水。原来从Electron 9.0开始&#xff0c;安全策略禁止渲染进程直接调用原生No…...

编程新知 2026/4/9 5:50:27

Lingyuxiu MXJ LoRA效果惊艳展示：高清细腻真人人像生成作品集

Lingyuxiu MXJ LoRA效果惊艳展示&#xff1a;高清细腻真人人像生成作品集 1. 项目简介 Lingyuxiu MXJ LoRA是一款专门为生成唯美真人风格人像而设计的轻量级AI图像生成系统。这个项目最大的特点是能够创造出五官细腻、光影柔和、质感逼真的人像作品&#xff0c;而且完全不需要…...

编程新知 2026/4/9 5:11:44

HY-Motion 1.0保姆级教程：从零配置GPU环境生成文生3D动作

HY-Motion 1.0保姆级教程&#xff1a;从零配置GPU环境生成文生3D动作 想用一句话就让3D角色动起来吗&#xff1f;比如&#xff0c;输入“一个人从椅子上站起来&#xff0c;然后伸展双臂”&#xff0c;电脑就能自动生成一段流畅、自然的3D骨骼动画。这听起来像是未来科技&#…...

编程新知 2026/4/9 4:49:12