当前位置: 首页 > 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请求:

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

http://www.lryc.cn/news/159447.html

相关文章:

  • 论文简读 LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS
  • 23062网络编程day7
  • Java面向对象学习笔记-2
  • 入栏需看——学习记忆
  • [C++]杨辉三角
  • 算法通关村十三关-白银:数字与数学高频问题
  • 【Linux】线程安全-互斥同步
  • 1.初识爬虫
  • TLA+学习记录1——hello world
  • 基于QWebEngine实现无头浏览器
  • 编译Micropython固件For树莓派Raspberry Pi Pico
  • 基于googlenet网络的动物种类识别算法matlab仿真
  • 如何用Jmeter编写脚本压测?
  • SpingMVC之拦截器使用详解
  • motionface respeak新的aigc视频与音频对口型数字人
  • 【计算机网络】 静态库与动态库
  • web端调用本地摄像头麦克风+WebRTC腾讯云,实现直播功能
  • React笔记(八)Redux
  • 数据库 | 数据库概述、关系型数据库、非关系型数据库
  • 【备战csp-j】 csp常考题目详解(4)
  • linux中常见服务端安装
  • L1-058 6翻了(Python实现) 测试点全过
  • 初学Python记
  • 计算机竞赛 基于深度学习的目标检测算法
  • sentinel-core
  • 【美团3.18校招真题1】
  • Springboot 实践(14)spring config 配置与运用--手动刷新
  • MyBatisPlus枚举类最佳实践(非常典型和高效的枚举类写法)
  • uniapp分包 解决分多个包的问题
  • 美国封锁激励中国制造业数字化转型的崛起 | 百能云芯