首頁 >後端開發 >php教程 >如何用PHP和Vue開發倉庫管理的倉庫溫濕度監控功能

如何用PHP和Vue開發倉庫管理的倉庫溫濕度監控功能

PHPz原創: 2023-09-24 17:41:061242瀏覽

一、前言
隨著物聯網技術的快速發展，倉庫管理領域也逐漸引入了智慧化監控設備。其中，倉庫溫濕度監控功能是保障倉庫貨物品質與安全的重要一環。本文將介紹如何使用PHP和Vue開發一個簡單的倉庫溫濕度監控功能，並提供具體的程式碼範例。

二、技術選型
在開發倉庫溫度濕度監控功能時，我們可以選擇PHP作為後端開發語言，Vue作為前端開發框架。 PHP作為一種廣泛使用的伺服器端腳本語言，能夠處理資料庫和與前端的資料互動。而Vue作為一種流行的JavaScript框架，可以幫助我們建立動態的使用者介面。

三、功能實作步驟

建立資料庫
首先，我們需要建立一個MySQL資料庫，用於儲存倉庫溫濕度資料。在資料庫中建立一個名為temperature的表，包含欄位id、temperature和humidity，用於儲存溫度和濕度數據。
後端開發
在後端開發中，我們使用PHP來處理資料的儲存和讀取。

首先，建立一個名為config.php的文件，用於設定資料庫連線。在其中加入以下程式碼：

<?php
$dbhost = 'localhost';  // 数据库主机名
$dbuser = 'root';  // 数据库用户名
$dbpass = 'password';  // 数据库密码
$dbname = 'database';  // 数据库名

$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

if (!$conn) {
    die("数据库连接失败: " . mysqli_connect_error());
}

接下來，建立一個名為api.php的文件，用於處理資料的儲存和讀取。在其中加入以下程式碼：

<?php
include 'config.php';

$action = $_GET['action'];

if ($action == 'addData') {
    $temperature = $_POST['temperature'];
    $humidity = $_POST['humidity'];

    $sql = "INSERT INTO temperature (temperature, humidity) VALUES ($temperature, $humidity)";

    if (mysqli_query($conn, $sql)) {
        echo '数据存储成功';
    } else {
        echo '数据存储失败: ' . mysqli_error($conn);
    }
} elseif ($action == 'getData') {
    $sql = "SELECT * FROM temperature ORDER BY id DESC LIMIT 1";
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) > 0) {
        $row = mysqli_fetch_assoc($result);
        $data = array('temperature' => $row['temperature'], 'humidity' => $row['humidity']);
        echo json_encode($data);
    } else {
        echo '暂无数据';
    }
} else {
    echo '无效的请求';
}

mysqli_close($conn);

前端開發
在前端開發中，我們使用Vue來實現使用者介面的互動和資料展示。

首先，建立一個名為index.html的文件，用於展示資料和提供資料儲存功能。在其中加入以下程式碼：

<!DOCTYPE html>
<html>
<head>
    <title>仓库温湿度监控</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h1>仓库温湿度监控</h1>
        <p>温度: {{ temperature }}</p>
        <p>湿度: {{ humidity }}</p>
        <button @click="getData">获取最新数据</button>
        <form @submit.prevent="addData">
            <label>温度:</label>
            <input type="text" v-model="temperature">
            <br>
            <label>湿度:</label>
            <input type="text" v-model="humidity">
            <br>
            <button type="submit">存储数据</button>
        </form>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                temperature: '',
                humidity: ''
            },
            methods: {
                addData: function() {
                    var formData = new FormData();
                    formData.append('temperature', this.temperature);
                    formData.append('humidity', this.humidity);

                    axios.post('api.php?action=addData', formData)
                        .then(function(response) {
                            console.log(response.data);
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                getData: function() {
                    axios.get('api.php?action=getData')
                        .then(function(response) {
                            app.temperature = response.data.temperature;
                            app.humidity = response.data.humidity;
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

四、執行測試

在網站目錄下，建立一個名為temperature_manage的資料夾，並將index.html、api.php和config.php檔案放入其中。
在瀏覽器中存取http://localhost/temperature_manage/index.html，即可看到倉庫溫濕度監控介面。
輸入溫濕度資料並點擊"儲存資料"按鈕，即可將資料儲存到資料庫中。
點擊"取得最新數據"按鈕，即可從資料庫中取得最新的溫濕度數據，並顯示在介面上。

五、總結
本文介紹如何使用PHP和Vue開發倉庫溫濕度監控功能，並提供了具體的程式碼範例。透過學習這個簡單的範例，你可以了解如何使用PHP和Vue進行後端和前端開發，以及如何實現資料的儲存和讀取。希望這篇文章對你學習和開發倉庫溫濕度監控功能有幫助！

以上是如何用PHP和Vue開發倉庫管理的倉庫溫濕度監控功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript mysql html 数据库 http 物联网

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何在PHP中實現員工考勤資料的總結統計？下一篇：如何在PHP中實現員工考勤資料的總結統計？

看更多