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

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

news 2025/6/30 9:11:02

文章目录

  • 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

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/6/27 13:41:27

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/6/21 17:45:06

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/6/25 2:27:15

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/6/16 11:04:37

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/6/27 10:06:34

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/6/26 12:55:36

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/6/21 8:09:03

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/6/26 10:08:29

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/6/20 12:51:17

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/6/20 15:09:15