Rumah > Artikel > pembangunan bahagian belakang > Cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang untuk pengurusan gudang
Cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang untuk pengurusan gudang
- PHPzasal
- 2023-09-24 17:41:061210semak imbas
Cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang untuk pengurusan gudang
1 pembangunan teknologi Internet Perkara Dengan perkembangan pesat, bidang pengurusan gudang secara beransur-ansur memperkenalkan peralatan pemantauan pintar. Antaranya, fungsi pemantauan suhu dan kelembapan gudang merupakan bahagian penting dalam memastikan kualiti dan keselamatan barangan gudang. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang yang ringkas, serta menyediakan contoh kod khusus.
Apabila membangunkan fungsi pemantauan suhu dan kelembapan gudang, kita boleh memilih PHP sebagai bahasa pembangunan bahagian belakang dan Vue sebagai rangka kerja pembangunan bahagian hadapan. PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas yang boleh mengendalikan pangkalan data dan interaksi data dengan bahagian hadapan. Vue, sebagai rangka kerja JavaScript yang popular, boleh membantu kami membina antara muka pengguna yang dinamik.
- Cipta pangkalan data
- Pertama, kita perlu mencipta pangkalan data MySQL untuk menyimpan data suhu dan kelembapan gudang. Buat jadual bernama
suhudalam pangkalan data, yang mengandungi medanid,suhudankelembapanuntuk penyimpanan Suhu dan kelembapan data.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.htmlBackend Development Dalam pembangunan backend, kami menggunakan PHP untuk mengendalikan penyimpanan dan pembacaan data. - Pertama, cipta fail bernama
config.phpuntuk mengkonfigurasi sambungan pangkalan data. Tambahkan kod berikut di dalamnya: rrreee
api.php yang mengendalikan penyimpanan dan pembacaan data. Tambahkan kod berikut di dalamnya: rrreee
front-end developmentDalam pembangunan bahagian hadapan, kami menggunakan Vue untuk melaksanakan interaksi antara muka pengguna dan paparan data. #🎜🎜##🎜🎜##🎜🎜#Pertama, cipta fail bernama
index.html untuk memaparkan data dan menyediakan fungsi storan data. Tambahkan kod berikut di dalamnya: #🎜🎜#rrreee#🎜🎜#4 Jalankan ujian #🎜🎜##🎜🎜##🎜🎜#Dalam direktori tapak web, buat fail bernama temperature_manage folder dan letakkan fail index.html, api.php dan config.php ke dalamnya. #🎜🎜##🎜🎜# Lawati http://localhost/temperature_manage/index.html dalam penyemak imbas untuk melihat antara muka pemantauan suhu dan kelembapan gudang. #🎜🎜##🎜🎜#Masukkan data suhu dan kelembapan dan klik butang "Simpan Data" untuk menyimpan data dalam pangkalan data. #🎜🎜##🎜🎜#Klik butang "Dapatkan Data Terkini" untuk mendapatkan data suhu dan kelembapan terkini daripada pangkalan data dan memaparkannya pada antara muka. #🎜🎜##🎜🎜##🎜🎜# 5. Ringkasan #🎜🎜# Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang, serta menyediakan contoh kod khusus. Dengan mengkaji contoh mudah ini, anda boleh belajar cara menggunakan PHP dan Vue untuk pembangunan bahagian belakang dan bahagian hadapan, serta cara menyimpan dan membaca data. Saya harap artikel ini akan membantu anda dalam mempelajari dan membangunkan fungsi pemantauan suhu dan kelembapan gudang! #🎜🎜#Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pemantauan suhu dan kelembapan gudang untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!