【物联网实训项目】------（六）家庭智慧安防系统之智能监控

1.Tomcat的操作

（1）tomcat2的安装

sudo apt-get install apache2

（2）tomcat2的端口的修改

cd /etc/apache2

打开端口配置文件进行修改

 vim ports.conf

将Listen的端口修改，这里我修改为8090.

（3）进入tomcat2的工作目录

cd /var/www/html/

将写好的网页放在这里即可通过tomcat来访问。

2.监控网页的编写

安装相关软件依赖

sudo apt-get install php5 libapache2-mod-php5

这里通过php来跟数据库进行连接，获取数据库中的数据，并显示在网页上。网页这里通过了bootstrap来修饰一下，引用bootstrap的代码段。

网页这里通过了bootstrap来修饰一下，引用bootstrap的代码段。
!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

jiankong.php的网页

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>家庭实时监控系统</title>
<!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<center>
<table class="table table-striped">
<h1>家庭实时监控系统</h1>
<br>
<h3 align="left" class="bg-primary">温湿度信息</h3>
<tr><th>时间(yyyy-mm-dd)</th><th>温度(°C)</th><th>湿度(%RH)</th></tr>
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "jiankong";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "select * from dht2 order by id desc limit 3";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo"<tr><td>".$row["time"]."</td><td>".$row["temperature"]."</td><td>".$row["humidity"]."</td><tr>";
    }
} else {
    echo "0 结果";
}
$conn->close();
?>
</table>

<table class="table table-striped">
<h3 align="left" class="bg-primary">安防情况</h3>
<tr><th>序号</th><th>时间</th><th>描述</th></tr>
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "jiankong";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "select * from buzzer order by id desc limit 3";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo"<tr><td>".$row["id"]."</td><td>".$row["time"]."</td><td>".$row["descr"]."</td><tr>";
    }
} else {
    echo "0 结果";
}
$conn->close();
?>
</table>
</center>
<h3 align="left" class="bg-primary">实时监控情况</h3>
<div>
    <img style="-webkit-user-select: none;cursor: zoom-in;"  src="http://192.168.43.121:8082/?action=stream" width="400" height="300"/>
</div>



</body>
</html>

结果展示图

3.将IP地址内网穿透，可外网访问

内网穿透的前期背景知识，可参考我的这篇博客

https://blog.youkuaiyun.com/mind_programmonkey/article/details/80285596

具体步骤：

（1）在这个网站下载python版本的

https://www.ngrok.cc/download.html

（2）在这个网址中开通免费隧道，然后将网址的IP地址和端口映射上去（具体的步骤可参考上述博客地址）。这里注意因为一共是两个地址，一个是在线监控的地址，一个是网页的地址，端口不一致，所以我们需要开通两个隧道。这里我采取的办法是用两个账号，分别注册，来映射端口

（3）运行

将（1）下载到的python版本运行，粘贴上隧道id，即可成功开启。

成功运行之后即可通过域名来访问我们家庭的监控情况。