Comment utiliser PHP et Vue pour développer des fonctions de surveillance de la température et de l'humidité des entrepôts pour la gestion des entrepôts-tutoriel php-php.cn

Comment utiliser PHP et Vue pour développer des fonctions de surveillance de la température et de l'humidité des entrepôts pour la gestion des entrepôts

PHPz

Libérer： 2023-09-24 17:42:01

original

1244 Les gens l'ont consulté

Comment utiliser PHP et Vue pour développer des fonctions de surveillance de la température et de lhumidité des entrepôts pour la gestion des entrepôts

Comment utiliser PHP et Vue pour développer des fonctions de surveillance de la température et de l'humidité des entrepôts pour la gestion des entrepôts

1. Introduction
Avec le développement rapide de la technologie de l'Internet des objets, des équipements de surveillance intelligents ont progressivement été introduits dans le domaine de la gestion des entrepôts . Parmi eux, la fonction de surveillance de la température et de l'humidité de l'entrepôt est un élément important pour garantir la qualité et la sécurité des marchandises en entrepôt. Cet article expliquera comment utiliser PHP et Vue pour développer une fonction simple de surveillance de la température et de l'humidité dans un entrepôt, et fournira des exemples de code spécifiques.

2. Sélection de la technologie
Lors du développement de la fonction de surveillance de la température et de l'humidité de l'entrepôt, nous pouvons choisir PHP comme langage de développement back-end et Vue comme cadre de développement front-end. PHP est un langage de script côté serveur largement utilisé qui peut gérer les bases de données et l'interaction des données avec le front-end. Vue, en tant que framework JavaScript populaire, peut nous aider à créer des interfaces utilisateur dynamiques.

3. Étapes de mise en œuvre de la fonction

Créer une base de données
Tout d'abord, nous devons créer une base de données MySQL pour stocker les données de température et d'humidité de l'entrepôt. Créez une table nommée température dans la base de données, contenant les champs id, température et humidité pour le stockage Température et humidité données. 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());
}

Copier après la connexion

接下来，创建一个名为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);

Copier après la connexion

前端开发
在前端开发中，我们使用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>

Copier après la connexion

四、运行测试

在网站目录下，创建一个名为temperature_manage的文件夹，并将index.html、api.php和config.php文件放入其中。
在浏览器中访问http://localhost/temperature_manage/index.html
Dans le développement backend, nous utilisons PHP pour gérer le stockage et la lecture des données.
Tout d'abord, créez un fichier nommé config.php pour configurer la connexion à la base de données. Ajoutez-y le code suivant :

rrreee

Ensuite, créez un fichier appelé api.php qui gérera le stockage et la lecture des données. Ajoutez-y le code suivant :
rrreee

index.html

temperature_manage

index.html

config.php

http://localhost/temperature_manage/index.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!