PHP と Vue を使用して倉庫管理のための倉庫温湿度監視機能を開発する方法
- PHPzオリジナル
- 2023-09-24 17:41:061211ブラウズ
PHP と Vue を使用して倉庫管理のための倉庫温湿度監視機能を開発する方法
1. はじめに
モノのインターネット技術の急速な発展に伴い、倉庫管理の分野にもインテリジェントな監視装置が徐々に導入されました。中でも、倉庫の温度と湿度の監視機能は、倉庫の商品の品質と安全性を確保するために重要な部分です。この記事では、PHP と Vue を使用して倉庫の温湿度監視機能を簡単に開発する方法と、具体的なコード例を紹介します。
2. テクノロジーの選択
倉庫の温湿度監視機能を開発する場合、バックエンドの開発言語として PHP を選択し、フロントエンドの開発フレームワークとして Vue を選択できます。 PHP は、データベースおよびフロントエンドとのデータ対話を処理できる、広く使用されているサーバー側スクリプト言語です。 Vue は人気のある JavaScript フレームワークであり、動的なユーザー インターフェイスの構築に役立ちます。
3. 関数の実装手順
- データベースの作成
まず、倉庫の温度と湿度のデータを保存するための MySQL データベースを作成する必要があります。温度と湿度のデータを保存するためのフィールドid、temperature、およびhumidityを含むテーブルをデータベース内に作成します。バックエンド開発バックエンド開発では、PHP を使用してデータの保存と読み取りを処理します。
という名前のファイルを作成して、データベース接続を構成します。次のコードを追加します。 <pre class='brush:php;toolbar:false;'><?php
$dbhost = 'localhost'; // 数据库主机名
$dbuser = 'root'; // 数据库用户名
$dbpass = 'password'; // 数据库密码
$dbname = 'database'; // 数据库名
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if (!$conn) {
die("数据库连接失败: " . mysqli_connect_error());
}</pre> 次に、データの保存と読み取りを処理する
という名前のファイルを作成します。次のコードを追加します。 <pre class='brush:php;toolbar:false;'><?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);</pre>
- フロントエンド開発では、Vue を使用してユーザー インターフェイスの操作とデータ表示を実装します。
という名前のファイルを作成します。次のコードを追加します: <pre class='brush:html;toolbar:false;'><!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></pre>4. テストを実行します
- temperture_manage
- という名前のフォルダーと ## The #index を作成します。 .html
、api.php、およびconfig.phpファイルがそこに配置されます。ブラウザでhttp://localhost/temperature_manage/index.html にアクセスすると、倉庫の温度と湿度の監視インターフェイスが表示されます。 温度と湿度のデータを入力し、「データを保存」ボタンをクリックすると、データがデータベースに保存されます。「最新データを取得」ボタンをクリックすると、データベースから最新の温湿度データを取得し、インターフェースに表示します。 - 5. 概要 この記事では、PHP と Vue を使用して倉庫の温湿度監視機能を開発する方法と、具体的なコード例を紹介します。この簡単な例を学習することで、バックエンドおよびフロントエンド開発に PHP と Vue を使用する方法、およびデータを保存および読み取る方法を学ぶことができます。この記事が、倉庫の温湿度監視機能の学習と開発に役立つことを願っています。
以上がPHP と Vue を使用して倉庫管理のための倉庫温湿度監視機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。