关于vue.js:闲来无事夏天防止花被渴死

49次阅读

共计 5187 个字符，预计需要花费 13 分钟才能阅读完成。

前段时间，办了一张流量卡。
有了新的手机号码那就能够薅一波资本主义的羊毛了，所以我在京东上应用 0.1 大洋包邮的价格喜提了一个多肉，（在此之前我养过挺多的花，所有的都是忘了浇水被渴死了）此次痛并思痛，肯定要让我 0.1 大洋的的多肉看到明年的太阳。

养花简直不必管，只须要两件事

短缺的阳光：我当初住的间隔太阳还是挺近的，阳光的事件不必放心。
有养分的土和短缺的水：土比拟好搞定，去小区的花坛外面扣点就行了，次要就是水，常常想不起来去浇水，所以得搞一个能晓得土壤湿度的货色，揭示我浇水。

我的思路如下
收集数据 - 首先手机花盆外面的土壤湿度
存储数据 - 将花盆的湿度进行长久化存储
数据展现告诉 - 页面通过读取长久化存储的信息展现进去，并能够设定一个预警值，在肯定的规定上面告诉到我

收集数据

我的这个实现思路也算是传说中的物联网了，毕竟花盆都上网了嘛，当初实现这种的板子有很多，那个便宜来那个就行了。
通过百度一下，抉择了 ESP8266-NodeMCU + 湿度传感器作为数据收集形式（为啥抉择这个呢？因为便宜啊，还自带 wifi 能上网。硬件真便宜，一共 20 块搞定，还包邮），esp8266 能够应用 Arduino 进行开发，语法跟 c 差不多，库啥的本人搜搜吧，我也是本人搜的。俺看的是这个教程

收集数据次要是干两件事：1. 读取湿度，2. 上报数据
代码如下

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <ArduinoJson.h>
// 读取温度
#define PIN_AO A0  // 土壤传感器 AO 接 ESP8266 引脚 A0
//#define PIN_DO 4  // 湿度高于设定值时，DO 输入高电平，模块提醒灯亮

int M0 = 1024;  // 在空气中 AO 读取的值最大为 1024，代表干燥时的读数
int M1 = 164;   // 浸泡在水里的最小值 464（最小值会扭转），代表 100% 湿度

float i=0;
float j=0;

#define SERVER_IP "http:// 局域网 ip:3001/sendCurrentTemp"

const char* name = "名字";               // 这里改成你的设施以后环境下要连贯的接入点名字
const char* password = "明码";  // 这里改成你的设施以后环境下要连贯的接入点明码
// 上报工夫距离
int outTime = 1000 * 60 * 5;
// int outTime = 1000 * 60;
void setup() {
  // 设置引脚
  pinMode(PIN_AO, INPUT);

  Serial.begin(115200);  // 启动串口通信，波特率设置为 115200

  Serial.println("未连贯");


  Serial.println("开始连贯");

  WiFi.begin(name, password);
  Serial.print("正在连接到");
  Serial.print(name);

  while (WiFi.status() != WL_CONNECTED)  // 断定网络状态
  {delay(500);

    Serial.print("网络连接胜利");

    Serial.print("连贯到的接入点名字:");

    Serial.println(name);  // 告知用户建设的接入点 WiFi 名

    Serial.print("连贯到的接入点明码:");

    Serial.println(password);  // 显示用户建设的接入点 WiFi 明码

    Serial.print("无线模式胜利开启，网络连接胜利");
  }
  if (WiFi.status() == WL_CONNECTED) {Serial.print("无线 IP 地址为:");
    Serial.println(WiFi.localIP());
  }
}

void loop() {
  // put your main code here, to run repeatedly:

  if (WiFi.status() == WL_CONNECTED) {http_post();
    WiFi.forceSleepBegin();  // Wifi Off
    delay(outTime);
    WiFi.forceSleepWake();  // Wifi On}
}



void http_post() {

  // 创立 WiFiClient 实例化对象
  WiFiClient client;

  // 创立 http 对象
  HTTPClient http;

  // 配置申请地址
  http.begin(client, SERVER_IP);  //HTTP 申请
  Serial.print("[HTTP] begin...\n");
  // 长度
  DynamicJsonDocument doc(96);

  float data = analogRead(PIN_AO);
  Serial.println(data);
  i = data / 1023;
  j = (1 - i) * 100;

  Serial.println(j);

  // 写入以后温度值
  doc["temp"] = j;
  String output;
  serializeJson(doc, output);

  // 启动连贯并发送 HTTP 报头和报文
  int httpCode = http.POST(output);
  Serial.print("[HTTP] POST...\n");

  // 连贯失败时 httpCode 时为负
  if (httpCode > 0) {
    // 将服务器响应头打印到串口
    Serial.printf("[HTTP] POST... code: %d\n", httpCode);

    // 将从服务器获取的数据打印到串口
    if (httpCode == HTTP_CODE_OK) {const String& payload = http.getString();
      Serial.println("received payload:\n<<");
      Serial.println(payload);
      Serial.println(">>");
    }
  } else {Serial.printf("[HTTP] POST... failed, error: %s\n", http.errorToString(httpCode).c_str());
  }
  // 敞开 http 连贯
  http.end();}

存储数据

数据存储，得须要一个服务器，我这里正好一个激动生产买的树莓派，就让他当服务器吧（你要有个这个能够不必买 esp8266 了，间接开干就完了）
我的思路，在树莓派上起一个服务，让 esp8266 能够通过 http 的协定上报温度，数据展现也能够通过这个服务来获取数据，当然了我还想外网拜访：我这里用的是花生壳，搞了一个内网穿透，这个送 1g 流量，6 块还能给一个 https 的域名，省了备案的事件。

服务简略的来就应用 nodejs 启动一个服务吧

数据库我应用的 SQLite，看人家说这个挺小的，还反对关联查问。
代码如下

const http = require('http');
const os = require('os');
const urlInfo = require('url')
// 读取数据库
const querystring = require("querystring")
var sqlite3 = require('sqlite3').verbose()

// 要应用的端口号
const PORT_NUMBER = 3001


var db = new sqlite3.Database('./temp.db', sqlite3.OPEN_READWRITE, (err) => {if (err) {return console.log(err.message)
 }
 console.log('数据库链接胜利')
})

/** 追加信息 */
const appendTemp = (temp) => {return new Promise((resolve, reject) => {const currentTime = new Date().getTime()
     const addData = `INSERT INTO temp (time,temp)  VALUES(${currentTime},${temp})`
     db.run(addData, function (err, data) {if (err) {console.log(err)
             reject(err)
         }
         resolve()})
 })

}

const selectTemp = (paramInfo) => {return new Promise((resolve, reject) => {const { pageIndex = 1, pageSize = 10, all = false,startTimestamp,endTimestamp} = paramInfo
     let sqlStr = `select * from temp`
     if (startTimestamp && endTimestamp) {sqlStr = `select * from temp where time >= ${startTimestamp} and time <= ${endTimestamp}`
     }
     // 默认展现所有
     if (all === false) {sqlStr += ` limit(${(pageIndex - 1) * pageSize}),${pageSize}`
     }
     db.all(sqlStr, function (err, data) {if (err) {return console.log(err)
         }
         resolve(data)
     })
 })
}


// 2. 创立服务
// req(request): 本次申请  res(response): 本次响应     每次收到浏览器的申请, 它就会执行一次回调
const server = http.createServer(function (req, res) {const { method, url} = req
 // 接管到申请数据
 if (method === 'POST' && url === '/sendCurrentTemp') {
     // 创立空字符叠加数据片段
     var data = '';
     //2. 注册 data 事件接收数据（每当收到一段表单提交的数据，该办法会执行一次）req.on('data', (chunk) => {
         // chunk 默认是一个二进制数据，和 data 拼接会主动 toString
         data += chunk;
     })
     req.on('end', () => {
         try {console.log(data)
             const info = JSON.parse(data)
             appendTemp(info.temp)
             res.end('{status:200}');
         } catch (e) {console.error(e)
         }
     })
 }
 const {pathname, path} = urlInfo.parse(req.url)
 if (method === 'GET' && pathname === '/getTemp') {
     // 返回查问的信息
     selectTemp(param2Obj(path)).then(list => {
         let retObj = {
             status: 200,
             list
         }
         res.end(JSON.stringify(retObj));
     })
 }

 // 获取数据申请
});


// 3. 启动服务
server.listen(PORT_NUMBER, function () {console.log(` 服务器启动胜利，请在 http://${getIpAddress()}:${PORT_NUMBER}中拜访....`)
});


/** 获取以后 ip 地址 */
function getIpAddress() {var ifaces = os.networkInterfaces()
 for (var dev in ifaces) {let iface = ifaces[dev]
     for (let i = 0; i < iface.length; i++) {let { family, address, internal} = iface[i]
         if (family === 'IPv4' && address !== '127.0.0.1' && !internal) {return address}
     }
 }
}


function param2Obj(url) {const search = url.split('?')[1]
 if (!search) {return {}
 }
 const paramObj = JSON.parse('{"' + (search).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"') +'"}')
 Object.keys(paramObj).map(key => {paramObj[key] = decodeURIComponent(paramObj[key])
 })
 return paramObj
}

数据展现

应用 vue 写一个页面，去从服务拉取到数据

展现曲线
展现所有数据分页展现（前期想加个图片，每隔一段时间上传一个图片，搞一个提早摄影的成果）

最初放一张效果图吧

正文完

发表至： vue.js

2023-06-29

0

关于vue.js:基于vuelic工具搭建vuewebpack项目打包之后页面为空

关于vue.js:vue2x使用mockjs模拟数据

关于vue.js:总结vue-预渲染

关于vue.js:词云滚动效果

关于检测:浅析舆情监测系统

关于java:蔚来真题和答案主打一个简单