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

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

PHPz

풀어 주다： 2023-09-24 17:42:01

원래의

1248명이 탐색했습니다.

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!