【物聯網實訓專案】------（六）家庭智慧安防系統之智慧監控
阿新 • • 發佈：2019-02-01
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地址內網穿透，可外網訪問
內網穿透的前期背景知識，可參考我的這篇部落格
具體步驟：
（1）在這個網站下載python版本的
（2）在這個網址中開通免費隧道，然後將網址的IP地址和埠對映上去（具體的步驟可參考上述部落格地址）。這裡注意因為一共是兩個地址，一個是線上監控的地址，一個是網頁的地址，埠不一致，所以我們需要開通兩個隧道。這裡我採取的辦法是用兩個賬號，分別註冊，來對映埠
（3）執行
將（1）下載到的python版本執行，貼上上隧道id，即可成功開啟。
成功執行之後即可通過域名來訪問我們家庭的監控情況。
