基于ESP8266、Golang、Vue3搭建个人气象站收集与简易数据看板平台

最新推荐文章于 2024-05-30 17:32:15 发布
最新推荐文章于 2024-05-30 17:32:15 发布
阅读量3.3k 收藏 11
点赞数 2
文章标签： golang 后端 前端 vue.js 物联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44668788/article/details/125642593
版权

目录

前言

这是一个简单，但是横跨嵌入式开发、后端Web开发、前端开发的项目。在开始之前，你可能需要了解Golang语言基础、Gin框架、MySQL基础、HTTP请求、Arduino、Vue3

需要注意的是，项目并没有完全实现所有接口，读者可以根据自己的需求修改调整

设计与架构

在这里插入图片描述本文使用ESP8266+DHT11作为温湿度的收集设备，使用Golang的Gin框架作为Web后端，使用Vue3作为前端数据展示。

环境要求

系统环境的配置较多，详情查看下面的表格,本文不会讲解关于环境配置的相关问题。此处以笔者的配置为例，笔者使用的是windows11系统

环境版本
node.js(nvm)16.15.1
golang1.18.3
mysql(docker)8.0.29-1debian10
redis(docker)7.0.2
arduino*

接口定义

title: 个人气象平台 v1.0.0
language_tabs:

  • shell: Shell
  • http: HTTP
  • javascript: JavaScript
  • ruby: Ruby
  • python: Python
  • php: PHP
  • java: Java
  • go: Go
    toc_footers: []
    includes: []
    search: true
    code_clipboard: true
    highlight_theme: darkula
    headingLevel: 2
    generator: “@tarslib/widdershins v4.0.15”

后端服务状态

GET ping测试

GET /server/ping

不限频率的接口，测试服务端是否存活，可用于服务看板

返回示例

成功

{
  "code": 0,
  "data": "pong",
  "msg": "ok"
}
返回结果
状态码状态码含义说明数据模型
200OK成功Inline
返回数据结构

状态码 200

名称类型必选约束中文名说明
» codeintegertruenonenone
» datastringtruenonenone
» msgstringtruenonenone

POST 服务端状态

POST /server/statue

监测服务端的基本状态，包括数据库延迟等，需要鉴权以及限制请求频率，防止过多请求，服务端被攻击。

请求参数
名称位置类型必选说明
MACheaderstring是MAC地址
SNheaderstring是设备编码

返回示例

成功

{
  "code": 0,
  "msg": "ok",
  "data": {
    "to_mysql": 13.9,
    "to_redis": 21.8,
    "to_hyper": 30.8
  }
}
返回结果
状态码状态码含义说明数据模型
200OK成功Inline
返回数据结构

状态码 200

名称类型必选约束中文名说明
» codeintegertruenonenone
» msgstringtruenonenone
» dataobjecttruenonenone
»» to_mysqlnumbertruenoneMySQL读写延迟
»» to_redisnumbertruenoneRedis读写延迟
»» to_hypernumberfalsenone心知天气API延迟

数据上报

POST 数据收集平台数据上报

POST /record/upload

Body 请求参数

{
  "temperature": 0,
  "humidity": 0
}
请求参数
名称位置类型必选说明
SNheaderstring是设备注册ID
bodybodyobject否none
» temperaturebodyinteger是none
» humiditybodynumber是none

返回示例

成功

{
  "code": 0,
  "data": null,
  "msg": "ok"
}
返回结果
状态码状态码含义说明数据模型
200OK成功Inline
返回数据结构

状态码 200

名称类型必选约束中文名说明
» codeintegertruenonenone
» datanulltruenonenone
» msgstringtruenonenone

数据提供

GET 现在的温湿度

GET /data/new

返回示例

成功

{
  "code": 0,
  "data": {
    "temperature": 0,
    "humidity": 0,
    "time": ""
  },
  "msg": "ok"
}
返回结果
状态码状态码含义说明数据模型
200OK成功Inline
返回数据结构

状态码 200

名称类型必选约束中文名说明
» codeintegertruenonenone
» dataobjecttruenonenone
»» temperatureintegertruenonenone
»» humidityintegertruenonenone
»» timestringtruenonenone
» msgstringtruenonenone

POST 历史数据

POST /data/history

Body 请求参数

{
  "start_time": 0,
  "end_time": 0
}
请求参数
名称位置类型必选说明
bodybodyobject否none
» start_timebodyinteger是none
» end_timebodyinteger是none

返回示例

成功

{
  "code": 0,
  "data": [
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    },
    {
      "temperature": 1,
      "humidity": 90,
      "time": "2022-07-05T21:38:46+08:00"
    }
  ],
  "msg": "ok"
}
返回结果
状态码状态码含义说明数据模型
200OK成功Inline
返回数据结构

状态码 200

名称类型必选约束中文名说明
» codeintegertruenonenone
» data[object]truenonenone
»» temperatureintegertruenonenone
»» humidityintegertruenonenone
»» timeintegertruenonenone
» msgstringtruenonenone

数据模型

基本返回结构




{
  "code": 0,
  "msg": "string",
  "data": "string"
}
属性
名称类型必选约束中文名说明
codeintegertruenonenone
msgstringtruenonenone
datastringtruenonenone

数据收集平台制作

设备平台

  • ESP8266(带底板)
  • DHT11温湿度传感器（带底板3脚）
  • 杜邦线若干

物理连接

使用ESP8266的GPIO14接口作为传感器的信号线
如果您的ESP8266带底板，可以参考下图中的引脚对应关系，或查询自己所购买主板的说明文档
在这里插入图片描述
本文使用的DHT11传感器也带底板，引脚数为3，如图
在这里插入图片描述

连接对应表

ESP8266DHT11
D5(GPIO14)DATA
3VVCC
GNDGND

程序编写

首先新建一个空项目

// The setup() function runs once each time the micro-controller starts
void setup() {

}

// Add the main program code into the continuous loop() function
void loop() {

}

添加网络连接，需要使用ESP8266WiFi.h
具体可以查看代码注释，注意需要修改WIFI配置

#include <ESP8266WiFi.h>

// 设置WIFI连接参数，记得更改
#ifndef STASSID
#define STASSID "XXXX"      // WIFI连接SSID
#define STAPSK  "XXXXXXXX" // WIFI连接密码
#endif

void setup() {
	// 设置WIFI连接参数，并开始连接
	WiFi.begin(STASSID, STAPSK);
	
	// 循环检测WIFI连接状态，是否连接成功
	while (WiFi.status() != WL_CONNECTED) {
		delay(500);
	}
}

void loop() {
    if ((WiFi.status() == WL_CONNECTED)) {
		// 接下来会在此处添加处理程序
    }
	
}

你们会注意到在loop函数中，我们依旧会判断WIFI连接是否正常，以防连接断开。

添加获取温度，需要使用SimpleDHT.h
需要注意读取频率，DHT11限制为1Hz，但是我们读取的颗粒精度不需要这么精细，我们会在每一个循环休眠2s

#include <ESP8266WiFi.h>
#include <SimpleDHT.h>
// 设置WIFI连接参数，记得更改
#ifndef STASSID
#define STASSID "XXXX"      // WIFI连接SSID
#define STAPSK  "XXXXXXXX" // WIFI连接密码
#endif

// DHT11对象
int pinDHT11 = 14;
SimpleDHT11 dht11(pinDHT11);

void setup() {
	// 设置WIFI连接参数，并开始连接
	WiFi.begin(STASSID, STAPSK);
	
	// 循环检测WIFI连接状态，是否连接成功
	while (WiFi.status() != WL_CONNECTED) {
		delay(500);
	}
}

void loop() {
    if ((WiFi.status() == WL_CONNECTED)) {
		// 从DHT11获取温度
		byte temperature = 0; //温度
		byte humidity = 0;    //湿度
		// 读取数据，并写入
		dht11.read(&temperature, &humidity, NULL);
		
    }
	
	// 休眠2秒
	delay(2000);
	
}

我们成功的读取了温湿度数据，但是总有可能导致数据读取失败，需要我们判断温度是否读取失败，然后在短时间内重试

#include <ESP8266WiFi.h>
#include <SimpleDHT.h>
// 设置WIFI连接参数，记得更改
#ifndef STASSID
#define STASSID "XXXX"      // WIFI连接SSID
#define STAPSK  "XXXXXXXX" // WIFI连接密码
#endif

// DHT11对象
int pinDHT11 = 14;
SimpleDHT11 dht11(pinDHT11);

void setup() {
	// 设置WIFI连接参数，并开始连接
	WiFi.begin(STASSID, STAPSK);
	
	// 循环检测WIFI连接状态，是否连接成功
	while (WiFi.status() != WL_CONNECTED) {
		delay(500);
	}
}

void loop() {
    if ((WiFi.status() == WL_CONNECTED)) {
		// 从DHT11获取温度
		byte temperature = 0; //温度
		byte humidity = 0;    //湿度
		int err = SimpleDHTErrSuccess; //错误码
		// 读取数据，并写入
		if ((err = dht11.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) {
			// 如果读取错误，就在短时间内重试
			delay(800);
			return;
		}
		
    }
	
	// 休眠2秒
	delay(2000);
	
}

接下来，我们会向服务器发送请求，并完成所有的嵌入式代码

完整的代码如下：

#include <ESP8266HTTPClient.h>
#include <ESP8266WiFi.h>
#include <SimpleDHT.h>

#define SERVER_IP "weather.station.ptianya.top" // 后端服务的位置


// 设置WIFI连接参数，记得更改
#ifndef STASSID
#define STASSID "XXXX"      // WIFI连接SSID
#define STAPSK  "XXXXXXXX" // WIFI连接密码
#endif

// DHT11对象
int pinDHT11 = 14;
SimpleDHT11 dht11(pinDHT11);

void setup() {
	// 设置WIFI连接参数，并开始连接
	WiFi.begin(STASSID, STAPSK);
	
	// 循环检测WIFI连接状态，是否连接成功
	while (WiFi.status() != WL_CONNECTED) {
		delay(500);
	}
}

void loop() {
    if ((WiFi.status() == WL_CONNECTED)) {
		// 从DHT11获取温度
		byte temperature = 0; //温度
		byte humidity = 0;    //湿度
		int err = SimpleDHTErrSuccess; //错误码
		// 读取数据，并写入
		if ((err = dht11.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) {
			// 如果读取错误，就在短时间内重试
			delay(800);
			return;
		}
		
		WiFiClient client;
		HTTPClient http;

		// 设置请求路由
		http.begin(client, "http://" SERVER_IP "/record/upload"); //HTTP
		// 设置请求头
		http.addHeader("Content-Type", "application/json");
		http.addHeader("sn", "9d0dd9f2e3bc");
		// 设置Body
		char body[1024];
		snprintf(body, sizeof(body), "{\"temperature\":%d,\"humidity\":%d}", (int)temperature, (int)humidity);
		// 开始请求
		int httpCode = http.POST(body);

		// httpCode will be negative on error

		http.end();
    }
	
	// 休眠2秒
	delay(2000);
	
}

后端部分实现

目前，后端项目已经开源在了Github上，具体可以访问源码，具体说明，可以查看项目文档

前端部分实现

前端部分大致只修改了App.vue部分，故直接在此处贴出代码
需要使用arco的组件库
并修改文中的服务地址

<template>
  <div class = main>
    <a-space size="large">
      <a-statistic :value=temperature :precision="1" show-group-separator :value-style="{ color: temperature_color }">
        <template #suffix>&#8451</template>
        <template #title>温度</template>
      </a-statistic>
      <a-statistic title="湿度" :value=humidity :precision="2" :value-style="{ color: humidity_color }">
        <template #suffix>%</template>
      </a-statistic>
    </a-space>
  </div>
  <div id="update_time_div">
    <a-space>
      <a-statistic title="更新时间" :value=time format="YYYY-MM-DD HH:mm:ss" id="update_time" animation>
      </a-statistic>
    </a-space>
  </div>
</template>



<script>
import axios from 'axios'
import dayjs from 'dayjs'
export default {
  mounted() {
    this.getData()
    setInterval(() => {
      this.getData()
    }, 2000)
  },
  data() {
    return {
      temperature: -999,
      humidity: -99.99,
      time: '',
      temperature_color: '#0fbf60',
      humidity_color: '#0fbf60',
    }
  },
  methods: {
    getData() {
      axios.get("http://XXXX").then(res => {
        this.temperature = res.data.data.temperature
        this.humidity = res.data.data.humidity
        this.time = dayjs(res.data.data.time)
        if (this.temperature < 10) {
          this.temperature_color = '#3491FA'
        } else if (this.temperature >= 30) {
          this.temperature_color = '#F53F3F'
        } else {
          this.temperature_color = '#0fbf60'
        }
        if (this.humidity < 58) {
          this.humidity_color = '#F53F3F'
        } else if (this.humidity > 80) {
          this.humidity_color = '#3491FA'
        } else {
          this.humidity_color = '#0fbf60'
        }
      })
    }
  }
}

</script>

<style>
.main {
  margin: 0 auto;
  text-align: center;
}

#update_time .arco-statistic-value {
  font-size: 16px;
}

#update_time_div {
  margin-top: 20px;
}
</style>
TianeoY
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
esp32-transpiler：将Golang转换为Arduino代码以在您的IoT项目中使用全自动测试
01-31
ESP32编译器 目的 易于使用。 但是我在更复杂的物联网项目中遇到了诸如可维护性和可测试性的问题。 在通过手动100％进行代码功能测试之前，我需要编译并刷新ESP32。 该解决方案将Golang转换为Arduino代码，可以使用ESP32工具链将其编译为图像。 现在，我可以使用全自动测试方法，而无需100％手动进行。 重要事项： Transpiler仅支持一小部分。 查看和以获取当前功能。 也不可能触发C / C ++垃圾回收，因为Golang会自动在“后台”处理它。 Go字符串将被转换为C常量char数组，可以在堆栈上处理。 安装 go get -u github.com/andygeiss/esp32-transpiler 用法 Usage of esp32-transpiler: -source string Golang source file -target string Arduino sketch file
TinyGo：使用golang 开发硬件设备控制，调用gpio，spi，i2c，avr等协议
freewebsys的专栏
01-10 7184
目录前言1，关于TinyGo2，使用3，总结 前言 本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/81665552 未经博主允许不得转载。 博主地址是：http://blog.csdn.net/freewebsys 1，关于TinyGo TinyGo是一个Go编译器，旨在用于微控制器，WebAssembly（WASM）和命...
vue3 + ts + svg + ECharts 实现双十一数据大屏
最新发布
djemx2025的博客
05-30 902
💡 欢迎加入「」，一起学习交流前端和Node端技术。
机器人开发--ESP32
天道酬勤
03-17 2702
机器人开发--ESP321 ESP32介绍1.1 简介1.2 ESP32-D0WD2 同类芯片对比3 开发环境3.1 乐鑫官方的ESP-IDF3.2 乐鑫官方的 Arduino 开发工具包3.3 MicroPython3.4 TinyGo其他4 ESP32应用4.1 物联网（C\Lua\microPython+MQTT）4.2 机器人（与树莓派做机器狗控制）参考 1 ESP32介绍 1.1 简介 ESP32是乐鑫科技研发的芯片。乐鑫科技是一家全球化的无晶圆厂半导体公司，成立于 2008 年，并于2019年
ESP32学习一：搭建开发环境
d短笛b的博客
01-16 3500
ESP32选择
golang物联网_使用golang谷歌云平台和grafana监控物联网设备
weixin_26716079的博客
08-30 1972
golang物联网In this article, we’ll be setting up step by step, a monitoring environment for IoT devices with an Arduino based board (ESP32), Grafana, and Google Cloud Platform tools. We’ll be using other...
基于golang+vue搭建小说书城.zip
02-28
【标题】"基于golang+vue搭建小说书城"揭示了这个项目是使用Go语言（golang）作为后端开发语言，Vue.js作为前端框架来构建一个在线小说平台。Go语言以其高性能、简洁的语法和内置并发支持在服务器端开发中越来越受...
基于Golang和Vue的文件管理系统源码.zip
05-27
这是一个基于Golang后端和Vue.js前端开发的文件管理系统的源码包。下面将详细介绍这个系统的核心技术和实现原理。 **Golang（Go语言）** Golang是Google开发的一种静态类型、编译型、并发型、垃圾回收的编程语言。...
基于go+vue实现的golang每日新闻数据浏览与检索平台(推荐)
09-20
gonews是基于 go+vue 实现的golang每日新闻浏览与检索平台，本文通过实例代码给大家讲解，介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧
go-admin一个基于golang的快速搭建可视化数据管理后台的框架源代码
03-07
go-admin是一个基于golang的快速搭建可视化数据管理后台的框架。它具有以下特点： 1. 高生产效率: 使用go-admin，您可以在短短10分钟内创建一个漂亮的管理后台。这大大提高了开发效率，让您能够更快地完成项目。 2. ...
基于golang快速搭建可视化数据管理后台的框架源码.zip
10-28
基于golang快速搭建可视化数据管理后台的框架源码.zip基于golang快速搭建可视化数据管理后台的框架源码.zip基于golang快速搭建可视化数据管理后台的框架源码.zip基于golang快速搭建可视化数据管理后台的框架源码.zip
esptool:用#golang 编写的 esptool.py 替换
05-29
工具 这是一项正在进行的工作，尚未经过全面测试 我将我的固件与此工具捆绑在一起以提供独立的更新实用程序，我更喜欢它在客户硬件上远程执行代码OTA 更新。 汇编 go get github.com/fluepke/esptool cd ${GOPATH- $HOME / go} /src/github.com/fluepke/esptool go build ./esptool < args> 用法 它目前仅适用于Linux ，因为 Microsoft(r) Windows(tm)(c) 不支持 termios。 关于 MacOS：给我买一台 macbook。 Esptool 提供以下子命令： version：显示版本信息并退出 info：从芯片中检索各种信息 flashRead：读取闪存内容 flashWrite：写入闪存内容 要查看帮助，请键入./esptool <subcomma
taskgo：快速简单的基于终端的看板董事会经理
02-05
Taskgo 快速简单的基于终端的看板经理 演示版 产品特点 Vim风格按键 Markdown文件来存储数据 安装 注意：当前，安装taskgo的唯一方法是从源代码进行构建。 确保已在系统上正确进行并且$PATH变量（对于linux / macOS）或Windows的环境变量中有$GOPATH/bin 。 $ go get github.com/singalhimanshu/taskgo 这将在$GOPATH/bin目录下创建taskgo二进制文件。 用法 只需运行taskgo 。 这将在当前目录中创建一个taskgo.md文件。 键绑定 您可以按? 在应用程序本身中查看按键绑定。 但
arduino+esp8266+onenet+mqtt_【零基础学物联网】MQTT篇 16 ESP8266发布MQTT消息
weixin_39638929的博客
11-28 310
到目前为止，我们已经学习了发布和订阅MQTT消息的基本知识，这节课我们来将目前所学的知识应用到实际操作中。我们将要利用ESP8266来实现最基本的MQTT消息发布。本节课的学习将需要您掌握ESP8266的基本操作，假如您对ESP8266的基本操作不太了解，您可以先通过以下小程序观看我们制作的《零基础入门学用物联网 - 基础知识篇》。假如您已经完成以上教程，那么接下来您就可以继续这节课的学...
ESP32入门 一(从零开始)
Byte Madman
01-15 7212
在前面的文章中，简单地介绍了ESP32开发板和开发环境，从本文开始，正式进入ESP32的开发，如果你对于编程方面并没有经验也没问题，开始可以复制粘贴代码来尝试着使用你的开发板。文章也会尽量少用专业术语或艰涩难懂的语气来介绍ESP32的开发。首先，每个人所购买的开发板可能不尽相同，开发板有不同的版本，也存在个人或厂家设计开发的异形开发板，从指甲盖大小到模块化的，从十多块到上百块的。如果入门学习的话，个人的建议是购买时注意该商品的评价就好了，同时，因为有的版本可能是没有WIFI或蓝牙模块的。
手把手教你学ESP32开发-第一篇：ArduinoIDE+ESP32搭环境
热门推荐
Smile_h_ahaha的博客
01-23 2万+
手把手教零基础小白学基于乐鑫芯片的ESP32开发，开发板选用WIFI和蓝牙双模。从安装配置到编程实例，我们的目标是开发物联网平台，给家里搭建一套智能家居系统。
快速入门ESP32——开发环境配置Arduino IDE
mucherry的博客
11-09 1万+
带你快速入门ESP32——arduino环境配置
vue前端显示+Mqtt+esp8266
qq_25468779的博客
06-26 881
通过ESP8266读取DH11传感器的温度和湿度，发送至MQTT服务器，在Vue界面显示。
Arduio ESP8266将DHT11温湿度传感器数据在网页上显示
perseverance51博客
12-09 3226
Arduio ESP8266将DHT11温湿度传感器数据在网页上显示 页面显示 温湿度传感器 nodemcu 接线说明 DHT11 ----ESP8266 Data-----D7(gpio13) 串口打印数据 实例代码 #include <ESP8266WiFi.h> #include <ESPAsyncTCP.h> #include <ESPAsyncWebServer.h> #include <Adafruit_Sensor.h> #
从零搭建基于golang的个人博客网站
05-31
搭建一个基于 Golang 的个人博客网站需要进行以下步骤： 1. 安装 Golang 环境：首先需要在本地安装 Golang 环境，并配置好环境变量。 2. 选择框架：Golang 有很多开源的框架可以选择，比如 Gin、Beego、Echo 等等。这里我们选择 Gin 框架。 3. 设计数据库：需要设计数据库，包括文章、标签、评论、用户等数据表。 4. 编写代码：根据设计好的数据库表结构，编写数据模型和数据访问层的代码。同时编写控制器和路由。 5. 前端页面：根据设计的页面 UI，编写前端页面，可以使用现成的模板引擎，如 Golang 自带的 html/template。 6. 部署：将代码部署到服务器上，并配置好数据库和服务器环境。 这些步骤完成后，你就可以访问你的个人博客网站了。当然，还有很多细节需要处理，比如安全性、SEO 等等，需要根据实际情况进行处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值