项目实战 ---- 商用落地视频搜索系统(6)---UI 结构及与service互动
目录
背景
技术问题
描述
Jinja2
概述
特性
问题解决手段
问题1
问题2
问题3
代码实现
前端代码
python代码
解释
页面展示
home
上传视频
搜索视频
背景
通过1-5 我们已经搭建好完整的后台功能，service，及准备与UI 交互的路由及接口。下面就是UI 部分的搭建。UI 部分，这次我选择了Flask作为搭建载体，他的使用非常方便，router清晰，调用也非常简洁。不再需要tomcat等单独的container运行，非常轻量化。重点是他的使用理念非常契合我的想法，我们重点看看怎么使用Flask搭建UI 并完成与后端service的互动。
技术问题
描述
html，css，js 的coding 这已经最基础的了，这里就直接跳过了。这些东西网上一搜一大堆，不是今天讨论的重点。我们今天主要聚焦在UI的 Flask 使用及搭建上。你首先需要解决两个问题：
1）后端的python 如何渲染网页及加载静态资源
2）网页中的数据如何传给后端
3）后端分析好的数据如何传给前端展示
Jinja2
Jinja2是一个基于Python的模板引擎，它以其简洁的语法、强大的功能和高度可定制性而受到广泛欢迎。以下是对Jinja2的详细介绍：
相关文章：
---UI 结构及与service互动)
项目实战 ---- 商用落地视频搜索系统(6)---UI 结构及与service互动
目录 背景 技术问题 描述 Jinja2 概述 特性 问题解决手段 问题1 问题2 问题3 代码实现 前端代码 python代码 解释 页面展示 home 上传视频 搜索视频 背景 通过1-5 我们已经搭建好完整的后台功能，service，及准备与UI 交互的路由及接口。下面就是UI 部分的搭…...
双头BFS
牛客月赛100 D题，过了80%数据，调了一下午。。。烦死了。。。 还是没调试出来，别人的代码用5维的距离的更新有滞后性，要在遍历之前要去重。。。 #include<bits/stdc.h> using namespace std; const int N2e310; char g[N][…...
使用Spring Boot拦截器实现时间戳校验以防止接口被恶意刷
使用Spring Boot拦截器实现时间戳校验以防止接口被恶意刷 在开发Web应用程序时，接口被恶意刷请求（例如DDoS攻击或暴力破解）是一个常见的安全问题。为了提高接口的安全性，我们可以在服务端实现时间戳校验，以确保请求的…...
第10讲 后端2
主要目标：理解滑动窗口法、位姿图优化、带IMU紧耦合的优化、掌握g2o位姿图。 第9讲介绍了以为BA为主的图优化。BA能精确优化每个相机位姿与特征点位置。不过在更大的场景中，大量特征点的存在会严重降低计算效率，导致计算量越来越大࿰…...
统计学习方法与实战——统计学习方法概论
统计学习方法概论 文章目录 统计学习方法概论前言章节目录导读 实现统计学习方法的步骤统计学习方法三要素模型模型是什么? 策略损失函数与风险函数常用损失函数ERM与SRM 算法 模型评估与模型选择过拟合与模型选择 正则化与交叉验证泛化能力生成模型与判别模型生成方法判别方法…...
人体红外传感器简介
人体红外传感器的工作原理是利用热释电效应，将人体发出的特定波长的红外线转化为电信号，从而实现对人体的检测和感知。 具体来说，人体红外传感器主要由滤光片、热释电探测元和前置放大器组成。滤光片的作用是使特定波长的红外辐…...
【JAVA入门】Day35 - 方法引用
【JAVA入门】Day35 - 方法引用 文章目录 【JAVA入门】Day35 - 方法引用一、方法引用的分类1.引用静态方法2.引用成员方法2.1 引用其他类的成员方法2.2 引用本类和父类的成员方法2.3 引用构造方法2.4 使用类名引用成员方法2.5 引用数组的构造方法 二、方法引用的例题 方法引用就…...
集合及映射
1、集合类图 1）ArrayList与LinkedList 区别 LinkedList 实现了双向队列的接口，对于数据的插入速度较快，只需要修改前后的指向即可；ArrayList对于特定位置插入数据，需要移动特定位置后面的数据，有额外开销 …...
软考基础知识之计算机网络
目录 前言 网络架构与协议 网络互联模型 1、OSI/RM 各层的功能 2、TCP/IP 结构模型 常见的网络协议 1、应用层协议 2、传输层协议 3、网络层协议 IPv6 前言 从古代的驿站、 八百里快马， 到近代的电报、 电话， 人类对于通信的追求从未间断&…...
云手机怎样简化海外社媒平台运营
随着越来越多的卖家希望拓展海外市场，运营TikTok、Facebook等社交媒体平台已经成为吸引流量和促进销售的重要手段。然而，在管理海外社媒账号的过程中，许多人会面临网络连接的问题。这时，使用一款高效便捷的云手机工具就显得尤为便…...
创业者必读！选择拍卖源码还是自建开发，哪种方案更安全？
在当今数字化时代，拍卖平台作为一种独特的电子商务模式，正逐渐成为人们关注的焦点。随着互联网技术的发展，网络安全问题变得越来越突出。如何保障用户数据安全，防止信息泄露及攻击事件的发生，已经成为拍卖软件开发者面…...
Spring Cloud Gateway整合基于STOMP协议的WebSocket实战及遇到问题解决
本实例介绍了Spring Cloud Gateway整合基于STOMP协议的WebSocket的实现。开发了聊天功能，和用户在线状态。解决了协议gateway整合websocket出现的问题 技术点 Spring Cloud GatewayNacosWebSocketSTOMPWebSocket与STOMP协议详解 1. WebSocket WebSocket 是一种通信协议，提…...
软考高级：系统架构设计师——软件架构设计 Chapter 笔记
软考高级：系统架构设计师——软件架构设计 1 软件架构设计—基本概念架构所处的位置架构发展历程架构的“41”视图例题 架构描述语言（ADL）例题 2软件架构设计—架构风格数据流风格调用/返回 风格独立构件风格虚拟机风格仓库风格（以…...
PageHelper组件 实现前端分页查询功能
Hi~！这里是一颗小谷粒，很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~~💥💥个人主页：一颗小谷粒💥💥所属专栏：Web前端开发 💥💥博主…...
线性回归与逻辑回归在模型参数优化上的比较
概述 线性回归和逻辑回归是两种基础且广泛应用的预测模型。尽管它们在很多方面有相似之处，如都使用梯度下降算法来优化模型参数，但在优化目标和方法上存在一些关键差异。本文将探讨这两种模型在参数优化上的差异，并提供相应的代码示例。 线…...
JavaWeb JavaScript 10.日程管理 第一期
自我消耗，敏感是我， 明媚是我， 我横跳在不同的情绪中 —— 24.8.31 一、登录页及校验 1.校验账号格式 // 校验账号格式function checkUsername(){// 定义正则表达式表示字符串规则var usernameReg /^[a-zA-Z0-9]{5,10}$/;// 获取用户名输入…...
redis为什么快
春内存访问，相比数据库访问磁盘要快单线程，避免上下文切换带来的cpu开销渐进式Rehash。减少阻塞网络模型多路复用，reactor模型 常用基本数据类型 5个基本数据类型2个高级数据结构（bitmaps、hyperlog） redis高级功能…...
 部署SpringBoot3.0)
十分钟学会Kubernetes(K8S) 部署SpringBoot3.0
1、十分钟学会Kubernetes(K8S) 部署SpringBoot3.0 本课程以 Java 后端开发的视角，带着大家从零基础入门 k8s 实战，掌握企业级容器化管理平台的各种实战应用，以及 Prometheus 监控告警、ELK 日志收集、DevOps 等众多实战课程内容，大…...
顺序表的插入与删除
一.插入：插入前先移动后面的元素 1.图解： 在b和d之间插入c，此时就需要把d，e，f都向后移一位，腾出一个位置后插入c。 2.代码实现： #include<stdio.h> #define MaxSize 10 //定义最大长度…...
FFMPEG -- 音频开发
1：前言 在进行音频开发之前需要先知道一些基础知识，一些有必要的指导的概念。 1.1 声音的产生、获取和转换 声音的产生的本质是靠震动，声音的传播需要借助媒介，比如空气、液体、固体等媒介。在自然界中声音的可视化为音波的形式&…...
51单片机实战：基于XPT2046的多传感器AD转换与LCD显示
1. 项目背景与核心器件选型 第一次接触51单片机AD转换时，我被各种专业术语搞得一头雾水。直到用XPT2046芯片完成了电位器、光敏电阻、热敏电阻的三路信号采集，才真正理解模拟信号数字化的奥妙。这个成本不到5元的触摸屏控制芯片，其实是个隐藏…...
HarmonyOS6 半年磨一剑 - RcRadio 组件核心架构与类型系统设计
文章目录前言一、双组件架构设计1.1 两个组件的职责划分1.2 双文件架构二、ComponentV2 装饰器体系2.1 Param 与 Require 的配合2.2 Local 的内部状态隔离三、类型系统设计3.1 基础类型别名3.2 RcRadioValue 的宽松类型3.3 RcRadioOption 接口四、modelValue 双向绑定模型4.1 受…...
使用python给pdf文档自动添加目录书签
1.背景很多时候电子书pdf没有书签目录,阅读起来不方便,于是给它自动加个目录吧2.步骤步骤一:使用ds获取到目录json截图目录,到ds中,然后输入如下提示词:根据目录的图片,提取出如下格式的json目录数据: {"title": "第一章 概述","page": 6,"…...
Harness Engineering 核心概念详解
文章目录1. Harness Engineering 的本质定义1.1 核心定义1.2 诞生的历史时刻1.3 "Harness" 的本意2. Agent Model Harness 核心公式2.1 公式解读2.2 LangChain 工程师的精炼定义2.3 类比：CPU 与操作系统3. Harness 三大支柱详解3.1 支柱一：上…...
COMSOL混凝土碳化模型
COMSOL 混凝土碳化模型混凝土表面那层白霜般的碳化层，总让我想起实验室里放了三个月的苏打饼干。这层碳酸钙的生成过程，在COMSOL里建模就像在模拟一场微观世界的化学舞会——二氧化碳分子突破混凝土保护层，与氢氧化钙在孔隙溶液里跳起离子交换…...
Epigenase m6A 甲基化酶活性/抑制比色法检测试剂盒：快速、灵敏、高通量适配
一、产品概述Epigenase m6A 甲基化酶活性/抑制比色法检测试剂盒，由Cytoskeleton推出，艾美捷代理，它是一套完整的优化缓冲液与试剂组合，专用于定量检测总 m6A 甲基化酶（甲基转移酶）的活性或抑制效果。该试剂…...
企业 Agent 流程上线后，如何实现持续优化与迭代？——2026年企业级智能体长效运营全景指南
进入2026年，企业级智能体（Enterprise AI Agent）已从早期的“实验性POC”全面转向“大规模生产部署”。然而，行业调研显示，超过60%的Agent流程在上线初期表现惊艳，却在运行3-6个月后因业务环境变化、知识库过…...
Python数据可视化入门：从零开始掌握三大核心库
在数据科学领域，数据可视化是连接数据与洞见的关键桥梁。通过图表和图形，我们能够直观地理解数据模式、发现异常值、并向他人清晰传达分析结果。Python作为数据分析的主流语言，提供了丰富强大的可视化工具库。本文将带你从零开始，…...
递推限幅消抖数字滤波函数的实现（C 语言，嵌入式 / Keil 通用）
前言在嵌入式系统、传感器采样、工业数据采集场景中，瞬时尖峰、随机野值、信号抖动是最常见的干扰问题。直接使用原始数据极易导致控制误判、显示跳变、系统异常。本文介绍一种轻量、高效、鲁棒性极强的递推限幅 连续消抖数字滤波算法，不占用大量 RAM、…...
水箱水位监测控制电路 Multisim 仿真探索
Multisim仿真文件 水箱水位监测控制电路报告 包含：说明书，Multisim10电路源文件，仿真电路等 仿真效果： 1.在水箱内的不同高度安装3根金属棒，以感知水位变化情况， 液位分1，2，3档&…...