Cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang untuk pengurusan gudang-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang untuk pengurusan gudang

PHPz

Lepaskan： 2023-09-24 17:42:01

asal

1217 orang telah melayarinya

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang untuk pengurusan gudang

1 pembangunan teknologi Internet Perkara Dengan perkembangan pesat, bidang pengurusan gudang secara beransur-ansur memperkenalkan peralatan pemantauan pintar. Antaranya, fungsi pemantauan suhu dan kelembapan gudang merupakan bahagian penting dalam memastikan kualiti dan keselamatan barangan gudang. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang yang ringkas, serta menyediakan contoh kod khusus.

2. Pemilihan Teknologi

Apabila membangunkan fungsi pemantauan suhu dan kelembapan gudang, kita boleh memilih PHP sebagai bahasa pembangunan bahagian belakang dan Vue sebagai rangka kerja pembangunan bahagian hadapan. PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas yang boleh mengendalikan pangkalan data dan interaksi data dengan bahagian hadapan. Vue, sebagai rangka kerja JavaScript yang popular, boleh membantu kami membina antara muka pengguna yang dinamik.

3. Langkah pelaksanaan fungsi

Pertama, kita perlu mencipta pangkalan data MySQL untuk menyimpan data suhu dan kelembapan gudang. Buat jadual bernama suhu dalam pangkalan data, yang mengandungi medan id, suhu dan kelembapan untuk penyimpanan Suhu dan kelembapan data.
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());
}

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

四、运行测试

在网站目录下，创建一个名为temperature_manage的文件夹，并将index.html、api.php和config.php文件放入其中。
在浏览器中访问http://localhost/temperature_manage/index.htmlBackend Development
Pertama, cipta fail bernama config.php untuk mengkonfigurasi sambungan pangkalan data. Tambahkan kod berikut di dalamnya:

Seterusnya, buat fail bernama api.php yang mengendalikan penyimpanan dan pembacaan data. Tambahkan kod berikut di dalamnya:

rrreee

index.html

temperature_manage

index.html

api.php

config.php

http://localhost/temperature_manage/index.html

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!