配合本专栏前端文章对应的后端文章——从模拟到展示：一步步搭建传感器数据交互系统

news2025/5/23 19:30:41

对应文章：进一步完善前端框架搭建及vue-konva依赖的使用（Vscode）-CSDN博客

目录

一、后端开发

1.模拟传感器数据

2.前端页面呈现数据+后端互通

2.1更新模拟传感器数据程序（多次请求）

2.2🧩 功能目标

2.3🧱 系统结构简述

2.4✅ 实现步骤（附代码）

2.4.1步骤1：Django 视图中添加获取模拟传感器数据的接口

2.4.2步骤2：配置 Django URL 路由

2.4.3步骤3：前端 Vue3 使用 Axios 获取数据

2.4.4完善2.4.3

一、后端开发

功能模块子功能描述技术建议
🧪 模拟传感器程序数据模拟模拟温度、湿度、火情等传感器数据Python 脚本 / Node.js
网络发送将数据定时打包并发送至本机某个端口（TCP/UDP）Socket 编程
配置可调支持调整模拟频率、数值范围等JSON 配置或命令行参数
🌐 后端服务端口监听后端监听指定端口，接收来自模拟程序的数据Spring Boot / Node.js / django
数据解析将接收到的字符串（如 JSON）解析为结构化数据JSON解析器
数据推送使用 WebSocket 将实时数据推送给前端Spring Boot WebSocket / Socket.IO
REST 查询接口提供历史数据查询接口（可选）RESTful API
日志与错误处理数据记录、连接失败、格式异常处理日志组件如 Logback

1.模拟传感器数据

由于硬件还未到位所以手动模拟传感器数据：

  1. 在原本的工程中创建脚本文件夹：scripts

    然后再创建🧪 模拟传感器程序：

    # sensor_simulator.py
import socket
import json
import random
import time
​
# 模拟数据生成函数
def generate_sensor_data():
    return {
        "temperature": round(random.uniform(20, 40), 2),  # 摄氏度
        "humidity": round(random.uniform(30, 90), 2),     # 百分比
        "light": random.randint(100, 1000),               # lux
        "pressure": random.randint(80, 120),              # kPa
    }
​
# 启动 TCP 服务器
def start_sensor_server(host='127.0.0.1', port=9000):
    server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    server_socket.bind((host, port))
    server_socket.listen(1)
    print(f"传感器模拟器已启动，监听 {host}:{port}")
​
    client_socket, addr = server_socket.accept()
    print(f"客户端已连接：{addr}")
​
    try:
        while True:
            data = generate_sensor_data()
            json_data = json.dumps(data)
            client_socket.sendall((json_data + '\n').encode('utf-8'))
            print(f"发送数据: {json_data}")
            time.sleep(2)  # 每2秒发送一次数据
    except (ConnectionResetError, BrokenPipeError):
        print("客户端断开连接")
    finally:
        client_socket.close()
        server_socket.close()
​
if __name__ == '__main__':
    start_sensor_server()
​

    同时呢，可以写一个模拟前端的测试程序，看模拟传感器数据程序是否正常运行：

    # test_client.py
import socket
​
with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
    s.connect(('127.0.0.1', 9000))
    while True:
        data = s.recv(1024)
        print("接收到数据:", data.decode('utf-8'))

    然后，我们就在Vscode中创建两个终端分别运行这两个脚本文件：

    PS E:\py_project\Security_System\Security_System_workplace\Security_System_project\scripts> python .\sensor_simulator_v2.py
​
PS E:\py_project\Security_System\Security_System_workplace\Security_System_project\scripts> python .\test_client.py

    如图所示：

2.前端页面呈现数据+后端互通

2.1更新模拟传感器数据程序（多次请求）

# sensor_simulator.py
import socket
import json
import random
import time
​
# 生成模拟传感器数据
def generate_sensor_data():
    return {
        "temperature": round(random.uniform(20, 40), 2),  # 摄氏度
        "humidity": round(random.uniform(30, 90), 2),     # 百分比
        "light": random.randint(100, 1000),               # lux
        "pressure": random.randint(80, 120),              # kPa
        "timestamp": time.strftime('%Y-%m-%d %H:%M:%S')
    }
​
def start_sensor_server(host='127.0.0.1', port=9000):
    server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    server_socket.bind((host, port))
    server_socket.listen()
    print(f"传感器模拟器已启动，监听 {host}:{port}")
​
    try:
        while True:
            # 等待客户端连接
            client_socket, addr = server_socket.accept()
            print(f"新连接：{addr}")
​
            # 生成并发送一次数据
            data = generate_sensor_data()
            json_data = json.dumps(data)
            client_socket.sendall(json_data.encode('utf-8'))
            client_socket.close()  # 关闭当前连接
    except KeyboardInterrupt:
        print("模拟器已停止")
    finally:
        server_socket.close()
​
if __name__ == '__main__':
    start_sensor_server()
​

2.2🧩 功能目标

通过 Django 后端连接本地 socket 模拟器程序，将接收到的数据通过接口返回给 Vue 前端页面进行展示。

2.3🧱 系统结构简述

Vue3 (前端页面)
    ⇅ Axios 请求
Django 后端接口
    ⇅ socket 通信
传感器模拟器（本地监听端口）

2.4✅ 实现步骤（附代码）

2.4.1步骤1：Django 视图中添加获取模拟传感器数据的接口
def get_sensor_data(request):
    try:
        # 创建 socket 客户端连接本地监听端口
        with socket.create_connection(("127.0.0.1", 9000), timeout=5) as client:
            # 接收数据（1024字节）
            received_data = client.recv(1024).decode('utf-8')
            parsed_data = json.loads(received_data)  # ✅ 转为 dict
            return JsonResponse({"status": "success", "data": parsed_data})
    except Exception as e:
        return JsonResponse({"status": "error", "message": str(e)})
2.4.2步骤2：配置 Django URL 路由
path('api/sensor-data/', views.get_sensor_data, name='get_sensor_data')
2.4.3步骤3：前端 Vue3 使用 Axios 获取数据
<template>
    <div class="sensor-view">
        <h2>实时传感器数据</h2>
​
        <div v-if="error" class="error">{{ error }}</div>
​
        <div v-else-if="!sensorData || Object.keys(sensorData).length === 0" class="loading">加载中...</div>
​
        <div v-else class="sensor-data">
            <p><strong>温度：</strong>{{ sensorData.temperature }} ℃</p>
            <p><strong>湿度：</strong>{{ sensorData.humidity }} %</p>
            <p><strong>光照强度：</strong>{{ sensorData.light }}</p>
            <p><strong>气压：</strong>{{ sensorData.pressure }}</p>
            <p><strong>时间戳：</strong>{{ sensorData.timestamp }}</p>
        </div>
​
        <button @click="fetchData">刷新</button>
    </div>
</template>
​
<script setup>
import { ref, onMounted } from 'vue'
import { getSensorData } from '@/api/sensor_data'
​
const sensorData = ref(null)
const error = ref(null)
​
const fetchData = async () => {
    try {
        const res = await getSensorData()
        console.log('传感器数据：', res.data)
        if (res.data.status === 'success') {
            sensorData.value = res.data.data
            error.value = null
        } else {
            error.value = res.data.message || '数据异常'
        }
    } catch (err) {
        error.value = '请求失败：' + err.message
        console.error(err)
    }
}
​
onMounted(() => {
    fetchData()
    setInterval(fetchData, 2000)
})
</script>
​
<style scoped>
.sensor-view {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}
​
.sensor-data p {
    margin: 6px 0;
}
​
.error {
    color: red;
}
​
.loading {
    color: gray;
}
​
button {
    margin-top: 12px;
    padding: 6px 12px;
}
</style>
​
2.4.4完善2.4.3

想要让2.4.3中的组件在浏览器中能够正常显示，应该再做以下几个操作：

  1. Vue 前端通过 Axios 请求 Django 后端 API 接口。比如：

    axios.get('http://127.0.0.1:8000/api/sensor-data/')

    这样前端才能访问后端接口

  2. 因为前后端分别运行在不同端口，所以需要进行跨域配置：

    前端：

    1. 首先：需要配置axios

      操作步骤：

      1. 在src目录下创建api文件夹放置有关后端的接口函数：

      2. 创建axios.js文件：

        import axios from 'axios'
​
const instance = axios.create({
  baseURL: 'http://127.0.0.1:8000/api', // Django 后端地址
  timeout: 5000,
})
​
export default instance
​

      3. 就在全局中进行注册axios：main.js文件中

        // 全局挂载 axios 到 $axios
app.config.globalProperties.$axios = axios

      4. 为了和后端接口对应上：path('api/sensor-data/', views.get_sensor_data, name='get_sensor_data'),

        所以需要创建sensor_data.js文件中的接口函数：

        // 获取模拟传感器数据
export const getSensorData = () => {
  return request.get('sensor-data/')  // 实际访问的是 http://127.0.0.1:8000/api/sensor-data/
}

      5. 接下来写我们的传感器数据组件即可：

        <template>
    <div class="sensor-view">
        <h2>实时传感器数据</h2>
​
        <div v-if="error" class="error">{{ error }}</div>
​
        <div v-else-if="!sensorData || Object.keys(sensorData).length === 0" class="loading">加载中...</div>
​
        <div v-else class="sensor-data">
            <p><strong>温度：</strong>{{ sensorData.temperature }} ℃</p>
            <p><strong>湿度：</strong>{{ sensorData.humidity }} %</p>
            <p><strong>光照强度：</strong>{{ sensorData.light }}</p>
            <p><strong>气压：</strong>{{ sensorData.pressure }}</p>
            <p><strong>时间戳：</strong>{{ sensorData.timestamp }}</p>
        </div>
​
        <button @click="fetchData">刷新</button>
    </div>
</template>
​
<script setup>
import { ref, onMounted } from 'vue'
import { getSensorData } from '@/api/sensor_data'
​
const sensorData = ref(null)
const error = ref(null)
​
const fetchData = async () => {
    try {
        const res = await getSensorData()
        console.log('传感器数据：', res.data)
        if (res.data.status === 'success') {
            sensorData.value = res.data.data
            error.value = null
        } else {
            error.value = res.data.message || '数据异常'
        }
    } catch (err) {
        error.value = '请求失败：' + err.message
        console.error(err)
    }
}
​
onMounted(() => {
    fetchData()
    setInterval(fetchData, 2000)
})
</script>
​
<style scoped>
.sensor-view {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}
​
.sensor-data p {
    margin: 6px 0;
}
​
.error {
    color: red;
}
​
.loading {
    color: gray;
}
​
button {
    margin-top: 12px;
    padding: 6px 12px;
}
</style>
​

      6. 运行后我们可以发现并没有正确界面显示

      7. 所以这就是我接下来要说的：

        端口转发问题:

        配置 Vite 的开发代理

        打开或创建 vite.config.js 文件，然后添加如下配置：

        // vite.config.js
server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        // rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

      8. 同时我接下来要说的：

        我们每次需要跳转一个界面时都需要使用router（路由），所以我们需要再router下的index.js文件里面的内容完善以下：

        import SensorViewer from '../components/SensorViewer.vue'
{ path: '/sensor-view',name: 'SensorView',component: SensorViewer}

    后端：

    1. 首先：需要再settings.py文件中的INSTALLED_APPS中添加：

      "corsheaders"

      然后在MIDDLEWARE 中添加：

       "corsheaders.middleware.CorsMiddleware",

      注意：上面这行代码必须在：

      "django.middleware.common.CommonMiddleware",

      之前。

    2. 接着：

      配置允许的前端地址：

      CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",  # 允许 Vue 的端口
]

    3. 获取传感器数据的视图函数中：

      parsed_data = json.loads(received_data)  # ✅ 转为 dict

      将原本的字符串格式转换成为JSON格式。

      以JSON格式的数据传递给前端部分，然后前端获取标准数据格式后进行数据解析最终

      在页面中呈现数据

实现效果图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2384097.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

springboot IOC

springboot IOC

springboot IOC IoC Inversion of Control Inversion 反转 依赖注入 DI &#xff08;dependency injection &#xff09; dependency 依赖 injection 注入 Qualifier 预选赛 一文带你快速理解JavaWeb中分层解耦的思想及其实现&#xff0c;理解 IOC和 DI https://zhuanlan.…
阅读更多...
Ajax01-基础

Ajax01-基础

一、AJAX 1.AJAX概念 使浏览器的XMLHttpRequest对象与服务器通信 浏览器网页中&#xff0c;使用 AJAX技术&#xff08;XHR对象&#xff09;发起获取省份列表数据的请求&#xff0c;服务器代码响应准备好的省份列表数据给前端&#xff0c;前端拿到数据数组以后&#xff0c;展…
阅读更多...
生成树协议（STP）配置详解：避免网络环路的最佳实践

生成树协议（STP）配置详解：避免网络环路的最佳实践

生成树协议&#xff08;STP&#xff09;配置详解&#xff1a;避免网络环路的最佳实践 生成树协议&#xff08;STP&#xff09;配置详解&#xff1a;避免网络环路的最佳实践一、STP基本原理二、STP 配置示例&#xff08;华为交换机&#xff09;1. 启用生成树协议2. 配置根桥3. 查…
阅读更多...
面向 C 语言项目的系统化重构实战指南

面向 C 语言项目的系统化重构实战指南

摘要： 在实际开发中，C 语言项目往往随着功能演进逐渐变得混乱：目录不清、宏滥用、冗余代码、耦合高、测试少……面对这样的“技术债积累”，盲目大刀阔斧只会带来更多混乱。本文结合 C 语言的特点，从项目评估、目录规划、宏与内联、接口封装、冗余剔除、测试与 CI、迭代重构…
阅读更多...
Python Pandas库简介及常见用法

Python Pandas库简介及常见用法

Python Pandas库简介及常见用法 一、 Pandas简介1. 简介2. 主要特点&#xff08;一&#xff09;强大的数据结构&#xff08;二&#xff09;灵活的数据操作&#xff08;三&#xff09;时间序列分析支持&#xff08;四&#xff09;与其他库的兼容性 3.应用场景&#xff08;一&…
阅读更多...
第十六届蓝桥杯复盘

第十六届蓝桥杯复盘

文章目录 1.数位倍数2.IPv63.变换数组4.最大数字5.小说6.01串7.甘蔗8.原料采购 省赛过去一段时间了&#xff0c;现在复盘下&#xff0c;省赛报完名后一直没准备所以没打算参赛&#xff0c;直到比赛前两天才决定参加&#xff0c;赛前两天匆匆忙忙下载安装了比赛要用的编译器ecli…
阅读更多...
【已解决】HBuilder X编辑器在外接显示器或者4K显示器怎么界面变的好小问题

【已解决】HBuilder X编辑器在外接显示器或者4K显示器怎么界面变的好小问题

触发方式&#xff1a;主要涉及DPI缩放问题&#xff0c;可能在电脑息屏有概率触发 修复方式&#xff1a; 1.先关掉软件直接更改屏幕缩放&#xff0c;然后打开软件&#xff0c;再关掉软件恢复原来的缩放&#xff0c;再打开软件就好了 2.(不推荐&#xff09;右键HBuilder在属性里…
阅读更多...
直线型绝对值位移传感器：精准测量的科技利刃

直线型绝对值位移传感器：精准测量的科技利刃

在科技飞速发展的今天&#xff0c;精确测量成为了众多领域不可或缺的关键环节。无论是工业自动化生产线上的精细操作&#xff0c;还是航空航天领域中对零部件位移的严苛把控&#xff0c;亦或是科研实验中对微小位移变化的精准捕捉&#xff0c;都离不开一款高性能的测量设备——…
阅读更多...
Ansible模块——管理100台Linux的最佳实践

Ansible模块——管理100台Linux的最佳实践

使用 Ansible 管理 100 台 Linux 服务器时&#xff0c;推荐遵循以下 最佳实践&#xff0c;以提升可维护性、可扩展性和安全性。以下内容结合实战经验进行总结&#xff0c;适用于中大型环境&#xff08;如 100 台服务器&#xff09;&#xff1a; 一、基础架构设计 1. 分组与分层…
阅读更多...
从0开始学习大模型--Day09--langchain初步使用实战

从0开始学习大模型--Day09--langchain初步使用实战

众所周知&#xff0c;一味地学习知识&#xff0c;所学的东西和概念都是空中楼阁&#xff0c;大部分情况下&#xff0c;实战都是很有必要的&#xff0c;今天就通过微调langchain来更深刻地理解它。 中间如何进入到langchain界面请参考结尾视频链接。 首先&#xff0c;进入界面…
阅读更多...
C++中的菱形继承问题

C++中的菱形继承问题

假设有一个问题&#xff0c;类似于鸭子这样的动物有很多种&#xff0c;如企鹅和鱿鱼&#xff0c;它们也可能会有一些共同的特性。例如&#xff0c;我们可以有一个叫做 AquaticBird &#xff08;涉禽&#xff0c;水鸟的一类&#xff09;的类&#xff0c;它又继承自 Animal 和 Sw…
阅读更多...
网络-MOXA设备基本操作

网络-MOXA设备基本操作

修改本机IP和网络设备同网段&#xff0c;输入设备IP地址进入登录界面&#xff0c;交换机没有密码&#xff0c;路由器密码为moxa 修改设备IP地址 交换机 路由器 环网 启用Turbo Ring协议&#xff1a;在设备的网络管理界面中&#xff0c;找到环网配置选项&#xff0c;启用Turb…
阅读更多...
飞桨paddle import fluid报错【已解决】

飞桨paddle import fluid报错【已解决】

跟着飞桨的安装指南安装了paddle之后 pip install paddlepaddle有一个验证&#xff1a; import paddle.fluid as fluid fluid.install check.run check()报错情况如下&#xff0c;但是我在pip list中&#xff0c;确实看到了paddle安装上了 我import paddle别的包&#xff0c…
阅读更多...
测试工程师要如何开展单元测试

测试工程师要如何开展单元测试

单元测试是软件开发过程中至关重要的环节&#xff0c;它通过验证代码的最小可测试单元(如函数、方法或类)是否按预期工作&#xff0c;帮助开发团队在早期发现和修复缺陷&#xff0c;提升代码质量和可维护性。以下是测试工程师开展单元测试的详细步骤和方法&#xff1a; 一、理…
阅读更多...
IPv4 地址嵌入 IPv6 的前缀转换方式详解

IPv4 地址嵌入 IPv6 的前缀转换方式详解

1. 概述 在 IPv4 和 IPv6 网络共存的过渡期&#xff0c;NAT64&#xff08;Network Address Translation 64&#xff09;是一种关键技术&#xff0c;用于实现 IPv6-only 网络与 IPv4-only 网络的互操作。NAT64 前缀转换通过将 IPv4 地址嵌入到 IPv6 地址中&#xff0c;允许 IPv…
阅读更多...
野火鲁班猫(arrch64架构debian)从零实现用MobileFaceNet算法进行实时人脸识别（三）用yolov5-face算法实现人脸检测

野火鲁班猫(arrch64架构debian)从零实现用MobileFaceNet算法进行实时人脸识别（三）用yolov5-face算法实现人脸检测

环境直接使用第一篇中安装好的环境即可 先clone yolov5-face项目 git clone https://github.com/deepcam-cn/yolov5-face.git 并下载预训练权重文件yolov5n-face.pt 网盘链接: https://pan.baidu.com/s/1xsYns6cyB84aPDgXB7sNDQ 提取码: lw9j &#xff08;野火官方提供&am…
阅读更多...
【图像生成大模型】HunyuanVideo：大规模视频生成模型的系统性框架

【图像生成大模型】HunyuanVideo：大规模视频生成模型的系统性框架

HunyuanVideo&#xff1a;大规模视频生成模型的系统性框架 引言HunyuanVideo 项目概述核心技术1. 统一的图像和视频生成架构2. 多模态大语言模型&#xff08;MLLM&#xff09;文本编码器3. 3D VAE4. 提示重写&#xff08;Prompt Rewrite&#xff09; 项目运行方式与执行步骤1. …
阅读更多...
如何使用Java生成pdf报告

如何使用Java生成pdf报告

文章目录 一、环境准备与Maven依赖说明二、核心代码解析1. 基础文档创建2. 中文字体处理3. 复杂表格创建4. 图片插入 三、完整代码示例四、最终效果 这篇主要说一下如何使用Java生成pdf&#xff0c;包括标题&#xff0c;文字&#xff0c;图片&#xff0c;表格的插入和调整等相关…
阅读更多...
人脸识别备案开启安全防护模式！紧跟《办法》！

人脸识别备案开启安全防护模式！紧跟《办法》！

国家互联网信息办公室与公安部于 2025 年 3 月 13 日联合公布了《人脸识别技术应用安全管理办法》&#xff08;以下简称《办法》&#xff09;&#xff0c;并自 2025 年 6 月 1 日起正式施行。其中&#xff0c;人脸识别备案成为了规范技术应用、守护信息安全的关键一环。​ 一、…
阅读更多...
新浪《经济新闻》丨珈和科技联合蒲江政府打造“数字茶园+智能工厂+文旅综合体“创新模式

新浪《经济新闻》丨珈和科技联合蒲江政府打造“数字茶园+智能工厂+文旅综合体“创新模式

5月14日&#xff0c;新浪网《经济新闻》频道专题报道珈和科技在第十四届四川国际茶业博览会上的精彩亮相&#xff0c;并深度聚焦我司以数字技术赋能川茶产业高质量发展创新技术路径&#xff0c;及在成都市“茶业建圈强链”主题推介会上&#xff0c;珈和科技与蒲江县人民政府就智…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023