Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan harga pengurusan gudang
Dalam pengurusan pergudangan logistik moden, pengurusan harga adalah fungsi penting. Ia boleh membantu pengurus gudang dan kakitangan logistik mengurus maklumat harga item inventori dengan tepat untuk penetapan harga yang berpatutan dan kawalan keuntungan barangan. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan harga dalam sistem pengurusan gudang, dan menyediakan contoh kod khusus.
1. Persediaan
Sebelum anda mula, pastikan anda telah memasang persekitaran pembangunan PHP dan Vue. Anda boleh menggunakan mana-mana editor kod yang anda suka untuk menulis kod.
2. Buat jadual pangkalan data
Pertama, kita perlu buat jadual pangkalan data untuk menyimpan maklumat harga. Katakan jadual kami dinamakan harga dan mengandungi medan berikut: prices，包含以下字段：
-
id：价格记录的唯一标识符，自增类型
-
product_name：产品名称，字符串类型
-
price：价格，浮点数类型
-
created_at：记录创建时间，日期时间类型
-
updated_at：记录更新时间，日期时间类型
你可以使用以下SQL语句创建数据库表：
CREATE TABLE `prices` (
`id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
`product_name` VARCHAR(255) NOT NULL,
`price` FLOAT NOT NULL,
`created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
`updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=INNODB;
Salin selepas log masuk
三、编写后端接口
接下来，我们需要使用PHP编写后端接口来处理价格管理功能。创建一个PHP文件price.php，添加以下代码：
<?php
header('Content-Type: application/json');
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "your_database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 获取所有价格记录
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$sql = "SELECT * FROM `prices`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$prices = [];
while ($row = $result->fetch_assoc()) {
$prices[] = $row;
}
echo json_encode($prices);
} else {
echo "[]";
}
}
// 添加价格记录
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$product_name = $_POST['product_name'];
$price = $_POST['price'];
$sql = "INSERT INTO `prices` (`product_name`, `price`) VALUES ('$product_name', '$price')";
if ($conn->query($sql) === TRUE) {
echo "Price record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
// 更新价格记录
if ($_SERVER['REQUEST_METHOD'] === 'PUT') {
parse_str(file_get_contents("php://input"), $put_vars);
$id = $put_vars['id'];
$product_name = $put_vars['product_name'];
$price = $put_vars['price'];
$sql = "UPDATE `prices` SET `product_name`='$product_name', `price`='$price', `updated_at`=CURRENT_TIMESTAMP WHERE `id`='$id'";
if ($conn->query($sql) === TRUE) {
echo "Price record updated successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
// 删除价格记录
if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
parse_str(file_get_contents("php://input"), $delete_vars);
$id = $delete_vars['id'];
$sql = "DELETE FROM `prices` WHERE `id`='$id'";
if ($conn->query($sql) === TRUE) {
echo "Price record deleted successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>Salin selepas log masuk
确保将your_database_name替换为你的数据库名，并根据需要修改数据库连接信息。
四、编写前端页面
我们将使用Vue来编写前端页面。创建一个HTML文件index.html，添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>价格管理</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>价格管理</h1>
<form @submit.prevent="addPrice">
<input type="text" placeholder="产品名称" v-model="newPrice.product_name" required>
<input type="number" step="0.01" placeholder="价格" v-model="newPrice.price" required>
<button type="submit">添加</button>
</form>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="price in prices" :key="price.id">
<td>{{ price.product_name }}</td>
<td>{{ price.price }}</td>
<td>
<button @click="editPrice(price)">编辑</button>
<button @click="deletePrice(price)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
prices: [],
newPrice: {
product_name: '',
price: ''
},
editPrice: {
id: '',
product_name: '',
price: ''
}
},
created: function() {
this.getPrices();
},
methods: {
getPrices: function() {
axios.get('price.php')
.then(function(response) {
this.prices = response.data;
}.bind(this))
.catch(function(error) {
console.log(error);
});
},
addPrice: function() {
axios.post('price.php', this.newPrice)
.then(function(response) {
console.log(response.data);
this.getPrices();
this.newPrice.product_name = '';
this.newPrice.price = '';
}.bind(this))
.catch(function(error) {
console.log(error);
});
},
editPrice: function(price) {
this.editPrice.id = price.id;
this.editPrice.product_name = price.product_name;
this.editPrice.price = price.price;
},
updatePrice: function() {
axios.put('price.php', this.editPrice)
.then(function(response) {
console.log(response.data);
this.getPrices();
this.editPrice.id = '';
this.editPrice.product_name = '';
this.editPrice.price = '';
}.bind(this))
.catch(function(error) {
console.log(error);
});
},
deletePrice: function(price) {
axios.delete('price.php', { data: price })
.then(function(response) {
console.log(response.data);
this.getPrices();
}.bind(this))
.catch(function(error) {
console.log(error);
});
}
}
});
</script>
</body>
</html>Salin selepas log masuk
五、运行项目
将price.php和index.html文件放入你的服务器的网站目录中，并启动服务器。然后打开浏览器访问index.html
-
id: pengecam unik rekod harga, jenis kenaikan automatik
nama_produk: nama produk, jenis rentetan- harga: harga, jenis titik terapung
created_at : rekod masa, tarikh dan jenis masa pembuatan-
updated_at: rekod masa, tarikh dan jenis masa kemas kini
Anda boleh menggunakan berikut pernyataan SQL untuk mencipta jadual Pangkalan Data:
rrreee
3. Tulis antara muka belakang
Seterusnya, kita perlu menggunakan PHP untuk menulis antara muka belakang untuk mengendalikan fungsi pengurusan harga. Cipta fail PHP price.php dan tambahkan kod berikut:
rrreee
Pastikan untuk menggantikan
nama_pangkalan data_anda dengan nama pangkalan data anda dan ubah suai maklumat sambungan pangkalan data seperti yang diperlukan. 🎜🎜4. Tulis halaman hujung hadapan🎜Kami akan menggunakan Vue untuk menulis halaman hujung hadapan. Cipta fail HTML
index.html dan tambahkan kod berikut: 🎜rrreee🎜 5. Jalankan projek 🎜Buat
price.php dan
index.html kod> fail Letakkannya ke dalam direktori tapak web pelayan anda dan mulakan pelayan. Kemudian buka penyemak imbas dan lawati <code>index.html, dan anda akan melihat halaman pengurusan harga yang ringkas. 🎜🎜Pada halaman, anda boleh memasukkan nama produk dan harga, dan klik butang Tambah untuk menambah rekod harga baharu. Klik butang Edit untuk mengubah suai maklumat rekod harga. Klik butang Padam untuk memadam rekod harga. 🎜🎜6. Ringkasan🎜Dalam artikel ini, kami menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan harga dalam sistem pengurusan gudang yang ringkas. Melalui fungsi ini, pentadbir gudang boleh menguruskan maklumat harga produk dengan mudah dan mencapai harga yang berpatutan serta kawalan keuntungan. Dengan menulis antara muka belakang dan halaman hadapan, kami menunjukkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi ini, dan menyediakan contoh kod terperinci. Semoga artikel ini dapat membantu anda! 🎜
Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan harga untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
