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

驱动轴相机参数设置Web前端界面开发

一、基于Django的Web应用界面的开发:

在Realtimeresults.html上添加一个按钮组件,获取检测到的轴型和车轮信息,点击后可以获取package.json里存放的json数据,效果如下:

实现逻辑:需要从URL设置、视图函数、html代码三方面来实现。

1、需要先在django项目下的urls.py里设置路由,当浏览器端请求的URL与该URL匹配成功时,django会调用项目下里的view.py里的视图函数realtimeresults_page,该函数先把该json文件读取出来,并连同Realtimeresults.html一起返回,保证在Realtimeresults.html可以使用到该数据。

关于文件的路径:

在settings.py里需要先加载django项目的根路径(BASE_DIR),再加上json文件的相对路径。

package.json如下:

2、装车辆信息的盒子如下:

分别将json数据的字段加入到对应的盒子即可。

2、将django项目共享给同一局域网下所有主机进行查看。

在setting.py里设置:

再通过该命令python .\manage.py runserver 0.0.0.0:8000,可启动服务器。浏览器输入本机ip:192.168.1.231:8000即可访问该django项目。

二、通过jQuery库来实现浏览器端与服务器端的json数据交换

效果如下:

jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程,相比于原生js代码来说更加易于开发,代码更加简洁,集成性更强。

对于jQuery的使用,可以在官方下载静态库文件jquery.js,也可以在<head>标签里通过CDN(内容分发网络)来引用:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

AJAX 是与服务器交换数据的框架,在不重载全部页面的情况下,实现了对部分网页的更新。AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

通过 jQuery AJAX 方法,可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON,同时能够把这些外部数据直接载入网页的被选元素中。

实现逻辑:

定义了getResult函数如下:

以Get方式向服务器来发送Ajax请求,若请求成功时,执行回调函数,当update_flag为1时,则服务器端有新数据需要发送,

将装对应的html内容的盒子填入json数据的内容即可。setInterval是设置定时器,8s会调用一次getResult函数。

如果没有新的json数据内容,则对应的html内容显示无即可,

可以看到不断地在发送get请求:

有个问题待优化:利用递归调用请求结果的函数的方式来从服务器端读取数据,请求的次数会不断增加,需要考虑服务器是否可以承载?

相关文章:

驱动轴相机参数设置Web前端界面开发

一、基于Django的Web应用界面的开发&#xff1a; 在Realtimeresults.html上添加一个按钮组件&#xff0c;获取检测到的轴型和车轮信息&#xff0c;点击后可以获取package.json里存放的json数据&#xff0c;效果如下&#xff1a; 实现逻辑&#xff1a;需要从URL设置、视图函数、…...

论文简读 LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

论文地址&#xff1a;https://arxiv.org/pdf/2106.09685.pdf 项目地址&#xff1a;https://github.com/microsoft/LoRA 全文翻译地址&#xff1a;https://zhuanlan.zhihu.com/p/611557340 本来想自行翻译的&#xff0c;但最近没有空 1、关键凝练 1.1 LORA是什么&#xff1f; …...

23062网络编程day7

网络聊天室编写&#xff08;基于UDP&#xff09; 服务器 #include <myhead.h>#define PORT 8888 //端口号&#xff1a;接收方绑定的端口号 #define IP "192.168.114.56" //本机IP#define ERR_MSG(msg) do{\fprintf(stderr, "__%d__:&…...

Java面向对象学习笔记-2

前言 本文介绍了Java中类的定义和对象的创建的基本概念。我们通过示例代码演示了如何定义不同类型的类&#xff0c;包括管理员信息、顾客信息、学校信息和访客信息&#xff0c;并展示了如何创建这些类的对象以及如何访问它们的属性和方法。这些示例有助于理解面向对象编程的基…...

入栏需看——学习记忆

记忆方法千千种&#xff0c;本栏意在梳理其中道道来&#xff0c;旦有小得&#xff0c;肥肠幸耶。从不同角度分析学习记忆。 逻辑篇 有逻辑 用思维导图 思维导图记忆有逻辑的文本/内容 理论 巧记书本结构–思维导图 模仿 HCIE-Cloud Computing LAB备考第一步&#xff1a…...

[C++]杨辉三角

目录 题目 解题思路 代码实现 获取数字 打印函数 主函数 全部代码 运行结果 题目 给定一个非负整数numRows &#xff0c;生成「杨辉三角」的前numRows行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 解题思路 第k列的第i个数字的值第k-1列的(…...

算法通关村十三关-白银:数字与数学高频问题

有很多解题技巧&#xff0c;需要持续积累 1.数组实现加法专题 如果让你用数组来表示一个数&#xff0c;如何实现加法呢&#xff1f; 理论上仍然从数组末尾向前挨着计算就行了&#xff0c;但是实现的时候会发现很多问题&#xff0c;例如需要进位该怎么办&#xff1f; 进一步拓…...

【Linux】线程安全-互斥同步

文章目录 线程安全问题的引入线程互斥互斥概念互斥锁互斥锁的计数器当中如何保证原子性互斥锁基础API初始化互斥锁变量函数动态初始化静态初始化 加锁函数阻塞加锁非阻塞加锁带有超时时间的加锁 解锁函数销毁互斥锁函数 线程同步线程同步的必要性条件变量条件变量的使用原理条件…...

1.初识爬虫

爬虫是批量模拟网络请求的程序&#xff0c;想百度谷歌这种搜索类网站本质上就是爬虫 使用爬虫的时候不应该对别人的网站有严重的影响&#xff0c;比如你爬的频率太高了&#xff0c;让人家的网站崩溃了。不应该爬取网页上显示不到的内容&#xff0c;比如有一个直播的网站&#…...

TLA+学习记录1——hello world

0x01 TLA是个好工具 编程人员一个好习惯是凡事都想偷懒&#xff0c;当然是指要科学地偷懒&#xff0c;而不是真的偷懒。一直想找到一种能检验写出的代码&#xff0c;做出的设计是否真的完全正确&#xff0c;而不是靠经验检视、代码Review、反复测试去检验。因为上述方法不管怎…...

基于QWebEngine实现无头浏览器

无头浏览器 无头浏览器&#xff08;Headless Browser&#xff09;是一种没有图形用户界面&#xff08;GUI&#xff09;的浏览器。它通过在内存中渲染页面&#xff0c;然后将结果发送回请求它的用户或程序来实现对网页的访问&#xff0c;而不会在屏幕上显示网页。这种方式使得无…...

编译Micropython固件For树莓派Raspberry Pi Pico

1. 前言 由于想把自己编写的py文件打包的固件中&#xff0c;所以记录下如何编译micropython固件和打包。 2. 编译 最简单的方式就是在你的树莓派上进行&#xff0c;我用的是RP Pi2 下载所需文件&#xff1a; $ cd ~/ $ mkdir pico $ cd pico $ git clone -b pico https://gi…...

基于googlenet网络的动物种类识别算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ................................................................. % 获取输入层的尺寸 Inp…...

如何用Jmeter编写脚本压测?

随着商业业务不断扩张&#xff0c;调用adsearch服务频率越来越高&#xff0c;所以这次想做个压测&#xff0c;了解目前多少并发量可以到达adsearch服务的界值。 这次选用的jmeter压测工具&#xff0c;压测思路如图&#xff1a; 一、日志入参 日志选取的adsearch 的 getads部分…...

SpingMVC之拦截器使用详解

拦截器概述 SpringMVC的处理器拦截器,类似于Servlet开发中的过滤器Filter&#xff0c;用于对处理器进行预处理和后处理。 过滤器和拦截器区别 过滤器&#xff1a;依赖于servlet容器。在实现上基于函数回调&#xff0c;可以对几乎所有请求进行过滤&#xff0c;但是缺点是一个过…...

motionface respeak新的aigc视频与音频对口型数字人

在当今的数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;正在逐渐渗透到我们生活的方方面面。其中&#xff0c;AI技术在视频制作和处理领域的应用也日益广泛。本文将探讨如何利用AI技术实现视频中人脸与音频同步对口型的方法&#xff0c;旨在进一步丰富视频制作的效…...

【计算机网络】 静态库与动态库

文章目录 静态库实践使用方法总结 动态库实践使用方法总结 静态库与动态库的优缺点静态库优点缺点 动态库缺点优点 库有两种&#xff1a;静态库&#xff08;.a、.lib&#xff09;和动态库&#xff08;.so、.dll&#xff09;。所谓静态、动态是指链接。静态库是将整个库文件都拷…...

web端调用本地摄像头麦克风+WebRTC腾讯云,实现直播功能

目录 关于直播直播流程直播视频格式封装推流和拉流 获取摄像头和麦克风权限navigator.getUserMedia()MediaDevices.getUserMedia() WebRTC腾讯云快直播 关于直播 视频直播技术大全、直播架构、技术原理和实现思路方案整理 直播流程 视频采集端&#xff1a; 1、视频采集&#…...

React笔记(八)Redux

一、安装和配置 React 官方并没有提供对应的状态机插件&#xff0c;因此&#xff0c;我们需要下载第三方的状态机插件 —— Redux。 1、下载Redux 在终端中定位到项目根目录&#xff0c;然后执行以下命令下载 Redux npm i redux 2、创建配置文件 在 React 中&#xff0c;…...

数据库 | 数据库概述、关系型数据库、非关系型数据库

目录&#xff1a; 1.数据库&#xff1a;1.1 数据库的含义1.2 数据库的特点 2.数据表3.数据库管理系统4.数据库系统5.关系型数据库 和 非关系型数据库&#xff1a;5.1 关系型数据库5.2 关系型数据库“优势”5.3 非关系型数据库 6.关系型数据库 和 非关系型数据库 的“区别” 1.数…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...