How to use PHP and Vue to develop warehouse temperature and humidity monitoring functions for warehouse management-PHP Tutorial-php.cn

How to use PHP and Vue to develop warehouse temperature and humidity monitoring functions for warehouse management

PHPz

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

Original

1245 people have browsed it

How to use PHP and Vue to develop warehouse temperature and humidity monitoring functions for warehouse management

1. Introduction
With the rapid development of Internet of Things technology, the field of warehouse management has also Intelligent monitoring equipment was gradually introduced. Among them, the warehouse temperature and humidity monitoring function is an important part of ensuring the quality and safety of warehouse goods. This article will introduce how to use PHP and Vue to develop a simple warehouse temperature and humidity monitoring function, and provide specific code examples.

2. Technology Selection
When developing the warehouse temperature and humidity monitoring function, we can choose PHP as the back-end development language and Vue as the front-end development framework. PHP is a widely used server-side scripting language that can handle databases and data interaction with the front-end. Vue, as a popular JavaScript framework, can help us build dynamic user interfaces.

3. Function implementation steps

Create database
First, we need to create a MySQL database to store warehouse temperature and humidity data. Create a table named temperature in the database, containing the fields id, temperature, and humidity to store temperature and humidity data .
Back-end development
In back-end development, we use PHP to handle the storage and reading of data.

First, create a file named config.php to configure the database connection. Add the following code in it:

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

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

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

Copy after login

Next, create a file named api.php to handle the storage and reading of data. Add the following code in it:

<?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);

Copy after login

Front-end development
In front-end development, we use Vue to implement user interface interaction and data display.

First, create a file named index.html to display data and provide data storage functions. Add the following code in it:

<!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>

Copy after login

4. Run the test

In the website directory, create a folder named temperature_manage and ## The #index.html, api.php and config.php files are placed in it.
http://localhost/temperature_manage/index.html in the browser to see the warehouse temperature and humidity monitoring interface.
Click the "Get Latest Data" button to obtain the latest temperature and humidity data from the database and display it on the interface.

5. Summary

This article introduces how to use PHP and Vue to develop the warehouse temperature and humidity monitoring function, and provides specific code examples. By studying this simple example, you can learn how to use PHP and Vue for back-end and front-end development, and how to store and read data. I hope this article will be helpful to you in learning and developing warehouse temperature and humidity monitoring functions!

The above is the detailed content of How to use PHP and Vue to develop warehouse temperature and humidity monitoring functions for warehouse management. For more information, please follow other related articles on the PHP Chinese website!