Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan jualan pengurusan gudang
Pengenalan:
Fungsi pengurusan jualan bagi pengurusan gudang ialah perusahaan Bahagian penting dalam operasi harian. Artikel ini akan berdasarkan PHP dan Vue, memperkenalkan cara menggunakan kedua-dua teknologi ini untuk melaksanakan fungsi pengurusan jualan dalam sistem pengurusan gudang mudah, dan menyediakan contoh kod khusus.
1. Penyediaan projek
Sebelum kita mula menulis kod, kita perlu melakukan beberapa kerja penyediaan.
Pertama, kita perlu menulis kod PHP untuk mengendalikan logik bahagian belakang.
<?php
// 1. 连接数据库
$db_host = "localhost";
$db_username = "root";
$db_password = "";
$db_name = "sales_db";
$conn = mysqli_connect($db_host, $db_username, $db_password, $db_name);
if (!$conn) {
die("数据库连接失败：" . mysqli_connect_error());
}
// 2. 处理获取销售列表的请求
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$sql = "SELECT * FROM sales";
$result = mysqli_query($conn, $sql);
$sales = array();
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
array_push($sales, $row);
}
}
echo json_encode($sales);
}
// 3. 处理添加销售记录的请求
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$product_name = $_POST["product_name"];
$quantity = $_POST["quantity"];
$price = $_POST["price"];
$sql = "INSERT INTO sales (product_name, quantity, price) VALUES ('$product_name', $quantity, $price)";
if (mysqli_query($conn, $sql)) {
echo "销售记录添加成功！";
} else {
echo "销售记录添加失败：" . mysqli_error($conn);
}
}
// 4. 关闭数据库连接
mysqli_close($conn);
?>new Vue({
el: '#app',
data: {
sales: [],
product_name: '',
quantity: '',
price: ''
},
methods: {
getSales: function() {
axios.get('sales/index.php')
.then(response => {
this.sales = response.data;
})
.catch(error => {
console.log(error);
});
},
addSale: function() {
axios.post('sales/index.php', {
product_name: this.product_name,
quantity: this.quantity,
price: this.price
})
.then(response => {
alert(response.data);
this.getSales();
})
.catch(error => {
console.log(error);
});
}
},
mounted: function() {
this.getSales();
}
});Dapatkan senarai jualan;
Dalam bahagian HTML fail "index.php", tambahkan kod berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>销售管理</title>
</head>
<body>
<div id="app">
<h1>销售管理</h1>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="sale in sales" :key="sale.id">
<td>{{ sale.product_name }}</td>
<td>{{ sale.quantity }}</td>
<td>{{ sale.price }}</td>
</tr>
</tbody>
</table>
<form @submit.prevent="addSale">
<input type="text" v-model="product_name" placeholder="产品名称" required>
<input type="number" v-model="quantity" placeholder="数量" required>
<input type="number" v-model="price" placeholder="价格" required>
<button type="submit">添加销售记录</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>5. Ringkasan
Dengan menggunakan teknologi PHP dan Vue, kami berjaya melaksanakan fungsi pengurusan jualan pengurusan gudang. PHP digunakan untuk memproses logik bahagian belakang, menyambung ke pangkalan data, dan menyediakan API untuk panggilan bahagian hadapan Vue digunakan untuk menulis paparan halaman hadapan dan logik interaksi. Kod contoh mudah ini boleh menjadi rujukan dan titik permulaan untuk anda menulis sistem pengurusan gudang yang lebih kompleks. Saya harap artikel ini berguna untuk kajian dan latihan anda!Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan jualan 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)
