Heim > Artikel > Backend-Entwicklung > Wie man mit PHP und Vue Funktionen zur Überwachung von Lagertemperatur und -feuchtigkeit für die Lagerverwaltung entwickelt

Wie man mit PHP und Vue Funktionen zur Überwachung von Lagertemperatur und -feuchtigkeit für die Lagerverwaltung entwickelt

PHPzOriginal: 2023-09-24 17:41:061211Durchsuche

So verwenden Sie PHP und Vue, um Funktionen zur Überwachung von Lagertemperatur und -feuchtigkeit für die Lagerverwaltung zu entwickeln

1. Einführung
Mit der rasanten Entwicklung der Internet-of-Things-Technologie wurden nach und nach intelligente Überwachungsgeräte im Bereich der Lagerverwaltung eingeführt . Unter anderem ist die Funktion zur Überwachung der Lagertemperatur und -feuchtigkeit ein wichtiger Bestandteil der Gewährleistung der Qualität und Sicherheit der Lagergüter. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue eine einfache Funktion zur Überwachung der Lagertemperatur und -feuchtigkeit entwickeln, und es werden spezifische Codebeispiele bereitgestellt.

2. Technologieauswahl
Bei der Entwicklung der Lagertemperatur- und Luftfeuchtigkeitsüberwachungsfunktion können wir PHP als Back-End-Entwicklungssprache und Vue als Front-End-Entwicklungsframework wählen. PHP ist eine weit verbreitete serverseitige Skriptsprache, die Datenbanken und Dateninteraktionen mit dem Frontend verarbeiten kann. Vue kann uns als beliebtes JavaScript-Framework beim Aufbau dynamischer Benutzeroberflächen helfen.

3. Schritte zur Funktionsimplementierung

Datenbank erstellen
Zuerst müssen wir eine MySQL-Datenbank erstellen, um Lagertemperatur- und Luftfeuchtigkeitsdaten zu speichern. Erstellen Sie in der Datenbank eine Tabelle mit dem Namen temperature, die die Felder id, temperature und humidity für die Speicherung von Temperatur und Luftfeuchtigkeit enthält Daten. 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
In der Backend-Entwicklung verwenden wir PHP, um das Speichern und Lesen von Daten zu übernehmen.
Erstellen Sie zunächst eine Datei mit dem Namen config.php, um die Datenbankverbindung zu konfigurieren. Fügen Sie den folgenden Code hinzu:

rrreee

Als nächstes erstellen Sie eine Datei namens api.php, die das Speichern und Lesen von Daten übernimmt. Fügen Sie den folgenden Code hinzu:
rrreee

index.html

temperature_manage

index.html

config.php

http://localhost/temperature_manage/index.html

Das obige ist der detaillierte Inhalt vonWie man mit PHP und Vue Funktionen zur Überwachung von Lagertemperatur und -feuchtigkeit für die Lagerverwaltung entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript mysql html 数据库 http 物联网

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie implementiert man zusammenfassende Statistiken der Mitarbeiteranwesenheitsdaten in PHP?Nächster Artikel：Wie implementiert man zusammenfassende Statistiken der Mitarbeiteranwesenheitsdaten in PHP?

In Verbindung stehende Artikel

Mehr sehen