Heim > Artikel > Backend-Entwicklung > Wie man mit PHP und Vue Funktionen zur Überwachung von Lagertemperatur und -feuchtigkeit für die Lagerverwaltung entwickelt
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
temperature
, die die Felder id
, temperature
und humidity
für die Speicherung von Temperatur und Luftfeuchtigkeit enthält Daten. temperature
的表,包含字段id
、temperature
和humidity
,用于存储温度和湿度数据。首先,创建一个名为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);
首先,创建一个名为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
config.php
, um die Datenbankverbindung zu konfigurieren. Fügen Sie den folgenden Code hinzu: 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
, um Daten anzuzeigen und Datenspeicherfunktionen bereitzustellen. Fügen Sie den folgenden Code hinzu: 🎜rrreee🎜 4. Führen Sie den Test aus 🎜🎜🎜Erstellen Sie im Website-Verzeichnis einen Ordner mit dem Namen temperature_manage
und fügen Sie index.html
hinzu darin werden die Dateien code>api.php und config.php
abgelegt. 🎜🎜Besuchen Sie http://localhost/temperature_manage/index.html
im Browser, um die Schnittstelle zur Überwachung der Lagertemperatur und -feuchtigkeit anzuzeigen. 🎜🎜Geben Sie die Temperatur- und Luftfeuchtigkeitsdaten ein und klicken Sie auf die Schaltfläche „Daten speichern“, um die Daten in der Datenbank zu speichern. 🎜🎜Klicken Sie auf die Schaltfläche „Neueste Daten abrufen“, um die neuesten Temperatur- und Luftfeuchtigkeitsdaten aus der Datenbank abzurufen und auf der Benutzeroberfläche anzuzeigen. 🎜🎜🎜5. Zusammenfassung🎜Dieser Artikel stellt die Verwendung von PHP und Vue zur Entwicklung der Funktion zur Überwachung von Lagertemperatur und Luftfeuchtigkeit vor und bietet spezifische Codebeispiele. Anhand dieses einfachen Beispiels können Sie lernen, wie Sie PHP und Vue für die Back-End- und Front-End-Entwicklung verwenden und wie Sie Daten speichern und lesen. Ich hoffe, dieser Artikel wird Ihnen beim Erlernen und Entwickeln von Funktionen zur Überwachung der Lagertemperatur und -feuchtigkeit hilfreich sein! 🎜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!