一、前言
这几天自己接了个小的项目，要求将stm32的串口数据打印出来并且在自制的网页上显示，一个小型的智能房屋系统，显示房屋灯、门、窗的打开或关闭状态，显示检测到的温湿度数值，并且将数据保存到本地的数据库中。
这次的设计是本地化的形式，所有的数据不通过网络上传，具体的方式是stm32数据需要的数据并接电脑，电脑上将串口输出数据保存为Jason格式的TXT文档，这个文档需要给前端识别并将数据解析使用，思路并不复杂，使用起来就比较麻烦了，前期的环境配置更是难，浪费了五六个小时，好在最后是已经通过测试，并且交付到客户手中。
二、设计内容
本次设计需要用到四款软件：
①Navicat Premium 17做数据库；
②HBuilder X做前端；
③IntelliJ IDEA 2024.1做后端的Java程序；
④Keil uVision5做stm32程序。
这四款软件我主要做的是最后一个项，设计stm32的硬件➕程序，前三项的程序内容是由别人做出来的，由于网页是本地化的，所以最终的实现是在我电脑上完成，所以我这别有完成的一套程序代码。
三、技术难点代码展示
1、数据库部分程序：
数据库应该用软件生成的，由于我这边不懂，所以不做过多阐述：
smarthome.sql
INSERT INTO `outputdevice` VALUES (1, 'light', 'LivingRoom', 'ON', '2024-07-04 00:34:48');
INSERT INTO `outputdevice` VALUES (2, 'door', 'Bedroom', 'OFF', '2024-07-04 00:34:48');
INSERT INTO `outputdevice` VALUES (3, 'window', 'Office', 'ON', '2024-07-04 00:34:48');
INSERT INTO `records` VALUES (1, 'temperature', '2024-07-04 00:36:50', 22.1, 1);
INSERT INTO `records` VALUES (2, 'humidity', '2024-07-04 00:36:50', 48.2, 2);2、前端部分程序：
前端也不是我做的，所以不做过多阐述：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login and Register Page</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body>
<div class="login-container">
<h2 id="formTitle">Login</h2>
<form id="loginForm">
<div class="input-group">
<input type="text" id="loginUsername" placeholder="Username" required>
</div>
<div class="input-group">
<input type="password" id="loginPassword" placeholder="Password" required>
</div>
<button type="submit">Login</button>
<p>Don't have an account? <a href="#" id="showRegisterForm">Register</a></p>
</form>
<form id="registerForm" style="display:none;">
<div class="input-group">
<input type="text" id="registerUsername" placeholder="Username" required>
</div>
<div class="input-group">
<input type="password" id="registerPassword" placeholder="Password" required>
</div>
<button type="submit">Register</button>
<p>Already have an account? <a href="#" id="showLoginForm">Login</a></p>
</form>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
fetch('http://localhost:8080/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
})
.then(response => response.json())
.then(data => {
if (data.message === 'Login successful') {
window.location.href = 'home.html';
} else {
alert(data.message);
}
})
.catch(error => {
console.error('Error:', error);
});
});
document.getElementById('registerForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('registerUsername').value;
const password = document.getElementById('registerPassword').value;
fetch('http://localhost:8080/api/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
})
.then(response => response.json())
.then(data => {
alert(data.message);
if (data.message === 'User registered successfully') {
document.getElementById('showLoginForm').click();
}
})
.catch(error => {
console.error('Error:', error);
});
});
document.getElementById('showRegisterForm').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('loginForm').style.display = 'none';
document.getElementById('registerForm').style.display = 'block';
document.getElementById('formTitle').innerText = 'Register';
});
document.getElementById('showLoginForm').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('loginForm').style.display = 'block';
document.getElementById('registerForm').style.display = 'none';
document.getElementById('formTitle').innerText = 'Login';
});
</script>
</body>
</html>
3、后端部分程序：
后端里面主要就是如何去解析stm32串口的数据，这部分是最重要的，如果这块解析不了，那么这个设计基本就废了，所以，经过产找资料并且反复实验，最终将串口输出的格式改为Jason格式并保存到TXT文档，后端去直接调用这个文档并解析使用：
HandleDeviceRecord.java
public void checkAndProcessFile() {
Path path = Paths.get("D:\\device_record.txt");
if (Files.exists(path)&& Files.isRegularFile(path) && Files.isWritable(path)) {
logger.info("Start parsing device information !***************");
List<List<DeviceRequest>> deviceRequests = parseDeviceRequests(path);
if (!CollectionUtils.isEmpty(deviceRequests)) {
List<DeviceRequest> lastDeviceRequests = deviceRequests.get(deviceRequests.size() - 1);
this.upsertConditionAndRecord(lastDeviceRequests);
try {
Files.delete(path);
logger.info("File deleted successfully.");
} catch (IOException e) {
System.err.println("Failed to delete file: " + e.getMessage());
}
}
logger.info("End parsing device information !***************");
}
}4、STM32部分程序：
output_Jason.c
pJson2Buff[MqttType] = 0x30;
pJson2Buff[TopicNameLen] = 0x00;
pJson2Buff[TopicNameLen + 1] = 0x03;
pJson2Buff[TopicName] = 0x24; //$dp
pJson2Buff[TopicName + 1] = 0x64;
pJson2Buff[TopicName + 2] = 0x70;
pJson2Buff[DpType] = 0x03;
pJson2Buff[JsonStrLen + 2 + i++] = '{';
STRING_SIZE7('"','t','e','m','p','"',':');//"temp":
pJson2Buff[JsonStrLen + 2 + i++] = sht30_gTEMP[3]; //*
pJson2Buff[JsonStrLen + 2 + i++] = sht30_gTEMP[2]; //*
pJson2Buff[JsonStrLen + 2 + i++] = '.'; //*
pJson2Buff[JsonStrLen + 2 + i++] = sht30_gTEMP[1]; //*
pJson2Buff[JsonStrLen + 2 + i++] = sht30_gTEMP[0]; //temp scale
pJson2Buff[JsonStrLen + 2 + i++] = ','; //*
STRING_SIZE7('"','h','u','m','i','"',':'); //,"humi":
pJson2Buff[JsonStrLen + 2 + i++] = sht30_gHUMI[3]; //*
pJson2Buff[JsonStrLen + 2 + i++] = sht30_gHUMI[2]; //*
pJson2Buff[JsonStrLen + 2 + i++] = '.'; //*
pJson2Buff[JsonStrLen + 2 + i++] = sht30_gHUMI[1]; //*
pJson2Buff[JsonStrLen + 2 + i++] = sht30_gHUMI[0]; //temp scale
pJson2Buff[JsonStrLen + 2 + i++] = ','; //*四、最终实现效果
1、串口与网页显示效果图：
2、串口与数据库效果图：
3、硬件屏幕、窗口、数据库显示效果图：
五、总结
声明：本次设计部分代码为本人设计。前端、后端、数据库均不是本人所做，其中的硬件和硬件相关程序为本人制作。
这次的程序设计主要就是如何让后端解析串口打印的数据，所以需要提前将数据输出的格式改为Jason格式，还有在后端中加入解析的程序代码，解析出来以后将数据在网页显示并存入本地数据库中，最终效果也已经实现，需要完整版程序联系我。
非免费！！！非免费！！！非免费！！！非免费！！！非免费！！！非免费！！！非免费！！！
扫一扫
9301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
