PHP と Vue を使用して倉庫管理のための倉庫温湿度監視機能を開発する方法
1. はじめに
モノのインターネット技術の急速な発展に伴い、倉庫管理の分野にもインテリジェントな監視装置が徐々に導入されました。中でも、倉庫の温度と湿度の監視機能は、倉庫の商品の品質と安全性を確保するために重要な部分です。この記事では、PHP と Vue を使用して倉庫の温湿度監視機能を簡単に開発する方法と、具体的なコード例を紹介します。
2. テクノロジーの選択
倉庫の温湿度監視機能を開発する場合、バックエンドの開発言語として PHP を選択し、フロントエンドの開発フレームワークとして Vue を選択できます。 PHP は、データベースおよびフロントエンドとのデータ対話を処理できる、広く使用されているサーバー側スクリプト言語です。 Vue は人気のある JavaScript フレームワークであり、動的なユーザー インターフェイスの構築に役立ちます。
3. 関数の実装手順
id、temperature、および humidity を含むテーブルをデータベース内に作成します。 という名前のファイルを作成して、データベース接続を構成します。次のコードを追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> 次に、データの保存と読み取りを処理する
という名前のファイルを作成します。次のコードを追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>
という名前のファイルを作成します。次のコードを追加します: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>4. テストを実行します
、api.php、および config.php ファイルがそこに配置されます。 ブラウザで http://localhost/temperature_manage/index.html温度と湿度のデータを入力し、「データを保存」ボタンをクリックすると、データがデータベースに保存されます。 以上がPHP と Vue を使用して倉庫管理のための倉庫温湿度監視機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
