文章目录
- 需求
- 登录页面
- 主页面
- API
- 用户登录login
- 获取数据getdata
- 代码
- 登录页面
- 主页面
- 关于后端
需求
这是一个物联网的演示项目,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;const password = document.getElementById('password').value;if (!username || !password) {alert('用户名和密码不能为空');return;}const data = {username: username,password: password};fetch('/mgr/login', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(data)}).then(response => response.json()).then(result => {if (result.code === 0) {document.cookie = 'token=' + result.token;window.location.href = '/main';} else {alert('登录失败,请检查用户名和密码');}}).catch(error => {console.error('Error:', error);});});</script>
</body>
</html>
主页面
页面使用了jquery,用checkbox来控制页面的刷新,主要的代码是:
$("#autoRefresh").click(function(){if ($("#autoRefresh").is(':checked')){interval_id = window.setInterval(queryData, 2000);}else{window.clearInterval(interval_id)}
})
可以使用is
方法来判断checked
来确定checkbox是否处于选中状态。
另外,通过window.setInterval
的方法,可以设置一个定时器,实现数据的定时获取。
完整的代码如下:
<!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;}.centered {display: flex;justify-content: center;align-items: center;height: 100%;}table {border-collapse: collapse;width: 80%;margin: 0 auto;margin-top: 40px;}th, td {border: 1px solid #ccc;padding: 8px;text-align: center;}th {background-color: #333;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body><div class="centered"><label for="startTime">开始时间:</label> <input type="datetime-local" id="startTime">   <label for="endTime">结束时间:</label> <input type="datetime-local" id="endTime">   <input type="checkbox" id="autoRefresh" checked>自动刷新(2s)</input>   <button id="queryBtn">立即刷新</button></div><table id="resultTable"><thead><tr><th>序号</th><th>温度</th><th>压力</th><th>电压</th><th>位置</th><th>开关</th><th>时间</th></tr></thead><tbody></tbody></table><script>$(document).ready(function() {var token = getCookie("token");if (!token) {window.location.href = "/login";}$("#queryBtn").click(queryData);//使用定时器刷新var interval_id = setInterval(queryData, 2000);$("#autoRefresh").click(function(){if ($("#autoRefresh").is(':checked')){interval_id = window.setInterval(queryData, 2000);}else{window.clearInterval(interval_id)}})//初始化时刷新queryData();});function getCookie(name) {var value = "; " + document.cookie;var parts = value.split("; " + name + "=");if (parts.length == 2) return parts.pop().split(";").shift();}function queryData(){var startTime = $("#startTime").val();if (startTime && startTime.length>6){startTime = moment(startTime).format("YYYY-MM-DD HH:mm:ss");}var endTime = $("#endTime").val();if (endTime && endTime.length>6){endTime = moment(endTime).format("YYYY-MM-DD HH:mm:ss");}var data = {'from': startTime,'to': endTime};var token = getCookie("token");$.ajax({url: "/mgr/getdata",type: "POST",contentType: "application/json",data: JSON.stringify(data),headers: {"token": token},success: function(response) {if (response.code === 0) {displayData(response.data);} else if (response.code === 340) {window.location.href = "/login";} else {alert(response.msg);}},error: function() {alert("请求失败,请稍后重试");}});}function displayData(data) {var tableBody = $("#resultTable tbody");tableBody.empty();data.forEach(function(item, index) {var row = $("<tr></tr>");row.append($("<td></td>").text(index + 1));row.append($("<td></td>").text(item.temperature));row.append($("<td></td>").text(item.pressure));row.append($("<td></td>").text(item.voltage));row.append($("<td></td>").text(item.position));row.append($("<td></td>").text(item.switch ? "开" : "关"));row.append($("<td></td>").text(item.time));tableBody.append(row);});}</script>
</body>
</html>
关于后端
回头再写吧,估计也没人看,有需要的可以留言。