文章目录
要求登录页面主页
API用户登录登录并获取数据getdata
代码登录页面主页面
关于后端
需求
这是一个物联网演示项目，可以让Web客户端实时查看后台数据变化。过程非常简单。
用户成功登录后，显示主界面，数据每2秒自动更新一次。然后，您可以设置日期和时间来过滤数据。您可以通过关闭自动更新来停止自动更新，并通过单击更新按钮强制更新。
登录页面
在登录页面输入用户名和密码并提交给服务器验证后，即可跳转至主界面。
主页面
主要界面元素有开始时间、结束时间、自动更新开关、更新按钮。
表格列包括序列号、温度、压力、电压、位置、行程开关状态、数据报告时间等。
请注意，这些数据是模拟数据，而不是真实数据。
API
系统共有两个API。
登录：用于用户登录检索数据：检索设备数据
用户登录login
登录方法使用post发送用户名和密码。如果登录成功，返回的code为0，后续请求必须在header中包含该token。
获取数据getdata
成功登录后，您需要使用getdata 检索数据并使用post 请求将令牌放入标头中。 body 是json 格式，可以传递两个参数：from 和to。格式为yyyy-mm-dd hh:nn:ss。这两个参数不是必需的。
成功的请求将返回包含代码、消息和数据的数据包。 Data 是一个数组，包含温度、压力、电压、位置、开关和时间等传感器数据。
代码
登录页面
!DOCTYPE html
html lang=\’zh\’
头
元字符集=\’UTF-8\’
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’
标题登录页面/标题
风格
身体{
背景颜色： #333;
color:#fff；
显示器： Flex。
justify-content: 中心；
对齐items:中心；
高度： 100vh；
边距： 0;
}
形状{
显示器： Flex。
flex-direction: 列；
对齐items:中心；
}
输入{
边距底部： 10px；
}
/风格
/头
身体
表单id=\’loginForm\’ 方法=\’post\’
输入类型=\’文本\’ id=\’用户名\’ placeholder=\’用户名\’ 必填
输入类型=\’密码\’ id=\’密码\’ placeholder=\’密码\’ 必填
按钮类型=\’提交\’登录/按钮
/形状
脚本
document.getElementById(\’loginForm\’).addEventListener(\’提交\’, function(event) {
event.preventDefault();
const username=document.getElementById(\’用户名\’).value;
const 密码=document.getElementById(\’password\’).value;
if (!用户名|| !密码) {
alert(\’用户名和密码不能为空\’);
返回；
}
常数数据={
用户名： 用户名，
密码： 密码
};
fetch(\’/mgr/登录\’, {
方法： ‘POST’,
标头： {
\’内容类型\’: \’应用程序/json\’
},
body: JSON.stringify(数据)
})
.then(响应=response.json())
.then(结果={
if (结果代码===0) {
document.cookie=\’token=\’ + result.token;
window.location.href=\’/main\’;
} 除此之外{
alert(\’登录失败，请检查您的用户名和密码\’);
}
})
.catch（错误={
console.error(\’Error:\’, 错误);
});
});
/剧本
/身体
/html
主页面
该页面使用jquery并使用复选框来控制页面更新。主要代码是：
$(\’#autoRefresh\’).click(function(){
if ($(\’#autoRefresh\’).is(\’:checked\’)){
间隔ID=window.setInterval(queryData, 2000);
}除此之外{
window.clearInterval(interval_id)
}
})
您可以使用is 方法来检查选中并确定复选框是否被选中。
此外，您可以使用window.setInterval 方法设置计时器并定期检索数据。
这是完整的代码：
!DOCTYPE html
html lang=\’zh\’
头
元字符集=\’UTF-8\’
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’
标题数据查询/标题
风格
身体{
背景颜色： #333;
color:#fff；
}
.居中{
显示器： Flex。
justify-content: 中心；
对齐items:中心；
高度： 100%；
}
桌子{
border-collapse: 折叠；
宽度： 80%；
margin: 0 自动。
边距-top: 40px；
}
th, td {
border: 1px实心#ccc；
内边距： 8px；
文本对齐：居中；
}
th {
背景颜色： #333;
}
/风格
脚本src=\’https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js\’/script
脚本src=\’https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js\’/script
/头
身体
div 类=\’中心\’
label for=\’startTime\’开始时间：/labelnbsp
输入类型=\’datetime-local\’ id=\’startTime\’nbsp nbsp
label for=\’endTime\’结束时间：/labelnbsp
输入类型=\’datetime-local\’ id=\’endTime\’nbsp nbsp
input type=\’checkbox\’ id=\’autoRefresh\’ 勾选自动刷新（2秒）/inputnbsp nbsp
button id=\’queryBtn\’refresh/立即刷新按钮
/div
表ID=\’结果表\’
广告
t
第个序列号/第
th 温度/th
th 压力/th
th 电压/th
第个位置/第
第个开关/第
次/次
/tr
/广告
身体/身体
/桌子
脚本
$(文档).ready(函数() {
var token=getCookie(\’token\’);
如果（！令牌）{
window.location.href=\’/登录\’;
}
$(\’#queryBtn\’).click(queryData);
//使用定时器刷新
var Interval_id=setInterval(queryData, 2000);
$(\’#autoRefresh\’).click(function(){
if ($(\’#autoRefresh\’).is(\’:checked\’)){
间隔ID=window.setInterval(queryData, 2000);
}除此之外{
window.clearInterval(interval_id)
}
})
//初始化时刷新
查询数据();
});
函数getCookie(名称) {
var 值=\’; + document.cookie;
var Parts=value.split(\’; \’ + name + \’=\’);
if (parts.length==2) 返回Parts.pop().split(\’;\’).shift()。
}
函数查询数据(){
var startTime=$(\’#startTime\’).val();
if (startTime startTime.length6){
startTime=moment(startTime).format(\’YYYY-MM-DD HH:mm:ss\’);
}
var endTime=$(\’#endTime\’).val();
如果（结束时间结束时间.length6）{
endTime=moment(endTime).format(\’YYYY-MM-DD HH:mm:ss\’);
}
变量数据={
\’从\’:开始时间，
\’到\’: 结束时间
};
var token=getCookie(\’token\’);
$.ajax({
url: \’/mgr/getdata\’,
type: \’帖子\’,
contentType: \’应用程序/json\’,
data: JSON.stringify(数据),
标头： {
\’令牌\’: 令牌
},
success: 函数（响应）{
if (response.code===0) {
显示数据(响应.数据);
否则if (response.code===340) {
window.location.href=\’/登录\’;
} 除此之外{
警报（响应.msg）；
}
},
错误：函数（）{
alert(\’请求失败，请稍后重试\’);
}
});
}
函数显示数据（数据）{
var tableBody=$(\’#resultTable tbody\’);
tableBody.empty();
data.forEach（函数（项目，索引）{
var 行=$(\’tr/tr\’);
row.append($(\’td/td\’).text(index + 1));
row.append($(\’td/td\’).text(item.温度));
row.append($(\’td/td\’).text(item.Pressure));
row.append($(\’td/td\’).text(item.电压));
row.append($(\’td/td\’).text(item.position));
row.append($(\’td/td\’).text(item.switch ? \’开\’ : \’关\’));
row.append($(\’td/td\’).text(item.time));
tableBody.append(行);
});
}
/剧本
/身体
/html
关于后端
我稍后会写，但如果你想要的话，请留言。
以上为#Frontend学习笔记（2406261）：jquery使用复选框来控制来自网络的相关内容的自动更新。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92320.html
