驱动轴相机参数设置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请求:

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

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

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

相关文章

百度千帆大模型文心一言api调用

注册百度智能云账号并申请文心千帆大模型资格 https://login.bce.baidu.com/ https://cloud.baidu.com/product/wenxinworkshop 创建应用用于获取access_token 创建应用成功后,可以获取到API Key和Secret Key 获取access_token curl https://aip.baidubce.com/oauth/2.0/to…

Vue 3的革命性新特性:深入了解Composition API

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Java毕业设计 SSM SpringBoot 水果蔬菜商城

Java毕业设计 SSM SpringBoot 水果蔬菜商城 SSM 水果蔬菜商城 功能介绍 首页 图片轮播 关键字搜索商品 分类菜单 折扣大促销商品 热门商品 商品详情 商品评价 收藏 加入购物车 公告 留言 登录 注册 我的购物车 结算 个人中心 我的订单 商品收藏 修改密码 后台管理 登录 商品…

【玩玩Vue】使用elementui页面布局和控制页面的滚动

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 前言一、页面布局二、页面滚动1.禁用body的滑动2.禁用el-aside的滚动3.启动el-main的滚动 前言 一、页面布局 这里布局使用vueelementui&…

NotePad——xml格式化插件xml tools在线安装+离线安装

在使用NotePad时&#xff0c;在某些情形下&#xff0c;需要格式化Xml格式内容&#xff0c;可以使用Xml Tools插件。 一、在线安装 1. 打开Notepad 软件 2. 选择插件&#xff0c;选择“插件管理” 3. 搜索 XML Tools&#xff0c;找到该插件后&#xff0c;勾选该文件&#xff…

idea部署javaSE项目(awt+swing项目)/idea导入eclipse的javaSE项目

一.idea打开项目 选择需要部署的项目 二、设置JDK 三、引入数据库驱动包 四、执行sql脚本 四、修改项目的数据库连接 找到数据库连接文件 五.其他系统实现 JavaSwing实现学生选课管理系统 JavaSwing实现学校教务管理系统 JavaSwingsqlserver学生成绩管理系统 JavaSwing用…

笔记1.2 计算机网络结构

网络边缘 主机、网络应用 接入网络&#xff0c;物理介质 有线或无线通信链路 网络核心&#xff08;核心网络&#xff09;&#xff1a; 互联的路由器&#xff08;或分组转发设备&#xff09; 网络之网络 一、网络边缘 主机&#xff08;端系统&#xff09;&#xff1a; 位…

差分方程模型:蛛网模型

在完全竞争的市场经济中&#xff0c;一个时期某种消费品如猪肉的上市量远远大于需求量&#xff0c;由于销售不畅导致价格下降&#xff0c;生产者发现养猪赔钱&#xff0c;于是转而经营其它农副产品。过一段时间猪肉上市量就会下降&#xff0c;此时供不应求导致价格上涨&#xf…

word-doc和docx区别

office从业者路过。 文件结构上doc文件数据是以二进制形式存放的。 docx是以xml文件形式存放的。 doc兼容较差&#xff0c;docx效果更好。

分享一个基于微信小程序的社区生活小助手源码调试和lw,有java+python双版本

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…

IDM(Internet Download Manager)下载器2024最新版本如何下载?

IDM&#xff08;Internet Download Manager&#xff09;下载器能够兼容支持多种浏览器进行文件下载&#xff0c;很多时候只要复制一个地址IDM的下载弹窗就自动弹出来&#xff0c;有时候不需要下载的时候也会弹&#xff0c;时间久了就会感觉很烦&#xff0c;不过这个问题其实可以…

基于matlab实现的中点放炮各类地震波时距曲线程序

完整程序&#xff1a; clear all dx50;x-500:dx:500;%炮检距 h100;V11500; theta25*pi/180; V2V1/sin(theta); t1sqrt(x.*x4*h*h)/V1;%反射波时距曲线 t2abs(x)./V1;%直达波时距曲线 %折射波时距曲线 xm2*h*tan(theta);%求盲区 k1; for i1:length(x) if x(i)<-xm …

【C语言】指针和数组笔试题解析

指针是C语言的灵魂&#xff0c;他的玩法多种多样&#xff0c;这篇文章带来指针的笔试题详解&#xff0c;可以帮助我们更好的理解与巩固指针的知识 目录 预备知识&#xff1a;题目&#xff1a; 题目比较多&#xff0c;但切记戒骄戒躁&#xff0c;保持空杯心态&#xff0c;相信看…

2022年全国研究生数学建模竞赛华为杯C题汽车制造涂装-总装缓存调序区调度优化问题求解全过程文档及程序

2022年全国研究生数学建模竞赛华为杯 C题 汽车制造涂装-总装缓存调序区调度优化问题 原题再现&#xff1a; 背景介绍   汽车制造厂主要由焊装车间、涂装车间、总装车间构成&#xff0c;每个车间有不同的生产偏好&#xff0c;如&#xff1a;焊装车间由于车身夹具的限制偏向最…

Linux之yum/git的使用

目录 一、yum 1、关于yum 2、yum的操作 ①、yum list ②、yum install ③、yum remove 二、git 1、Linux中连接gitee 2、git的操作 ①git add [文件] ②git commit -m "提交日志" ③git push 3、可能出现的问题 ①配置用户名、邮箱 ②出现提交冲突 ③…

Shell 正则表达式及综合案例及文本处理工具

目录 一、常规匹配 二、常用特殊字符 三、匹配手机号 四、案例之归档文件 五、案例之定时归档文件 六、Shell文本处理工具 1. cut工具 2. awk工具 一、常规匹配 一串不包含特殊字符的正则表达式匹配它自己 例子&#xff0c;比如说想要查看密码包含root字符串的&#x…

JDK9特性——概述

文章目录 引言JDK9特性概述JDK9的改变JDK和JRE目录变化总结 引言 JAVA8 及之前&#xff0c;版本都是特性驱动的版本更新&#xff0c;有重大的特性产生&#xff0c;然后进行更新。 JAVA9开始&#xff0c;JDK开始以时间为驱动进行更新&#xff0c;以半年为周期&#xff0c;到时…

如何让两台手机相互远程控制?

你的两台手机是什么系统的&#xff1f;如果你的两台手机都是安卓系统&#xff0c;而且都是安卓7.0及以上版本的系统&#xff0c;那么恭喜你&#xff0c;这两台手机可以相互远程控制&#xff01; 你可以利用两个软件实现将两台手机相互远程控制的想法。为了避免混淆&#xff0c…

学习笔记|矩阵按键控制原理|数值转化为键码|密码锁|STC32G单片机视频开发教程(冲哥)|第十四集:矩阵按键原理及实践

文章目录 1.矩阵按键是什么2.矩阵按键的控制原理3.矩阵按键程序的编写将数值转化为键码完整代码&#xff1a;demo.c&#xff1a;key.c:key.h: 密码锁&#xff08;简易版&#xff09;需求分析&#xff1a; 总结课后练习&#xff1a; 1.矩阵按键是什么 这个矩阵按键也是我们这个…

Zookeeper 启动失败【Cannot open channel to 3 at election address...】

文章目录 完整报错信息解决方法1.检查文件夹权限2.未监听所有IP3.IP映射名称与 ID 不对应 完整报错信息 Cannot open channel to 3 at election address hadoop121/192.168.10.121:3888 java.net.ConnectException 解决方法 1.检查文件夹权限 检查当前用户是否拥有 Zookeep…