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

扯淡工夫

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

思路

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

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

    我的思路如下

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

思路有了就开干

收集数据

我的这个实现思路也算是传说中的物联网了,毕竟花盆都上网了嘛,当初实现这种的板子有很多,那个便宜来那个就行了。
通过百度一下,抉择了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的域名,省了备案的事件。

  1. 服务简略的来就应用nodejs启动一个服务吧
  2. 数据库我应用的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写一个页面,去从服务拉取到数据

  1. 展现曲线
  2. 展现所有数据分页展现(前期想加个图片,每隔一段时间上传一个图片,搞一个提早摄影的成果)

全副代码地址

最初放一张效果图吧

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理