需求
这是一个物联网的演示项目,web端能够实时显示后台数据的变化,其流程非常简单:
- 用户登录
- 登录成功后显示主界面面
- 主界面进入后自动显示数据
- 数据两秒钟自动刷新一次
- 设置日期和时间可以对数据进行筛选
- 勾选掉自动刷新后,停止自动刷新
- 点击刷新按钮可以强制刷新。
登录页面
登录页面可以输入用户名和密码,提交到服务端验证后,可以跳转到主界面。
主页面
主界面的元素有:开始时间,结束时间,自动刷新开关,刷新按钮
表格的列有:序号、温度、压力、电压、位置、行程开关状态、数据上报的时间等。
说明数据均为模拟数据,而非实际数据。
API
系统一共有两个API,分别是:
login
:用于用户登录获取数据
:获取设备数据
用户登录login
login
方法采用post,发送用户名和密码,如果登录成功,返回的code
为0
,且附带一个token
,后续请求需要将token
放在header中。
获取数据getdata
登录成功后,使用getdata
来获取数据,采用post请求,需要将token
放在header中。body为json格式,可以传递from
和to
两个参数,其格式为yyyy-mm-dd hh:nn:ss
,这两个参数不是必须的。
请求成功后,将返回数据包,包括code
、msg
和data
,其中data
是一个数组,包含了传感器的数据,分别是:temperature
、pressure
、voltage
、position
、switch
、time
。
代码
登录页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<style>
body {
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form id="loginForm" method="post">
<input type="text" id="username" placeholder="用户名" required>
<input type="password" id="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;