基于STM32的智能可视化收银机设计流程：优化FreeRTOS、Node.js与MySQL的架构（代码示例）

最新推荐文章于 2024-09-27 15:26:03 发布

极客小张

最新推荐文章于 2024-09-27 15:26:03 发布

阅读量1.4k

点赞数 31

文章标签： stm32 node.js mysql 物联网数据库网络协议 c++

本文链接：https://blog.csdn.net/qq_40431685/article/details/141104448

版权

一、项目概述

在现代商业环境中，收银机系统的高效性和可视化界面变得尤为重要。本文将介绍一个结合STM32微控制器与后端技术的可视化收银机系统的开发过程。该系统旨在通过硬件与软件的结合，实现实时数据处理、用户友好的界面以及灵活的数据管理。

系统主要功能包括：

硬件接口管理：使用STM32微控制器控制传感器、打印机等外围设备。
数据存储与管理：通过后端服务存储交易数据、用户信息等。
可视化界面：前端使用现代Web技术提供友好的用户交互界面。
实时更新：通过HTTP或WebSocket实现前后端的数据实时更新。

二、系统架构

以下是本项目的系统架构设计方案：

硬件层：
- 单片机：STM32F4系列微控制器，具备丰富的外设接口，适合用于控制收银机相关硬件。
- 通信协议：通过UART与打印机通信，通过I2C与传感器进行数据交互。
嵌入式软件：
- 开发语言：嵌入式C/C++进行固件开发。
- 操作系统：使用FreeRTOS进行任务管理。
后端：
- 开发框架：使用Node.js或Python Flask处理API请求与数据交互。
- 数据库：使用MySQL存储用户和交易数据。
前端：
- 技术栈：使用HTML、CSS、JavaScript及React或Vue.js框架构建用户界面。
- 通信：使用HTTP和WebSocket进行前后端数据交互。

系统架构图

三、环境搭建

根据系统架构的技术栈，以下是不同部分的环境搭建过程。

1. STM32开发环境

安装工具：
安装STM32CubeIDE（包含编译器和调试工具）。
创建项目：
打开STM32CubeIDE，选择“File” -> “New” -> “STM32 Project”，选择合适的STM32微控制器型号，配置时钟和外设。

2. 嵌入式C/C++开发

FreeRTOS集成：
在项目中添加FreeRTOS库，可通过STM32CubeMX进行配置，选择“FreeRTOS”选项，添加任务和队列。

3. 后端环境

Node.js安装：
- 下载并安装Node.js，使用以下命令初始化项目：
```
npm init -ynpm install express mysql2
```
Flask环境：
- 安装Python及Flask：
```
pip install Flask Flask-SQLAlchemy
```

4. 前端环境

React/Vue.js项目：
- 使用Create React App创建React项目：
```
npx create-react-app cashier-system
```
- 或使用Vue CLI创建Vue项目：
```
vue create cashier-system
```

四、代码实现

在这一部分，我们将深入探讨各个模块的代码实现，包括STM32微控制器的固件开发、后端Node.js服务和前端界面的代码示例和说明。

1. STM32固件开发

在STM32固件开发中，我们将创建一个任务以读取传感器数据并通过UART将数据发送到打印机或后端服务。

STM32固件代码示例

#include "FreeRTOS.h"
#include "task.h"
#include "stm32f4xx_hal.h"

// UART句柄声明
UART_HandleTypeDef huart2;

// 传感器读取函数
uint16_t ReadSensor() {
    // 模拟读取传感器数据
    return HAL_GPIO_ReadPin(GPIOA, GPIO_PIN_0); // 假设传感器连接在PA0
}

// 传感器任务
void SensorTask(void *pvParameters) {
    while (1) {
        // 读取传感器数据
        uint16_t sensor_data = ReadSensor();
        // 将传感器数据通过UART发送
        HAL_UART_Transmit(&huart2, (uint8_t*)&sensor_data, sizeof(sensor_data), HAL_MAX_DELAY);
        vTaskDelay(pdMS_TO_TICKS(1000)); // 每隔1秒读取一次
    }
}

// 主函数
int main(void) {
    HAL_Init(); // 初始化HAL库
    SystemClock_Config(); // 配置系统时钟
    MX_GPIO_Init(); // 初始化GPIO
    MX_USART2_UART_Init(); // 初始化UART

    // 创建传感器任务
    xTaskCreate(SensorTask, "SensorTask", 128, NULL, 1, NULL);

    // 启动调度器
    vTaskStartScheduler();

    while (1) {
        // 进入低功耗模式
        __WFI();
    }
}

// GPIO和UART初始化代码略

代码说明

HAL_Init()：初始化HAL库，以支持硬件操作。
SystemClock_Config()：配置系统时钟，确保MCU以正确的频率运行。
MX_GPIO_Init()：初始化GPIO，设置传感器的引脚。
MX_USART2_UART_Init()：初始化UART，用于与外部设备通信。
ReadSensor()：读取连接在PA0引脚上的传感器数据。
SensorTask()：FreeRTOS任务，用于定期读取传感器数据并通过UART发送。
vTaskDelay(pdMS_TO_TICKS(1000))：延迟1秒，控制任务执行频率。

2. 后端Node.js服务

后端服务将处理来自STM32的数据存储、用户认证等逻辑。以下是一个基本的Node.js后端示例，使用Express框架。

Node.js后端代码示例

const express = require('express');
const mysql = require('mysql2');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

// 中间件
app.use(bodyParser.json());

// 数据库连接
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'your_password',
    database: 'cashier_system'
});

// 连接数据库
db.connect(err => {
    if (err) throw err;
    console.log('Connected to database');
});

// 接收传感器数据的API
app.post('/sensor-data', (req, res) => {
    const sensorData = req.body.data;
    const query = 'INSERT INTO sensor_readings (data, timestamp) VALUES (?, NOW())';

    db.query(query, [sensorData], (error, results) => {
        if (error) {
            return res.status(500).send('Database error');
        }
        res.status(200).send('Data received');
    });
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

代码说明

express：使用Express框架创建Web服务器。
mysql2：用于与MySQL数据库的连接和查询。
body-parser：解析JSON格式的请求体。
db.connect()：连接到MySQL数据库，确保数据库可以访问。
app.post('/sensor-data', ...)：定义接受传感器数据的POST请求的API。
使用SQL插入语句将传感器数据存储到sensor_readings表中。
app.listen(port, ...)：启动应用程序并监听指定的端口。

3. 前端界面

前端界面将使用React框架构建，以提供用户友好的可视化界面，允许用户查看传感器数据、交易记录等。以下是一个简单的React应用示例，展示了如何接收后端数据并将其展示在界面上。

React前端代码示例

首先，确保你已经通过create-react-app创建了一个新的React应用。

npx create-react-app cashier-system
cd cashier-system
npm install axios

接下来，修改src/App.js文件如下：

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
    const [sensorData, setSensorData] = useState([]);
    const [loading, setLoading] = useState(true);

    // 获取传感器数据
    const fetchSensorData = async () => {
        try {
            const response = await axios.get('http://localhost:3000/sensor-data');
            setSensorData(response.data);
        } catch (error) {
            console.error("Error fetching sensor data:", error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchSensorData(); // 组件挂载时调用
    }, []);

    return (
        <div className="App">
            <h1>可视化收银机系统</h1>
            {loading ? (
                <p>加载中...</p>
            ) : (
                <div>
                    <h2>传感器数据</h2>
                    <ul>
                        {sensorData.map((data, index) => (
                            <li key={index}>{data.data} - {new Date(data.timestamp).toLocaleString()}</li>
                        ))}
                    </ul>
                </div>
            )}
        </div>
    );
}

export default App;