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

对应文章：进一步完善前端框架搭建及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)  # ✅ 转为 dictreturn 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.dataerror.value = null} else {error.value = res.data.message || '数据异常'}} catch (err) {error.value = '请求失败：' + err.messageconsole.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.dataerror.value = null} else {error.value = res.data.message || '数据异常'}} catch (err) {error.value = '请求失败：' + err.messageconsole.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.mzph.cn/pingmian/81713.shtml

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

相关文章

牛客网NC209794:使徒袭来

牛客网NC209794:使徒袭来

牛客网NC209794:使徒袭来 题目背景 问题分析 数学建模 设三位驾驶员的战斗力分别为 a, b, c已知条件&#xff1a;a b c n (n为输入的正整数)目标&#xff1a;求 a b c 的最小值 解题思路 根据算术-几何平均值不等式(AM-GM不等式)&#xff0c;对于任意正实数a, b, c&a…
阅读更多...
动态规划之爬楼梯模型

动态规划之爬楼梯模型

文章目录 爬楼梯模型LeetCode 746. 使用最小花费爬楼梯思路Golang 代码 LeetCode 377. 组合总和 Ⅳ思路Golang 代码 LeetCode 2466. 统计构造好字符串的方案数思路Golang 代码 LeetCode 2266. 统计打字方案数思路Golang 代码 爬楼梯模型 爬楼梯模型是动态规划当中的一个经典模型…
阅读更多...
【每天一个知识点】湖仓一体（Data Lakehouse）

【每天一个知识点】湖仓一体（Data Lakehouse）

“湖仓一体”&#xff08;Data Lakehouse&#xff09;是一种融合了数据湖&#xff08;Data Lake&#xff09;与数据仓库&#xff08;Data Warehouse&#xff09;优势的新型数据架构。它既继承了数据湖对多类型数据的灵活存储能力&#xff0c;也具备数据仓库对结构化数据的高效查…
阅读更多...
Linux | mdadm 创建软 RAID

Linux | mdadm 创建软 RAID

注&#xff1a;本文为 “Linux mdadm RAID” 相关文章合辑。 略作重排&#xff0c;未整理去重。 如有内容异常&#xff0c;请看原文。 Linux 下用 mdadm 创建软 RAID 以及避坑 喵ฅ・&#xfecc;・ฅ Oct 31, 2023 前言 linux 下组软 raid 用 mdadm 命令&#xff0c;multi…
阅读更多...
Unity自定义shader打包SpriteAtlas图集问题

Unity自定义shader打包SpriteAtlas图集问题

Unity打包图集还是有一些坑的&#xff0c;至于图集SpriteAtlas是什么请参考我之前写的文章&#xff1a;【Sprite Atlas】Unity新图集系统SpriteAtlas超详细使用教程_spriteatlas 使用-CSDN博客 问题&#xff1a; 今天碰到的问题是&#xff0c;shader绘制的时候&#xff0c;因…
阅读更多...
如何用 OceanBase 的 LOAD DATA 旁路导入进行大表迁移

如何用 OceanBase 的 LOAD DATA 旁路导入进行大表迁移

前言 在日常工作中&#xff0c;我们时常会遇到需要将某个大数据量的单表进行迁移的情况。在MySQL中&#xff0c;针对这样的大表&#xff0c;我们通常会选择先将原表导出为csv格式&#xff0c;然后利用LOAD DATA语法来导入csv文件&#xff0c;这种方法相较于mysqldump在效率上有…
阅读更多...
VR 互动实训的显著优势​

VR 互动实训的显著优势​

&#xff08;一&#xff09;沉浸式学习&#xff0c;提升培训效果​ 在 VR 互动实训中&#xff0c;员工不再是被动的知识接受者&#xff0c;而是主动的参与者。以销售培训为例&#xff0c;员工戴上 VR 设备&#xff0c;就能置身于逼真的销售场景中&#xff0c;与虚拟客户进行面对…
阅读更多...
OpenCV 第6课 图像处理之几何变换（重映射）

OpenCV 第6课 图像处理之几何变换（重映射）

1. 概述 简单来说，重映射就是把一副图像内的像素点按照规则映射到到另外一幅图像内的对应位置上去，形成一张新的图像。 因为原图像与目标图像的像素坐标不是一一对应的。一般情况下，我们通过重映射来表达每个像素的位置（x,y），像这样： g(x,y)=f(h(x,y)) 在这里g()是目标图…
阅读更多...
Java虚拟机 - 程序计数器和虚拟机栈

Java虚拟机 - 程序计数器和虚拟机栈

运行时数据结构 Java运行时数据区程序计数器为什么需要程序计数器执行流程虚拟机栈虚拟机栈作用虚拟机栈核心结构运行机制 Java运行时数据区 首先介绍Java运行时数据之前&#xff0c;我们要了解&#xff0c;对于计算机来说&#xff0c;内存是非常重要的资源&#xff0c;因为内…
阅读更多...
MySQL数据库——支持远程IP访问的设置方法总结

MySQL数据库——支持远程IP访问的设置方法总结

【系列专栏】&#xff1a;博主结合工作实践输出的&#xff0c;解决实际问题的专栏&#xff0c;朋友们看过来&#xff01; 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实…
阅读更多...
CSS- 4.6 radiu、shadow、animation动画

CSS- 4.6 radiu、shadow、animation动画

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。 HTML系列文章 已经收录在前端专栏&#xff0c;有需要的宝宝们可以点击前端专栏查看&#xff01; 点…
阅读更多...
排序算法之基础排序:冒泡,选择,插入排序详解

排序算法之基础排序:冒泡,选择,插入排序详解

排序算法之基础排序&#xff1a;冒泡、选择、插入排序详解 前言一、冒泡排序&#xff08;Bubble Sort&#xff09;1.1 算法原理1.2 代码实现&#xff08;Python&#xff09;1.3 性能分析 二、选择排序&#xff08;Selection Sort&#xff09;2.1 算法原理2.2 代码实现&#xff…
阅读更多...
第十节第一部分：常见的API：Math、System、Runtime

第十节第一部分：常见的API：Math、System、Runtime

Math类介绍及常用方法&#xff08;了解知道即可&#xff09; System类介绍及常用方法&#xff08;了解知道即可&#xff09; Runtime类介绍及常用方法&#xff08;了解知道即可&#xff09; 代码&#xff1a; 代码一&#xff1a;Math类 package com.itheima.d14_math;public …
阅读更多...
智能体间协作的“巴别塔困境“如何破解？解读Agent通信4大协议：MCP/ACP/A2A/ANP

智能体间协作的“巴别塔困境“如何破解？解读Agent通信4大协议：MCP/ACP/A2A/ANP

AI 智能体的兴起触发了AI应用协作的新领域。这些智能体不再局限于被动的聊天机器人或独立的系统&#xff0c;它们现在被设计用于推理、计划和协作ーー跨任务、跨域甚至跨组织。但随着这一愿景成为现实&#xff0c;一个挑战很快浮出水面&#xff1a; 智能体如何以一种安全、可伸…
阅读更多...
项目进度延误，如何按时交付？

项目进度延误，如何按时交付？

项目进度延误可以通过加强计划管理、优化资源分配、强化团队沟通、设置关键里程碑和风险管理机制等方式来实现按时交付。加强计划管理、优化资源分配、强化团队沟通、设置关键里程碑、风险管理机制。其中&#xff0c;加强计划管理尤为关键&#xff0c;因为明确而详细的计划能提…
阅读更多...
详解ip地址、子网掩码、网关、广播地址

详解ip地址、子网掩码、网关、广播地址

1. IP 地址 定义&#xff1a;IP 地址是网络设备在网络中的唯一标识&#xff0c;用于标识设备的网络位置&#xff0c;类似于现实中的门牌号。它分为 IPv4&#xff08;如 192.168.1.5&#xff09;和 IPv6&#xff08;如 240e:305:3685:8100:a00:27ff:fefb:56b8&#xff09;。 示…
阅读更多...
为 Windows 和 Ubuntu 中设定代理服务器的详细方法

为 Windows 和 Ubuntu 中设定代理服务器的详细方法

有时下载大模型总是下载不出来&#xff0c;要配置代理才行 一、Windows代理设置 ① 系统全局代理设置 打开【设置】→【网络和Internet】→【代理】。 在【手动设置代理】下&#xff0c;打开开关&#xff0c;输入&#xff1a; 地址&#xff1a;10.10.10.215 端口&#xff1a;…
阅读更多...
鸿蒙OSUniApp 实现的表单验证与提交功能#三方框架 #Uniapp

鸿蒙OSUniApp 实现的表单验证与提交功能#三方框架 #Uniapp

UniApp 实现的表单验证与提交功能 前言 在移动端应用开发中&#xff0c;表单是用户与应用交互的重要媒介。一个好的表单不仅布局合理、使用方便&#xff0c;还应该具备完善的验证与提交功能&#xff0c;以确保用户输入的数据准确无误。本文将分享如何在 UniApp 中实现表单验证…
阅读更多...
前端的面试笔记——HTMLJavaScript篇（二）前端页面性能检测

前端的面试笔记——HTMLJavaScript篇（二）前端页面性能检测

前端页面性能检测和判定是优化用户体验的核心环节&#xff0c;需要结合实验室数据&#xff08;Lab Data&#xff09;、现场数据&#xff08;Field Data&#xff09;和行业标准综合评估。以下是主流方法、工具及判定标准的详细解析&#xff1a; 一、性能检测的核心维度与指标 …
阅读更多...
再来1章linux系列-19 防火墙 iptables 双网卡主机的内核 firewall-cmd firewalld的高级规则

再来1章linux系列-19 防火墙 iptables 双网卡主机的内核 firewall-cmd firewalld的高级规则

学习目标&#xff1a; 实验实验需求实验配置内容和分析 &#xff08;每一个设备的每一步操作&#xff09;实验结果验证其他 学习内容&#xff1a; 实验实验需求实验配置内容和分析 &#xff08;每一个设备的每一步操作&#xff09;实验结果验证其他 1.实验 2.实验需求 图…
阅读更多...
最新文章

Copyright @ 2022~2023