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

devtools/2024/9/24 8:27:13/

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

Flask后端

首先导入包,需要使用

  • 后端:flask_socketio来进行路由外的数据传输,
python">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调用。

python">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})

传输变量信息、

python">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>

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

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

python">@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.ppmy.cn/devtools/2620.html

相关文章

web server apache tomcat11-09-JNDI Datasource

前言 整理这个官方翻译的系列&#xff0c;原因是网上大部分的 tomcat 版本比较旧&#xff0c;此版本为 v11 最新的版本。 开源项目 从零手写实现 tomcat minicat 别称【嗅虎】心有猛虎&#xff0c;轻嗅蔷薇。 系列文章 web server apache tomcat11-01-官方文档入门介绍 web…

吴恩达llama课程笔记:第七课llama安全工具

羊驼Llama是当前最流行的开源大模型&#xff0c;其卓越的性能和广泛的应用领域使其成为业界瞩目的焦点。作为一款由Meta AI发布的开放且高效的大型基础语言模型&#xff0c;Llama拥有7B、13B和70B&#xff08;700亿&#xff09;三种版本&#xff0c;满足不同场景和需求。 吴恩…

13.C++常用的算法_查找算法

文章目录 遍历算法1. adjacent_find代码工程运行结果 2. binary_search()代码工程运行结果 3. count()代码工程运行结果 4. count_if()代码工程运行结果 遍历算法 1. adjacent_find 代码工程 查找相邻元素是否存在,不存在返回容器最后位置的迭代器#define _CRT_SECURE_NO_WA…

Rust 构建跨平台 GUI 的新选择

在现代软件开发过程中&#xff0c;用户界面&#xff08;GUI&#xff09;的设计与实现是不可或缺的一环。随着Rust编程语言的崛起&#xff0c;其安全性、性能和并发特性使其成为开发高质量GUI应用的理想选择。relm框架&#xff0c;作为Rust生态中的一员&#xff0c;提供了一种声…

【科研入门】评价指标AUC原理及实践

评价指标AUC原理及实践 目录 评价指标AUC原理及实践一、二分类评估指标1.1 混淆矩阵1.2 准确率 Accuracy定义公式局限性 1.3 精确率 Precision 和 召回率 Recall定义公式 1.4 阈值定义阈值的调整 1.5 ROC与AUC引入定义公式理解AUC算法 一、二分类评估指标 1.1 混淆矩阵 对于二…

【Entity Framework】闲话EF中批量配置

【Entity Framework】闲话EF中批量配置 文章目录 【Entity Framework】闲话EF中批量配置一、概述二、OnModelCreating中的批量配置元数据API的缺点 三、预先约定配置忽略类型默认类型映射预先约定配置的限制约定添加新约定替换现有约定约定实现注意事项 四、何时使用每种方法进…

docker 上达梦导入dump文件报错:本地编码:PG GBK,导入女件编码:PGGB18030

解决方案&#xff1a; 第一步进入达梦数据容器内部 docker exec -it fc316f88caff /bin/bash 第二步&#xff1a;在容器中 /opt/dmdbms/bin目录下 执行命令 cd /opt/dmdbms/bin./dimp USERIDSYSDBA/SYSDBA001 FILE/opt/dmdbms/ZFJG_LJ20240407.dmp SCHEMASZFJG_LJUSERIDSYSD…

开源在线表单工具 HeyForm 使用教程

HeyForm 是一个非常出色的开源在线表单工具&#xff0c;可以通过直观的拖拽式编辑器&#xff0c;快速构建出美观实用的表单。 HeyForm 的功能非常丰富&#xff1a; 支持丰富的输入类型&#xff0c;从基础的文本、数字到高级的图片选择、日期选择、文件上传等&#xff0c;一应俱…