집 >백엔드 개발 >PHP 튜토리얼 >PHP와 Vue를 사용하여 창고 관리를 위한 창고 온도 및 습도 모니터링 기능을 개발하는 방법

PHP와 Vue를 사용하여 창고 관리를 위한 창고 온도 및 습도 모니터링 기능을 개발하는 방법

PHPz원래의: 2023-09-24 17:41:061230검색

1. 소개
사물 인터넷 기술의 급속한 발전으로 창고 관리 분야에 지능형 모니터링 장비가 점차 도입되고 있습니다. . 그 중 창고 온도 및 습도 모니터링 기능은 창고 상품의 품질과 안전을 보장하는 중요한 부분입니다. 이 기사에서는 PHP와 Vue를 사용하여 간단한 창고 온도 및 습도 모니터링 기능을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

2. 기술 선택
창고 온도 및 습도 모니터링 기능을 개발할 때 백엔드 개발 언어로 PHP를 선택하고 프런트엔드 개발 프레임워크로 Vue를 선택할 수 있습니다. PHP는 데이터베이스 및 프런트 엔드와의 데이터 상호 작용을 처리할 수 있는 널리 사용되는 서버 측 스크립팅 언어입니다. 인기 있는 JavaScript 프레임워크인 Vue는 동적 사용자 인터페이스를 구축하는 데 도움이 될 수 있습니다.

3. 기능 구현 단계

데이터베이스 생성
먼저 창고 온도 및 습도 데이터를 저장할 MySQL 데이터베이스를 생성해야 합니다. 저장 온도 및 습도에 대한 id, 온도 및 습도 필드를 포함하는 온도라는 테이블을 데이터베이스에 생성합니다. 데이터. 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
백엔드 개발에서는 PHP를 사용하여 데이터 저장 및 읽기를 처리합니다.
먼저 config.php라는 파일을 생성하여 데이터베이스 연결을 구성합니다. 다음 코드를 추가하세요.

rrreee

다음으로, 데이터 저장 및 읽기를 처리할 api.php라는 파일을 만듭니다. 다음 코드를 추가하세요:
rrreee

index.html

온도_관리

index.html

config.php

http://localhost/temp_manage/index.html

위 내용은 PHP와 Vue를 사용하여 창고 관리를 위한 창고 온도 및 습도 모니터링 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript mysql html 数据库 http 物联网

성명：

이전 기사：PHP에서 직원 출석 데이터의 요약 통계를 구현하는 방법은 무엇입니까?다음 기사：PHP에서 직원 출석 데이터의 요약 통계를 구현하는 방법은 무엇입니까?