PHP と Vue を使用して倉庫管理のための倉庫温湿度監視機能を開発する方法

PHP と Vue を使用して倉庫管理のための倉庫温湿度監視機能を開発する方法

1. はじめに
モノのインターネット技術の急速な発展に伴い、倉庫管理の分野にもインテリジェントな監視装置が徐々に導入されました。中でも、倉庫の温度と湿度の監視機能は、倉庫の商品の品質と安全性を確保するために重要な部分です。この記事では、PHP と Vue を使用して倉庫の温湿度監視機能を簡単に開発する方法と、具体的なコード例を紹介します。

2. テクノロジーの選択
倉庫の温湿度監視機能を開発する場合、バックエンドの開発言語として PHP を選択し、フロントエンドの開発フレームワークとして Vue を選択できます。 PHP は、データベースおよびフロントエンドとのデータ対話を処理できる、広く使用されているサーバー側スクリプト言語です。 Vue は人気のある JavaScript フレームワークであり、動的なユーザー インターフェイスの構築に役立ちます。

3. 関数の実装手順

1. データベースの作成
   まず、倉庫の温度と湿度のデータを保存するための MySQL データベースを作成する必要があります。温度と湿度のデータを保存するためのフィールド id、temperature、および humidity を含むテーブルをデータベース内に作成します。 バックエンド開発
バックエンド開発では、PHP を使用してデータの保存と読み取りを処理します。
2. 
   
まず、

config.php

という名前のファイルを作成して、データベース接続を構成します。次のコードを追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;?php $dbhost = 'localhost'; // 数据库主机名 $dbuser = 'root'; // 数据库用户名 $dbpass = 'password'; // 数据库密码 $dbname = 'database'; // 数据库名 $conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname); if (!$conn) { die(&quot;数据库连接失败: &quot; . mysqli_connect_error()); }</pre><div class="contentsignin">ログイン後にコピー</div></div> 次に、データの保存と読み取りを処理する

api.php

という名前のファイルを作成します。次のコードを追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;?php include 'config.php'; $action = $_GET['action']; if ($action == 'addData') { $temperature = $_POST['temperature']; $humidity = $_POST['humidity']; $sql = &quot;INSERT INTO temperature (temperature, humidity) VALUES ($temperature, $humidity)&quot;; if (mysqli_query($conn, $sql)) { echo '数据存储成功'; } else { echo '数据存储失败: ' . mysqli_error($conn); } } elseif ($action == 'getData') { $sql = &quot;SELECT * FROM temperature ORDER BY id DESC LIMIT 1&quot;; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) &gt; 0) { $row = mysqli_fetch_assoc($result); $data = array('temperature' =&gt; $row['temperature'], 'humidity' =&gt; $row['humidity']); echo json_encode($data); } else { echo '暂无数据'; } } else { echo '无效的请求'; } mysqli_close($conn);</pre><div class="contentsignin">ログイン後にコピー</div></div>

フロントエンド開発

フロントエンド開発では、Vue を使用してユーザー インターフェイスの操作とデータ表示を実装します。
3. 
   
まず、データを表示し、データ ストレージ機能を提供するための

index.html

という名前のファイルを作成します。次のコードを追加します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;仓库温湿度监控&lt;/title&gt; &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;app&quot;&gt; &lt;h1 id=&quot;仓库温湿度监控&quot;&gt;仓库温湿度监控&lt;/h1&gt; &lt;p&gt;温度: {{ temperature }}&lt;/p&gt; &lt;p&gt;湿度: {{ humidity }}&lt;/p&gt; &lt;button @click=&quot;getData&quot;&gt;获取最新数据&lt;/button&gt; &lt;form @submit.prevent=&quot;addData&quot;&gt; &lt;label&gt;温度:&lt;/label&gt; &lt;input type=&quot;text&quot; v-model=&quot;temperature&quot;&gt; &lt;br&gt; &lt;label&gt;湿度:&lt;/label&gt; &lt;input type=&quot;text&quot; v-model=&quot;humidity&quot;&gt; &lt;br&gt; &lt;button type=&quot;submit&quot;&gt;存储数据&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;script&gt; 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); }); } } }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>4. テストを実行します

Web サイトのディレクトリに、

temperture_manage
1. という名前のフォルダーと ## The #index を作成します。 .html、api.php、および config.php ファイルがそこに配置されます。 ブラウザで http://localhost/temperature_manage/index.html
にアクセスすると、倉庫の温度と湿度の監視インターフェイスが表示されます。
2. 温度と湿度のデータを入力し、「データを保存」ボタンをクリックすると、データがデータベースに保存されます。
「最新データを取得」ボタンをクリックすると、データベースから最新の温湿度データを取得し、インターフェースに表示します。
4. 5. 概要
この記事では、PHP と Vue を使用して倉庫の温湿度監視機能を開発する方法と、具体的なコード例を紹介します。この簡単な例を学習することで、バックエンドおよびフロントエンド開発に PHP と Vue を使用する方法、およびデータを保存および読み取る方法を学ぶことができます。この記事が、倉庫の温湿度監視機能の学習と開発に役立つことを願っています。

以上がPHP と Vue を使用して倉庫管理のための倉庫温湿度監視機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。