Flask前端页面文本框展示后端变量,路由函数内外两类

一、外!路由函数外的前后端数据传输

Flask后端

首先导入包,需要使用

  • 后端:flask_socketio来进行路由外的数据传输,
from flask_socketio import SocketIO, emit
  • 前端:还有HTML头文件的设置。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><link rel="stylesheet" type="text/css" href="/static/css/cljc.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

下面是一个函数演示,注意socketio.emit调用。

def generate_frames():frame_Num = 1                                   #用于记录第几幅图像(即第几帧),初始为1(即第一幅)max_cars = 0video_path = './static/Videos/视频1.mp4'cap = cv2.VideoCapture(video_path)fps = cap.get(cv2.CAP_PROP_FPS)               #获取视频文件的帧速率carsCascade = cv2.CascadeClassifier("car_rear.xml")   ##检测算法while cap.isOpened():success, frame = cap.read()if not success:break   cv2.putText(frame,"second:"+str(round(frame_Num/fps,2))+"s",(0,100),cv2.FONT_HERSHEY_SIMPLEX,1,(255,0,255),1)cars = carsCascade.detectMultiScale(frame[700:1280,0:720], 1.2,minSize=(10,10))   # 识别出所有汽车car_number = len(cars)max_cars = max(car_number,max_cars)# 获取当前北京时间beijing_time = datetime.now(timezone('Asia/Shanghai')).strftime('%Y-%m-%d %H:%M:%S')# 在每次更新数据后,通过SocketIO发送数据到前端if car_number > 6:waringInfo = "车辆过多注意减速!"socketio.emit('update_data', {'max_cars': max_cars, 'car_number': car_number, 'frame_Num': frame_Num, "safetyWarning": waringInfo, "timeShow": beijing_time})else:waringInfo = "未告警!"socketio.emit('update_data', {'max_cars': max_cars, 'car_number': car_number, 'frame_Num': frame_Num, "safetyWarning": waringInfo, "timeShow": beijing_time})

传输变量信息、

socketio.emit('update_data', {'max_cars': max_cars, 'car_number': car_number, 'frame_Num': frame_Num, "safetyWarning": waringInfo, "timeShow": beijing_time})

需要注意的是JavaScript,处data.变量需要和上边一一对应的同时,getElementById又需要和<body>里面的<input>id名字一一对应。便可以实现:后端信息->JavaScript中转->前端展示.

<script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
<script>var socket = io();socket.on('update_data', function(data) {document.getElementById('frameNumber').value = data.frame_Num;document.getElementById('vehicleNumber').value = data.car_number;document.getElementById('peakTraffic').value = data.max_cars;document.getElementById('timeShow').value = data.timeShow;document.getElementById('safetyWarning').value = data.safetyWarning;});
</script>

以第一个

document.getElementById('frameNumber').value = data.frame_Num;

举例子,

  • data.frame_Num是上面的socketio.emit传输的frame_Num。
  • document.getElementById('frameNumber')就是下面<input>中的id。
<div class="col2"> <div class="BoxConTop">当前帧数</div><input type="text" id="frameNumber" name="frameNumber" readonly style="margin-top: -100px;"><div class="BoxConTop">当前车辆数</div><input type="text" id="vehicleNumber" name="vehicleNumber" readonly style="margin-top: -100px;"><div class="BoxConTop">车流量峰值</div><input type="text" id="peakTraffic" name="peakTraffic" readonly style="margin-top: -100px;">
</div><div class="col3"><p>北京时间</p><input type="text" id="timeShow" name="timeWarning" readonly><p>安全预警栏</p><input type="text" id="safetyWarning" name="safetyWarning" readonly>
</div>

如此便可以实现图片实时传输,显示 

二、内!路由函数内的前后端数据传输 

@app.route('/cpsb', methods=['GET', 'POST'])
def cpsb():c = CardPredictor()c.train_svm()if request.method == 'POST':file = request.files['image']image = cv2.imdecode(np.frombuffer(file.read(), np.uint8), cv2.IMREAD_COLOR)r, roi, color = c.predict(image)  r = "".join(r)print(r,color)return jsonify({'plate_number': r, 'plate_color': color})else:# 对于GET请  求,只需渲染模板即可r = '待上传'color = '待上传'return render_template('cpsb.html', plate_number=r, plate_color=color)

     使用render_template进行数据传输,非常简单同样的一一对应:

  • 后端render_template中的plate_number = r 对应前端html中的 value = "{{ plate_number }}"
  • 后端中render_template中的plate_color = color 对应前段html中的 value = "{{ plate_color }}"
<div class="htmlpage-cell"><input type="text" value="{{ plate_color }}"/></div>
</div><div id="iafrm" class="htmlpage-cell c29697"><input type="text" value="{{ plate_number }}"/>
</div>

但是需要提前设置好js代码 ,放在按钮里面触发。但点击按钮就会触发,传送值到前端展示。

	<script>
document.getElementById('ipeig').addEventListener('click', function() {var fileInput = document.getElementById('fileInput');fileInput.click(); // 触发文件选择fileInput.onchange = function() {var file = fileInput.files[0];var formData = new FormData();formData.append('image', file);fetch('/cpsb', { // 发送到后端端点method: 'POST',body: formData}).then(response => response.json()).then(data => {// 更新页面上的元素以显示车牌号和颜色document.getElementById('iafrm').querySelector('input').value = data.plate_number;document.getElementById('ia0yf').querySelector('input').value = data.plate_color;document.getElementById('ia4yf').querySelector('input').value = data.car_type;// 更新背景图片以显示上传的图片var reader = new FileReader();reader.onload = function(e) {document.getElementById('irow5').style.backgroundImage = 'url(' + e.target.result + ')';};reader.readAsDataURL(file);}).catch(error => console.error('Error:', error));};
});</script>
document.getElementById('iafrm').querySelector('input').value = data.plate_number;
document.getElementById('ia0yf').querySelector('input').value = data.plate_color;
document.getElementById('ia4yf').querySelector('input').value = data.car_type;

这是核心。通过ID传值。 

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

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

相关文章

DevOps是什么?

DevOps是一系列实践、工具和文化理念的组合&#xff0c;旨在自动化并整合软件开发和信息技术运维团队之间的流程。以下是DevOps的几个关键点&#xff1a; 沟通与协作&#xff1a;DevOps强调开发和运维团队之间的沟通与合作&#xff0c;通过改善这两个部门间的协作关系&#xff…

使用clickhouse-backup备份和恢复数据

作者&#xff1a;俊达 介绍 clickhouse-backup是altinity提供的一个clickhouse数据库备份和恢复的工具&#xff0c;开源项目地址&#xff1a;https://github.com/Altinity/clickhouse-backup 功能上能满足日常数据库备份恢复的需求&#xff1a; 支持单表/全库备份支持备份上…

电脑桌面便签软件哪个好?好用的电脑桌面便签

电脑作为我们日常工作的重要工具&#xff0c;承载着大量的任务和项目。当工作任务繁重时&#xff0c;如何在电脑桌面上高效管理这些任务就显得尤为重要。这时&#xff0c;选择一款优秀的桌面便签软件&#xff0c;无疑会给我们带来极大的便利。 一款好的桌面便签软件&#xff0…

JDK11安装教程

文章目录 1、安装2、配置环境变量 1、安装 双击安装包&#xff0c;点击下一步 更改安装目录&#xff0c;点击下一步 等待安装完成 安装完成 2、配置环境变量 此电脑右键属性 -> 高级系统设置 -> 环境变量 -> 系统变量 -> 新建 变量名&#xff1a;JAVA_HOME变量…

kubernetes学习

1、应用部署方式演变 2、kubernetes介绍 3、kubernetes组件 4、kubernetes概念 5、环境搭建-环境规划 6、环境搭建-主机安装 7、环境搭建-环境初始化 8、环境搭建-集群所需组件安装 9、环境搭建-集群安装 10、环境搭建-网络插件安装 11、环境搭建-环境测试 12、资源管理…

阿里巴巴java 开发手册1.7

《Java 开发手册》是 Java 社区爱好者的集体智慧结晶和经验总结&#xff0c;经历了多次大规模一线实战的检验及不断完善&#xff0c;整理成册后&#xff0c;众多社区开发者踊跃参与打磨完善&#xff0c;系统化地整理成册&#xff0c;当前的最新版本是黄山版。现代软件行业的高速…

Databend 开源周报第 140 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持 EXECUTE I…

RabbitMQ项目实战(二)

文章目录 项目改造实现步骤 项目改造 以前把任务提交到线程池&#xff0c;然后在线程池提交中编写处理程序的代码&#xff0c;线程池内排队。 如果程序中断了&#xff0c;任务就没了&#xff0c;就丢了。 改造后的流程&#xff1a; 把任务提交改为向队列发送消息写一个专门接…

Android开发——ListView

activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_height"match_parent"android:layout_width"match_parent"…

SpringBoot使用maven指定依赖包的版本

目录 1. 解决示例2. 完整pom示例 前言&#xff1a;我们在使用A依赖的时候&#xff0c;这个依赖有引入了第三方B依赖&#xff0c;这时候我想指定B依赖的版本号 1. 解决示例 我想将 mysql、logback、tomcat 的版本升级到指定版本 只需在 pom.xml 文件的 properties 里面添加如下…

3D模型格式转换工具HOOPS Exchange:3D CAD数据的快速导入与导出

在当今的工程设计领域中&#xff0c;快速且可靠地处理3D CAD数据是至关重要的。HOOPS Exchange SDK通过提供一组C软件库&#xff0c;为开发团队提供了实现这一目标的有效工具。 什么是HOOPS Exchange&#xff1f; HOOPS Exchange是一组C软件库&#xff0c;旨在为开发团队提供…

已解决 数据库异常 SQLSyntaxErrorException:FUNCTION count does not exist.

今天排查问题看到数据库报错 Caused by: java.sql.SQLSyntaxErrorException: FUNCTION your_table_name(你的数据库名字).count does not exist. Check the Function Name Parsing and Resolution section in the Reference Manual然后查了很久才找到问题 在COUNT和括号之间有…

YOLOv1精读笔记

YOLO系列 摘要1. 将目标检测视为一个回归问题2. 定位准确率不如 SOTA&#xff0c;但背景错误率更低3. 泛化能力强 1.引言1.1 YOLO 速度很快1.2 全局推理 2. Unified Detection2.1 网络设计2.2 训练YOLOv1模型损失函数的选择和其潜在的问题YOLOv1模型如何改进其损失函数来更好地…

反射应用简单案例

day40 反射应用 案例 1.万能数组扩容 设置泛型的copyof仅支持引用数据类型&#xff0c;即任意类型&#xff0c;直接new数组不行&#xff0c;利用反射实现扩容&#xff1b; 打印调用toString也进行编写&#xff0c;利用StringBuffer或者StringBiulder进行字符串拼接 public c…

华为OD-C卷-伐木工[200分]Python3-100%

题目描述 一根X米长的树木,伐木工切割成不同长度的木材后进行交易,交易价格为每根木头长度的乘积。 规定切割后的每根木头长度都为正整数;也可以不切割,直接拿整根树木进行交易。 请问伐木工如何尽量少的切割,才能使收益最大化? 输入描述 木材的长度(X ≤ 50) 输出描…

tomcat部署两个相同端口前端,一个后端(Windows)

tomcat/webapps下 互联网端的包为ROOT和XXX&#xff08;XXX为项目名&#xff09; 一体机端只有一个前端包ABC 把ROOT下的所有文件剪切到XXX下的WEB-INF下classes下创建一个文件夹名叫static 把新的一体机的前端ABC的文件放到ROOT下即可 注意&#xff1a;ABC和static下的ind…

【史上最全】带你全方位了解containerd 的几种插件扩展模式

除了 snapshotter&#xff0c;containerd 的扩展机制你还了解哪些&#xff1f; 本文内容节选自 《containerd 原理剖析与实战》&#xff0c;本书正参加限时优惠内购&#xff0c;限时 69.9 元购买。 进入正题之前先看一下 containerd 的整体架构 1. containerd 架构 图 contain…

List<int[]>[] g = new ArrayList[n];

在Java中&#xff0c;List<int[]>[] g new ArrayList[n]; 这行代码定义了一个数组 g&#xff0c;该数组的每个元素都是一个 ArrayList<int[]> 类型的对象。这里&#xff0c;n 是预期图中顶点的数量&#xff0c;因此 g 数组的长度是 n。 List<int[]>&#x…

UE4_常见动画节点学习_Two Bone IK双骨骼IK

学习资料&#xff0c;仅供参考&#xff01; Two Bone IK 控制器将逆运动&#xff08;IK&#xff09;解算器应用于到如角色四肢等3关节链。 变量&#xff08; HandIKWeight &#xff09;被用于在角色的 hand_l 和 hand_r 控制器上驱动 关节目标位置&#xff08;Joint Target Lo…

Elasticsearch克隆索引

我所使用的Elasticsearch的版本是基于7.17.7。 需求是将某个ES的索引进行克隆。例如我要将索引test_0419_1克隆一份新的索引test_0419_2。步骤如下&#xff1a; 首先将源索引进行修改PUT /test_0419_1/_block/write&#xff0c;即禁止对这个索引进行写数据操作。然后执行克隆…